Merge pull request #4057 from crazyserver/MOBILE-4470

Mobile 4470
moodlehq · May 22, 2024 · 18b483a · 18b483a
2 parents 24aeb1d + 26d950c
commit 18b483a
Show file tree

Hide file tree

Showing 61 changed files with 139 additions and 227 deletions.
diff --git a/scripts/langindex.json b/scripts/langindex.json
@@ -926,7 +926,6 @@
   "addon.mod_quiz.overduemustbesubmittedby": "quiz",
   "addon.mod_quiz.preview": "quiz",
   "addon.mod_quiz.previewquiznow": "quiz",
-  "addon.mod_quiz.question": "quiz",
   "addon.mod_quiz.quiznavigation": "quiz",
   "addon.mod_quiz.quizpassword": "quizaccess_password",
   "addon.mod_quiz.reattemptquiz": "quiz",
@@ -943,7 +942,6 @@
   "addon.mod_quiz.stateinprogress": "quiz",
   "addon.mod_quiz.stateoverdue": "quiz",
   "addon.mod_quiz.stateoverduedetails": "quiz",
-  "addon.mod_quiz.status": "quiz",
   "addon.mod_quiz.submission_confirmation_unanswered": "quiz",
   "addon.mod_quiz.submitallandfinish": "quiz",
   "addon.mod_quiz.summaryofattempt": "quiz",

diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss
@@ -33,7 +33,6 @@
         .item-heading {
             font-weight: bold;
             margin-bottom: 0;
-            font-size: 16px;
         }
 
         .subdued {

diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@@ -9,7 +9,7 @@ <h3>
 <ion-item-group *ngFor="let dayEvents of events">
     <ion-item>
         <ion-label>
-            <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
+            <h4>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
         </ion-label>
     </ion-item>
     <ng-container *ngFor="let event of dayEvents.events">

diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss
@@ -1,16 +1,11 @@
 @use "theme/globals" as *;
 
 h3 {
-    font-weight: bold;
-    font-size: 18px;
+    font: var(--mdl-typography-heading5-font);
 }
 
 h4 {
-    font-size: 15px;
-}
-
-h4.core-bold {
-    font-weight: bold;
+    font: var(--mdl-typography-heading6-font);
 }
 
 .addon-block-timeline-activity {

diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
@@ -144,7 +144,6 @@
 
     swiper-slide {
         display: block;
-        font-size: inherit;
         justify-content: start;
         align-items: start;
         text-align: start;

diff --git a/src/addons/messages/messages-common.scss b/src/addons/messages/messages-common.scss
@@ -30,7 +30,7 @@
             }
             .addon-message-last-message-date {
                 white-space: nowrap;
-                font-size: 11px;
+                font-size: #{dynamic-font(11px)};
             }
         }
 

diff --git a/...online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png b/...online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png
diff --git a/src/addons/mod/forum/pages/search/search.scss b/src/addons/mod/forum/pages/search/search.scss
diff --git a/src/addons/mod/forum/pages/search/search.ts b/src/addons/mod/forum/pages/search/search.ts
@@ -34,7 +34,6 @@ import { Translate } from '@singletons';
 @Component({
     selector: 'page-addon-mod-forum-search',
     templateUrl: 'search.html',
-    styleUrls: ['search.scss'],
 })
 export class AddonModForumSearchPage implements OnInit {
 

diff --git a/...ts/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png b/...ts/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
diff --git a/src/addons/mod/quiz/lang.json b/src/addons/mod/quiz/lang.json
@@ -54,7 +54,6 @@
     "overduemustbesubmittedby": "This attempt is now overdue. It should already have been submitted. If you would like this quiz to be graded, you must submit it by {{$a}}. If you do not submit it by then, no marks from this attempt will be counted.",
     "preview": "Preview",
     "previewquiznow": "Preview quiz now",
-    "question": "Question",
     "quiznavigation": "Quiz navigation",
     "quizpassword": "Quiz password",
     "reattemptquiz": "Re-attempt quiz",
@@ -71,7 +70,6 @@
     "stateinprogress": "In progress",
     "stateoverdue": "Overdue",
     "stateoverduedetails": "Must be submitted by {{$a}}",
-    "status": "Status",
     "submission_confirmation_unanswered": "Questions without a response: {{$a}}",
     "submitallandfinish": "Submit all and finish",
     "summaryofattempt": "Summary of attempt",

diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
@@ -68,38 +68,21 @@ <h1>
                 <ion-card-title>{{ 'addon.mod_quiz.summaryofattempt' | translate }}</ion-card-title>
             </ion-card-header>
 
-            <!-- "Header" of the summary table. -->
-            <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <ion-row class="ion-align-items-center">
-                        <ion-col size="3" class="ion-text-center ion-hide-md-down">
-                            <strong>{{ 'addon.mod_quiz.question' | translate }}</strong>
-                        </ion-col>
-                        <ion-col size="3" class="ion-text-center ion-hide-md-up"><strong>#</strong></ion-col>
-                        <ion-col size="9" class="ion-text-center">
-                            <strong>{{ 'addon.mod_quiz.status' | translate }}</strong>
-                        </ion-col>
-                    </ion-row>
-                </ion-label>
-            </ion-item>
-
             <!-- List of questions of the summary table. -->
             <ng-container *ngFor="let question of summaryQuestions">
                 <ion-item *ngIf="question.type !== 'description' && question.questionnumber"
                     (click)="!isSequential && canReturn && changePage(question.page, false, question.slot)"
-                    [attr.aria-label]="'core.question.questionno' | translate:{$a: question.questionnumber}"
-                    [detail]="!isSequential && canReturn" [button]="!isSequential && canReturn">
+                    [detail]="!isSequential && canReturn" [button]="!isSequential && canReturn" class="ion-text-wrap">
                     <ion-label>
-                        <ion-row class="ion-align-items-center">
-                            <ion-col size="3" class="ion-text-center ion-text-wrap">{{ question.questionnumber }}</ion-col>
-                            <ion-col size="9" class="ion-text-center ion-text-wrap">{{ question.status }}</ion-col>
-                        </ion-row>
+                        <span [attr.aria-label]="'core.question.questionno' | translate:{$a: question.questionnumber}">
+                            {{ question.questionnumber }}.</span> {{ question.status }}
                     </ion-label>
                 </ion-item>
             </ng-container>
 
             <!-- Due date warning. -->
-            <ion-item class="ion-text-wrap" *ngIf="dueDateWarning">
+            <ion-item class="ion-text-wrap core-warning-item" *ngIf="dueDateWarning">
+                <ion-icon slot="start" name="fas-triangle-exclamation" color="warning" aria-hidden="true" />
                 <ion-label>{{ dueDateWarning }}</ion-label>
             </ion-item>
 

diff --git a/...hat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png b/...hat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png
diff --git a/src/addons/notifications/pages/list/list.scss b/src/addons/notifications/pages/list/list.scss
@@ -5,12 +5,12 @@ ion-item.addon-notification-item {
     ion-label {
         margin-top: 8px;
         margin-bottom: 8px;
-        p.item-heading {
-            font-size: var(--text-size);
-            @include ellipsis(3);
-        }
         p {
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
+            &.item-heading {
+                font-size: var(--text-size);
+                @include ellipsis(3);
+            }
         }
     }
 
@@ -20,7 +20,7 @@ ion-item.addon-notification-item {
         padding-top: 12px;
 
         ion-icon {
-            font-size: 6px;
+            font-size: #{dynamic-font(6px)};
             vertical-align: middle;
         }
     }

diff --git a/src/addons/notifications/pages/notification/notification.scss b/src/addons/notifications/pages/notification/notification.scss
@@ -10,10 +10,10 @@
             margin-top: 16px;
         }
         p.item-heading {
-            font-size: 16px;
+            font: var(--mdl-typography-body-font-lg);
         }
         p {
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
         }
     }
 

diff --git a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
@@ -2,13 +2,14 @@
     <!-- Content is outside the core-loading to let the script calculate drag items position -->
     <core-loading [hideUntil]="question.loaded" />
 
+    <ion-card *ngIf="!question.readOnly" class="core-info-card" [hidden]="!question.loaded">
+        <ion-item>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
+            <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
+        </ion-item>
+    </ion-card>
+
     <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
-        <ion-card *ngIf="!question.readOnly" class="core-info-card">
-            <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
-                <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
-            </ion-item>
-        </ion-card>
         <div class="addon-qtype-ddwtos-container">
             <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
                 [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" />

diff --git a/src/core/components/input-errors/input-errors.scss b/src/core/components/input-errors/input-errors.scss
@@ -8,7 +8,7 @@
     .core-input-error {
         padding: 4px;
         color: var(--danger);
-        font-size: 12px;
+        font: var(--mdl-typography-body-font-sm);
         display: none;
 
         &:first-child {

diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss
@@ -63,12 +63,11 @@
                 }
 
                 div {
-                    font-weight: 500;
                     flex-grow: 1;
                     padding-left: .5rem;
                     padding-right: .5rem;
                     @include ellipsis();
-                    font-size: 16px;
+                    font: var(--mdl-typography-subtitle-font-md);
                 }
             }
 

diff --git a/src/core/components/swipe-slides/swipe-slides.scss b/src/core/components/swipe-slides/swipe-slides.scss
@@ -4,7 +4,6 @@
 
         swiper-slide {
             display: block;
-            font-size: inherit;
             justify-content: start;
             align-items: start;
             text-align: start;

diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss
@@ -65,9 +65,16 @@
                         word-wrap: break-word;
                         max-width: 100%;
                         line-height: 1.2em;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
                         h2 {
-                            font-size: 14px;
-                            font-weight: 400;
+                            font: var(--mdl-typography-label-font-lg);
+                        }
+
+                        ion-badge {
+                            @include margin-horizontal(4px, 0px);
                         }
                     }
                 }
@@ -78,7 +85,7 @@
                     border-bottom-color: var(--border-color-active);
                     ion-tab-button {
                         color: var(--color-active);
-                        ion-label {
+                        ion-label h2 {
                             font-weight: var(--font-weight-active);
                         }
                     }

diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
@@ -243,9 +243,9 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
     }
 
     /**
-     * Add magnifying glass icons to view adapted images at full size.
+     * Add image viewer button to view adapted images at full size.
      */
-    async addMagnifyingGlasses(): Promise<void> {
+    protected async addImageViewerButton(): Promise<void> {
         const imgs = Array.from(this.element.querySelectorAll('.core-adapted-img-container > img'));
         if (!imgs.length) {
             return;
@@ -270,7 +270,6 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
                 return;
             }
 
-            const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
             const label = Translate.instant('core.openfullimage');
             const button = document.createElement('button');
 
@@ -283,6 +282,8 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
             button.innerHTML = `<ion-icon name="fas-${iconName}" aria-hidden="true" src="${src}"></ion-icon>`;
 
             button.addEventListener('click', (e: Event) => {
+                const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src'));
+
                 e.preventDefault();
                 e.stopPropagation();
                 CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId);
@@ -371,7 +372,7 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec
         await CoreUtils.nextTick();
 
         // Add magnifying glasses to images.
-        this.addMagnifyingGlasses();
+        this.addImageViewerButton();
 
         if (result.options.filter) {
             // Let filters handle HTML. We do it here because we don't want them to block the render of the text.

diff --git a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss
@@ -1,10 +1,11 @@
 :host {
 
-    h2 {
+    h1 {
         margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
     }
 
-    h2, p {
+    h1, p {
         text-align: center;
     }
 

diff --git a/src/core/features/comments/components/comments/comments.scss b/src/core/features/comments/components/comments/comments.scss
@@ -0,0 +1,3 @@
+button.as-link {
+    font: var(--mdl-typography-body-font-md);
+}
diff --git a/src/core/features/comments/components/comments/comments.ts b/src/core/features/comments/components/comments/comments.ts
@@ -29,6 +29,7 @@ import { ContextLevel } from '@/core/constants';
 @Component({
     selector: 'core-comments',
     templateUrl: 'core-comments.html',
+    styleUrl: 'comments.scss',
 })
 export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestroy {
 
@@ -38,7 +39,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     @Input() itemId!: number;
     @Input() area = '';
     @Input() title?: string;
-    @Output() onLoading: EventEmitter<boolean>; // Event that indicates whether the component is loading data.
+    @Output() onLoading = new EventEmitter<boolean>();  // Event that indicates whether the component is loading data.
     @Input() courseId?: number; // Course ID the comments belong to. It can be used to improve performance with filters.
     @Input() showItem = false; // Show button as an item.
 
@@ -47,14 +48,11 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     countError = false;
     enabled = false;
 
-    protected updateSiteObserver?: CoreEventObserver;
-    protected refreshCommentsObserver?: CoreEventObserver;
-    protected commentsCountObserver?: CoreEventObserver;
+    protected updateSiteObserver: CoreEventObserver;
+    protected refreshCommentsObserver: CoreEventObserver;
+    protected commentsCountObserver: CoreEventObserver;
 
     constructor() {
-
-        this.onLoading = new EventEmitter<boolean>();
-
         this.enabled = CoreComments.areCommentsEnabledInSite();
 
         // Update visibility if current site info is updated.
@@ -87,7 +85,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
         this.commentsCountObserver = CoreEvents.on(
             CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT,
             (data) => {
-            // Verify these comments need to be updated.
+                // Verify these comments need to be updated.
                 if (!this.commentsCount.endsWith('+') && this.undefinedOrEqual(data, 'contextLevel') &&
                     this.undefinedOrEqual(data, 'instanceId') && this.undefinedOrEqual(data, 'component') &&
                     this.undefinedOrEqual(data, 'itemId') && this.undefinedOrEqual(data, 'area') && !this.countError) {
@@ -103,14 +101,14 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     }
 
     /**
-     * View loaded.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.fetchData();
     }
 
     /**
-     * Listen to changes.
+     * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         // If something change, update the fields.
@@ -193,7 +191,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
     }
 
     /**
-     * Component destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         this.updateSiteObserver?.off();