Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-07 14:02:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: update context menu layout

Browse Source
This commit is contained in:
Rainer Killinger
2021-05-10 15:38:14 +02:00
parent f0a45d1b8e
commit ef87601e84
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/modules/menu/context/context-menu.html
View File

@@ -1,34 +1,35 @@
<ion-menu type="overlay" menuId="context" contentId="data-list" side="end">
<ion-card-header>
<ion-list-header>
<ion-toolbar>
<ion-title>{{'menu.context.title' | translate | titlecase}}</ion-title>
<h3>{{'menu.context.title' | translate | titlecase}}</h3>
</ion-toolbar>
</ion-card-header>
</ion-list-header>
<ion-content>
<!-- Sort Context -->
<ion-radio-group class="context-sort" *ngIf="sortOption">
<ion-list-header>
<ion-icon name="swap"></ion-icon>
<ion-title>{{'menu.context.sort.title' | translate | titlecase}}</ion-title>
</ion-list-header>
<ion-item class="sort-item"
*ngFor="let value of sortOption.values, index as i"
(click)="sortChanged(sortOption, value)">
<ion-label>{{'menu.context.sort.' + value.value | translate | titlecase}}
<span *ngIf="sortOption.value === value.value && value.reversible">
<ion-icon *ngIf="sortOption.reversed" name="arrow-dropdown"></ion-icon>
<ion-icon *ngIf="!sortOption.reversed" name="arrow-dropup"></ion-icon>
</span>
</ion-label>
<ion-radio mode="ios" slot="start" [value]="value.value" [checked]="i == 0">
</ion-radio>
</ion-item>
</ion-radio-group>
<!-- Sort Context -->
<ion-list>
<ion-radio-group class="context-sort" *ngIf="sortOption" [value]="0">
<ion-list-header>
<ion-icon name="swap-vertical-outline"></ion-icon>
<ion-title>{{'menu.context.sort.title' | translate | titlecase}}</ion-title>
</ion-list-header>
<ion-item class="sort-item"
*ngFor="let value of sortOption.values, index as i"
(click)="sortChanged(sortOption, sortOption.values[i])">
<ion-label>{{'menu.context.sort.' + value.value | translate | titlecase}}
<span *ngIf="sortOption.value === value.value && value.reversible">
<ion-icon *ngIf="sortOption.reversed" name="arrow-down-outline"></ion-icon>
<ion-icon *ngIf="!sortOption.reversed" name="arrow-up-outline"></ion-icon>
</span>
</ion-label>
<ion-radio slot="end" [value]="i">
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<!-- Filter Context -->
<div class="context-filter" *ngIf="filterOption">
<ion-list-header>
<ion-icon name="funnel"></ion-icon>
<ion-icon name="filter-outline"></ion-icon>
<ion-title>{{'menu.context.filter.title' | translate | titlecase}}</ion-title>
<ion-button class="resetFilterButton" fill="clear" color="dark" (click)="resetFilter(filterOption)">
<ion-icon name="trash"></ion-icon>
@@ -50,11 +51,10 @@
*ngFor="let bucket of !facet.compact ?
facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets">
<ion-label class="filter-item-label">
({{bucket.count}}) {{facet.field === 'type' ? (getTranslatedPropertyValue(bucket.key, 'type') | titlecase) :
({{bucket.count}}) {{facet.field === 'type' ? (getTranslatedPropertyValue($any(bucket.key), 'type') | titlecase) :
getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key) | titlecase}}
</ion-label>
<ion-checkbox
mode="ios"
[(ngModel)]="bucket.checked"
(ngModelChange)="filterChanged()"
[value]="{field: facet.field, value: bucket.key, onlyOnType: facet.onlyOnType}">