Merge pull request #3807 from crazyserver/MOBILE-4362

Mobile 4362
moodlehq · Oct 6, 2023 · ec7a3ea · ec7a3ea
2 parents 3ae3c30 + 1e7fe59
commit ec7a3ea
Show file tree

Hide file tree

Showing 22 changed files with 200 additions and 132 deletions.
diff --git a/scripts/langindex.json b/scripts/langindex.json
@@ -1630,7 +1630,6 @@
   "core.course.warningmanualcompletionmodified": "local_moodlemobileapp",
   "core.course.warningofflinemanualcompletiondeleted": "local_moodlemobileapp",
   "core.course.youmust": "completion",
-  "core.coursedetails": "moodle",
   "core.coursenogroups": "local_moodlemobileapp",
   "core.courses.addtofavourites": "block_myoverview",
   "core.courses.aria:coursecategory": "course",

diff --git a/src/addons/mod/data/components/action/action.ts b/src/addons/mod/data/components/action/action.ts
@@ -203,7 +203,6 @@ export class AddonModDataActionComponent implements OnInit {
         await CoreDomUtils.openPopover({
             component: AddonModDataActionsMenuComponent,
             componentProps: { items },
-            showBackdrop: true,
             id: 'actionsmenu-popover',
             event,
         });

diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
@@ -22,6 +22,7 @@
         --border-color: var(--core-combobox-border-color);
         --border-style: solid;
         --border-width: var(--core-combobox-border-width);
+        --border-radius: var(--radius-xs);
 
         --box-shadow: var(--core-combobox-box-shadow);
 

diff --git a/src/core/components/context-menu/context-menu.ts b/src/core/components/context-menu/context-menu.ts
@@ -185,7 +185,6 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
                     title: this.title,
                     items: this.items,
                 },
-                showBackdrop: true,
                 id: this.uniqueId,
             });
 

diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
@@ -4,6 +4,9 @@
     position: relative;
     width: var(--core-avatar-size);
     height: var(--core-avatar-size);
