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

MOBILE-4470 chore: Improve context menu margins and sizes

main
Pau Ferrer Ocaña 2024-05-09 10:33:42 +02:00
parent a0225d3ae5
commit cdcb2f77a6
4 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
<ion-content>
<ion-list>
<ion-item button class="ion-text-wrap" (click)="onItemClick(item)" *ngFor="let item of items" [detail]="false"
<ion-item button class="ion-text-wrap icon-margin-reduced" (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>
<p class="item-heading">{{ item.text | translate }}</p>
</ion-label>
<ion-icon [name]="item.icon" slot="end" aria-hidden="true" />
</ion-item>
</ion-list>

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

@ -1,38 +1,41 @@
<ion-content>
<ion-list>
<ion-item button class="ion-text-wrap" (click)="action('download')" *ngIf="downloadCourseEnabled" [detail]="false">
<ion-item button class="ion-text-wrap icon-margin-reduced" (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" (click)="action('delete')" [detail]="false"
<ion-item button class="ion-text-wrap icon-margin-reduced" (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" (click)="action('hide')" *ngIf="!course.hidden" [detail]="false">
<ion-item button class="ion-text-wrap icon-margin-reduced" (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" (click)="action('show')" *ngIf="course.hidden" [detail]="false">
<ion-item button class="ion-text-wrap icon-margin-reduced" (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" (click)="action('favourite')" *ngIf="!course.isfavourite" [detail]="false">
<ion-item button class="ion-text-wrap icon-margin-reduced" (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" (click)="action('unfavourite')" *ngIf="course.isfavourite" [detail]="false">
<ion-item button class="ion-text-wrap icon-margin-reduced" (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>

4
src/core/features/search/components/global-search-filters/global-search-filters.html
View File

@ -19,7 +19,7 @@
<core-spacer />
<ion-item class="ion-text-wrap help">
<ion-label>
{{ 'core.search.filtercategories' | translate }}
<p class="item-heading">{{ 'core.search.filtercategories' | translate }}</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap">
@ -37,7 +37,7 @@
<core-spacer />
<ion-item class="ion-text-wrap help">
<ion-label>
{{ 'core.search.filtercourses' | translate }}
<p class="item-heading">{{ 'core.search.filtercourses' | translate }}</p>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap">

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

@ -51,6 +51,12 @@ 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.
@ -71,7 +77,7 @@ div.fake-ion-item {
font-size: var(--text-size);
font-weight: normal;
text-transform: none;
@include padding(null, 16px, null, 16px);
@include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4));
@include margin(11px, null, 10px, null);
h1 {
@ -247,11 +253,11 @@ ion-item.item.item-file {
}
&.item-directory ion-icon {
@include margin-horizontal(0px, 16px);
@include margin-horizontal(0px, var(--mdl-spacing-4));
}
[slot=end] {
@include margin-horizontal(16px, null);
@include margin-horizontal(var(--mdl-spacing-4), null);
}
}