parent
06f40733ba
commit
9f610739ce
@ -1,46 +1,81 @@
|
||||
<div class="buttons">
|
||||
<button (click)="save()">Save plan</button>
|
||||
<button (click)="openPlan()">Open plan for editing</button>
|
||||
<button (click)="loadBasePlan()">Load base plan preset</button>
|
||||
<div class="buttons m-2">
|
||||
<button mat-raised-button color="primary" (click)="save()">Save plan</button>
|
||||
<button mat-raised-button color="primary" (click)="openPlan()">Open plan for editing</button>
|
||||
<button mat-raised-button color="primary" (click)="loadBasePlan()">Load base plan preset</button>
|
||||
</div>
|
||||
|
||||
<div cdkDropListGroup *ngIf="areas" class="editor-container">
|
||||
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
Area filter<input type="text" [(ngModel)]="areaSearchString">
|
||||
Act filter <select [(ngModel)]="filterAct">
|
||||
<option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
|
||||
</select>
|
||||
<mat-form-field color="accent">
|
||||
<mat-label>Area filter</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="areaSearchString">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Act filter</mat-label>
|
||||
<mat-select [(value)]="filterAct">
|
||||
<mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
|
||||
</mat-select>
|
||||
<!-- <select [(ngModel)]="filterAct">
|
||||
<option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
|
||||
</select> -->
|
||||
</mat-form-field>
|
||||
|
||||
<h2>Campaign zones</h2>
|
||||
<div cdkDropList [cdkDropListData]="filterAreas()" class="list areas" cdkDropListSortingDisabled
|
||||
(cdkDropListDropped)="dropHandler($event)">
|
||||
<div class="box" *ngFor="let item of filterAreas()" cdkDrag (dblclick)="doubleClickArea(item)">
|
||||
<div class="zone-name">{{item.name}}</div>
|
||||
<div class="act">Act {{item.act}}</div>
|
||||
</div>
|
||||
<div class="box" *ngFor="let item of filterAreas()" cdkDrag (dblclick)="doubleClickArea(item)">
|
||||
<div class="zone-name">{{item.name}}</div>
|
||||
<div class="act">Act {{item.act}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<span>Auto scroll to end on add to end<input type="checkbox" [(ngModel)]="autoScrollToEnd"></span>
|
||||
<span>Reverse display: <input type="checkbox" [(ngModel)]="reverseDisplay"></span>
|
||||
<button (click)="clearPlan()">Clear</button>
|
||||
Area filter<input type="text" [(ngModel)]="planSearchString">
|
||||
Act filter<select [(ngModel)]="planFilterAct">
|
||||
<option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
|
||||
</select>
|
||||
<div class="d-flex flex-column right-settings">
|
||||
<mat-slide-toggle color="accent" [(ngModel)]="autoScrollToEnd">Auto scroll to end on add to
|
||||
end</mat-slide-toggle><mat-slide-toggle color="accent" [(ngModel)]="reverseDisplay">Reverse
|
||||
display</mat-slide-toggle>
|
||||
<button mat-stroked-button color="warn" (click)="clearPlan()">Clear</button>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Area filter</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="planSearchString">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<mat-label>Act filter</mat-label>
|
||||
<mat-select [(value)]="planFilterAct">
|
||||
<mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
|
||||
</mat-select>
|
||||
<!-- <select [(ngModel)]="planFilterAct">
|
||||
<option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
|
||||
</select> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<h2>Plan</h2>
|
||||
<div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist" (cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD" [cdkDropListEnterPredicate]="canDrop">
|
||||
<div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)">
|
||||
<div class="content">
|
||||
<div class="zone-name">{{areasMap?.get(item.area_key)?.name}}</div>
|
||||
<div class="act">Act {{areasMap?.get(item.area_key)?.act}}</div>
|
||||
</div>
|
||||
<div *ngIf="item.notes" class="notes">(Note)</div>
|
||||
<div class="index">#{{planIndexOf(item)}}</div>
|
||||
<div class="delete" (click)="remove(item)">+</div>
|
||||
<div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist"
|
||||
(cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD"
|
||||
[cdkDropListEnterPredicate]="canDrop">
|
||||
<div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)">
|
||||
<div class="content">
|
||||
<div class="zone-name">{{areasMap?.get(item.area_key)?.name}}</div>
|
||||
<div class="act">Act {{areasMap?.get(item.area_key)?.act}}</div>
|
||||
</div>
|
||||
<div *ngIf="item.notes" class="notes">(Note)</div>
|
||||
<div class="index">#{{planIndexOf(item)}}</div>
|
||||
<div class="delete" (click)="remove(item)">+</div>
|
||||
</div>
|
||||
</div>
|
||||
<div cdkDropList [cdkDropListData]="plan.plan" class="list planlist end" style="position: relative;display: flex; flex-direction: column; justify-content: center;" (cdkDropListDropped)="dropEndHandler($event)">
|
||||
<div cdkDropList [cdkDropListData]="plan.plan" class="list planlist end"
|
||||
style="position: relative;display: flex; flex-direction: column; justify-content: center;"
|
||||
(cdkDropListDropped)="dropEndHandler($event)">
|
||||
<span style="position: absolute; ">Place at end of list</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,43 +1,39 @@
|
||||
<div class="d-flex w-100 h-100 align-items-center">
|
||||
<div class="d-flex flex-column settings col-xl-4 offset-xl-4 col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-10 offset-sm-1 col-xs-12">
|
||||
<div class="row">
|
||||
<h1>
|
||||
Settings
|
||||
<mat-divider></mat-divider>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
|
||||
background</color-picker>
|
||||
</div>
|
||||
<div class="row">
|
||||
<color-picker [setColor]="configService.config.backdropBg"
|
||||
(color)="onBackdropColorChange($event)">Overlay
|
||||
backdrop color</color-picker>
|
||||
</div>
|
||||
<div class="row">
|
||||
<color-picker [setColor]="configService.config.noteDefaultFg"
|
||||
(color)="onNoteColorChange($event)">Overlay
|
||||
default
|
||||
font color</color-picker>
|
||||
<div class="d-flex flex-column settings col">
|
||||
<div class="row">
|
||||
<h1>
|
||||
Settings
|
||||
<mat-divider></mat-divider>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<color-picker [setColor]="configService.config.planBg" (color)="onPlanColorChange($event)">Plan window
|
||||
background</color-picker>
|
||||
</div>
|
||||
<div class="row">
|
||||
<color-picker [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
|
||||
backdrop color</color-picker>
|
||||
</div>
|
||||
<div class="row">
|
||||
<color-picker [setColor]="configService.config.noteDefaultFg" (color)="onNoteColorChange($event)">Overlay
|
||||
default
|
||||
font color</color-picker>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<mat-slide-toggle [color]="overlayService.isOverlay ? 'primary-on-dark' : 'primary'"
|
||||
[(ngModel)]="configService.config.hideOnUnfocus">Auto hide on unfocus</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>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
Loading…
Reference in new issue