MOBILE-4065 forum: Fix forum focus problems
This commit is contained in:
Pau Ferrer Ocaña
parent
bff59a0e54
commit
31a275a6fe
@ -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"
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -15,9 +15,9 @@
|
||||
</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()">
|
||||
@ -25,69 +25,70 @@
|
||||
<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>
|
||||
|
||||
@ -149,8 +149,9 @@
|
||||
background-color: var(--toobar-background);
|
||||
}
|
||||
|
||||
&.toolbar-arrow-hidden {
|
||||
opacity: 0;
|
||||
&[disabled],
|
||||
&:disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user