From 9f610739ceeeb11e531792d01e7ab859349aec6f Mon Sep 17 00:00:00 2001 From: isark Date: Thu, 16 Nov 2023 22:22:10 +0100 Subject: [PATCH] Lots of design changes --- src-tauri/src/main.rs | 7 +- src/app/app.component.html | 6 +- src/app/app.module.ts | 6 +- src/app/editor/editor.component.html | 93 ++++++++---- src/app/editor/editor.component.scss | 19 ++- src/app/editor/editor.component.ts | 12 +- .../plan-display/plan-display.component.html | 10 +- src/app/scss/_palette.scss | 136 +++++++++++++----- src/app/scss/_theming.scss | 2 + src/app/settings/bind-dialog.html | 10 +- src/app/settings/settings.component.html | 78 +++++----- src/app/settings/settings.component.scss | 2 +- src/styles.scss | 25 +++- 13 files changed, 276 insertions(+), 130 deletions(-) diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 4d5a251..8ed83b2 100644 --- a/src-tauri/src/main.rs +++ b/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::>().send(overlay::State::Interactable {}.into()).ok(); + } _ => {} }, _ => {} diff --git a/src/app/app.component.html b/src/app/app.component.html index 3770aad..5a71670 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,7 +2,11 @@ - +
+
+ +
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 02871b4..0790f24 100644 --- a/src/app/app.module.ts +++ b/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], }) diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html index 191b275..27737ab 100644 --- a/src/app/editor/editor.component.html +++ b/src/app/editor/editor.component.html @@ -1,46 +1,81 @@ -
- - - +
+ + +
+ +
+ +
+
- Area filter - Act filter + + Area filter + + + + Act filter + + {{item.name}} + + + +

Campaign zones

-
-
{{item.name}}
-
Act {{item.act}}
-
+
+
{{item.name}}
+
Act {{item.act}}
+
+ +
- Auto scroll to end on add to end - Reverse display: - - Area filter - Act filter +
+ Auto scroll to end on add to + endReverse + display + + + + Area filter + + + + Act filter + + {{item.name}} + + + +
+

Plan

-
-
-
-
{{areasMap?.get(item.area_key)?.name}}
-
Act {{areasMap?.get(item.area_key)?.act}}
-
-
(Note)
-
#{{planIndexOf(item)}}
-
+
+
+
+
+
{{areasMap?.get(item.area_key)?.name}}
+
Act {{areasMap?.get(item.area_key)?.act}}
+
+
(Note)
+
#{{planIndexOf(item)}}
+
+
-
+
Place at end of list
diff --git a/src/app/editor/editor.component.scss b/src/app/editor/editor.component.scss index ba00717..0b2d620 100644 --- a/src/app/editor/editor.component.scss +++ b/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; - border: solid 1px #ccc; + background: map.get(palette.$nothing-dark-map, 300); + 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; - color: rgba(0, 0, 0, 0.87); + border-bottom: solid 1px map.get(palette.$nothing-dark-map, 50); + 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; @@ -113,4 +114,8 @@ height: 100%; overflow: hidden; justify-content: center; +} + +.right-settings { + gap: 8px; } \ No newline at end of file diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts index eebf53b..4a4d365 100644 --- a/src/app/editor/editor.component.ts +++ b/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 { diff --git a/src/app/plan-display/plan-display.component.html b/src/app/plan-display/plan-display.component.html index 6ffeb75..7b7b054 100644 --- a/src/app/plan-display/plan-display.component.html +++ b/src/app/plan-display/plan-display.component.html @@ -41,11 +41,11 @@ [cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable" [cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
-
-
+
+
- - + +
@@ -55,7 +55,7 @@
- +
diff --git a/src/app/scss/_palette.scss b/src/app/scss/_palette.scss index 2c87b37..0e6836a 100644 --- a/src/app/scss/_palette.scss +++ b/src/app/scss/_palette.scss @@ -28,24 +28,88 @@ $nothing-dark-map: ( A200 : #4da6a6, A400 : #375656, A700 : #334040, - contrast: ( - 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, + contrast: (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, + 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-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), - dialog: map.get($nothing-dark-map, 800), + card: map.get($nothing-dark-map, 400), + 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,22 +129,22 @@ $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: ( - base: white, - divider: $light-dividers, - dividers: $light-dividers, - disabled: $light-disabled-text, - disabled-button: rgba(white, 0.3), - disabled-text: $light-disabled-text, - elevation: black, - hint-text: $light-disabled-text, - secondary-text: $light-secondary-text, - icon: white, - icons: white, - text: white, - slider-min: white, - slider-off: rgba(white, 0.3), - slider-off-active: rgba(white, 0.3), - ); \ No newline at end of file +); + +$nothing-theme-foreground-palette: ( + base: white, + divider: $light-dividers, + dividers: $light-dividers, + disabled: $light-disabled-text, + disabled-button: rgba(white, 0.3), + disabled-text: $light-disabled-text, + elevation: black, + hint-text: $light-disabled-text, + secondary-text: $light-secondary-text, + icon: white, + icons: white, + text: white, + slider-min: white, + slider-off: rgba(white, 0.3), + slider-off-active: rgba(white, 0.3), +); \ No newline at end of file diff --git a/src/app/scss/_theming.scss b/src/app/scss/_theming.scss index 8dd5b72..c7d7c79 100644 --- a/src/app/scss/_theming.scss +++ b/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); diff --git a/src/app/settings/bind-dialog.html b/src/app/settings/bind-dialog.html index 2ca3a4c..282a872 100644 --- a/src/app/settings/bind-dialog.html +++ b/src/app/settings/bind-dialog.html @@ -1,10 +1,12 @@ -
-

What's your favorite animal?

- - data.title +
+

What's your desired key

+
+ + Key
+
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 1f1e7b3..adf3abd 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -1,43 +1,39 @@ -
-
-
-

- Settings - -

-
-
- Plan window - background -
-
- Overlay - backdrop color -
-
- Overlay - default - font color +
+
+

+ Settings + +

+
+
+ Plan window + background +
+
+ Overlay + backdrop color +
+
+ Overlay + default + font color -
-
- Auto hide on unfocus - -
-
- -
-
- -
-
- -
-
+
+
+ Auto hide on unfocus + +
+
+ +
+
+ +
+
+ +
\ No newline at end of file diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index f59088f..9f1985e 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -1,6 +1,6 @@ :host { display: block; - width: fit-content; + // width: fit-content; } .checkboxes { diff --git a/src/styles.scss b/src/styles.scss index 21c9cc7..c7f960c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,8 +7,9 @@ @include mat.core(); -$nothing-primary-palette: mat.define-palette(mat.$indigo-palette, 500); -$nothing-accent-palette: mat.define-palette(mat.$indigo-palette, 200); +$nothing-primary-palette: mat.define-palette(mat.$indigo-palette, 800); +$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; } @@ -59,4 +68,16 @@ 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; } \ No newline at end of file