From 5cb0953df7ecdf6980e095df695019d87b1fc31e Mon Sep 17 00:00:00 2001 From: isark Date: Wed, 15 Nov 2023 22:31:43 +0100 Subject: [PATCH] Lots of css changes woohooo --- package.json | 1 + src/app/app.component.html | 22 ++----- src/app/app.component.scss | 11 +--- src/app/app.module.ts | 1 - .../color-picker/color-picker.component.html | 9 ++- .../color-picker/color-picker.component.scss | 36 ++++++++++ .../color-picker/color-picker.component.ts | 18 ++++- .../plan-display/plan-display.component.html | 65 +++++++++++-------- .../plan-display/plan-display.component.scss | 22 +++---- src/app/settings/settings.component.html | 58 ++++++++++++----- src/app/settings/settings.component.scss | 10 ++- src/app/settings/settings.component.ts | 3 +- src/styles.scss | 64 +++++++++++++++--- yarn.lock | 5 ++ 14 files changed, 229 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index 6c1ed4d..10dab03 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@types/markdown-it": "^13.0.0", "@types/natural-compare": "^1.4.1", "angular-resize-event": "^3.2.0", + "bootstrap": "^5.3.2", "fuzzr": "https://github.com/isark2/fuzzr#v0.3.1", "markdown-it": "^13.0.1", "markdown-it-color": "^2.1.1", diff --git a/src/app/app.component.html b/src/app/app.component.html index 4e88ce0..419f9f1 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,24 +1,12 @@ -
- + - - - Settings - - + + - - - Editor - + -
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 627b41c..6bbad82 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -27,15 +27,6 @@ plan-display { flex: 1 1 auto; } -.standalone { - color: black; - -} - -.tab-label { - color: black; -} - .content { height: 100%; display: flex; @@ -46,6 +37,6 @@ mat-tab-group { height: 100%; } -settings { +.settings { height: 100%; } \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5a7abc7..02871b4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -36,7 +36,6 @@ export function initializeApp(configService: ConfigService) { OverlayModule, SettingsComponent, MatTabsModule, - // GemFinderComponent ], providers: [ { diff --git a/src/app/color-picker/color-picker.component.html b/src/app/color-picker/color-picker.component.html index 757429d..95d7e3e 100644 --- a/src/app/color-picker/color-picker.component.html +++ b/src/app/color-picker/color-picker.component.html @@ -1,3 +1,10 @@ - + \ No newline at end of file diff --git a/src/app/color-picker/color-picker.component.scss b/src/app/color-picker/color-picker.component.scss index e69de29..12b9941 100644 --- a/src/app/color-picker/color-picker.component.scss +++ b/src/app/color-picker/color-picker.component.scss @@ -0,0 +1,36 @@ +:host { + box-sizing: border-box; +} +.center { + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +.colorDisplay { + display: inline-block; + width: 20px; + height: 20px; +} + +.text { + display: inline-block +} + +.transparency-grid { + background-image: + linear-gradient(45deg, #808080 25%, transparent 25%), + linear-gradient(-45deg, #808080 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #808080 75%), + linear-gradient(-45deg, transparent 75%, #808080 75%); + background-size: 10px 10px; + background-position: 0 0, 0 5px, 5px -5px, -5px 0px;; +} + +.realBG { + background-color: #fff; + margin-left: 5px; + width: 20px; + height: 20px; +} \ No newline at end of file diff --git a/src/app/color-picker/color-picker.component.ts b/src/app/color-picker/color-picker.component.ts index 130a829..1fbed16 100644 --- a/src/app/color-picker/color-picker.component.ts +++ b/src/app/color-picker/color-picker.component.ts @@ -32,6 +32,8 @@ export class ColorPickerComponent implements AfterViewInit { @Output('color') outColor = new EventEmitter; + underlyingValue?: string; + justSet: boolean = false; @Input('setColor') set color(value: string) { @@ -42,6 +44,16 @@ export class ColorPickerComponent implements AfterViewInit { this.initialColor = value; } + get value () { + if(this.initialColor) { + return this.initialColor; + } + if(this.underlyingValue) { + return this.underlyingValue; + } + return undefined; + } + initialColor?: string; loaded: Subject = new Subject(); @@ -59,12 +71,14 @@ export class ColorPickerComponent implements AfterViewInit { this.justSet = false; return; } + this.underlyingValue = color.hex; return this.outColor.next(color); }, parent: this.clickColorPickerElement?.nativeElement, - color: this.initialColor + color: this.initialColor, }); - }) + }); + this.underlyingValue = this.color; } ngAfterViewInit(): void { diff --git a/src/app/plan-display/plan-display.component.html b/src/app/plan-display/plan-display.component.html index 8c997b3..2d1179d 100644 --- a/src/app/plan-display/plan-display.component.html +++ b/src/app/plan-display/plan-display.component.html @@ -3,49 +3,62 @@
+ [class]="hasWaypoint() ? 'active' : ''" (wheel)="onScroll($event)" #targetRef> - - + + -
{{worldAreaMap!.get(slide.area_key)!.name}}
(W)
+
+ {{worldAreaMap!.get(slide.area_key)!.name}}
(W)
+
- + - + - +
- + - -
-
-
- - -
-
- - - - +
+
+
+
+ + +
+
+ + + + +
+
- - +
\ No newline at end of file diff --git a/src/app/plan-display/plan-display.component.scss b/src/app/plan-display/plan-display.component.scss index 9014692..dcffc37 100644 --- a/src/app/plan-display/plan-display.component.scss +++ b/src/app/plan-display/plan-display.component.scss @@ -74,12 +74,12 @@ notes { ; } -.overlay { - display: grid; - grid-template-columns: 1fr 2fr; - width: 100vw; - height: 100vh; -} +// .overlay { +// display: grid; +// grid-template-columns: 1fr 2fr; +// width: 100vw; +// height: 100vh; +// } .settings-button { position: absolute; @@ -112,11 +112,11 @@ notes { } } -.overlay { - width: 100vw; - height: 100vh; - background-color: rgba(0, 0, 0, 0.5); -} +// .overlay { +// width: 100vw; +// height: 100vh; +// background-color: rgba(0, 0, 0, 0.5); +// } .material-symbols-outlined { font-variation-settings: diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 01e9ad2..8752bf8 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -1,19 +1,43 @@ -
-
- Plan window - background - Overlay - backdrop color - Overlay default font color -
-
- Auto hide on unfocus -
+
+
+
+

+ Settings + +

+
+
+ Plan window + background +
+
+ Overlay + backdrop color +
+
+ Overlay + default + font color - - - +
+
+ 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 37f87b6..f59088f 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -5,9 +5,17 @@ .checkboxes { display: grid; - grid-template-columns: 1fr 10fr; + grid-template-columns: 1fr 10fr; } mat-slide-toggle { color: green; +} + +.row { + --bs-gutter-x: 0; +} + +.settings { + gap: 10px; } \ No newline at end of file diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index 9ae4a8f..79990d1 100644 --- a/src/app/settings/settings.component.ts +++ b/src/app/settings/settings.component.ts @@ -13,11 +13,12 @@ import { MatButtonModule } from '@angular/material/button'; import { ShortcutService } from '../_services/shortcut.service'; import { RecordKeyChord } from '../directives/record-key-chord.directive'; import { Config } from '../_models/generated/Config'; +import { MatDividerModule } from '@angular/material/divider'; @Component({ selector: 'settings', standalone: true, - imports: [CommonModule, FormsModule, ColorPickerComponent, MatSlideToggleModule, MatDialogModule], + imports: [CommonModule, FormsModule, ColorPickerComponent, MatSlideToggleModule, MatDialogModule, MatButtonModule, MatDividerModule], templateUrl: './settings.component.html', styleUrls: ['./settings.component.scss'] }) diff --git a/src/styles.scss b/src/styles.scss index 66b53e0..2c98e4c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,19 +1,63 @@ @use '@angular/material' as mat; +@import 'node_modules/bootstrap/scss/bootstrap-grid.scss'; +@import 'node_modules/bootstrap/scss/bootstrap-utilities.scss'; + @include mat.core(); -$my-primary: mat.define-palette(mat.$indigo-palette, 700); -$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); +$nothing-primary-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 : #000000, + 100 : #000000, + 200 : #ffffff, + 300 : #ffffff, + 400 : #ffffff, + 500 : #ffffff, + 600 : #ffffff, + 700 : #ffffff, + 800 : #ffffff, + 900 : #ffffff, + A100 : #000000, + A200 : #000000, + A400 : #ffffff, + A700 : #ffffff, + ) +); + +$primary: $nothing-primary-map.500; +$accent: mat.$indigo-palette.500; + +$nothing-primary-palette: mat.define-palette($nothing-primary-map, 500); +$nothing-accent-palette: mat.define-palette(mat.$indigo-palette, 800); -$my-theme: mat.define-light-theme(( +$nothing-theme: mat.define-light-theme(( color: ( - primary: $my-primary, - accent: $my-accent, + primary: $nothing-primary-palette, + accent: $nothing-accent-palette, ), density: 0, )); +.mat-primary-on-dark { + --mdc-theme-text-primary-on-background: white; +} +// Emit theme-dependent styles for common features used across multiple components. +@include mat.all-component-themes($nothing-theme); :root { color: #afafaf; @@ -43,8 +87,10 @@ div.picker_wrapper.popup { flex-grow: 1; } -.mat-primary-on-dark { - --mdc-theme-text-primary-on-background: white; +.primary { + background-color: mat.get-color-from-palette($nothing-primary-palette, 500); } -// Emit theme-dependent styles for common features used across multiple components. -@include mat.all-component-themes($my-theme); \ No newline at end of file + +.mat-divider { + --mat-divider-color: mat.get-color-from-palette($nothing-primary-palette, 100); +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index ca4d924..41a6b5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3117,6 +3117,11 @@ boolbase@^1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== +bootstrap@^5.3.2: + version "5.3.2" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.2.tgz#97226583f27aae93b2b28ab23f4c114757ff16ae" + integrity sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"