Merge pull request #3947 from crazyserver/MOBILE-4458

Mobile 4458
moodlehq · Mar 11, 2024 · 94f5f20 · 94f5f20
2 parents ebbfe03 + 9c28b32
commit 94f5f20
Show file tree

Hide file tree

Showing 32 changed files with 168 additions and 91 deletions.
diff --git a/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts b/src/addons/block/activitymodules/components/activitymodules/activitymodules.ts
@@ -63,6 +63,8 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
         const archetypes: Record<string, number> = {};
         const modIcons: Record<string, string> = {};
         let modFullNames: Record<string, string> = {};
+        const brandedIcons: Record<string, boolean|undefined> = {};
+
         sections.forEach((section) => {
             if (!section.modules) {
                 return;
@@ -93,6 +95,8 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
                     modFullNames[mod.modname] = mod.modplural;
                 }
 
+                brandedIcons[mod.modname] = mod.branded;
+
                 // If this is not a theme image, leave it undefined to avoid having specific activity icons.
                 if (CoreUrlUtils.isThemeImageUrl(mod.modicon)) {
                     modIcons[mod.modname] = mod.modicon;
@@ -111,6 +115,7 @@ export class AddonBlockActivityModulesComponent extends CoreBlockBaseComponent i
                 iconModName,
                 name: modFullNames[modName],
                 modName,
+                branded: brandedIcons[iconModName],
             });
         }
     }
@@ -149,4 +154,5 @@ type AddonBlockActivityModuleEntry = {
     name: string;
     modName: string;
     iconModName: string;
+    branded?: boolean;
 };
diff --git a/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html b/src/addons/block/activitymodules/components/activitymodules/addon-block-activitymodules.html
@@ -5,7 +5,8 @@ <h2>{{ 'addon.block_activitymodules.pluginname' | translate }}</h2>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded">
     <ion-item class="ion-text-wrap" *ngFor="let entry of entries" [detail]="true" button (click)="gotoCoureListModType(entry)">
-        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false" />
+        <core-mod-icon slot="start" [modicon]="entry.icon" [modname]="entry.iconModName" [showAlt]="false" [colorize]="false"
+            [isBranded]="entry.branded" />
         <ion-label>{{ entry.name }}</ion-label>
     </ion-item>
 </core-loading>
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/...basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png b/...basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png
diff --git a/...s/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png b/...s/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_14.png
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/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
@@ -136,7 +136,7 @@ <h2>
                         </ng-container>
                     </ng-container>
 
-                    <ion-button expand="block" type="submit" class="ion-text-wrap ion-margin button-no-uppercase">
+                    <ion-button expand="block" type="submit" class="ion-text-wrap ion-margin">
                         {{ question.submitLabel }}
                     </ion-button>
                     <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
@@ -150,7 +150,7 @@ <h2>
                     <ion-row class="ion-align-items-center">
                         <ion-col *ngFor="let button of pageButtons" size="12" size-md="6" size-lg="3" col-xl>
                             <ion-button expand="block" fill="outline" [id]="button.id" (click)="buttonClicked(button.data)"
-                                class="ion-text-wrap button-no-uppercase">
+                                class="ion-text-wrap">
                                 {{ button.content }}
                             </ion-button>
                         </ion-col>
@@ -224,7 +224,7 @@ <h2>
                 <ion-item class="ion-text-wrap" *ngIf="eolData.displayofgrade">
                     <ion-label>{{ eolData.displayofgrade.message }}</ion-label>
                 </ion-item>
-                <ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin button-no-uppercase"
+                <ion-button *ngIf="eolData.reviewlesson" expand="block" class="ion-text-wrap ion-margin"
                     (click)="reviewLesson(reviewPageId!)">
                     {{ 'addon.mod_lesson.reviewlesson' | translate }}
                 </ion-button>
@@ -233,7 +233,7 @@ <h2>
                 </ion-item>
                 <!-- If activity link was successfully formatted, render the button. -->
                 <ion-button *ngIf="activityLink && activityLink.formatted" expand="block" fill="outline" [href]="activityLink.href"
-                    core-link [capture]="true" class="ion-text-wrap ion-margin button-no-uppercase">
+                    core-link [capture]="true" class="ion-text-wrap ion-margin">
                     <core-format-text [text]="activityLink.label" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
                         [courseId]="courseId" />
                 </ion-button>

