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

MOBILE-4470 styles: Universalize reduced margins on popover icons

main
Pau Ferrer Ocaña 2024-05-15 10:39:35 +02:00
parent 874d1ebee6
commit 829cb8bc9b
4 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/mod/data/components/actionsmenu/actionsmenu.html
View File

@ -1,6 +1,6 @@
<ion-content>
<ion-list>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
<ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
[attr.aria-label]="item.text | translate">
<ion-icon [name]="item.icon" slot="start" aria-hidden="true" />
<ion-label>

15
src/core/features/courses/components/course-options-menu/core-courses-course-options-menu.html
View File

@ -1,41 +1,38 @@
<ion-content>
<ion-list>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('download')" *ngIf="downloadCourseEnabled"
[detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
<ion-icon *ngIf="!prefetch.loading" [name]="prefetch.icon" slot="start" aria-hidden="true" />
<ion-spinner *ngIf="prefetch.loading" slot="start" [attr.aria-label]="'core.loading' | translate" />
<ion-label>
<p class="item-heading">{{ prefetch.statusTranslatable | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('delete')" [detail]="false"
<ion-item button class="ion-text-wrap" (click)="action('delete')" [detail]="false"
*ngIf="prefetch.status === 'downloaded' || prefetch.status === 'outdated'">
<ion-icon name="fas-trash" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'addon.storagemanager.deletedata' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
<ion-icon name="fas-eye" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'core.courses.hidecourse' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
<ion-icon name="fas-eye-slash" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'core.courses.show' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('favourite')" *ngIf="!course.isfavourite"
[detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
<ion-icon name="fas-star" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'core.courses.addtofavourites' | translate }}</p>
</ion-label>
</ion-item>
<ion-item button class="ion-text-wrap icon-margin-reduced" (click)="action('unfavourite')" *ngIf="course.isfavourite"
[detail]="false">
<ion-item button class="ion-text-wrap" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
<ion-icon name="far-star" slot="start" aria-hidden="true" />
<ion-label>
<p class="item-heading">{{ 'core.courses.removefromfavourites' | translate }}</p>

8
src/theme/components/ion-item.scss
View File

@ -47,12 +47,6 @@ ion-item.item {
&.item-has-interactive-control:focus-within {
@include core-focus-outline();
}
&.icon-margin-reduced {
[slot=start] {
@include margin-horizontal(null, var(--mdl-spacing-4));
}
}
}
// Fake item.
@ -167,6 +161,7 @@ ion-item .in-item {
text-overflow: inherit;
overflow: inherit;
white-space: inherit;
--color: initial;
color: var(--color);
@ -203,6 +198,7 @@ ion-item > .in-item,
.item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label),
ion-toggle.ion-text-wrap::part(label),
.item.ion-text-wrap > ion-toggle::part(label),
.item.ion-text-wrap > ion-input > label,
ion-input.ion-text-wrap > label {
white-space: normal;

7
src/theme/components/ion-popover.scss
View File

@ -25,4 +25,11 @@ ion-popover {
white-space: normal;
}
}
ion-item {
[slot=start] {
@include margin-horizontal(null, var(--mdl-spacing-4));
}
}
}