From 1fc07a639d2685b47737249efc3737a395592489 Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 21:43:24 -0400 Subject: [PATCH 01/11] Prevent opening theme selection when editor is open, close editor window on save --- app/src/data/KeybindData.ts | 4 +++- app/src/gui/window/ThemeEditorWindow.ts | 7 +++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/src/data/KeybindData.ts b/app/src/data/KeybindData.ts index 2d83cb1c..f9f23b12 100644 --- a/app/src/data/KeybindData.ts +++ b/app/src/data/KeybindData.ts @@ -13,6 +13,7 @@ import { NoteskinWindow } from "../gui/window/NoteskinWindow" import { OffsetWindow } from "../gui/window/OffsetWindow" import { SMPropertiesWindow } from "../gui/window/SMPropertiesWindow" import { SyncWindow } from "../gui/window/SyncWindow" +import { ThemeEditorWindow } from "../gui/window/ThemeEditorWindow" import { ThemeSelectionWindow } from "../gui/window/ThemeSelectionWindow" import { TimingDataWindow } from "../gui/window/TimingDataWindow" import { UserOptionsWindow } from "../gui/window/UserOptionsWindow" @@ -719,7 +720,8 @@ export const KEYBIND_DATA: { [key: string]: Keybind } = { label: "Themes...", bindLabel: "Edit themes", combos: [], - disabled: () => !Flags.openWindows || !Flags.openWindows, + disabled: () => + !Flags.openWindows || !Flags.openWindows || ThemeEditorWindow.isOpen, callback: app => { app.windowManager.openWindow(new ThemeSelectionWindow(app)) }, diff --git a/app/src/gui/window/ThemeEditorWindow.ts b/app/src/gui/window/ThemeEditorWindow.ts index feea09bc..bbf6e442 100644 --- a/app/src/gui/window/ThemeEditorWindow.ts +++ b/app/src/gui/window/ThemeEditorWindow.ts @@ -24,6 +24,7 @@ export class ThemeEditorWindow extends Window { private pickers: Record = {} private handlers: ((...args: any[]) => void)[] = [] private linkBlacklist = new Set() + static isOpen = false constructor(app: App) { super({ @@ -35,6 +36,7 @@ export class ThemeEditorWindow extends Window { }) this.app = app this.initView() + ThemeEditorWindow.isOpen = true } initView() { @@ -76,6 +78,7 @@ export class ThemeEditorWindow extends Window { Themes.setUserTheme(Options.general.theme, Themes.getCurrentTheme()) Themes.loadTheme(Options.general.theme) this.app.windowManager.openWindow(new ThemeSelectionWindow(this.app)) + this.closeWindow() } menu_options_right.appendChild(create_btn) @@ -255,4 +258,8 @@ export class ThemeEditorWindow extends Window { } return theme } + + onClose(): void { + ThemeEditorWindow.isOpen = false + } } From 329be62e44489d175baf952cbd4ac0281f12ff3a Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 21:52:57 -0400 Subject: [PATCH 02/11] Fix default alpha links --- app/src/data/ThemeData.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/src/data/ThemeData.ts b/app/src/data/ThemeData.ts index de58d84b..8ddb1016 100644 --- a/app/src/data/ThemeData.ts +++ b/app/src/data/ThemeData.ts @@ -250,7 +250,7 @@ export const THEME_GENERATOR_LINKS: { } = { "primary-bg": { "primary-border": function (c) { - return this.lighten(c, 10).setAlpha(0xbb) + return this.lighten(c, 10).setAlpha(0xbb / 0xff) }, "primary-bg-active": function (c) { return this.lighten(c, 10) @@ -259,7 +259,7 @@ export const THEME_GENERATOR_LINKS: { return this.lighten(c, 30) }, "widget-bg": function (c) { - return this.add(c, -50).setAlpha(0x88) + return this.add(c, -50).setAlpha(0x88 / 0xff) }, "navbar-bg": function (c) { return this.lighten(c, -10) @@ -272,11 +272,11 @@ export const THEME_GENERATOR_LINKS: { }, "input-border": function (c) { return this.average(c) > 0.5 - ? this.add(c, -30).setAlpha(0x77) - : this.add(c, +30).setAlpha(0x77) + ? this.add(c, -30).setAlpha(0x77 / 0xff) + : this.add(c, +30).setAlpha(0x77 / 0xff) }, "tooltip-bg": function (c) { - return this.lighten(c, -10).setAlpha(0xee) + return this.lighten(c, -10).setAlpha(0xee / 0xff) }, "secondary-bg": function (c) { return this.lighten(c, -20) @@ -287,7 +287,7 @@ export const THEME_GENERATOR_LINKS: { }, "secondary-bg": { "secondary-border": function (c) { - return this.lighten(c, 10).setAlpha(0xbb) + return this.lighten(c, 10).setAlpha(0xbb / 0xff) }, "secondary-bg-active": function (c) { return this.lighten(c, 50) @@ -317,7 +317,7 @@ export const THEME_GENERATOR_LINKS: { }, "input-bg": { "input-border": function (c) { - return this.lighten(c, 10).setAlpha(0xbb) + return this.lighten(c, 10).setAlpha(0xbb / 0xff) }, "input-bg-active": function (c) { return this.lighten(c, 50) From ec869d16339e62c02747ff2feb59ac7ed1ecccf8 Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 21:58:33 -0400 Subject: [PATCH 03/11] Rework navbar/window links --- app/src/data/ThemeData.ts | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/app/src/data/ThemeData.ts b/app/src/data/ThemeData.ts index 8ddb1016..52211399 100644 --- a/app/src/data/ThemeData.ts +++ b/app/src/data/ThemeData.ts @@ -145,19 +145,6 @@ export const THEME_GROUPS: ThemeGroup[] = [ }, ], }, - { - name: "navbar", - ids: [ - { - id: "navbar-bg", - label: "active", - }, - { - id: "navbar-bg-inactive", - label: "inactive", - }, - ], - }, { name: "editable-overlay", ids: [ @@ -205,6 +192,19 @@ export const THEME_GROUPS: ThemeGroup[] = [ }, ], }, + { + name: "navbar", + ids: [ + { + id: "navbar-bg", + label: "active", + }, + { + id: "navbar-bg-inactive", + label: "inactive", + }, + ], + }, ] export const THEME_PROPERTY_DESCRIPTIONS: { @@ -261,7 +261,7 @@ export const THEME_GENERATOR_LINKS: { "widget-bg": function (c) { return this.add(c, -50).setAlpha(0x88 / 0xff) }, - "navbar-bg": function (c) { + "window-bg": function (c) { return this.lighten(c, -10) }, "text-color": function (c) { @@ -285,6 +285,11 @@ export const THEME_GENERATOR_LINKS: { return this.lighten(c, -60) }, }, + "window-bg": { + "navbar-bg": function (c) { + return new Color(c) + }, + }, "secondary-bg": { "secondary-border": function (c) { return this.lighten(c, 10).setAlpha(0xbb / 0xff) @@ -300,9 +305,6 @@ export const THEME_GENERATOR_LINKS: { "navbar-bg-inactive": function (c) { return this.lighten(c, -33) }, - "window-bg": function (c) { - return new Color(c) - }, }, "text-color": { "text-color-secondary": function (c) { From 81957e3c5fa6b0d256d4c870fdc7b84dda723aa6 Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:01:52 -0400 Subject: [PATCH 04/11] Change noteskin window selected to accent color --- app/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/index.css b/app/index.css index 12584144..6df09a4b 100644 --- a/app/index.css +++ b/app/index.css @@ -2813,7 +2813,7 @@ input[type="color"] { } .noteskin-cell.selected img { - box-shadow: 0 0 5px 2px rgba(24, 147, 195, 0.6); + box-shadow: 0 0 5px 2px var(--accent-color); filter: brightness(1.2); } From d6c4d76e097935b367252542d53635510b40eb98 Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:22:20 -0400 Subject: [PATCH 05/11] Add border to dropdown-items --- app/index.css | 9 +++++++++ app/src/gui/element/Dropdown.ts | 2 ++ 2 files changed, 11 insertions(+) diff --git a/app/index.css b/app/index.css index 6df09a4b..afc8e0de 100644 --- a/app/index.css +++ b/app/index.css @@ -305,6 +305,10 @@ html { padding: 3px; gap: 3px; } +.navbar:empty { + border-bottom: none; +} + .window:not(.focused) > .navbar { background: var(--navbar-bg-inactive); border-bottom: 1px solid transparent; @@ -1049,6 +1053,11 @@ input.right { box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.6); cursor: pointer; top: 100%; + border: 1px solid var(--input-border); +} + +.dropdown-items.collapsed { + border: none; } .dropdown-right > .dropdown-items { diff --git a/app/src/gui/element/Dropdown.ts b/app/src/gui/element/Dropdown.ts index b1c48f04..3a6a56ca 100644 --- a/app/src/gui/element/Dropdown.ts +++ b/app/src/gui/element/Dropdown.ts @@ -38,6 +38,7 @@ export class Dropdown { } this.createDropdown() if (itemList.style.height == "") { + itemList.classList.remove("collapsed") itemList.style.width = Math.max(itemList.scrollWidth, itemDisplay.clientWidth) + "px" itemList.style.height = itemList.scrollHeight + "px" @@ -46,6 +47,7 @@ export class Dropdown { }) } else { itemList.style.height = "" + itemList.classList.add("collapsed") } } window.addEventListener("click", e => { From c5e3cb6e7a9361154f527b4a4bf641a366065a4b Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:24:35 -0400 Subject: [PATCH 06/11] Fix dropdown transition --- app/index.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/index.css b/app/index.css index afc8e0de..80606935 100644 --- a/app/index.css +++ b/app/index.css @@ -1078,7 +1078,9 @@ input.right { transform: translateY(-10px); animation: 0.2s dropdown-enter cubic-bezier(0.175, 0.885, 0.32, 1.575) forwards; - transition: height 0.07s cubic-bezier(0.215, 0.61, 0.355, 1); + transition-property: height, background; + transition-duration: 0.07s; + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .dropdown-item:hover { From f7d08db0113dccf9368bbcc69fd2618b83ddf6da Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:25:47 -0400 Subject: [PATCH 07/11] Hide window navbar title when title is empty --- app/src/gui/window/Window.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/src/gui/window/Window.ts b/app/src/gui/window/Window.ts index a30c8d8d..739218ee 100644 --- a/app/src/gui/window/Window.ts +++ b/app/src/gui/window/Window.ts @@ -39,7 +39,9 @@ export abstract class Window { viewElement.style.width = options.width + "px" navbarElement.classList.add("navbar") - navbarElement.appendChild(navbarTitleElement) + if (options.title !== "") { + navbarElement.appendChild(navbarTitleElement) + } if (!options.disableClose) { const minimizeElement = Icons.getIcon("MINIMIZE", 15) const closeElement = Icons.getIcon("CLOSE_WINDOW", 15) From 5468675d85960d593b9f91bf02956920d4c2495d Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:26:44 -0400 Subject: [PATCH 08/11] Rename navbar to window-navbar --- app/src/data/ThemeData.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/data/ThemeData.ts b/app/src/data/ThemeData.ts index 52211399..4af83b6f 100644 --- a/app/src/data/ThemeData.ts +++ b/app/src/data/ThemeData.ts @@ -193,7 +193,7 @@ export const THEME_GROUPS: ThemeGroup[] = [ ], }, { - name: "navbar", + name: "window-navbar", ids: [ { id: "navbar-bg", From 04ebdb8756f3605bdedbf668d2b43d3e38d5a505 Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:27:13 -0400 Subject: [PATCH 09/11] Swap ok and cancel for KeyComboWindow --- app/src/gui/window/KeyComboWindow.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/gui/window/KeyComboWindow.ts b/app/src/gui/window/KeyComboWindow.ts index 39bffb75..6bf41ade 100644 --- a/app/src/gui/window/KeyComboWindow.ts +++ b/app/src/gui/window/KeyComboWindow.ts @@ -81,8 +81,8 @@ export class KeyComboWindow extends Window { cancelButton.onclick = () => { this.closeWindow() } - menu_options.append(okButton) menu_options.append(cancelButton) + menu_options.append(okButton) padding.appendChild(menu_options) this.viewElement.appendChild(padding) From 610f78b0dccfa02ebe1774350fa92080376ca0ed Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:30:18 -0400 Subject: [PATCH 10/11] Remove logging in ColorPicker --- app/src/gui/element/ColorPicker.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/src/gui/element/ColorPicker.ts b/app/src/gui/element/ColorPicker.ts index 13e6ae37..a3be2e6b 100644 --- a/app/src/gui/element/ColorPicker.ts +++ b/app/src/gui/element/ColorPicker.ts @@ -594,7 +594,6 @@ export class ColorPicker extends TransparentPreview { const popupY = point.top + point.height + 10 const leftRestriction = 15 const rightRestriction = window.innerWidth - this.popup!.clientWidth - 15 - console.log(popupX, leftRestriction, rightRestriction) this.popup!.style.left = `${clamp( popupX, leftRestriction, @@ -602,7 +601,6 @@ export class ColorPicker extends TransparentPreview { )}px` this.popup!.style.top = `${popupY}px` if (popupY + this.popup!.clientHeight > window.innerHeight - 15) { - console.log("too low") this.popup!.style.transformOrigin = `bottom center` this.popup!.style.top = `${point.top - this.popup!.clientHeight - 10}px` } From 14827944aff7e98ba8a3cf9c1bdfec5a6f4a7a84 Mon Sep 17 00:00:00 2001 From: tillvit Date: Thu, 19 Sep 2024 22:32:16 -0400 Subject: [PATCH 11/11] Remove amethyst, add dusk --- app/src/data/ThemeData.ts | 52 +++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/app/src/data/ThemeData.ts b/app/src/data/ThemeData.ts index 4af83b6f..c0435a0b 100644 --- a/app/src/data/ThemeData.ts +++ b/app/src/data/ThemeData.ts @@ -359,33 +359,33 @@ export const DEFAULT_THEMES: Record = { "tooltip-bg": new Color("rgba(20, 20, 20, 0.95)"), "editor-bg": new Color("#18191c"), }, - amethyst: { - "accent-color": new Color("rgb(23, 131, 208)"), - "text-color": new Color("#e4b3ffff"), - "text-color-secondary": new Color("#e4b3ff78"), - "text-color-detail": new Color("#e4b3ff45"), - "text-color-disabled": new Color("#e4b3ff87"), - "primary-bg": new Color("#3a1a75ff"), - "primary-border": new Color("#3f1c80ba"), - "primary-bg-active": new Color("#3f1c80ff"), - "primary-bg-hover": new Color("#4b2198ff"), - "navbar-bg": new Color("#341769ff"), - "navbar-bg-inactive": new Color("#220f46ff"), - "window-bg": new Color("#341769ff"), + dusk: { + "accent-color": new Color("#b34e97ff"), + "text-color": new Color("#ffffffff"), + "text-color-secondary": new Color("#ffffff77"), + "text-color-detail": new Color("#ffffff44"), + "text-color-disabled": new Color("#ffffff88"), + "primary-bg": new Color("#1b0131ff"), + "primary-border": new Color("#1e0136bb"), + "primary-bg-active": new Color("#2f0057ff"), + "primary-bg-hover": new Color("#230140ff"), + "navbar-bg": new Color("#18012cff"), + "navbar-bg-inactive": new Color("#10011dff"), + "window-bg": new Color("#18012cff"), "window-border": new Color("#00000000"), - "secondary-bg": new Color("#2e145dff"), - "secondary-border": new Color("#321666ba"), - "secondary-bg-active": new Color("#321666ff"), - "secondary-bg-hover": new Color("#3b1a78ff"), - "editable-overlay-hover": new Color("rgb(255, 255, 255, 0.1)"), - "editable-overlay-active": new Color("rgb(255, 255, 255, 0.2)"), - "input-bg": new Color("rgba(35, 35, 35, 0.309)"), - "input-bg-active": new Color("rgba(50, 50, 50, 0.309)"), - "input-bg-hover": new Color("rgba(79, 79, 79, 0.309)"), - "input-border": new Color("#58389378"), - "widget-bg": new Color("#08004387"), - "tooltip-bg": new Color("#341769ed"), - "editor-bg": new Color("#170a2e"), + "secondary-bg": new Color("#160127ff"), + "secondary-border": new Color("#18012bbb"), + "secondary-bg-active": new Color("#310a52ff"), + "secondary-bg-hover": new Color("#25033fff"), + "editable-overlay-hover": new Color("#e79dff1a"), + "editable-overlay-active": new Color("#e79dff33"), + "input-bg": new Color("#000000ff"), + "input-bg-active": new Color("#000000ff"), + "input-bg-hover": new Color("#000000ff"), + "input-border": new Color("#391f4f77"), + "widget-bg": new Color("#00000088"), + "tooltip-bg": new Color("#18012cee"), + "editor-bg": new Color("#0b0014ff"), }, nord: { "accent-color": new Color("#1783d0ff"),