Merge pull request #2817 from crazyserver/MOBILE-3320

Mobile 3320
main
Dani Palou 2021-06-09 08:03:41 +02:00 committed by GitHub
commit 5aaf5ef8a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 78 additions and 49 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

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

View File

@ -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"

View File

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

View File

@ -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>

View File

@ -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', () => {

View File

@ -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>

View File

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

View File

@ -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">

View File

@ -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;