Issue #SH-31 merge: Merge pull request #1051 from balakrishna10/relea…

…se-3.1.0 Issue #SH-31 feat: my groups design review
Sunbird-Ed · Jul 9, 2020 · 574e244 · 574e244
2 parents a453a14 + 1428056
commit 574e244
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 46 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -86,6 +86,9 @@ h6 {
 .padding-bottom-5 {
   padding-bottom: 5px;
 }
+.padding-16{
+  padding: 16px;
+}
 
 .text-align-end {
   text-align: end;
@@ -1223,11 +1226,13 @@ app-resources{
 }
 
 .popover-my-groups {
-
+  .mg-popup-container{
+    height: 100%;
+  }
   .mg-popup-content {
     display: flex;
     flex-direction: column;
-    height: 90vh;
+    height: 100%;
     justify-content: space-between;
   }
   .mg-popup-close{
@@ -1356,18 +1361,21 @@ ion-modal.sb-progress-loader {
     color: $red;
   }
 }
+.group-option-popover-admin {
+  ion-item:nth-child(1) {
+    color: $red;
+  }
+}
 
 .group-option-popover .popover-content {
-  top: 82px !important;
-  left: 215px !important;
   padding: 16px 8px;
   width: auto;
-  // width: 196px;
-  // height: 80px;
+  margin-top: -30px;
   ion-item {
     --min-height: 16px !important;
+    padding-top: 16px;
     &:first-child{
-      padding-bottom: 16px;
+      padding-top: 0;
     }
     label{
       margin: 0;
@@ -1384,18 +1392,13 @@ ion-modal.sb-progress-loader {
 }
 .sb-course-completion-popover{
   .popover-content{
-    // width: 90% !important;
-    // top: 0 !important;
-    // bottom: 0;
     left: 0 !important;
     right: 0 !important;
-    // height: 200px;
     margin: auto;
     width: 250px !important;
     padding: 16px;
   }
   .cc-popup-close{
-    // padding: 16px 16px 0 0;
     font-size: 18px;
   }
   .course-completion-title{
@@ -1407,7 +1410,6 @@ ion-modal.sb-progress-loader {
     color: $green;
     font-size: 14px;
     padding-top: 8px;
-    // padding-bottom: 16px;
   }
   .course-completion-cert{
     padding-top: 16px;

diff --git a/src/app/components/popups/sb-my-groups-popover/sb-my-groups-popover.component.html b/src/app/components/popups/sb-my-groups-popover/sb-my-groups-popover.component.html
@@ -10,7 +10,7 @@
           <img src="assets/imgs/my-groups-popup.svg" alt="">
         </div>
         <div class="mg-popup-content-body mg-popup-flex-item">{{'CREATE_GROUP_DESCRIPTION_POPUP' | translate}}</div>
-        <div class="mg-popup-flex-item">
+        <div class="mg-popup-btn-container mg-popup-flex-item">
           <button class="mg-popup-btn sb-btn-large" (click)="getStarted()">
             {{'GET_STARTED' | translate}}
             <ion-icon class="mg-popup-btn-icon" name="ios-arrow-round-forward"></ion-icon>

diff --git a/src/app/components/popups/sb-my-groups-popover/sb-my-groups-popover.component.scss b/src/app/components/popups/sb-my-groups-popover/sb-my-groups-popover.component.scss
@@ -16,11 +16,14 @@ img.arrow-icon{
 
   .tutorial-content {
     height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
 
   }
+  .mg-popup-btn-container{
+    padding-bottom: 16px;
+    button {
+      margin: 0;
+    }
+  }
 
   .close-icon {
     display: inline-block;

diff --git a/src/app/my-groups/add-member-to-group/add-member-to-group.page.scss b/src/app/my-groups/add-member-to-group/add-member-to-group.page.scss
@@ -31,14 +31,15 @@
             &.error{
                 border: 1px solid $red;
             }
+            &:disabled{
+                background-color: #fff;
+            }
             width: 100%;
             height: 40px;
             border: 1px solid $gray-800;
             padding: 0 16px;
             color: $gray-800;
-            &:disabled{
-                background-color: #fff;
-            }
+            border-radius: 2px;
         }
         .au-clear-icon{
             position: absolute;
@@ -54,8 +55,7 @@
     }
     .au-avatar{
         padding: 16px;
-        // background-color: #E5EDF5;
-        background-color: $gray-100;
+        background-color: map-get($colors, pale_blue);
         text-align: center;
     }
     .au-desc{

diff --git a/src/app/my-groups/create-edit-group/create-edit-group.page.html b/src/app/my-groups/create-edit-group/create-edit-group.page.html
@@ -31,12 +31,10 @@
 </ion-content>
 
 <ion-footer>
-  <ion-row class="padding-12">
-    <ion-col size-md="10" offset-md="1">
+    <div class="padding-16">
       <button class="sb-btn-large" expand="block" [class.inactive]="createGroupForm.invalid" (click)="onSubmit()">
         <img src="assets/imgs/ic_group_add_white.svg">
         {{'CREATE_GROUP' | translate}}
       </button>
-    </ion-col>
-  </ion-row>
+    </div>
 </ion-footer>
diff --git a/src/app/my-groups/create-edit-group/create-edit-group.page.scss b/src/app/my-groups/create-edit-group/create-edit-group.page.scss
@@ -51,11 +51,13 @@
     margin-top: 16px;
     padding: 0 16px;
     border: 1px solid $gray-800 !important;
+    border-radius: 2px;
   }
 
 
   .cr-input-primary ion-input{
     border: 1px solid $gray-800;
+    border-radius: 2px;
   }
 
   .cr-input-error ion-input{

diff --git a/src/app/my-groups/group-details/group-details.page.html b/src/app/my-groups/group-details/group-details.page.html
@@ -7,7 +7,7 @@
           <div class="gd-created-by">Created by creator name </div>
         </div>
         <div class="gd-opts">
-          <ion-icon md="md-more" (click)="groupMenuClick()"></ion-icon>
+          <ion-icon md="md-more" (click)="groupMenuClick($event)"></ion-icon>
         </div>
       </div>
       <div class="gd-tab-header">
@@ -24,7 +24,7 @@
       <div class="gd-tab-content" *ngIf="activeTab=='members'">
         <div class="gd-member-search">
           <ion-icon class="gd-member-search-icon" md="md-search"></ion-icon>
-          <input type="text" [(ngModel)]="searchMember" (ngModelChange)="onSearch(searchMember)">
+          <input type="text" [(ngModel)]="searchMember" placeholder="{{'GROUP_MEMBER_SEARCH_PLACEHOLDER' | translate}}" (ngModelChange)="onSearch(searchMember)" >
         </div>
         <div class="gd-add-member-container">
           <div class="gd-add-member" (click)="navigateToAddUserPage()">
@@ -57,7 +57,7 @@
       <div class="gd-tab-content" *ngIf="activeTab=='courses'">
         <div class="gd-member-search">
           <ion-icon class="gd-member-search-icon" md="md-search"></ion-icon>
-          <input type="text" [(ngModel)]="searchMember" (ngModelChange)="onSearch(searchMember)">
+          <input type="text" [(ngModel)]="searchMember" placeholder="{{'ACTIVITIESE_SEARCH_PLACEHOLDER' | translate}}" (ngModelChange)="onSearch(searchMember)">
         </div>
         <sb-course-card [section]="null" (click)="navigateToActivityDetails($event)" [isMenu]="showMenu"
           (menuClick)="activityMenuClick($event)"></sb-course-card>

diff --git a/src/app/my-groups/group-details/group-details.page.scss b/src/app/my-groups/group-details/group-details.page.scss
@@ -62,6 +62,7 @@
             border-bottom: 2px solid $blue;
             .gd-tab-name {
                 font-weight: bold;
+                color: $blue;
             }
         }
     }
@@ -71,7 +72,7 @@
         text-align: center;
         margin-bottom: 5px;
         margin-top: 8px;
-        color: $blue;
+        color: $gray-400;
         font-size: 16px;
 
         &.gd-tab-border {
@@ -92,7 +93,7 @@
         top: 8px;
         left: 8px;
         font-size: 20px;
-        color: $gray-400;
+        color: map-get($colors, gray_96);
     }
 
     input {
@@ -101,6 +102,9 @@
         padding: 0 8px 0 30px;
         border: 1px solid $blue;
         border-radius: 4px;
+        &::placeholder{
+            color: map-get($colors, gray_96);
+        }
     }
 }
 

diff --git a/src/app/my-groups/group-details/group-details.page.ts b/src/app/my-groups/group-details/group-details.page.ts
@@ -142,7 +142,7 @@ export class GroupDetailsPage implements OnInit {
     this.activeTab = tab;
   }
 
-  async groupMenuClick() {
+  async groupMenuClick(event) {
     // this.telemetryGeneratorService.generateInteractTelemetry(
     //   InteractType.TOUCH,
     //   InteractSubtype.SORT_OPTION_CLICKED,
@@ -160,6 +160,7 @@ export class GroupDetailsPage implements OnInit {
       componentProps: {
         list: menuList
       },
+      event,
       cssClass: 'group-option-popover'
     });
     await groupOptions.present();
@@ -188,7 +189,7 @@ export class GroupDetailsPage implements OnInit {
         list: MenuOverflow.MENU_GROUP_ACTIVITY_ADMIN
       },
       event: event.event,
-      cssClass: 'download-popover my-group-menu'
+      cssClass: 'group-option-popover group-option-popover-admin'
     });
     await groupOptions.present();
 
@@ -217,7 +218,7 @@ export class GroupDetailsPage implements OnInit {
         list: menuList
       },
       event: event.event,
-      cssClass: 'download-popover my-group-menu'
+      cssClass: 'group-option-popover'
     });
     await groupOptions.present();
 

diff --git a/src/app/my-groups/my-groups.page.html b/src/app/my-groups/my-groups.page.html
@@ -7,23 +7,27 @@
 
 
     <div *ngIf="isGuestUser" class="my-cr-card">
-      <div class="my-cr-card-img">
-        <img src="assets/imgs/ic_my_groups.svg">
-        <!-- <img src="{{appLogo}}"> -->
+      <div></div>
+      <div>
+        <div class="my-cr-card-img">
+          <img src="assets/imgs/ic_my_groups.svg">
+          <!-- <img src="{{appLogo}}"> -->
+        </div>
+        <p class="my-cr-subtitle">{{'LOGIN_TO_CREATE_GROUP_DESCRIPTION' | translate}}</p>
       </div>
-      <p class="my-cr-subtitle">{{'LOGIN_TO_CREATE_GROUP_DESCRIPTION' | translate}}</p>
-
       <div class="my-cr-btn">
         <button class="sb-btn-large" (click)="login()">{{'SIGN_IN' | translate}}</button>
       </div>
     </div>
 
     <div *ngIf="!isGuestUser && !groupList.length && !groupListLoader" class="my-cr-card">
-      <div class="my-cr-card-img">
-        <img src="assets/imgs/ic_my_groups.svg" alt="my-group">
+      <div></div>
+      <div>
+        <div class="my-cr-card-img">
+          <img src="assets/imgs/ic_my_groups.svg" alt="my-group">
+        </div>
+        <p class="my-cr-subtitle">{{'CREATE_GROUP_DESCRIPTION' | translate}}</p>
       </div>
-      <p class="my-cr-subtitle">{{'CREATE_GROUP_DESCRIPTION' | translate}}</p>
-
       <div class="my-cr-btn">
         <button class="sb-btn-large" (click)="createClassroom()">
           <img src="assets/imgs/ic_group_add_white.svg">
@@ -32,7 +36,7 @@
       </div>
     </div>
 
-    <div *ngFor="let group of groupList">
+    <div *ngFor="let group of groupList" class="mg-list-card-container">
       <sb-group-card [isMobile]="true" [group]="group" (cardClick)="navigateToGroupdetailsPage($event)"></sb-group-card>
     </div>
     <div *ngIf="!isGuestUser && groupListLoader">

diff --git a/src/app/my-groups/my-groups.page.scss b/src/app/my-groups/my-groups.page.scss
@@ -46,7 +46,11 @@
   letter-spacing: 0;
   line-height: 22px;
   text-align: center;
-  padding: 10% 10% 24px 10%;
+  padding: 20px 10%;
+}
+
+.mg-list-card-container{
+  margin-bottom: 8px;
 }
 
 .my-cr-btn{

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -802,5 +802,7 @@
   "SPECIAL_CHARACTERS_NOT_SUPPORTED": "Special characters not supported",
   "PLEASE_VALIDATE_YOUR_MOBILE_NUMBER": "Please validate your mobile number",
   "PLEASE_VALIDATE_YOUR_EMAIL_ADDRESS": "Please validate your email address",
-  "ERROR_OTP_LIMIT_EXCEEDED": "You have exceeded the maximum limit for OTP, Please try after some time."
+  "ERROR_OTP_LIMIT_EXCEEDED": "You have exceeded the maximum limit for OTP, Please try after some time.",
+  "ACTIVITIESE_SEARCH_PLACEHOLDER": "Search for group's activities",
+  "GROUP_MEMBER_SEARCH_PLACEHOLDER": "Search within group"
 }