You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Nothing/src/app/settings/settings.component.html

68 lines
2.7 KiB

<div class="d-flex flex-column settings col">
<div class="row">
<h1>
Settings
<mat-divider></mat-divider>
</h1>
</div>
<div class="row">
<color-picker [placement]="{color: 'bottom'}" [setColor]="configService.config.planBg"
(color)="onPlanColorChange($event)">
Plan window background
</color-picker>
</div>
<div class="row">
<color-picker [placement]="{color: 'bottom'}" [setColor]="configService.config.backdropBg"
(color)="onBackdropColorChange($event)">
Overlay backdrop color
</color-picker>
</div>
<div class="row">
<color-picker [placement]="{color: 'bottom'}" [setColor]="configService.config.noteDefaultFg"
(color)="onNoteColorChange($event)">
Overlay default font color
</color-picker>
</div>
<div class="d-flex flex-row justify-content-between">
<span class="d-block">Auto hide on unfocus</span>
<mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'"
[(ngModel)]="configService.config.hideOnUnfocus"></mat-slide-toggle>
</div>
<div class="row">
<button mat-raised-button color="primary" (click)="rebindOverlayToggle()">
Overlay toggle shortcut: {{configService.config.toggleOverlay}}
</button>
</div>
<div class="row">
<button mat-raised-button color="primary" (click)="rebindPreviousZone()">
Previous zone shortcut: {{configService.config.prev}}
</button>
</div>
<div class="row">
<button mat-raised-button color="primary" (click)="rebindNextZone()">
Next zone shortcut: {{configService.config.next}}
</button>
</div>
<!-- TODO: Better visuals :D -->
<div class="row mt-3">
<mat-form-field appearance="outline">
<mat-label>Number of zones to display</mat-label>
<input matInput type="number" [(ngModel)]="configService.config.numVisible" min="1" max="10" step="1">
</mat-form-field>
</div>
<div class="row">
<mat-form-field appearance="outline">
<mat-label>Offset</mat-label>
<input matInput type="number" [(ngModel)]="configService.config.offset" min="0"
[max]="configService.config.numVisible - 1" step="1">
</mat-form-field>
</div>
<div class="d-flex flex-row justify-content-between">
<span class="d-block">Enable stopwatch</span>
<mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'"
[(ngModel)]="configService.config.enableStopwatch"></mat-slide-toggle>
</div>
</div>