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