You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
6.0 KiB
HTML
121 lines
6.0 KiB
HTML
<div fxLayout="row" class="padding-gap-x page-title-container">
|
|
<fa-icon [icon]="faTools" class="page-title-img mr-1"></fa-icon>
|
|
<span class="page-title">Application Settings</span>
|
|
</div>
|
|
<div fxLayout="column" class="padding-gap-x settings-container">
|
|
<mat-card>
|
|
<mat-card-content fxLayout="column" class="card-content-gap">
|
|
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="center space-between">
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
|
<div fxFlex="50">
|
|
<div fxFlex="60">
|
|
<h4>Currency Unit{{selNode.settings.currencyUnit}}</h4>
|
|
<mat-select [(ngModel)]="selNode.settings.currencyUnit" placeholder="Currency Unit" (selectionChange)="onCurrencyChange($event)" tabindex="1" required name="currencyUnit">
|
|
<mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
|
|
{{currencyUnit.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="50" *ngIf="selNode.lnImplementation !== 'CLT'">
|
|
<div fxFlex="60">
|
|
<h4>BTC</h4>
|
|
<div fxLayoutAlign="start center">
|
|
<span class="slider-text">{{smallerCurrencyUnit}}</span>
|
|
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.satsToBTC"
|
|
(change)="toggleSettings('satsToBTC')" labelPosition="before"></mat-slide-toggle>
|
|
<span class="slider-text">{{currencyUnit}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="showSettingOption" fxLayout="column" fxLayout.gt-sm="row wrap"
|
|
fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="center space-between" class="mt-4">
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
|
<mat-divider class="mb-2"></mat-divider>
|
|
</div>
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
|
|
<div fxFlex="50">
|
|
<div fxFlex="60">
|
|
<h4>Font Size</h4>
|
|
<mat-radio-group color="primary" [(ngModel)]="selectedFontSize" (change)="chooseFontSize()">
|
|
<mat-radio-button *ngFor="let fontSize of fontSizes" [value]="fontSize">{{fontSize.name}}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="50">
|
|
<h4>Menu</h4>
|
|
<div fxLayoutAlign="start center">
|
|
<span class="slider-text">Horizontal</span>
|
|
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.menu === 'vertical'"
|
|
(change)="toggleSettings('menu', $event)" labelPosition="before"></mat-slide-toggle>
|
|
<span class="slider-text">Vertical</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="showSettingOption && selNode?.settings?.menu === 'vertical'" fxFlex="100" fxLayout="row"
|
|
fxLayoutAlign="space-between center">
|
|
<div fxFlex="50">
|
|
<div fxFlex="60">
|
|
<h4>Menu Type</h4>
|
|
<mat-radio-group color="primary" [(ngModel)]="selectedMenuType" (change)="chooseMenuType()">
|
|
<mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType.name}}</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="25">
|
|
<h4>Side Navigation</h4>
|
|
<div fxLayoutAlign="start center">
|
|
<span class="slider-text">Closed</span>
|
|
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.flgSidenavOpened"
|
|
(change)="toggleSettings('flgSidenavOpened')" labelPosition="before"></mat-slide-toggle>
|
|
<span class="slider-text">Open</span>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="25">
|
|
<h4>Side Navigation</h4>
|
|
<div fxLayoutAlign="start center">
|
|
<span class="slider-text">Unpinned</span>
|
|
<mat-slide-toggle color="primary" [checked]="selNode?.settings?.flgSidenavPinned"
|
|
(change)="toggleSettings('flgSidenavPinned')" labelPosition="before"></mat-slide-toggle>
|
|
<span class="slider-text">Pinned</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="showSettingOption" fxLayout="column" fxLayoutAlign="start space-between" class="mt-4">
|
|
<mat-divider class="mb-2"></mat-divider>
|
|
<div fxLayout="row" fxLayoutAlign="space-between start">
|
|
<div fxFlex="50">
|
|
<div fxFlex="40">
|
|
<h4>Mode</h4>
|
|
<mat-radio-group color="primary" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()">
|
|
<mat-radio-button *ngFor="let themeMode of themeModes" [value]="themeMode">{{themeMode.name}}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
</div>
|
|
<div fxLayout="column" fxFlex="50">
|
|
<h4>Skins</h4>
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
|
|
<span *ngFor="let themeColor of themeColors">
|
|
<div [class]="themeColor" [ngClass]="{'skin': true, 'selected-color': selectedThemeColor === themeColor}" (click)="changeThemeColor(themeColor)"></div>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div fxLayout="row" fxLayoutAlign="start start" class="mt-4">
|
|
<mat-divider class="mb-2"></mat-divider>
|
|
<div class="mt-4">
|
|
<button class="mr-4" fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="primary"
|
|
(click)="onUpdateSettings()" tabindex="12">Update</button>
|
|
<button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="accent" (click)="onResetSettings()"
|
|
tabindex="13">Reset</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div> |