Merge pull request #2817 from crazyserver/MOBILE-3320

Mobile 3320

src/addons/blog/pages/entries/entries.html

@@ -64,14 +64,12 @@
                         <ion-label>{{ 'addon.blog.linktooriginalentry' | translate }}</ion-label>
                     </ion-item>
                 </ion-card-content>
-                <ion-row class="ion-text-center" *ngIf="entry.lastmodified > entry.created">
+                <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
-                    <ion-col>
+                    <ion-note>
-                        <ion-note>
+                        <ion-icon name="fas-clock"
-                            <ion-icon name="fas-clock"
+                            [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
-                                [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
+                    </ion-note>
-                        </ion-note>
+                </div>
-                    </ion-col>
-                </ion-row>
             </ion-card>
         </ng-container>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading>

src/addons/calendar/pages/day/day.html

@@ -53,7 +53,7 @@
             </ion-item>
         </ion-card>
 
-        <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar"
+        <core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="fas-calendar" inline="true"
             [message]="'addon.calendar.noevents' | translate">
         </core-empty-box>
 

src/addons/calendar/pages/edit-event/edit-event.html

@@ -102,7 +102,7 @@
 
             <!-- Advanced options. -->
             <ion-item button class="ion-text-wrap core-expandable divider" (click)="toggleAdvanced()" detail="false">
-                <ion-icon *ngIf="!advanced" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <h2 *ngIf="!advanced">{{ 'core.showmore' | translate }}</h2>

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

@@ -45,7 +45,8 @@
                     role="heading"
                     detail="false"
                 >
-                    <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true">
+                    </ion-icon>
                     <ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2></ion-label>
                     <ion-badge slot="end" *ngIf="favourites.unread" aria-hidden="true">{{ favourites.unread }}</ion-badge>
@@ -80,7 +81,7 @@
                     role="heading"
                     detail="false"
                 >
-                    <ion-icon *ngIf="!group.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon *ngIf="!group.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
                     <ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label><h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2></ion-label>
                     <ion-badge slot="end" *ngIf="group.unread" aria-hidden="true">{{ group.unread }}</ion-badge>
@@ -114,7 +115,8 @@
                     role="heading"
                     detail="false"
                 >
-                    <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon *ngIf="!individual.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true">
+                    </ion-icon>
                     <ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>

src/addons/mod/forum/components/edit-post/edit-post.html

@@ -34,7 +34,7 @@
             aria-controls="addon-mod-forum-advanced"
             [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
         >
-            <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
+            <ion-icon *ngIf="!advanced" name="fa-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
             <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
             <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
         </ion-item>

src/addons/mod/forum/components/post/post.html

@@ -130,7 +130,7 @@
                 [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
                 [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"
             >
-                <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!advanced" name="fa-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label>
                     <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>

src/addons/mod/forum/pages/new-discussion/new-discussion.html

@@ -41,7 +41,7 @@
                 role="heading"
                 aria-controls="addon-mod-forum-new-discussion-advanced"
             >
-                <ion-icon *ngIf="!advanced" name="fa-caret-right" slot="start" aria-hidden="true"></ion-icon>
+                <ion-icon *ngIf="!advanced" name="fa-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon>
                 <ion-icon *ngIf="advanced" name="fa-caret-down" slot="start" aria-hidden="true"></ion-icon>
                 <ion-label><h2>{{ 'addon.mod_forum.advanced' | translate }}</h2></ion-label>
             </ion-item>

src/core/components/empty-box/core-empty-box.html

@@ -1,7 +1,7 @@
 <div class="core-empty-box ion-padding" [class.core-empty-box-inline]="(!image && !icon) || inline">
     <div class="core-empty-box-content">
         <img *ngIf="image && !icon" [src]="image" role="presentation" alt="">
-        <ion-icon *ngIf="icon" [name]="icon" [class.icon-flip-rtl]="flipIconRtl" aria-hidden="true"></ion-icon>
+        <ion-icon *ngIf="icon" [name]="icon" aria-hidden="true"></ion-icon>
         <p *ngIf="message" [class.ion-padding-top]="image || icon">{{ message }}</p>
         <ng-content></ng-content>
     </div>

src/core/components/iframe/core-iframe.html

@@ -10,9 +10,9 @@
         color="dark" expand="block" fill="clear"
         (click)="openIframeHelpModal()"
         aria-haspopup="dialog"
-        class="core-button-as-link"
+        class="core-button-as-link core-iframe-help"
     >
-        <ion-label>{{ 'core.iframehelp' | translate }}</ion-label>
+        {{ 'core.iframehelp' | translate }}
     </ion-button>
 
     <span class="core-loading-spinner">

src/core/components/loading/loading.scss

@@ -47,10 +47,6 @@
         @include margin(10px, 0, 0, 0);
     }
 
-    .core-loading-content {
-        display: contents;
-    }
-
     &.core-loading-noheight .core-loading-content {
         height: auto;
     }

src/core/components/navigation-bar/core-navigation-bar.html

@@ -1,20 +1,20 @@
 <ion-grid class="ion-no-padding ion-padding-bottom" *ngIf="previous || info || next">
     <ion-row>
-        <ion-col class="ion-text-start" size="4">
+        <ion-col class="ion-text-start ion-padding-end" [size]="info ? 4 : 6">
-            <ion-button *ngIf="previous" class="core-navigation-bar-arrow"
+            <ion-button *ngIf="previous" class="core-navigation-bar-arrow" fill="outline"
-                [title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
+                [attr.aria-label]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
                 <ion-icon name="fas-arrow-left" [slot]="previousTitle ? 'start' : 'icon-only'" aria-hidden="true"></ion-icon>
                 <core-format-text *ngIf="previousTitle" [text]="previousTitle" [component]="component" [componentId]="componentId"
                     [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" aria-hidden="true">
                 </core-format-text>
             </ion-button>
         </ion-col>
-        <ion-col class="ion-text-center ion-padding-horizontal" size="4">
+        <ion-col class="ion-text-center" size="4" *ngIf="info">
-            <ion-button fill="clear" *ngIf="info" (click)="showInfo()" [attr.aria-label]="title">
+            <ion-button fill="clear" (click)="showInfo()" [attr.aria-label]="title">
                 <ion-icon slot="icon-only" name="fas-info-circle" aria-hidden="true"></ion-icon>
             </ion-button>
         </ion-col>
-        <ion-col class="ion-text-end" size="4">
+        <ion-col class="ion-text-end ion-padding-start" [size]="info ? 4 : 6">
             <ion-button *ngIf="next" class="core-navigation-bar-arrow" [attr.aria-label]="nextTitle || ('core.next' | translate)"
                 (click)="action?.emit(next)">
                 <core-format-text *ngIf="nextTitle" [text]="nextTitle" [component]="component" [componentId]="componentId"

src/core/components/navigation-bar/navigation-bar.scss

@@ -4,9 +4,4 @@
     ion-icon {
         flex-shrink: 0;
     }
-
-    core-format-text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
 }

src/core/components/send-message-form/core-send-message-form.html

@@ -19,6 +19,6 @@
     </textarea>
     <ion-button fill="clear" size="large" type="submit" [disabled]="!message || sendDisabled"
         [attr.aria-label]="'core.send' | translate" [core-suppress-events] (onClick)="submitForm($event)">
-        <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true"></ion-icon>
+        <ion-icon name="send" color="dark" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
     </ion-button>
 </form>

src/core/directives/format-text.ts

@@ -799,13 +799,12 @@ export class CoreFormatTextDirective implements OnChanges {
     protected addIframeHelp(iframe: HTMLIFrameElement): void {
         const helpDiv = document.createElement('div');
 
-        helpDiv.classList.add('ion-text-center');
+        helpDiv.classList.add('ion-text-center', 'ion-text-wrap');
-        helpDiv.classList.add('ion-text-wrap');
-        helpDiv.classList.add('core-iframe-help');
 
         const button = document.createElement('ion-button');
         button.setAttribute('fill', 'clear');
         button.setAttribute('aria-haspopup', 'dialog');
+        button.classList.add('core-iframe-help', 'core-button-as-link');
         button.innerHTML = Translate.instant('core.iframehelp');
 
         button.addEventListener('click', () => {

src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html

@@ -48,7 +48,7 @@
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" [title]=" 'core.editor.italic' | translate"
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" [title]="'core.editor.italic' | translate"
                 (click)="buttonAction($event, 'italic', 'em')" (keyup)="buttonAction($event, 'italic', 'em')"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)">
                 <ion-icon name="fas-italic" aria-hidden="true"></ion-icon>
@@ -129,14 +129,14 @@
             </button>
         </ion-slide>
         <ion-slide>
-            <button [attr.aria-pressed]="!rteEnabled" [title]=" 'core.editor.toggle' | translate"
+            <button [attr.aria-pressed]="!rteEnabled" [title]="'core.editor.toggle' | translate"
                 (click)="toggleEditor($event)" (keyup)="toggleEditor($event)"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)">
                 <ion-icon name="fas-code" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide *ngIf="isPhone">
-            <button [title]=" 'core.editor.hidetoolbar' | translate"
+            <button [title]="'core.editor.hidetoolbar' | translate"
                 (click)="hideToolbar($event)" (keyup)="hideToolbar($event)"
                 (mousedown)="downAction($event)" (keydown)="downAction($event)">
                 <ion-icon name="fas-times" aria-hidden="true"></ion-icon>

src/core/features/editor/components/rich-text-editor/rich-text-editor.scss

@@ -168,3 +168,7 @@
 :host-context(.keyboard-is-open) {
     min-height: 200px;
 }
+
+:host-context(.item-label-stacked) {
+    margin-top: 10px;
+}

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

@@ -13,7 +13,7 @@
             <ion-button *ngIf="showClear" slot="end" fill="clear"
                 [attr.aria-label]="'core.clearsearch' | translate" [disabled]="searched == '' || disabled"
                 (click)="clearForm()">
-                <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true"></ion-icon>
+                <ion-icon name="fas-backspace" slot="icon-only" aria-hidden="true" flip-rtl></ion-icon>
             </ion-button>
         </ion-item>
         <ion-list class="core-search-history" [hidden]="!historyShown">

src/theme/theme.base.scss

@@ -145,10 +145,42 @@ ion-app.ios ion-header h2 {
 }
 
 // Correctly inherit ion-text-wrap onto labels.
+ion-item ion-label core-format-text .core-format-text-content > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 ion-item.ion-text-wrap ion-label {
     white-space: normal !important;
 }
 
+ion-button core-format-text .core-format-text-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+}
+
+ion-button > * {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+ion-button.ion-text-wrap {
+    white-space: normal;
+    core-format-text .core-format-text-content {
+        white-space: normal;
+        display: contents;
+    }
+
+    & > * {
+        white-space: normal;
+    }
+}
+
+
 @each $color-name, $value in $colors {
     $value: map-get($colors, $color-name);
     $base: map-get($value, base);
@@ -227,12 +259,6 @@ ion-button.button-small ion-icon.faicon[slot] {
     font-size: 1.5em !important;
 }
 
-[dir=rtl] ion-icon.icon-flip-rtl,
-[dir=rtl] ion-item::part(detail-icon),
-[dir=rtl] ion-icon.item-detail-icon {
-    transform: scaleX(-1);
-}
-
 // Buttons.
 ion-button,
 ion-fab-button,
@@ -251,12 +277,21 @@ ion-button.button-clear {
 .clickable {
     cursor: pointer;
 
+
     [disabled],
     [aria-disabled="true"] {
-        cursor: auto;
+        cursor: default;
+        opacity: .4;
+        pointer-events: none;
     }
 }
 
+button[disabled] {
+    cursor: default;
+    opacity: .4;
+    pointer-events: none;
+}
+
 ion-button.core-button-as-link {
     text-transform: none;
     text-decoration: underline;