diff --git a/...hat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png b/...hat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_26.png
diff --git a/...hat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png b/...hat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_38.png
diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss
@@ -110,10 +110,9 @@
         flex: 1;
 
         &::part(native) {
-            text-transform: none;
-            font-weight: 400;
-            font-size: 16px;
-            line-height: 20px;
+            font-weight: var(--label-font-weight);
+            font-size: var(--label-lg-font-size);
+            line-height: var(--label-lg-line-height);
             border-radius: var(--core-combobox-radius);
         }
 

diff --git a/src/core/components/empty-box/core-empty-box.html b/src/core/components/empty-box/core-empty-box.html
@@ -1,4 +1,7 @@
-<img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
-<ion-icon *ngIf="icon" [name]="icon" aria-hidden="true" />
+@if (icon) {
+    <ion-icon [name]="icon" aria-hidden="true" />
+} @else if (image) {
+    <img [src]="image" role="presentation" alt="">
+}
 <p *ngIf="message">{{ message }}</p>
 <ng-content />
diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss
@@ -1,8 +1,16 @@
 @use "theme/globals" as *;
 
 :host {
-    --image-size: 120px;
-    --icon-color: var(--subdued-text-color);
+    --image-size: 80px;
+    --icon-color: var(--core-empty-box-icon-color);
+
+    &.core-empty-box-clickable {
+        z-index: 0;
+    }
+
+    &.dimmed {
+        --text-color: var(--gray-700);
+    }
 
     display: flex;
     flex-direction: column;
@@ -22,31 +30,16 @@
     img {
         height: var(--image-size);
     }
-    p {
-        font-size: 120%;
-    }
 
-    &.core-empty-box-clickable {
-        z-index: 0;
+    p,
+    ::ng-deep p {
+        font-size: var(--heading-6-font-size);
+        color: var(--text-color);
     }
-
-    &.dimmed {
-        --icon-color: var(--gray-400);
-        --text-color: var(--gray-700);
-    }
-
 }
 
 :host-context(html.dark) {
-
     &.dimmed {
         --text-color: var(--gray-300);
     }
-
-}
-
-@include media-breakpoint-down(sm) {
-    :host {
-        --image-size: 100px;
-    }
 }
diff --git a/src/core/components/empty-box/empty-box.ts b/src/core/components/empty-box/empty-box.ts
@@ -25,15 +25,18 @@ import { Component, HostBinding, Input } from '@angular/core';
 @Component({
     selector: 'core-empty-box',
     templateUrl: 'core-empty-box.html',
-    styleUrls: ['empty-box.scss'],
+    styleUrl: 'empty-box.scss',
 })
 export class CoreEmptyBoxComponent {
 
     @Input() message = ''; // Message to display.
     @Input() dimmed = false; // Wether the box is dimmed or not.
     @Input() icon?: string; // Name of the icon to use.
     @Input() image?: string; // Image source. If an icon is provided, image won't be used.
-    @Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
+    /**
+     * @deprecated since 4.4. Not used anymore.
+     */
+    @Input() flipIconRtl = false;
 
     @HostBinding('class.dimmed')
     get isDimmed(): boolean {

diff --git a/src/core/components/error-info/error-info.scss b/src/core/components/error-info/error-info.scss
@@ -1,7 +1,7 @@
 .core-error-info {
     background: var(--gray-200);
     border-radius: var(--radius-xs);
-    font-size: var(--font-size-sm);
+    font-size: var(--body-font-size-sm);
     color: var(--gray-900);
 
     p:first-child {
@@ -14,7 +14,7 @@
 
     .core-error-info--code {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
-        font-size: var(--font-size-normal);
+        font-size: var(--body-font-size-md);
     }
 
     .core-error-info--details p {

diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss
@@ -34,8 +34,8 @@
         overflow: visible;
 
         &:hover {
-            -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
-            filter: drop-shadow(2px 2px 2px rgba(0,0,0,.3));
+            -webkit-filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
+            filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 30%));
         }
 
         &[tappable]:active {

diff --git a/src/core/components/split-view/split-view.html b/src/core/components/split-view/split-view.html
@@ -2,4 +2,4 @@
     <ng-content />
 </ion-content>
 <ion-router-outlet class="content-outlet" />
-<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" [flipIconRtl]="true" />
+<core-empty-box class="content-placeholder" icon="fas-circle-arrow-left" [message]="placeholderText | translate" />
diff --git a/src/core/features/block/components/side-blocks-button/side-blocks-button.scss b/src/core/features/block/components/side-blocks-button/side-blocks-button.scss
@@ -12,7 +12,7 @@
         --padding-end: 0;
         --border-radius: 2em 0 0 2em;
         height: 56px;
-        --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
+        --box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
 
         &::part(native) {
             @include core-transition(padding, 200ms);

diff --git a/src/core/features/course/components/course-format/course-format.scss b/src/core/features/course/components/course-format/course-format.scss
@@ -8,7 +8,6 @@
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
-        text-transform: none;
         flex: 1;
         margin-left: 4px;
         margin-right: 4px;

diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss
@@ -25,7 +25,6 @@
             margin: 0;
             --border-radius: 0;
             width: 100%;
-            text-transform: none;
             font-size: 12px;
             font-weight: normal;
             --color: var(--button-color);

diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss
@@ -20,7 +20,7 @@
     --button-size: 44px;
     --button-padding: 10px;
     --button-radius: 50%;
-    --button-background: rgba(255,255,255,0.5);
+    --button-background: rgb(255 255 255 / 50%);
 
     @include media-breakpoint-down(md) {
         --avatar-size: 48px;
@@ -30,7 +30,7 @@
 
 
 :host-context(html.dark) {
-    --button-background: rgba(0, 0, 0, 0.3);
+    --button-background: rgb(0 0 0 / 30%);
 }
 
 // Common styles.

diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss
@@ -84,7 +84,7 @@
     display: flex;
     align-content: center;
     align-items: center;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgb(255 255 255 / 50%);
     z-index: 1;
     ion-spinner {
         margin: 0 auto;

diff --git a/...new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png b/...new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_13.png
diff --git a/...-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png b/...-new-account-in-the-app--site-name-in-displayed-when-adding-a-new-account_9.png
diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss
@@ -25,7 +25,7 @@
             font-weight: bold;
             line-height: 14px;
             color: var(--white);
-            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
+            text-shadow: 0 -1px 0 rgb(0 0 0 / 25%);
             background-color: var(--gray-500);
             -webkit-border-radius: 3px;
             border-radius: 3px;

diff --git a/src/core/features/usertours/components/user-tour/user-tour.scss b/src/core/features/usertours/components/user-tour/user-tour.scss
@@ -9,7 +9,7 @@
 
     .user-tour-focus {
         position: absolute;
-        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
+        box-shadow: 0 0 0 9999px rgb(0 0 0 / 75%);
     }
 
     .user-tour-overlay {
@@ -18,7 +18,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: rgba(0, 0, 0, 0.75);
+        background: rgb(0 0 0 / 75%);
     }
 
     .user-tour-wrapper {

diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
@@ -5,11 +5,11 @@
 
 core-format-text {
     --core-format-text-background: var(--background, var(--ion-item-background));
-    --core-format-text-viewer-icon-background: rgba(255, 255, 255, .5);
+    --core-format-text-viewer-icon-background: rgb(255 255 255 / 50%);
 }
 
 html.dark core-format-text {
-    --core-format-text-viewer-icon-background: rgba(0, 0, 0, .5);
+    --core-format-text-viewer-icon-background: rgb(0 0 0 / 50%);
 }
 
 core-format-text {
@@ -646,8 +646,8 @@ core-rich-text-editor .core-rte-editor {
 
     .text-body { color: var(--ion-text-color) !important; }
     .text-muted { color: var(--subdued-text-color) !important; }
-    .text-black-50 { color: rgba(0, 0, 0, .5) !important; }
-    .text-white-50 { color: rgba(255, 255, 255, .5) !important; }
+    .text-black-50 { color: rgb(0 0 0 / 50%) !important; }
+    .text-white-50 { color: rgb(255 255 255 / 50%) !important; }
     .text-decoration-none { text-decoration: none !important; }
     .text-break {
         word-break: break-word !important; // Deprecated, but avoids issues with flex containers

diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss
@@ -198,22 +198,22 @@
 
 @mixin core-headings() {
     h1 {
-        font-size: 26px;
+        font: var(--heading-1-font);
     }
     h2, .item-heading {
-        font-size: 24px;
+        font: var(--heading-2-font);
     }
     h3 {
-        font-size: 22px;
+        font: var(--heading-3-font);
     }
     h4 {
-        font-size: 20px;
+        font: var(--heading-4-font);
     }
     h5 {
-        font-size: 18px;
+        font: var(--heading-5-font);
     }
     h6 {
-        font-size: 16px;
+        font: var(--heading-6-font);
     }
 }