MOBILE-4065 forum: Fix forum focus problems

crazyserver · crazyserver · commit 31a275a6fe99 · 2023-02-07T15:03:50.000+01:00
diff --git a/src/addons/mod/forum/components/index/index.html b/src/addons/mod/forum/components/index/index.html
@@ -74,26 +74,20 @@
                 [lines]="discussion.groupname && 'none'" [attr.aria-current]="discussions?.getItemAriaCurrent(discussion)"
                 (click)="discussions?.select(discussion)" button>
                 <ion-label>
-                    <div class="addon-mod-forum-discussion-title">
-                        <p class="ion-text-wrap item-heading">
-                            <ion-icon name="fas-map-pin" *ngIf="discussion.pinned"
-                                [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
-                            <ion-icon name="fas-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"
-                                [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
-                            <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
-                                [courseId]="courseId">
-                            </core-format-text>
-                            <ion-icon name="fas-lock" *ngIf="discussion.locked" class="addon-mod-forum-locked-icon"
-                                [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate"></ion-icon>
-                        </p>
-                        <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
-                            [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)">
-                            <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
-                            </ion-icon>
-                        </ion-button>
-                    </div>
+                    <p class="addon-mod-forum-discussion-title ion-text-wrap item-heading">
+                        <ion-icon name="fas-map-pin" *ngIf="discussion.pinned"
+                            [attr.aria-label]="'addon.mod_forum.discussionpinned' | translate"></ion-icon>
+                        <ion-icon name="fas-star" class="addon-forum-star" *ngIf="!discussion.pinned && discussion.starred"
+                            [attr.aria-label]="'addon.mod_forum.favourites' | translate"></ion-icon>
+                        <core-format-text [text]="discussion.subject" contextLevel="module" [contextInstanceId]="module && module.id"
+                            [courseId]="courseId">
+                        </core-format-text>
+                        <ion-icon name="fas-lock" *ngIf="discussion.locked" class="addon-mod-forum-locked-icon"
+                            [attr.aria-label]="'addon.mod_forum.discussionlocked' | translate"></ion-icon>
+                    </p>
                     <div class="addon-mod-forum-discussion-info">
-                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId">
+                        <core-user-avatar *ngIf="discussion.userfullname" [user]="discussion" slot="start" [courseId]="courseId"
+                            [linkProfile]="false">
                         </core-user-avatar>
                         <div class="addon-mod-forum-discussion-author">
                             <span *ngIf="discussion.userfullname">{{discussion.userfullname}}</span>
@@ -136,6 +130,11 @@
                         </ion-col>
                     </ion-row>
                 </ion-label>
+                <ion-button *ngIf="canPin || discussion.canlock || discussion.canfavourite" fill="clear"
+                    [attr.aria-label]="('core.displayoptions' | translate)" (click)="showOptionsMenu($event, discussion)" slot="end">
+                    <ion-icon name="ellipsis-vertical" slot="icon-only" aria-hidden="true">
+                    </ion-icon>
+                </ion-button>
             </ion-item>
 
             <core-infinite-loading [enabled]="discussions && discussions.loaded && !discussions.completed" [error]="fetchFailed"
diff --git a/src/addons/mod/forum/components/index/index.scss b/src/addons/mod/forum/components/index/index.scss
@@ -7,7 +7,6 @@
     }
 
     .addon-mod-forum-discussion.item {
-
         ion-label {
             margin-top: 4px;
 
@@ -35,21 +34,30 @@
             @include margin(0, 8px, 0, 0);
         }
 
-        .addon-mod-forum-discussion-title,
         .addon-mod-forum-discussion-info {
             display: flex;
             align-items: center;
         }
 
-        .addon-mod-forum-discussion-title .item-heading,
         .addon-mod-forum-discussion-info .addon-mod-forum-discussion-author {
             flex-grow: 1;
         }
 
+        .addon-mod-forum-discussion-title {
+            @include margin-horizontal(null, 8px);
+            line-height: 18px;
+        }
+
+
         .addon-mod-forum-discussion-more-info.ios {
             font-size: 0.9rem;
         }
 
+        ion-button {
+            position: absolute;
+            @include position (4px, 8px, null, null);
+        }
+
     }
 
     .core-group-selector {
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
@@ -15,79 +15,80 @@
 </div>
 
 <div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)"
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [attr.disabled]="toolbarPrevHidden ? 'true' : null" (click)="toolbarPrev($event)"
         (keyup)="toolbarPrev($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)"
-        [attr.aria-label]="'core.previous' | translate">
+        [attr.aria-label]="'core.previous' | translate" [tabindex]="toolbarPrevHidden ? -1 : 0">
         <ion-icon name="fas-chevron-left" aria-hidden="true"></ion-icon>
     </button>
     <ion-slides [options]="slidesOpts" [dir]="direction" (ionSlideDidChange)="updateToolbarArrows()">
         <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" [title]="'core.editor.bold' | translate"
                 (click)="buttonAction($event, 'bold', 'strong')" (keyup)="buttonAction($event, 'bold', 'strong')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-bold" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <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)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-italic" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" [title]="'core.editor.underline' | translate"
                 (click)="buttonAction($event, 'underline', 'u')" (keyup)="buttonAction($event, 'underline', 'u')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-underline" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" [title]="'core.editor.strike' | translate"
                 (click)="buttonAction($event, 'strikethrough', 'strike')" (keyup)="buttonAction($event, 'strikethrough', 'strike')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-strikethrough" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" [title]="'core.editor.p' | translate"
                 (click)="buttonAction($event, 'p', 'block')" (keyup)="buttonAction($event, 'p', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-paragraph" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" [title]="'core.editor.h3' | translate"
                 (click)="buttonAction($event, 'h3', 'block')" (keyup)="buttonAction($event, 'h3', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">3</span>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" [title]="'core.editor.h4' | translate"
                 (click)="buttonAction($event, 'h4', 'block')" (keyup)="buttonAction($event, 'h4', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">4</span>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" [title]="'core.editor.h5' | translate"
                 (click)="buttonAction($event, 'h5', 'block')" (keyup)="buttonAction($event, 'h5', 'block')" (mousedown)="downAction($event)"
-                (keydown)="downAction($event)">
+                (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-heading" aria-hidden="true"></ion-icon><span aria-hidden="true">5</span>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" [title]="'core.editor.unorderedlist' | translate"
-                (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="downAction($event)" (keydown)="downAction($event)"
+                tabindex="0">
                 <ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide>
             <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" [title]="'core.editor.orderedlist' | translate"
                 (click)="buttonAction($event, 'insertOrderedList')" (keyup)="buttonAction($event, 'insertOrderedList')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-list-ol" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
@@ -105,20 +106,20 @@
         </ion-slide>
         <ion-slide>
             <button [attr.aria-pressed]="!rteEnabled" [title]="'core.editor.toggle' | translate" (click)="toggleEditor($event)"
-                (keyup)="toggleEditor($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (keyup)="toggleEditor($event)" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-code" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
         <ion-slide *ngIf="isPhone">
             <button [title]="'core.editor.hidetoolbar' | translate" (click)="hideToolbar($event, true)" (keyup)="hideToolbar($event, true)"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-times" aria-hidden="true"></ion-icon>
             </button>
         </ion-slide>
     </ion-slides>
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden"
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [attr.disabled]="toolbarNextHidden ? 'true' : null"
         [attr.aria-label]="'core.next' | translate" (click)="toolbarNext($event)" (keyup)="toolbarNext($event)"
-        (mousedown)="downAction($event)" (keydown)="downAction($event)">
+        (mousedown)="downAction($event)" (keydown)="downAction($event)" [tabindex]="toolbarNextHidden ? -1 : 0">
         <ion-icon name="fas-chevron-right" aria-hidden="true"></ion-icon>
     </button>
 </div>
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
@@ -149,8 +149,9 @@
                     background-color: var(--toobar-background);
                 }
 
-                &.toolbar-arrow-hidden {
-                    opacity: 0;
+                &[disabled],
+                &:disabled {
+                    opacity: .5;
                 }
             }
         }

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,6 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.addon-mod-forum-discussion.item {`
`10`		`-`
`11`	`10`	`ion-label {`
`12`	`11`	`margin-top: 4px;`
`13`	`12`
`@@ -35,21 +34,30 @@`
`35`	`34`	`@include margin(0, 8px, 0, 0);`
`36`	`35`	`}`
`37`	`36`
`38`		`- .addon-mod-forum-discussion-title,`
`39`	`37`	`.addon-mod-forum-discussion-info {`
`40`	`38`	`display: flex;`
`41`	`39`	`align-items: center;`
`42`	`40`	`}`
`43`	`41`
`44`		`- .addon-mod-forum-discussion-title .item-heading,`
`45`	`42`	`.addon-mod-forum-discussion-info .addon-mod-forum-discussion-author {`
`46`	`43`	`flex-grow: 1;`
`47`	`44`	`}`
`48`	`45`
	`46`	`+ .addon-mod-forum-discussion-title {`
	`47`	`+ @include margin-horizontal(null, 8px);`
	`48`	`+ line-height: 18px;`
	`49`	`+ }`
	`50`	`+`
	`51`	`+`
`49`	`52`	`.addon-mod-forum-discussion-more-info.ios {`
`50`	`53`	`font-size: 0.9rem;`
`51`	`54`	`}`
`52`	`55`
	`56`	`+ ion-button {`
	`57`	`+ position: absolute;`
	`58`	`+ @include position (4px, 8px, null, null);`
	`59`	`+ }`
	`60`	`+`
`53`	`61`	`}`
`54`	`62`
`55`	`63`	`.core-group-selector {`
Original file line number	Diff line number	Diff line change
`@@ -149,8 +149,9 @@`
`149`	`149`	`background-color: var(--toobar-background);`
`150`	`150`	`}`
`151`	`151`
`152`		`- &.toolbar-arrow-hidden {`
`153`		`- opacity: 0;`
	`152`	`+ &[disabled],`
	`153`	`+ &:disabled {`
	`154`	`+ opacity: .5;`
`154`	`155`	`}`
`155`	`156`	`}`
`156`	`157`	`}`