Merge pull request #2767 from crazyserver/MOBILE-3670

Mobile 3670

src/addons/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html

@@ -14,7 +14,7 @@
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
-    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
+    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
      <div class="core-horizontal-scroll">

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html

@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg"
+    <core-empty-box *ngIf="items.length <= 0" image="assets/img/icons/activities.svg" inline="true"
         [message]="'addon.block_recentlyaccesseditems.noitems' | translate"></core-empty-box>
 
 </core-loading>

src/addons/block/starredcourses/components/starredcourses/addon-block-starredcourses.html

@@ -14,10 +14,10 @@
     </div>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
-    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg"
+    <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
         [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
-    <div class="core-horizontal-scroll">
+    <div class="core-horizontal-scroll" *ngIf="courses.length > 0">
         <ng-container *ngFor="let course of courses">
             <core-courses-course-progress [course]="course" class="core-block_starredcourses"
                 [showDownload]="downloadCourseEnabled && downloadEnabled"></core-courses-course-progress>

src/addons/block/timeline/components/timeline/addon-block-timeline.html

@@ -51,7 +51,7 @@
                 </ion-col>
             </ion-row>
         </ion-grid>
-        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg"
+        <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" inline="true"
             [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
     </core-loading>
 </core-loading>

src/addons/messages/messages-common.scss

@@ -1,6 +1,11 @@
 :host {
     .addon-messages-conversation-item,
     .addon-message-discussion {
+        ion-label {
+            margin-right: 0;
+            margin-left: 0;
+        }
+
         h2 {
             core-format-text {
                 font-weight: bold;
@@ -12,10 +17,18 @@
         }
 
         ion-note {
-            ion-badge {
-                margin-left: 6px;
-                margin-right: 6px;
-                vertical-align: middle;
+            display: flex;
+            flex-direction: column;
+            align-self: flex-start;
+            margin-left: 2px;
+
+            ion-badge, ion-icon {
+                margin-top: 3px;
+                align-self: flex-end;
+            }
+            .addon-message-last-message-date {
+                white-space: nowrap;
+                font-size: 11px;
             }
         }
 

src/addons/messages/pages/discussion/discussion.scss

@@ -23,6 +23,8 @@
         color: var(--ion-color-primary);
         background-color: transparent;
         margin-top: 6px;
+        margin-left: auto;
+        margin-right: auto;
         ion-icon {
             color: var(--ion-color-primary);
             background-color: transparent;

src/addons/messages/pages/discussions-35/discussions.html

@@ -52,16 +52,22 @@
                 <ng-container *ngIf="!search.showResults">
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
                         [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
-                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'">
+                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" detail="false">
                         <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
                         <ion-label>
+                            <div class="flex-row ion-justify-content-between">
                                 <h2>{{ discussion.fullname }}</h2>
                                 <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
-                                <span *ngIf="discussion.unread" class="core-primary-circle"></span>
-                                <span *ngIf="discussion.message!.timecreated > 0">
+                                    <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
                                         {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
                                     </span>
+                                    <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true">
+                                    </ion-icon>
+                                    <span *ngIf="discussion.unread" class="sr-only">
+                                        {{ 'addon.messages.unreadmessages' | translate }}
+                                    </span>
                                 </ion-note>
+                            </div>
                             <p>
                                 <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
                                     contextLevel="system" [contextInstanceId]="0">

src/addons/messages/pages/group-conversations/group-conversations.html

@@ -146,7 +146,7 @@
 
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
-    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button
+    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
         [attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
         [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
             (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
@@ -162,6 +162,7 @@
             [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
 
         <ion-label>
+            <div class="flex-row ion-justify-content-between">
                 <h2>
                     <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
                     <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
@@ -169,6 +170,16 @@
                     <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
                         [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
                 </h2>
+                <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
+                    <span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
+                        {{conversation.lastmessagedate | coreDateDayOrTime}}
+                    </span>
+                    <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
+                    <span *ngIf="conversation.unreadcount > 0" class="sr-only">
+                        {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
+                    </span>
+                </ion-note>
+            </div>
             <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
                 [contextInstanceId]="0"></core-format-text></p>
             <p class="addon-message-last-message">
@@ -181,12 +192,5 @@
                     class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
             </p>
         </ion-label>
-        <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
-            <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
-            <span *ngIf="conversation.unreadcount > 0" class="sr-only">
-                {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
-            </span>
-            <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
-        </ion-note>
     </ion-item>
 </ng-template>

src/addons/mod/quiz/pages/review/review.html

@@ -24,7 +24,9 @@
             <ion-card-header class="ion-text-wrap">
                 <ion-card-title>
                     <ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container>
-                    <ng-container *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</ng-container>
+                    <ng-container *ngIf="!attempt.preview">
+                        {{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}
+                    </ng-container>
                 </ion-card-title>
             </ion-card-header>
             <ion-list lines="none">

src/addons/remotethemes/services/remotethemes.ts

@@ -43,7 +43,7 @@ export class AddonRemoteThemesProvider {
     protected stylesEls: {[siteId: string]: { element: HTMLStyleElement; hash: string }} = {};
 
     constructor() {
-        this.logger = CoreLogger.getInstance('AddonRemoteThemesProvider');
+        this.logger = CoreLogger.getInstance('AddonRemoteThemes');
     }
 
     /**
@@ -363,6 +363,9 @@ export class AddonRemoteThemesProvider {
             // Adding styles to a style element automatically enables it. Disable it again.
             if (disabled) {
                 this.disableElement(this.stylesEls[siteId].element, true);
+            } else {
+                // Set StatusBar properties.
+                CoreApp.setStatusBarColor();
             }
         }
 

src/core/components/loading/loading.scss

@@ -1,14 +1,13 @@
+@import "~theme/globals";
+
 :host {
     position: static;
-    -webkit-transition: height 200ms ease-in-out;
-    transition: height 200ms ease-in-out;
+    @include core-transition(height, 200ms);
+    --loading-background: rgba(255, 255, 255, 0.26);
 
     > .core-loading-container {
         position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
+        @include position(0, 0, 0, 0);
         display: table;
         height: 100%;
         width: 100%;
@@ -17,7 +16,7 @@
         z-index: 3;
         margin: 0;
         padding: 10px 0 0 0;
-        background-color: rgba(255, 255, 255, 0.26);
+        background-color: var(--loading-background);
         -webkit-transition: all 200ms ease-in-out;
         transition: all 200ms ease-in-out;
 
@@ -29,7 +28,7 @@
     }
 
     .core-loading-content {
-        display: inline;
+        display: contents;
         padding-bottom: 1px; /* This makes height be real */
     }
 
@@ -45,8 +44,12 @@
         display: block;
 
         .core-loading-container {
-            margin-top: 10px;
+            padding-top: 20px;
             position: relative;
         }
     }
 }
+
+:host-context(body.dark) {
+    --loading-background: rgba(0, 0, 0, 0.26);
+}

src/core/features/course/components/format/core-course-format.html

@@ -155,7 +155,7 @@
 
 <!-- Template to render a section download button/progress. -->
 <ng-template #sectionDownloadTemplate let-section="section">
-    <div *ngIf="section && downloadEnabled" slot="end">
+    <div *ngIf="section && downloadEnabled" slot="end" class="core-button-spinner core-section-download">
         <!-- Download progress. -->
         <ion-badge class="core-course-download-section-progress"
             *ngIf="section.isDownloading && section.total > 0 && section.count < section.total">

src/core/features/course/components/format/format.scss

@@ -1,8 +1,4 @@
-// ion-app.app-root ion-badge.core-course-download-section-progress {
-//     display: block;
-//     @include float(start);
-//     @include margin(12px, 12px, null, 12px);
-// }
+@import '~theme/globals.scss';
 
 :host {
 
@@ -52,4 +48,14 @@
         }
     }
 
+    .core-section-download.core-button-spinner {
+        display: flex;
+        align-items: center;
+        @include margin-horizontal(10px);
+
+        ion-badge.core-course-download-courses-progress {
+            @include margin(null, 12px, null, null);
+        }
+    }
+
 }

src/core/features/search/components/search-box/search-box.scss

@@ -1,5 +1,5 @@
 :host {
-    height: 80px;
+    height: 73px;
     display: block;
     position: relative;
 
@@ -8,9 +8,11 @@
         left: 0;
         right: 0;
         z-index: 4;
+        margin-top: 10px;
+        margin-bottom: 10px;
     }
 
-    ion-button.button:last-child {
+    ion-button.button {
         margin-left: unset;
         margin-inline-start: 10px;
     }
@@ -28,4 +30,9 @@
     ion-label {
         margin: 0;
     }
+
+    ion-input {
+        --padding-start: 0;
+        --padding-end: 0;
+    }
 }

src/core/services/app.ts

@@ -622,8 +622,16 @@ export class CoreAppProvider {
      */
     setStatusBarColor(color?: string): void {
         if (!color) {
-            // Get the default color to reset it.
-            color = getComputedStyle(document.documentElement).getPropertyValue('--core-header-toolbar-background').trim();
+            // Get the default color to change it.
+            const element = document.querySelector('ion-header ion-toolbar');
+            if (element) {
+                color = getComputedStyle(element).getPropertyValue('--background').trim();
+            } else {
+                // Fallback, it won't always work.
+                color = getComputedStyle(document.body).getPropertyValue('--core-header-toolbar-background').trim();
+            }
+
+            color = CoreColors.getColorHex(color);
         }
 
         // Make darker on Android.
@@ -631,6 +639,8 @@ export class CoreAppProvider {
             color = CoreColors.darker(color);
         }
 
+        this.logger.debug(`Set status bar color ${color}`);
+
         const useLightText = CoreColors.isWhiteContrastingBetter(color);
         const statusBar = StatusBar.instance;
         statusBar.backgroundColorByHexString(color);

src/core/singletons/colors.ts

@@ -52,6 +52,29 @@ export class CoreColors {
         return CoreColors.RGBToHex(components);
     }
 
+    /**
+     * Returns the hex code from any color css type (ie named).
+     *
+     * @param color Color in any format.
+     * @returns Color in hex format.
+     */
+    static getColorHex(color: string): string {
+        const d = document.createElement('div');
+        d.style.color = color;
+        document.body.appendChild(d);
+
+        // Color in RGB .
+        const rgba = getComputedStyle(d).color.match(/\d+/g)!.map((a) => parseInt(a, 10));
+
+        const hex = [0,1,2].map(
+            (idx) => this.componentToHex(rgba[idx]),
+        ).join('');
+
+        document.body.removeChild(d);
+
+        return '#'+hex;
+    }
+
     /**
      * Gets the luma of a color.
      *
@@ -109,9 +132,7 @@ export class CoreColors {
      * @return Hexadec of the color component.
      */
     protected static componentToHex(c: number): string {
-        const hex = c.toString(16);
-
-        return hex.length == 1 ? '0' + hex : hex;
+        return ('0' + c.toString(16)).slice(-2);
     }
 
 }

src/theme/theme.base.scss

@@ -554,6 +554,13 @@ textarea, button, select, input, a {
     }
 }
 
+ion-loading:focus-visible,
+ion-alert:focus-visible,
+ion-popover:focus-visible,
+ion-modal:focus-visible {
+    box-shadow: none;
+}
+
 ion-input .native-input{
     &:focus, &:focus-visible {
         box-shadow: none;