isark
/
Nothing
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 26 Wiki Activity

Editor upgrades, less custom css. More bootstrappy

Browse Source
merge-notes
isark 2 years ago
parent 9f610739ce
commit a14e83f2d8
2 changed files with 69 additions and 78 deletions
Show Stats Download Patch File Download Diff File

137
src/app/editor/editor.component.html
Unescape View File

@ -1,82 +1,83 @@
<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 class="h-100 d-flex flex-column">
<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>
<div class="d-flex flex-column overflow-hidden p-4">
<div class="row">
<div class="col-6">
<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>
</mat-form-field>
</div>
<div class="container">
<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>
<div class="col-6">
<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>
<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>
<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>
</mat-form-field>
</div>
</div>
</div>
</div>
<div cdkDropListGroup *ngIf="areas" class="row overflow-hidden">
<div class="container">
<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>
<div class="col-6 d-flex flex-column h-100">
<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>
</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 class="col-6 d-flex flex-column h-100">
<h2>Plan</h2>
<div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list"
(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 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 *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)">
<span style="position: absolute; ">Place at end of list</span>
</div>
</div>
</div>

10
src/app/editor/editor.component.scss
Unescape View File

@ -106,16 +106,6 @@
.list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder) {
transition: transform 125ms cubic-bezier(0, 0, 0.2, 1);
}
.editor-container {
display: flex;
flex-direction: row;
box-sizing: border-box;
height: 100%;
overflow: hidden;
justify-content: center;
}
.right-settings {
gap: 8px;
}
Write Preview
Loading…
Cancel
Save