Lots of design changes

src-tauri/src/main.rs

@@ -128,10 +128,12 @@ fn main() {
 
     let settings = CustomMenuItem::new("settings".to_string(), "Settings");
     let editor = CustomMenuItem::new("editor".to_string(), "Plan Editor");
+    let force_show = CustomMenuItem::new("force_show".to_string(), "Force show");
     let exit = CustomMenuItem::new("exit".to_string(), "Exit");
     let tray_menu = SystemTrayMenu::new()
         .add_item(settings)
         .add_item(editor)
+        .add_item(force_show)
         .add_native_item(SystemTrayMenuItem::Separator)
         .add_item(exit);
     let system_tray = SystemTray::new().with_menu(tray_menu);
@@ -181,9 +183,12 @@ fn main() {
                 "editor" | "settings" => {
                     if let Some(window) = app.get_window("Normal") {
                         window.show().ok();
-                        window.emit_to("Normal", "loadTab", id);
+                        window.emit_to("Normal", "loadTab", id).ok();
                     }
                 }
+                "force_show" => {
+                    app.state::<Sender<Event>>().send(overlay::State::Interactable {}.into()).ok();
+                }
                 _ => {}
             },
             _ => {}

src/app/app.component.html

@@ -2,7 +2,11 @@
     <mat-tab-group color="accent" [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
         mat-stretch-tabs="false" class="tabs">
         <mat-tab label="Settings">
+            <div class="d-flex w-100 h-100 align-items-center">
+                <div class="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">
                     <settings class="content h-100 w-100"></settings>
+                </div>
+            </div>
         </mat-tab>
         <mat-tab label="Editor">
             <plan-editor class="content"></plan-editor>

src/app/app.module.ts

@@ -12,7 +12,8 @@ import { EditorComponent } from "./editor/editor.component";
 import { AngularResizeEventModule } from "angular-resize-event";
 import { OverlayModule } from "@angular/cdk/overlay";
 import { SettingsComponent } from "./settings/settings.component";
-import {MatTabsModule} from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MAT_DIALOG_DEFAULT_OPTIONS } from "@angular/material/dialog";
 // import { GemFinderComponent } from "./gem-finder/gem-finder.component";
 
 export function initializeApp(configService: ConfigService) {
@@ -44,7 +45,8 @@ export function initializeApp(configService: ConfigService) {
       useFactory: initializeApp,
       deps: [ConfigService],
       multi: true
-    }
+    },
+    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { panelClass: 'mat-field-inside-dialog-workaround' } },
   ],
   bootstrap: [AppComponent],
 })

src/app/editor/editor.component.html

@@ -1,15 +1,30 @@
-<div class="buttons">
+<div class="buttons m-2">
-<button (click)="save()">Save plan</button>
+  <button mat-raised-button color="primary" (click)="save()">Save plan</button>
-<button (click)="openPlan()">Open plan for editing</button>
+  <button mat-raised-button color="primary" (click)="openPlan()">Open plan for editing</button>
-<button (click)="loadBasePlan()">Load base plan preset</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">
+    <mat-form-field color="accent">
-    Act filter <select [(ngModel)]="filterAct">
+      <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>
+      </select> -->
+    </mat-form-field>
+
     <h2>Campaign zones</h2>
     <div cdkDropList [cdkDropListData]="filterAreas()" class="list areas" cdkDropListSortingDisabled
       (cdkDropListDropped)="dropHandler($event)">
@@ -18,18 +33,36 @@
         <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>
+    <div class="d-flex flex-column right-settings">
-    <span>Reverse display: <input type="checkbox" [(ngModel)]="reverseDisplay"></span>
+      <mat-slide-toggle color="accent" [(ngModel)]="autoScrollToEnd">Auto scroll to end on add to
-    <button (click)="clearPlan()">Clear</button>
+        end</mat-slide-toggle><mat-slide-toggle color="accent" [(ngModel)]="reverseDisplay">Reverse
-    Area filter<input type="text" [(ngModel)]="planSearchString">
+        display</mat-slide-toggle>
-    Act filter<select [(ngModel)]="planFilterAct">
+      <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>
+        </select> -->
+      </mat-form-field>
+    </div>
+
     <h2>Plan</h2>
-    <div cdkDropList #planList [cdkDropListData]="filterPlanElements()" class="list planlist" (cdkDropListDropped)="dropHandler($event)" [cdkDropListDisabled]="disabledPlanDD" [cdkDropListEnterPredicate]="canDrop">
+    <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>
@@ -40,7 +73,9 @@
         <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>

src/app/editor/editor.component.scss

