Merge pull request #135 from tillvit/development

Development
tillvit · Sep 20, 2024 · f9e9499 · f9e9499
2 parents 80d5053 + 1482794
commit f9e9499
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 57 deletions.
diff --git 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 {
@@ -1069,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 {
@@ -2813,7 +2824,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);
 }
 

diff --git 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/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: "window-navbar",
+    ids: [
+      {
+        id: "navbar-bg",
+        label: "active",
+      },
+      {
+        id: "navbar-bg-inactive",
+        label: "inactive",
+      },
+    ],
+  },
 ]
 
 export const THEME_PROPERTY_DESCRIPTIONS: {
@@ -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,9 +259,9 @@ 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) {
+    "window-bg": function (c) {
       return this.lighten(c, -10)
     },
     "text-color": function (c) {
@@ -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)
@@ -285,9 +285,14 @@ 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)
+      return this.lighten(c, 10).setAlpha(0xbb / 0xff)
     },
     "secondary-bg-active": function (c) {
       return this.lighten(c, 50)
@@ -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) {
@@ -317,7 +319,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)
@@ -357,33 +359,33 @@ export const DEFAULT_THEMES: Record<string, Theme> = {
     "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"),

diff --git a/app/src/gui/element/ColorPicker.ts b/app/src/gui/element/ColorPicker.ts
@@ -594,15 +594,13 @@ 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,
       rightRestriction
     )}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`
     }

diff --git a/app/src/gui/element/Dropdown.ts b/app/src/gui/element/Dropdown.ts
@@ -38,6 +38,7 @@ export class Dropdown<T> {
       }
       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<T> {
         })
       } else {
         itemList.style.height = ""
+        itemList.classList.add("collapsed")
       }
     }
     window.addEventListener("click", e => {

diff --git 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)

diff --git 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<string, HTMLDivElement> = {}
   private handlers: ((...args: any[]) => void)[] = []
   private linkBlacklist = new Set<ThemeProperty>()
+  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
+  }
 }
diff --git 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)