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

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

@ -1,16 +1,13 @@
<div class="buttons m-2"> <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)="save()">Save plan</button>
<button mat-raised-button color="primary" (click)="openPlan()">Open plan for editing</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> <button mat-raised-button color="primary" (click)="loadBasePlan()">Load base plan preset</button>
</div> </div>
<div cdkDropListGroup *ngIf="areas" class="editor-container">
<div class="row">
</div>
<div class="container"> <div class="d-flex flex-column overflow-hidden p-4">
<div class="row">
<div class="col-6">
<mat-form-field color="accent"> <mat-form-field color="accent">
<mat-label>Area filter</mat-label> <mat-label>Area filter</mat-label>
<input matInput type="text" [(ngModel)]="areaSearchString"> <input matInput type="text" [(ngModel)]="areaSearchString">
@ -20,25 +17,10 @@
<mat-select [(value)]="filterAct"> <mat-select [(value)]="filterAct">
<mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option> <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
</mat-select> </mat-select>
<!-- <select [(ngModel)]="filterAct">
<option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
</select> -->
</mat-form-field> </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> </div>
<div class="col-6">
</div>
<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 <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 end</mat-slide-toggle><mat-slide-toggle color="accent" [(ngModel)]="reverseDisplay">Reverse
display</mat-slide-toggle> display</mat-slide-toggle>
@ -53,14 +35,28 @@
<mat-select [(value)]="planFilterAct"> <mat-select [(value)]="planFilterAct">
<mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option> <mat-option *ngFor="let item of acts" [value]="item">{{item.name}}</mat-option>
</mat-select> </mat-select>
<!-- <select [(ngModel)]="planFilterAct">
<option *ngFor="let item of acts" [ngValue]="item">{{item.name}}</option>
</select> -->
</mat-form-field> </mat-form-field>
</div> </div>
</div>
<div cdkDropListGroup *ngIf="areas" class="row overflow-hidden">
<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>
<div class="col-6 d-flex flex-column h-100">
<h2>Plan</h2> <h2>Plan</h2>
<div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist" <div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list"
(cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD" (cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD"
[cdkDropListEnterPredicate]="canDrop"> [cdkDropListEnterPredicate]="canDrop">
<div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)"> <div class="box" *ngFor="let item of filterPlanElements()" cdkDrag (contextmenu)="addNote($event, item)">
@ -73,10 +69,15 @@
<div class="delete" (click)="remove(item)">+</div> <div class="delete" (click)="remove(item)">+</div>
</div> </div>
</div> </div>
<div cdkDropList [cdkDropListData]="plan.plan" class="list planlist end" <div cdkDropList [cdkDropListData]="plan.plan" class="list end"
style="position: relative;display: flex; flex-direction: column; justify-content: center;" style="position: relative;display: flex; flex-direction: column; justify-content: center;"
(cdkDropListDropped)="dropEndHandler($event)"> (cdkDropListDropped)="dropEndHandler($event)">
<span style="position: absolute; ">Place at end of list</span> <span style="position: absolute; ">Place at end of list</span>
</div> </div>
</div> </div>
</div>
</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) { .list.cdk-drop-list-dragging .box:not(.cdk-drag-placeholder) {
transition: transform 125ms cubic-bezier(0, 0, 0.2, 1); 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 { .right-settings {
gap: 8px; gap: 8px;
} }
Write Preview
Loading…
Cancel
Save