From 5ad0326910f8a6a7d11e329a88882a59ad68227d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 8 Jun 2021 13:15:36 +0200
Subject: [PATCH 1/4] MOBILE-3320 core: Fix some icon rtl flipping

---
 src/addons/calendar/pages/edit-event/edit-event.html      | 2 +-
 .../pages/group-conversations/group-conversations.html    | 8 +++++---
 src/addons/mod/forum/components/edit-post/edit-post.html  | 2 +-
 src/addons/mod/forum/components/post/post.html            | 2 +-
 .../mod/forum/pages/new-discussion/new-discussion.html    | 2 +-
 src/core/components/empty-box/core-empty-box.html         | 2 +-
 .../send-message-form/core-send-message-form.html         | 2 +-
 .../search/components/search-box/core-search-box.html     | 2 +-
 src/theme/theme.base.scss                                 | 6 ------
 9 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index f989bda39..02609e8b4 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/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>
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index c0b9cfb62..61639f1b4 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/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>
diff --git a/src/addons/mod/forum/components/edit-post/edit-post.html b/src/addons/mod/forum/components/edit-post/edit-post.html
index 21a433fd8..402e86e56 100644
--- a/src/addons/mod/forum/components/edit-post/edit-post.html
+++ b/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>
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 0b1f4d993..7f50fb188 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/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>
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index b93e09ee3..641d29826 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/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>
diff --git a/src/core/components/empty-box/core-empty-box.html b/src/core/components/empty-box/core-empty-box.html
index b09fc1168..89f21cb33 100644
--- a/src/core/components/empty-box/core-empty-box.html
+++ b/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>
diff --git a/src/core/components/send-message-form/core-send-message-form.html b/src/core/components/send-message-form/core-send-message-form.html
index 1cf08fbd8..9d1efea42 100644
--- a/src/core/components/send-message-form/core-send-message-form.html
+++ b/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>
diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
index 8ac3dbdfc..79aac7e7f 100644
--- a/src/core/features/search/components/search-box/core-search-box.html
+++ b/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">
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0defd7a37..cf09aaa2e 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -227,12 +227,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,

From 0d7e252ca20ae03c862839cdb489cf5e112e1d8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 8 Jun 2021 13:16:03 +0200
Subject: [PATCH 2/4] MOBILE-3320 core: Fix navigation bar text overflow

---
 src/addons/blog/pages/entries/entries.html    | 14 ++++----
 .../navigation-bar/core-navigation-bar.html   | 12 +++----
 .../navigation-bar/navigation-bar.scss        |  5 ---
 src/theme/theme.base.scss                     | 32 +++++++++++++++++++
 4 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index 73b15a137..9f4efbfec 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/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">
-                    <ion-col>
-                        <ion-note>
-                            <ion-icon name="fas-clock"
-                                [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
-                        </ion-note>
-                    </ion-col>
-                </ion-row>
+                <div class="ion-text-center ion-margin-bottom" *ngIf="entry.lastmodified > entry.created">
+                    <ion-note>
+                        <ion-icon name="fas-clock"
+                            [attr.aria-label]="'core.lastmodified' | translate"></ion-icon> {{entry.lastmodified | coreTimeAgo}}
+                    </ion-note>
+                </div>
             </ion-card>
         </ng-container>
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadMore($event)" [error]="loadMoreError"></core-infinite-loading>
diff --git a/src/core/components/navigation-bar/core-navigation-bar.html b/src/core/components/navigation-bar/core-navigation-bar.html
index b04994a15..175e0f549 100644
--- a/src/core/components/navigation-bar/core-navigation-bar.html
+++ b/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-button *ngIf="previous" class="core-navigation-bar-arrow"
-                [title]="previousTitle || ('core.previous' | translate)" (click)="action?.emit(previous)">
+        <ion-col class="ion-text-start ion-padding-end" [size]="info ? 4 : 6">
+            <ion-button *ngIf="previous" class="core-navigation-bar-arrow" fill="outline"
+                [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-button fill="clear" *ngIf="info" (click)="showInfo()" [attr.aria-label]="title">
+        <ion-col class="ion-text-center" size="4" *ngIf="info">
+            <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"
diff --git a/src/core/components/navigation-bar/navigation-bar.scss b/src/core/components/navigation-bar/navigation-bar.scss
index c0219d1ac..f48edf9b3 100644
--- a/src/core/components/navigation-bar/navigation-bar.scss
+++ b/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;
-    }
 }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index cf09aaa2e..5330f6576 100644
--- a/src/theme/theme.base.scss
+++ b/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);

From b335b5123a65bbf0a5153dc67de46174db28a7e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 8 Jun 2021 15:59:20 +0200
Subject: [PATCH 3/4] MOBILE-3320 core: Fix iFrame help button styles

---
 src/core/components/iframe/core-iframe.html | 4 ++--
 src/core/directives/format-text.ts          | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/core/components/iframe/core-iframe.html b/src/core/components/iframe/core-iframe.html
index dc4d5a01d..c8cf72ddc 100644
--- a/src/core/components/iframe/core-iframe.html
+++ b/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">
diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts
index adb0641a3..84c15bbe8 100644
--- a/src/core/directives/format-text.ts
+++ b/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-wrap');
-        helpDiv.classList.add('core-iframe-help');
+        helpDiv.classList.add('ion-text-center', 'ion-text-wrap');
 
         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', () => {

From b6e0bc2340bdac5cccc049cd718c26441bfdeb97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 8 Jun 2021 16:12:56 +0200
Subject: [PATCH 4/4] MOBILE-3320 rte: Minor RTE style fixes

---
 src/addons/calendar/pages/day/day.html                |  2 +-
 src/core/components/loading/loading.scss              |  4 ----
 .../core-editor-rich-text-editor.html                 |  6 +++---
 .../components/rich-text-editor/rich-text-editor.scss |  4 ++++
 src/theme/theme.base.scss                             | 11 ++++++++++-
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/addons/calendar/pages/day/day.html b/src/addons/calendar/pages/day/day.html
index 5177df833..4ca58a438 100644
--- a/src/addons/calendar/pages/day/day.html
+++ b/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>
 
diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 4cadd853f..98f596285 100644
--- a/src/core/components/loading/loading.scss
+++ b/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;
     }
diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index e3422805d..c3ce29d1c 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/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>
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
index 4ccb65ab5..294d029f3 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
+++ b/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;
+}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 5330f6576..3f7715dd1 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -277,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;