CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3814 UI: Change caret to chevrons

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-01-19 14:25:57 +01:00
parent 6622ecf733
commit d8a1799b9f
9 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
View File

@ -3,6 +3,9 @@
:host { :host {
.core-horizontal-scroll div.core-horizontal-scroll-item { .core-horizontal-scroll div.core-horizontal-scroll-item {
@include horizontal_scroll_item(80%, 250px, 300px); @include horizontal_scroll_item(80%, 250px, 300px);
ion-card {
height: auto;
}
} }
.core-course-module-handler { .core-course-module-handler {

18
src/addons/messages/pages/group-conversations/group-conversations.html
View File

@ -40,9 +40,11 @@
[attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-label]="(favourites.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading" [attr.aria-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
detail="false"> detail="false">
<ion-icon *ngIf="!favourites.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"> <ion-icon *ngIf="!favourites.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
class="expandable-status-icon">
</ion-icon> </ion-icon>
<ion-icon *ngIf="favourites.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon> <ion-icon *ngIf="favourites.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
class="expandable-status-icon"></ion-icon>
<ion-label> <ion-label>
<h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2> <h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
</ion-label> </ion-label>
@ -74,8 +76,10 @@
<ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true" <ion-item button class="divider ion-text-wrap" (click)="toggle(group)" sticky="true"
[attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded" [attr.aria-label]="(group.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-expanded]="group.expanded"
aria-controls="addon-messages-groupconversations-group" role="heading" detail="false"> aria-controls="addon-messages-groupconversations-group" role="heading" detail="false">
<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-chevron-right" flip-rtl slot="start" aria-hidden="true"
<ion-icon *ngIf="group.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon> class="expandable-status-icon"></ion-icon>
<ion-icon *ngIf="group.expanded" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon>
<ion-label> <ion-label>
<h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2> <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
</ion-label> </ion-label>
@ -107,9 +111,11 @@
[attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading" [attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
detail="false"> detail="false">
<ion-icon *ngIf="!individual.expanded" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"> <ion-icon *ngIf="!individual.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
class="expandable-status-icon">
</ion-icon> </ion-icon>
<ion-icon *ngIf="individual.expanded" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon> <ion-icon *ngIf="individual.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
class="expandable-status-icon"></ion-icon>
<ion-label> <ion-label>
<h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2> <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
</ion-label> </ion-label>

6
src/addons/mod/forum/components/post/post.html
View File

@ -118,8 +118,10 @@
<ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced" <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
[attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId" [attr.aria-controls]="'addon-forum-reply-edit-form-advanced-' + uniqueId"
[attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate"> [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate">
<ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon> <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
<ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon> class="expandable-status-icon"></ion-icon>
<ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon>
<ion-label> <ion-label>
<h2>{{ 'addon.mod_forum.advanced' | translate }}</h2> <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
</ion-label> </ion-label>

6
src/addons/mod/forum/pages/new-discussion/new-discussion.html
View File

@ -34,8 +34,10 @@
<ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced" <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" detail="false" [attr.aria-expanded]="advanced"
[attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading" [attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
aria-controls="addon-mod-forum-new-discussion-advanced"> aria-controls="addon-mod-forum-new-discussion-advanced">
<ion-icon *ngIf="!advanced" name="fas-caret-right" flip-rtl slot="start" aria-hidden="true"></ion-icon> <ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
<ion-icon *ngIf="advanced" name="fas-caret-down" slot="start" aria-hidden="true"></ion-icon> class="expandable-status-icon"></ion-icon>
<ion-icon *ngIf="advanced" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon>
<ion-label> <ion-label>
<h2>{{ 'addon.mod_forum.advanced' | translate }}</h2> <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
</ion-label> </ion-label>

26
src/core/components/horizontal-scroll-controls/core-horizontal-scroll-controls.html
View File

@ -1,23 +1,9 @@
<ion-button <ion-button fill="clear" color="dark" (click)="scroll('backward')" [hidden]="scrollPosition === 'hidden'"
fill="clear" [disabled]="scrollPosition === 'start'" [attr.aria-label]="'core.scrollbackward' | translate" [attr.aria-controls]="targetId">
color="dark" <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
(click)="scroll('backward')"
[hidden]="scrollPosition === 'hidden'"
[disabled]="scrollPosition === 'start'"
[attr.aria-label]="'core.scrollbackward' | translate"
[attr.aria-controls]="targetId"
>
<ion-icon name="fas-caret-left" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>
<ion-button <ion-button fill="clear" color="dark" (click)="scroll('forward')" [hidden]="scrollPosition === 'hidden'"
fill="clear" [disabled]="scrollPosition === 'end'" [attr.aria-label]="'core.scrollforward' | translate" [attr.aria-controls]="targetId">
color="dark" <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
(click)="scroll('forward')"
[hidden]="scrollPosition === 'hidden'"
[disabled]="scrollPosition === 'end'"
[attr.aria-label]="'core.scrollforward' | translate"
[attr.aria-controls]="targetId"
>
<ion-icon name="fas-caret-right" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-button> </ion-button>

2
src/core/features/grades/pages/course/course.html
View File

@ -37,7 +37,7 @@
</td> </td>
<th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan"> <th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan">
<ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start" <ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start"
[name]="row.expanded ? 'fas-caret-down' : 'fas-caret-right'"> [name]="row.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" class="expandable-status-icon">
</ion-icon> </ion-icon>
<ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt"> <ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
</ion-icon> </ion-icon>

5
src/core/features/grades/pages/course/course.scss
View File

@ -100,6 +100,11 @@
@include margin(null, null, null, 5px); @include margin(null, null, null, 5px);
} }
.expandable-status-icon {
font-size: 14px;
@include margin-horizontal(0, 2px);
}
} }
.core-grades-table-feedback { .core-grades-table-feedback {

2
src/theme/globals.mixins.scss
View File

@ -209,7 +209,7 @@
--vertical-margin: 10px; --vertical-margin: 10px;
--horizontal-margin: 10px; --horizontal-margin: 10px;
width: calc(100% - var(--vertical-margin) - var(--vertical-margin)); width: calc(100% - var(--horizontal-margin) - var(--horizontal-margin));
height: calc(100% - var(--vertical-margin) - var(--vertical-margin)); height: calc(100% - var(--vertical-margin) - var(--vertical-margin));
margin: var(--vertical-margin) var(--horizontal-margin); margin: var(--vertical-margin) var(--horizontal-margin);

4
src/theme/theme.light.scss
View File

@ -215,6 +215,10 @@
--color: var(--item-divider-color); --color: var(--item-divider-color);
--min-height: var(--item-divider-min-height); --min-height: var(--item-divider-min-height);
min-height: var(--min-height); min-height: var(--min-height);
.expandable-status-icon {
font-size: 18px;
}
} }
--spacer-background: var(--item-divider-background); --spacer-background: var(--item-divider-background);