@@ -1,4 +1,5 @@
-:host {}
+@use '/src/app/scss/_palette.scss';
+@use "sass:map";
 
 .container {
   width: 400px;
@@ -11,8 +12,8 @@
 }
 
 .list {
-  background: white;
+  background: map.get(palette.$nothing-dark-map, 300);
-  border: solid 1px #ccc;
+  border: solid 1px map.get(palette.$nothing-dark-map, 50);
   display: block;
   border-radius: 4px;
   min-height: 60px;
@@ -31,14 +32,14 @@
 
 .box {
   position: relative;
-  border-bottom: solid 1px #ccc;
+  border-bottom: solid 1px map.get(palette.$nothing-dark-map, 50);
-  color: rgba(0, 0, 0, 0.87);
+  color: palette.$light-primary-text;
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background-color: white;
+  background-color: map.get(palette.$nothing-dark-map, 400);
   font-size: 14px;
   padding: 20px 20px 20px 5px;
   width: 100%;
@@ -64,7 +65,7 @@
   font-size: 2em;
   color: darken(red, 10%);
   position: absolute;
-  top: 0px;
+  top: 2px;
   right: 13px;
   width: 15px;
   height: 15px;
@@ -114,3 +115,7 @@
   overflow: hidden;
   justify-content: center;
 }
+
+.right-settings {
+  gap: 8px;
+}

src/app/editor/editor.component.ts

@@ -20,6 +20,11 @@ import { PlanService } from '../_services/plan.service';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { EditNotesComponentDialog } from './notes/notes.component';
 import { open } from '@tauri-apps/api/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule} from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 interface Act {
   value: number;
@@ -37,7 +42,12 @@ interface Act {
     CdkDropListGroup,
     CdkDropList,
     CdkDrag,
-    MatDialogModule
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatButtonModule,
+    MatSlideToggleModule
   ],
 })
 export class EditorComponent implements OnInit {

src/app/plan-display/plan-display.component.html

@@ -41,11 +41,11 @@
         [cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable"
         [cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
         <div class="overlay container-fluid vw-100">
-            <div class="row">
+            <div class="row row-cols-2">
-                <div class="planChooser col-3 mt-4">
+                <div class="planChooser col-xs-6 col-sm-6 col-md-4 col-lg-3 col-xl-3">
                     <div>
-                        <button mat-raised-button color="accent" (click)="openDialog()">Browse Plans</button>
+                        <button class="col-xs-6" mat-raised-button color="accent" (click)="openDialog()">Browse Plans</button>
-                        <button mat-raised-button color="accent" (click)="loadBasePlan()">Load base plan</button>
+                        <button class="col-xs-6" mat-raised-button color="accent" (click)="loadBasePlan()">Load base plan</button>
                     </div>
                     <div class="enumerated">
                         <mat-list role="list">
@@ -55,7 +55,7 @@
 
                     </div>
                 </div>
-                <settings class="col offset-3"></settings>
+                <settings class="col-xs-6 col-sm-6 offset-md-3 col-md-5 offset-lg-5 col-lg-4 offset-xl-5 col-xl-4"></settings>
             </div>
             <button mat-icon-button class="exit" *ngIf="planService.currentPlan"
                 (click)="settingsOpen = false"><span>+</span></button>

src/app/scss/_palette.scss

@@ -28,8 +28,39 @@ $nothing-dark-map: (
   A200 : #4da6a6,
   A400 : #375656,
   A700 : #334040,
-  contrast: (
+  contrast: (50 : $dark-primary-text,
-      50 : $dark-primary-text,
+    100 : $dark-primary-text,
+    200 : $light-primary-text,
+    300 : $light-primary-text,
+    400 : $light-primary-text,
+    500 : $light-primary-text,
+    600 : $light-primary-text,
+    700 : $light-primary-text,
+    800 : $light-primary-text,
+    900 : $light-primary-text,
+    A100 : $dark-primary-text,
+    A200 : $dark-primary-text,
+    A400 : $light-primary-text,
+    A700 : $light-primary-text,
+  )
+);
+
+$nothing-dark-map: (
+  50 : #acb7b7,
+  100 : #849393,
+  200 : #687777,
+  300 : #475151,
+  400 : #384040,
+  500 : #2a3030,
+  600 : #1c2020,
+  700 : #0d0f0f,
+  800 : #000000,
+  900 : #000000,
+  A100 : #8ecbcb,
+  A200 : #4da6a6,
+  A400 : #375656,
+  A700 : #334040,
+  contrast: (50 : $dark-primary-text,
     100 : $dark-primary-text,
     200 : $light-primary-text,
     300 : $light-primary-text,
@@ -46,6 +77,39 @@ $nothing-dark-map: (
   )
 );
 
+$nothing-light-map: (
+    50 : #ffffff,
+    100 : #ffffff,
+    200 : #ffffff,
+    300 : #ffffff,
+    400 : #f2f2f2,
+    500 : #e3e3e3,
+    600 : #d4d4d4,
+    700 : #c4c4c4,
+    800 : #b5b5b5,
+    900 : #a6a6a6,
+    A100 : #ffffff,
+    A200 : #ffffff,
+    A400 : #fdfcfc,
+    A700 : #f0efef,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #000000,
+        600 : #000000,
+        700 : #000000,
+        800 : #000000,
+        900 : #000000,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
 
 
 
@@ -54,8 +118,8 @@ $nothing-theme-background-palette: (
   app-bar: map.get($nothing-dark-map, 900),
   background: map.get($nothing-dark-map, 500),
   hover: rgba(white, 0.04),
-  card: map.get($nothing-dark-map, 800),
+  card: map.get($nothing-dark-map, 400),
-  dialog: map.get($nothing-dark-map, 800),
+  dialog: map.get($nothing-dark-map, 500),
   disabled-button: rgba(white, 0.12),
   raised-button: map.get($nothing-dark-map, 800),
   focused-button: $light-focused,
@@ -65,9 +129,9 @@ $nothing-theme-background-palette: (
   unselected-chip: map.get($nothing-dark-map, 700),
   disabled-list-option: #243b53,
   tooltip: map.get($nothing-dark-map, 700),
-  );
+);
 
-  $nothing-theme-foreground-palette: (
+$nothing-theme-foreground-palette: (
   base: white,
   divider: $light-dividers,
   dividers: $light-dividers,
@@ -83,4 +147,4 @@ $nothing-theme-background-palette: (
   slider-min: white,
   slider-off: rgba(white, 0.3),
   slider-off-active: rgba(white, 0.3),
-    );
+);

src/app/scss/_theming.scss

@@ -1,7 +1,9 @@
+@forward 'palette';
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use 'palette';
 
+
 @function define-nothing-theme($config) {
   $theme: mat.define-dark-theme($config);
   $color: map.get($theme, color);

src/app/settings/bind-dialog.html

@@ -1,10 +1,12 @@
-<div mat-dialog-content>
+<div mat-dialog-content class="overflow-visible">
-    <p>What's your favorite animal?</p>
+    <p>What's your desired key</p>
-    <mat-form-field>
+    <div class="container w-100 h-100">
-        <mat-label>data.title</mat-label>
+    <mat-form-field appearance="outline" color="accent">
+        <mat-label>Key</mat-label>
         <input matInput [(ngModel)]="data.chord" readonly RecordKeyChord (chord)="onChord($event)">
     </mat-form-field>
 </div>
+</div>
 
 <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()">Cancel</button>

src/app/settings/settings.component.html

@@ -1,5 +1,4 @@
-<div class="d-flex w-100 h-100 align-items-center">
+<div class="d-flex flex-column settings col">
-        <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
@@ -11,21 +10,19 @@
             background</color-picker>
     </div>
     <div class="row">
-                <color-picker [setColor]="configService.config.backdropBg"
+        <color-picker [setColor]="configService.config.backdropBg" (color)="onBackdropColorChange($event)">Overlay
-                    (color)="onBackdropColorChange($event)">Overlay
             backdrop color</color-picker>
     </div>
     <div class="row">
-                <color-picker [setColor]="configService.config.noteDefaultFg"
+        <color-picker [setColor]="configService.config.noteDefaultFg" (color)="onNoteColorChange($event)">Overlay
-                    (color)="onNoteColorChange($event)">Overlay
             default
             font color</color-picker>
 
     </div>
-            <div class="row">
+    <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">Auto hide on unfocus</mat-slide-toggle>
+            [(ngModel)]="configService.config.hideOnUnfocus"></mat-slide-toggle>
-
     </div>
     <div class="row">
         <button mat-raised-button color="primary" (click)="rebindOverlayToggle()">Overlay toggle shortcut:
@@ -39,5 +36,4 @@
         <button mat-raised-button color="primary" (click)="rebindNextZone()">Next zone shortcut:
             {{configService.config.next}}</button>
     </div>
-        </div>
 </div>

src/app/settings/settings.component.scss

@@ -1,6 +1,6 @@
 :host {
     display: block;
-    width: fit-content;
+    // width: fit-content;
 }
 
 .checkboxes {

src/styles.scss

@@ -7,8 +7,9 @@
 
 @include mat.core();
     
-$nothing-primary-palette: mat.define-palette(mat.$indigo-palette, 500);
+$nothing-primary-palette: mat.define-palette(mat.$indigo-palette, 800);
-$nothing-accent-palette: mat.define-palette(mat.$indigo-palette, 200);
+$nothing-darker-primary-palette: mat.define-palette(mat.$indigo-palette, 900);
+$nothing-accent-palette: mat.define-palette(app.$nothing-light-map, 400);
 
 $nothing-theme: app.define-nothing-theme((
  color: (
@@ -18,6 +19,14 @@ $nothing-theme: app.define-nothing-theme((
 //  density: 0,
 ));
 
+$nothing-darker-theme: app.define-nothing-theme((
+ color: (
+   primary: $nothing-darker-primary-palette,
+   accent: $nothing-accent-palette,
+ )
+//  density: 0,
+));
+
 .mat-primary-on-dark {
   --mdc-theme-text-primary-on-background: white;
 }
@@ -60,3 +69,15 @@ div.picker_wrapper.popup {
 .mat-divider {
   --mat-divider-color: mat.get-color-from-palette($nothing-primary-palette, 100);
 }
+
+.darker-primary {
+  @include mat.all-component-colors($nothing-darker-theme)
+}
+
+.mat-field-inside-dialog-workaround .mat-mdc-dialog-title + .mat-mdc-dialog-content {
+  padding-top: 4.3px;
+}
+
+.mdc-notched-outline__notch {
+  clip-path: none !important;
+}