Theme picker window

tillvit · Sep 19, 2024 · 5075c7a · 5075c7a
1 parent f664bf6
commit 5075c7a
Show file tree

Hide file tree

Showing 7 changed files with 491 additions and 64 deletions.
diff --git a/app/index.css b/app/index.css
@@ -486,7 +486,8 @@ button:disabled {
   overflow: auto;
   padding: 5px;
 }
-.file-options {
+.file-options,
+.theme-tray {
   display: flex;
   flex-direction: row;
   column-gap: 5px;
@@ -1944,6 +1945,10 @@ input[type="range"] {
   gap: 10px;
 }
 
+input[type="text"].pref-search-bar {
+  flex: 0;
+}
+
 .pref-scrollers {
   display: flex;
   gap: 20px;
@@ -2761,6 +2766,7 @@ input[type="color"] {
   height: 250px;
   position: relative;
   border-radius: 5px;
+  color: white;
 }
 
 .noteskin-cell img {
@@ -2874,7 +2880,8 @@ input[type="color"] {
   width: 24px;
   height: 24px;
   border-radius: 3px;
-  border: 1px solid var(--input-border);
+  border: 1px solid rgb(111, 111, 111);
+  overflow: hidden;
 }
 
 .color-picker:hover:not(:active) {
@@ -2909,7 +2916,6 @@ input[type="color"] {
 
 .animated .color-picker-popup {
   animation: 0.1s popup-enter cubic-bezier(0.47, 0.02, 0, 0.95) forwards;
-  /* transition: 0.2s cubic-bezier(0.47, 0.02, 0, 0.95); */
 }
 
 .animated .color-picker-popup.exiting {
@@ -3037,3 +3043,58 @@ input[type="color"] {
 .color-picker-popup .color-picker-transparent {
   flex: 1;
 }
+
+.theme-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  width: 100%;
+  gap: 5px;
+  padding: 10px;
+  background: var(--secondary-bg);
+  border: 1px solid var(--secondary-border);
+  margin-top: 10px;
+  overflow: auto;
+  flex: 1;
+  border-radius: 5px 5px 0 0;
+}
+
+.theme-cell {
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 5px;
+  border-radius: 5px;
+  height: fit-content;
+  min-width: 0;
+}
+
+.theme-title {
+  text-align: center !important;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.theme-cell:hover:not(.selected) {
+  background: var(--secondary-bg-hover);
+}
+
+.theme-cell.selected {
+  background: var(--secondary-bg-active);
+}
+
+.animated .theme-cell {
+  transition: 0.2s cubic-bezier(0.47, 0.02, 0, 0.95);
+}
+
+.theme-preview-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 66px;
+  height: 66px;
+  border: 1px solid rgb(0, 0, 0, 0.5);
+  border-radius: 5px;
+  overflow: hidden;
+}
diff --git a/app/src/data/KeybindData.ts b/app/src/data/KeybindData.ts
@@ -13,7 +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 { ThemeWindow } from "../gui/window/ThemeWindow"
+import { ThemeSelectionWindow } from "../gui/window/ThemeSelectionWindow"
 import { TimingDataWindow } from "../gui/window/TimingDataWindow"
 import { UserOptionsWindow } from "../gui/window/UserOptionsWindow"
 import { ActionHistory } from "../util/ActionHistory"
@@ -721,7 +721,7 @@ export const KEYBIND_DATA: { [key: string]: Keybind } = {
     combos: [],
     disabled: () => !Flags.openWindows || !Flags.openWindows,
     callback: app => {
-      app.windowManager.openWindow(new ThemeWindow(app))
+      app.windowManager.openWindow(new ThemeSelectionWindow(app))
     },
   },
   convertHoldsRolls: {

diff --git a/app/src/data/ThemeData.ts b/app/src/data/ThemeData.ts
@@ -1,5 +1,5 @@
 import { Color } from "pixi.js"
-import { ThemeWindow } from "../gui/window/ThemeWindow"
+import { ThemeEditorWindow } from "../gui/window/ThemeEditorWindow"
 
 export const THEME_VAR_WHITELIST = [
   "accent-color",
@@ -48,88 +48,100 @@ export type ThemeGroup = {
   }[]
 }
 
+export const THEME_GRID_PROPS: ThemeProperty[] = [
+  "primary-bg",
+  "secondary-bg",
+  "text-color",
+  "accent-color",
+  "widget-bg",
+  "editor-bg",
+  "editable-overlay-active",
+  "input-bg",
+  "window-bg",
+]
+
 export const THEME_GROUPS: ThemeGroup[] = [
   {
-    name: "main",
+    name: "primary-bg",
     ids: [
       {
-        id: "accent-color",
-        label: "accent-color",
+        id: "primary-bg",
+        label: "base",
       },
       {
-        id: "widget-bg",
-        label: "widget-bg",
+        id: "primary-bg-active",
+        label: "active",
       },
       {
-        id: "tooltip-bg",
-        label: "tooltip-bg",
+        id: "primary-bg-hover",
+        label: "hover",
       },
       {
-        id: "editor-bg",
-        label: "editor-bg",
+        id: "primary-border",
+        label: "border",
       },
     ],
   },
   {
-    name: "text-color",
+    name: "secondary-bg",
     ids: [
       {
-        id: "text-color",
-        label: "primary",
+        id: "secondary-bg",
+        label: "base",
       },
       {
-        id: "text-color-secondary",
-        label: "secondary",
+        id: "secondary-bg-active",
+        label: "active",
       },
       {
-        id: "text-color-detail",
-        label: "detail",
+        id: "secondary-bg-hover",
+        label: "hover",
       },
       {
-        id: "text-color-disabled",
-        label: "disabled",
+        id: "secondary-border",
+        label: "border",
       },
     ],
   },
   {
-    name: "primary-bg",
+    name: "text-color",
     ids: [
       {
-        id: "primary-bg",
-        label: "base",
+        id: "text-color",
+        label: "primary",
       },
       {
-        id: "primary-bg-active",
-        label: "active",
+        id: "text-color-secondary",
+        label: "secondary",
       },
       {
-        id: "primary-bg-hover",
-        label: "hover",
+        id: "text-color-detail",
+        label: "detail",
       },
       {
-        id: "primary-border",
-        label: "border",
+        id: "text-color-disabled",
+        label: "disabled",
       },
     ],
   },
   {
-    name: "secondary-bg",
+    name: "other",
     ids: [
       {
-        id: "secondary-bg",
-        label: "base",
+        id: "accent-color",
+        label: "accent-color",
       },
       {
-        id: "secondary-bg-active",
-        label: "active",
+        id: "widget-bg",
+        label: "widget-bg",
       },
       {
-        id: "secondary-bg-hover",
-        label: "hover",
+        id: "tooltip-bg",
+        label: "tooltip-bg",
       },
       {
-        id: "secondary-border",
-        label: "border",
+        id: "editor-bg",
+        label: "editor-bg",
       },
     ],
   },
@@ -230,7 +242,7 @@ export const THEME_PROPERTY_DESCRIPTIONS: {
 }
 
 export type ThemeColorLinks = {
-  [key in ThemeProperty]?: (this: ThemeWindow, c: Color) => Color
+  [key in ThemeProperty]?: (this: ThemeEditorWindow, c: Color) => Color
 }
 
 export const THEME_GENERATOR_LINKS: {

diff --git a/app/src/gui/window/ThemeWindow.ts → app/src/gui/window/ThemeEditorWindow.ts b/app/src/gui/window/ThemeWindow.ts → app/src/gui/window/ThemeEditorWindow.ts
@@ -11,24 +11,27 @@ import {
 } from "../../data/ThemeData"
 import { add, lighten } from "../../util/Color"
 import { EventHandler } from "../../util/EventHandler"
+import { Options } from "../../util/Options"
 import { Themes } from "../../util/Theme"
 import { ColorPicker } from "../element/ColorPicker"
 import { Icons } from "../Icons"
+import { ThemeSelectionWindow } from "./ThemeSelectionWindow"
 import { Window } from "./Window"
 
-export class ThemeWindow extends Window {
+export class ThemeEditorWindow extends Window {
   app: App
 
   private pickers: Record<string, HTMLDivElement> = {}
   private handlers: ((...args: any[]) => void)[] = []
-  private static linkBlacklist = new Set<ThemeProperty>()
+  private linkBlacklist = new Set<ThemeProperty>()
 
   constructor(app: App) {
     super({
-      title: "scufed teheme enditor",
+      title: "Theme Color Editor",
       width: 500,
       height: 400,
-      win_id: "theme_window",
+      win_id: "theme-editor",
+      disableClose: true,
     })
     this.app = app
     this.initView()
@@ -47,7 +50,36 @@ export class ThemeWindow extends Window {
       colorGrid.appendChild(this.createGroup(g))
     })
 
-    padding.appendChild(colorGrid)
+    const menu_options = document.createElement("div")
+    menu_options.classList.add("menu-options")
+
+    const menu_options_left = document.createElement("div")
+    menu_options_left.classList.add("menu-left")
+    const menu_options_right = document.createElement("div")
+    menu_options_right.classList.add("menu-right")
+    menu_options.appendChild(menu_options_left)
+    menu_options.appendChild(menu_options_right)
+
+    const cancel = document.createElement("button")
+    cancel.innerText = "Cancel"
+    cancel.onclick = () => {
+      this.closeWindow()
+      Themes.loadTheme(Options.general.theme)
+      this.app.windowManager.openWindow(new ThemeSelectionWindow(this.app))
+    }
+    menu_options_left.appendChild(cancel)
+
+    const create_btn = document.createElement("button")
+    create_btn.innerText = "Save"
+    create_btn.classList.add("confirm")
+    create_btn.onclick = () => {
+      Themes.setUserTheme(Options.general.theme, Themes.getCurrentTheme())
+      Themes.loadTheme(Options.general.theme)
+      this.app.windowManager.openWindow(new ThemeSelectionWindow(this.app))
+    }
+    menu_options_right.appendChild(create_btn)
+
+    padding.replaceChildren(colorGrid, menu_options)
 
     this.viewElement.appendChild(padding)
   }
@@ -94,7 +126,7 @@ export class ThemeWindow extends Window {
     if (links) {
       container.onmouseover = () => {
         Object.keys(links).forEach(key => {
-          if (ThemeWindow.linkBlacklist.has(key as ThemeProperty)) return
+          if (this.linkBlacklist.has(key as ThemeProperty)) return
           this.pickers[key].classList.add("linked")
         })
       }
@@ -132,9 +164,9 @@ export class ThemeWindow extends Window {
 
       const update = () => {
         if (currentValue) {
-          ThemeWindow.linkBlacklist.delete(opt.id)
+          this.linkBlacklist.delete(opt.id)
         } else {
-          ThemeWindow.linkBlacklist.add(opt.id)
+          this.linkBlacklist.add(opt.id)
         }
         on.style.display = currentValue ? "" : "none"
         off.style.display = currentValue ? "none" : ""
@@ -214,7 +246,7 @@ export class ThemeWindow extends Window {
       const links = THEME_GENERATOR_LINKS[currentId]
       if (!links) continue
       for (const [id, transform] of Object.entries(links)) {
-        if (ThemeWindow.linkBlacklist.has(id as ThemeProperty)) continue
+        if (this.linkBlacklist.has(id as ThemeProperty)) continue
         if (visited.has(id)) continue
         theme[id as ThemeProperty] = transform.bind(this)(theme[currentId])
         queue.push(id as ThemeProperty)