+    --contact-status-size: 14px;
+    --margin-end-on-item: 8px;
+    --margin-vertical-on-item: 8px;
 
     img {
         border-radius: var(--core-avatar-radius);
@@ -53,8 +56,8 @@
         position: absolute;
         right: 0;
         bottom: 0;
-        width: 14px;
-        height: 14px;
+        width: var(--contact-status-size);
+        height: var(--contact-status-size);
         border-radius: 50%;
         &.online {
             border: 1px solid white;
@@ -92,7 +95,7 @@
 }
 
 :host-context(ion-item) {
-    @include margin(6px, 8px, 6px, 0px);
+    @include margin(var(--margin-vertical-on-item), var(--margin-end-on-item), var(--margin-vertical-on-item), 0px);
     img {
         min-width: var(--core-avatar-size);
         min-height: var(--core-avatar-size);

diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss
@@ -4,6 +4,10 @@
     flex-direction: column;
     background: var(--background);
 
+    ion-card {
+        --border-radius: var(--radius-sm);
+    }
+
     ::ng-deep ion-item-divider {
         min-height: var(--item-divider-min-height);
     }

diff --git a/src/core/features/course/components/module-completion/core-course-module-completion.html b/src/core/features/course/components/module-completion/core-course-module-completion.html
@@ -1,15 +1,15 @@
 <ng-container *ngIf="showCompletionInfo && completion">
     <ng-container *ngIf="completion.istrackeduser">
         <ng-container *ngIf="completion.isautomatic">
-            <ion-button class="completioninfo completion_incomplete ion-text-wrap chip" *ngIf="!completed" fill="outline"
+            <ion-button class="completioninfo completion_incomplete chip" *ngIf="!completed" fill="outline"
                 (click)="completionClicked($event)">
                 {{ 'core.course.todo' | translate }}
                 <div class="select-icon" role="presentation" aria-hidden="true">
                     <div class="select-icon-inner"></div>
                 </div>
             </ion-button>
 
-            <ion-button class="completioninfo completion_complete ion-text-wrap chip" color="success" (click)="completionClicked($event)"
+            <ion-button class="completioninfo completion_complete chip" color="success" (click)="completionClicked($event)"
                 *ngIf="completed">
                 <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
                 {{'core.course.done' | translate }}
@@ -21,22 +21,22 @@
 
         <ng-container *ngIf="!completion.isautomatic">
             <ion-button *ngIf="completed" color="success" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
-                class="completioninfo completion_complete ion-text-wrap chip">
+                class="completioninfo completion_complete chip">
                 <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
                 {{ 'core.course.completion_manual:done' | translate }}
                 <ion-icon *ngIf="completion.offline" name="fas-arrows-rotate"
                     [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end"></ion-icon>
             </ion-button>
             <ion-button *ngIf="!completed" fill="outline" [attr.aria-label]="accessibleDescription" (click)="completionClicked($event)"
-                class="completioninfo completion_incomplete ion-text-wrap chip">
+                class="completioninfo completion_incomplete chip">
                 {{ 'core.course.completion_manual:markdone' | translate }}
                 <ion-icon *ngIf="completion.offline" name="fas-arrows-rotate"
                     [attr.aria-label]="'core.course.manualcompletionnotsynced' | translate" slot="end"></ion-icon>
             </ion-button>
         </ng-container>
     </ng-container>
 
-    <ion-button *ngIf="!completion.istrackeduser" fill="outline" class="ion-text-wrap chip" (click)="completionClicked($event)">
+    <ion-button *ngIf="!completion.istrackeduser" fill="outline" class="chip" (click)="completionClicked($event)">
         {{ 'core.course.completionmenuitem' | translate }}
         <div class="select-icon" role="presentation" aria-hidden="true">
             <div class="select-icon-inner"></div>

diff --git a/src/core/features/course/components/module-completion/module-completion.ts b/src/core/features/course/components/module-completion/module-completion.ts
@@ -139,7 +139,6 @@ export class CoreCourseModuleCompletionComponent
                 componentProps: {
                     completion: this.completion,
                 },
-                showBackdrop: true,
                 event: { target } as Event,
             });
         } else {

diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss
@@ -55,7 +55,7 @@
             flex-flow: row;
             align-items: center;
             z-index: 1;
-            justify-content: space-around;
+            justify-content: flex-end;
             align-content: center;
 
             ion-button.core-module-button-more {

diff --git a/src/core/features/login/tests/behat/signup.feature b/src/core/features/login/tests/behat/signup.feature
@@ -75,7 +75,8 @@ Feature: Test signup in app
 
     When I press the user menu button in the app
     And I press "User Test" in the app
-    Then I should find "Barcelona, Spain" in the app
+    Then I should find "Barcelona" in the app
+    Then I should find "Spain" in the app
     And I should find "[email protected]" in the app
 
   @lms_from3.10

diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
@@ -47,8 +47,8 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
                     {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
             </ion-select>
         </ion-item>
-        <ion-item text-wrap *ngIf="colorSchemes.length > 0 && selectedScheme=='system' && isAndroid" lines="none">
-            <ion-label>
+        <ion-item *ngIf="colorSchemes.length> 0 && selectedScheme=='system' && isAndroid" lines="none">
+            <ion-label class="ion-text-wrap">
                 <p>{{ 'core.settings.colorscheme-system-notice' | translate }}</p>
             </ion-label>
         </ion-item>

diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
@@ -14,7 +14,7 @@ <h1>{{ 'core.user.profile' | translate }}</h1>
     </ion-refresher>
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user">
-            <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" lines="full">
+            <ion-item class="ion-text-center core-user-profile-maininfo ion-text-wrap" [lines]="user.description ? null : 'full'">
                 <core-user-avatar [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="!canChangeProfilePicture">
                     <ion-button class="edit-avatar" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"
                         [attr.aria-label]="'core.user.newpicture' | translate" fill="clear">
@@ -23,16 +23,22 @@ <h1>{{ 'core.user.profile' | translate }}</h1>
                 </core-user-avatar>
                 <ion-label>
                     <h2>{{ user.fullname }}</h2>
-                    <p *ngIf="user.address">
-                        <ion-icon name="fas-location-dot" [attr.aria-hidden]="true"></ion-icon> {{ user.address }}
+                </ion-label>
+            </ion-item>
+
+            <ion-item class="ion-text-wrap" *ngIf="user.description" lines="full">
+                <ion-label>
+                    <p>
+                        <core-format-text [text]="user.description" contextLevel="user" [contextInstanceId]="user.id">
+                        </core-format-text>
                     </p>
                 </ion-label>
             </ion-item>
 
             <ion-item-group *ngIf="hasContact">
                 <ion-item-divider>
                     <ion-label>
-                        <p class="item-heading">{{ 'core.user.contact' | translate}}</p>
+                        <h3>{{ 'core.user.contact' | translate}}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="user.email">
@@ -43,6 +49,24 @@ <h2>{{ user.fullname }}</h2>
                             </a></p>
                     </ion-label>
                 </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="user.country">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.user.country' | translate}}</p>
+                        <p>{{ user.country }}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="user.city">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.user.city' | translate}}</p>
+                        <p>{{ user.city }}</p>
+                    </ion-label>
+                </ion-item>
+                <ion-item class="ion-text-wrap" *ngIf="displayTimezone && user.timezone">
+                    <ion-label>
+                        <p class="item-heading">{{ 'core.timezone' | translate}}</p>
+                        <p>{{ user.timezone }}</p>
+                    </ion-label>
+                </ion-item>
                 <ion-item class="ion-text-wrap" *ngIf="user.phone1">
                     <ion-label>
                         <p class="item-heading">{{ 'core.user.phone1' | translate}}</p>
@@ -59,31 +83,9 @@ <h2>{{ user.fullname }}</h2>
                             </a></p>
                     </ion-label>
                 </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.city">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.user.city' | translate}}</p>
-                        <p>{{ user.city }}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="user.country">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.user.country' | translate}}</p>
-                        <p>{{ user.country }}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-text-wrap" *ngIf="displayTimezone && user.timezone">
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.timezone' | translate}}</p>
-                        <p>{{ user.timezone }}</p>
-                    </ion-label>
-                </ion-item>
+
+
                 <ng-container *ngIf="canShowDepartment">
-                    <ion-item class="ion-text-wrap" *ngIf="user.idnumber">
-                        <ion-label>
-                            <p class="item-heading">{{ 'core.user.idnumber' | translate }}</p>
-                            <p>{{ user.idnumber }}</p>
-                        </ion-label>
-                    </ion-item>
                     <ion-item class="ion-text-wrap" *ngIf="user.institution">
                         <ion-label>
                             <p class="item-heading">{{ 'core.user.institution' | translate }}</p>
@@ -96,12 +98,18 @@ <h2>{{ user.fullname }}</h2>
                             <p>{{ user.department }}</p>
                         </ion-label>
                     </ion-item>
+                    <ion-item class="ion-text-wrap" *ngIf="user.idnumber">
+                        <ion-label>
+                            <p class="item-heading">{{ 'core.user.idnumber' | translate }}</p>
+                            <p>{{ user.idnumber }}</p>
+                        </ion-label>
+                    </ion-item>
                 </ng-container>
             </ion-item-group>
             <ion-item-group *ngIf="hasDetails">
                 <ion-item-divider>
                     <ion-label>
-                        <p class="item-heading">{{ 'core.userdetails' | translate}}</p>
+                        <h3>{{ 'core.userdetails' | translate}}</h3>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="user.url">
@@ -124,21 +132,6 @@ <h2>{{ user.fullname }}</h2>
                     [contextInstanceId]="courseId" [courseId]="courseId">
                 </core-user-profile-field>
             </ion-item-group>
-            <ion-item-group *ngIf="user.description">
-                <ion-item-divider>
-                    <ion-label>
-                        <p class="item-heading">{{ 'core.user.description' | translate}}</p>
-                    </ion-label>
-                </ion-item-divider>
-                <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <p>
-                            <core-format-text [text]="user.description" contextLevel="user" [contextInstanceId]="user.id">
-                            </core-format-text>
-                        </p>
-                    </ion-label>
-                </ion-item>
-            </ion-item-group>
         </ion-list>
 
         <core-empty-box *ngIf="!user || (!hasContact && !hasDetails && !user.description)" icon="fas-user"

diff --git a/src/core/features/user/pages/about/about.scss b/src/core/features/user/pages/about/about.scss
@@ -1,41 +1,39 @@
 :host {
-
     .core-user-profile-maininfo::part(native) {
         flex-direction: column;
     }
-    ::ng-deep {
-        core-user-avatar {
-            display: block;
-            --core-avatar-size: var(--core-large-avatar-size);
-            height: calc(var(--core-avatar-size) + 16px);
+    core-user-avatar {
+        --core-avatar-size: var(--core-large-avatar-size);
+        --contact-status-size: 24px;
+        --margin-end-on-item: 0px;
+        --margin-vertical-on-item: 0px;
+
+        .contact-status {
+            right: calc(50% - 12px - var(--core-avatar-size) / 2) !important;
+        }
 
-            img {
-                margin: 8px auto;
-            }
+        .edit-avatar {
+            position: absolute;
+            right: calc(50% - 24px - var(--core-avatar-size) / 2);
+            bottom: -12px;
 
-            .contact-status {
-                width: 24px !important;
-                height: 24px !important;
-                right: calc(50% - 12px - var(--core-avatar-size) / 2) !important;
+            :host-context([dir="rtl"]) & {
+                left: 0;
+                right: unset;
             }
-
-            .edit-avatar {
-                position: absolute;
-                right: calc(50% - 15px - var(--core-avatar-size) / 2);
-                bottom: -12px;
-
-                :host-context([dir="rtl"]) & {
-                    left: 0;
-                    right: unset;
-                }
-                &::part(native) {
-                    border-radius: 50%;
-                    background: var(--ion-item-background);
-                }
+            &::part(native) {
+                border-radius: 50%;
+                background: var(--ion-item-background);
             }
         }
     }
 
+    h2 {
+        font-size: 24px;
+    }
+    h3 {
+        font-size: 20px;
+    }
     .core-user-profile-interests {
         ion-badge {
             cursor: pointer;
@@ -46,7 +44,7 @@
 
 }
 
-:host-context([dir="rtl"]) ::ng-deep core-user-avatar .edit-avatar {
+:host-context([dir="rtl"]) core-user-avatar .edit-avatar {
     left: -24px;
     right: unset;
 }