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

MOBILE-3814 styles: Animate expandable chevrons

main
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-expanded]="favourites.expanded" aria-controls="addon-messages-groupconversations-favourite" role="heading"
detail="false">
<ion-icon *ngIf="!favourites.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
class="expandable-status-icon">
<ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="favourites.expanded">
</ion-icon>
<ion-icon *ngIf="favourites.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
class="expandable-status-icon"></ion-icon>
<ion-label>
<h2>{{ 'core.favourites' | translate }} ({{ favourites.count }})</h2>
</ion-label>
@ -76,9 +74,8 @@
<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"
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"
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 name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="group.expanded">
</ion-icon>
<ion-label>
<h2>{{ 'addon.messages.groupconversations' | translate }} ({{ group.count }})</h2>
@ -111,11 +108,9 @@
[attr.aria-label]="(individual.expanded ? 'core.collapse' : 'core.expand') | translate"
[attr.aria-expanded]="individual.expanded" aria-controls="addon-messages-groupconversations-individual" role="heading"
detail="false">
<ion-icon *ngIf="!individual.expanded" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
class="expandable-status-icon">
<ion-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="individual.expanded">
</ion-icon>
<ion-icon *ngIf="individual.expanded" name="fas-chevron-down" slot="start" aria-hidden="true"
class="expandable-status-icon"></ion-icon>
<ion-label>
<h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.count }})</h2>
</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"
[attr.aria-label]="(advanced ? 'core.hideadvanced' : 'core.showadvanced') | translate" role="heading"
aria-controls="addon-mod-forum-new-discussion-advanced">
<ion-icon *ngIf="!advanced" name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true"
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-icon name="fas-chevron-right" flip-rtl slot="start" aria-hidden="true" class="expandable-status-icon"
[class.expandable-status-icon-expanded]="advanced"></ion-icon>
<ion-label>
<h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
</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
[class.item-current]="selectedId === section.id" [class.item-dimmed]="section.visible === 0" detail="false"
sticky="true">
<ion-icon *ngIf="section.hasVisibleModules" [name]="section.expanded ? 'fas-chevron-down' : 'fas-chevron-right'"
flip-rtl slot="start" class="expandable-status-icon" (click)="toggleExpand($event, section)"
<ion-icon *ngIf="section.hasVisibleModules" name="fas-chevron-right" flip-rtl slot="start"
class="expandable-status-icon" (click)="toggleExpand($event, section)"
[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 *ngIf="!section.hasVisibleModules" name="" slot="start" aria-hidden="true" class="expandable-status-icon">
</ion-icon>
@ -45,8 +46,8 @@
</ion-item>
<ng-container *ngIf="section.expanded">
<ng-container *ngFor="let module of section.modules">
<ion-item [class.item-dimmed]="!module.visible" (click)="selectSectionOrModule($event, section.id, module.id)"
button>
<ion-item class="module" [class.item-dimmed]="!module.visible"
(click)="selectSectionOrModule($event, section.id, module.id)" button>
<ion-icon class="completioninfo completion_none" name="" *ngIf="module.completionStatus === undefined"
slot="start" aria-hidden="true"></ion-icon>
<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;
}
ion-item::part(native) {
ion-item.module::part(native) {
--padding-start: 0;
}
ion-icon {
ion-item.module ion-icon {
margin: 0;
@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>
<th class="core-grades-table-gradeitem ion-text-start" [attr.colspan]="row.colspan">
<ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start"
[name]="row.expanded ? 'fas-chevron-down' : 'fas-chevron-right'" class="expandable-status-icon">
<ion-icon *ngIf="row.expandable && showSummary" aria-hidden="true" slot="start" name="fas-chevron-right"
class="expandable-status-icon" [class.expandable-status-icon-expanded]="row.expanded">
</ion-icon>
<ion-icon *ngIf="row.icon" name="{{row.icon}}" slot="start" [attr.aria-label]="row.iconAlt">
</ion-icon>

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

@ -96,6 +96,11 @@
.expandable-status-icon {
font-size: 14px;
@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.
ion-list {
padding: 0;
padding: 0 !important;
--ion-item-background: transparent;
}
@ -1264,6 +1264,16 @@ ion-item.item.divider {
ion-label h2.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.

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

@ -236,10 +236,6 @@
--background: var(--item-divider-background);
--color: var(--item-divider-color);
--min-height: var(--item-divider-min-height);
.expandable-status-icon {
font-size: 18px;
}
}
--spacer-background: var(--light);
@ -327,6 +323,11 @@
--core-dd-question-radius: 10px;
--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) {
--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))};