EVOgeek/Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 styles: Animate expandable chevrons

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-02-10 13:24:18 +01:00
parent f61a465c0a
commit abfc4ffb38
8 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,11 +40,9 @@
[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-chevron-right" flip-rtl slot="start" aria-hidden="true" <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
class="expandable-status-icon"> [class.expandable-status-icon-expanded]="favourites.expanded">
</ion-icon> </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>
@ -76,9 +74,8 @@
<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-chevron-right" flip-rtl slot="start" aria-hidden="true" <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
class="expandable-status-icon"></ion-icon> [class.expandable-status-icon-expanded]="group.expanded">
<ion-icon *ngIf="group.expanded" name="fas-chevron-down" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon> </ion-icon>
<ion-label> <ion-label>
<h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2> <h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
@ -111,11 +108,9 @@
[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-chevron-right" flip-rtl slot="start" aria-hidden="true" <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
class="expandable-status-icon"> [class.expandable-status-icon-expanded]="individual.expanded">
</ion-icon> </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/pages/new-discussion/new-discussion.html
View File

@ -34,10 +34,8 @@
<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-chevron-right" flip-rtl slot="start" aria-hidden="true" <ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
class="expandable-status-icon"></ion-icon> [class.expandable-status-icon-expanded]="advanced"></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>

11
src/core/features/course/components/course-index/course-index.html
View File

@ -26,10 +26,11 @@
<ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" button
[class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false" [class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false"
sticky="true"> sticky="true">
<ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" <ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
flip-rtl slot="start" class="expandable-status-icon" (click)="toggleExpand($event, section)" class="expandable-status-icon" (click)="toggleExpand($event, section)"
[attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate" [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"> [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
[class.expandable-status-icon-expanded]="section.expanded">
</ion-icon> </ion-icon>
<ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon"> <ion-icon *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon> </ion-icon>
@ -45,8 +46,8 @@
</ion-item> </ion-item>
<ng-container *ngIf="section.expanded"> <ng-container *ngIf="section.expanded">
<ng-container *ngFor="let module of section.modules"> <ng-container *ngFor="let module of section.modules">
<ion-item [class.item-dimmed]="!module.visible" (click)="selectSectionOrModule($event, section.id, module.id)" <ion-item class="module" [class.item-dimmed]="!module.visible"
button> (click)="selectSectionOrModule($event, section.id, module.id)" button>
<ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined" <ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
slot="start" aria-hidden="true"></ion-icon> slot="start" aria-hidden="true"></ion-icon>
<ion-icon class="completioninfo completion_incomplete" name="far-circle" *ngIf="module.completionStatus === 0" <ion-icon class="completioninfo completion_incomplete" name="far-circle" *ngIf="module.completionStatus === 0"

4
src/core/features/course/components/course-index/course-index.scss
View File

@ -16,11 +16,11 @@ ion-icon.completioninfo {
width: 18px; width: 18px;
} }
ion-item::part(native) { ion-item.module::part(native) {
--padding-start: 0; --padding-start: 0;
} }
ion-icon { ion-item.module ion-icon {
margin: 0; margin: 0;
@include padding(12px, 16px, 12px, 16px); @include padding(12px, 16px, 12px, 16px);
} }

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

@ -36,8 +36,8 @@
<td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan"> <td *ngIf="row.itemtype == 'category'" class="core-grades-table-category" [attr.rowspan]="row.rowspan">
</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="fas-chevron-right"
[name]="row.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" class="expandable-status-icon"> class="expandable-status-icon" [class.expandable-status-icon-expanded]="row.expanded">
</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

@ -96,6 +96,11 @@
.expandable-status-icon { .expandable-status-icon {
font-size: 14px; font-size: 14px;
@include margin-horizontal(0, 2px); @include margin-horizontal(0, 2px);
@include core-transition(transform, 200ms);
&.expandable-status-icon-expanded {
transform: var(--rotate-expandable);
}
} }
} }

12
src/theme/theme.base.scss
View File

@ -416,7 +416,7 @@ ion-alert {
// Ionic list. // Ionic list.
ion-list { ion-list {
padding: 0; padding: 0 !important;
--ion-item-background: transparent; --ion-item-background: transparent;
} }
@ -1264,6 +1264,16 @@ ion-item.item.divider {
ion-label h2.big { ion-label h2.big {
font-size: var(--item-divider-font-size-big); font-size: var(--item-divider-font-size-big);
} }
.expandable-status-icon {
font-size: 18px;
@include core-transition(transform, 200ms);
@include margin-horizontal(null, 16px);
&.expandable-status-icon-expanded {
transform: var(--rotate-expandable);
}
}
} }
// Change default outline. // Change default outline.

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

@ -236,10 +236,6 @@
--background: var(--item-divider-background); --background: var(--item-divider-background);
--color: var(--item-divider-color); --color: var(--item-divider-color);
--min-height: var(--item-divider-min-height); --min-height: var(--item-divider-min-height);
.expandable-status-icon {
font-size: 18px;
}
} }
--spacer-background: var(--light); --spacer-background: var(--light);
@ -327,6 +323,11 @@
--core-dd-question-radius: 10px; --core-dd-question-radius: 10px;
--core-dd-question-border: var(--medium); --core-dd-question-border: var(--medium);
--rotate-expandable: rotate(90deg);
&[dir=rtl] {
--rotate-expandable: rotate(-90deg);
}
@for $i from 0 to length($core-course-image-background) { @for $i from 0 to length($core-course-image-background) {
--core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)}; --core-course-color-#{$i}: #{nth($core-course-image-background, $i + 1)};
--core-course-color-#{$i}-tint: #{get-color-tint(nth($core-course-image-background, $i + 1))}; --core-course-color-#{$i}-tint: #{get-color-tint(nth($core-course-image-background, $i + 1))};