Style disabled UI elements to be clearer

sedwards2009 · Jun 1, 2024 · 8a0f819 · 8a0f819
1 parent 5c189a9
commit 8a0f819
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 8 deletions.
diff --git a/main/resources/theme_ui/DarkTwo/empty.svg b/main/resources/theme_ui/DarkTwo/empty.svg
diff --git a/main/src/ThemeTestUtility.ts b/main/src/ThemeTestUtility.ts
@@ -1,9 +1,10 @@
-import { QApplication, Direction, QMainWindow, QStyleFactory, QWidget, QTextEdit, TextFormat } from "@nodegui/nodegui";
+import { QApplication, Direction, QMainWindow, QStyleFactory, QWidget, QTextEdit, TextFormat, QStylePixelMetric } from "@nodegui/nodegui";
 import { BoxLayout, CheckBox, ComboBox, GridLayout, Label, LineEdit, ProgressBar, PushButton, RadioButton, ScrollArea, SpinBox,
   TabWidget, TextEdit, ToolButton, Widget } from "qt-construct";
 import * as path from "node:path";
-import * as SourceDir from './SourceDir.js';
+import { StyleTweaker } from "nodegui-plugin-style-tweaker";
 
+import * as SourceDir from './SourceDir.js';
 import { createUiStyle } from "./ui/styles/DarkTwo.js";
 import { shrinkWrap } from "./ui/QtConstructExtra.js";
 
@@ -30,7 +31,6 @@ function main(): void {
   for (const key of QStyleFactory.keys()) {
     console.log(`Style key: ${key}`);
   }
-  QApplication.setStyle(QStyleFactory.create("Windows"));
 
   const win = new QMainWindow();
   win.setWindowTitle("Theme Test");
@@ -47,6 +47,19 @@ function main(): void {
   }
   uiStyle.getApplicationStyleSheet(guiScale, dpi);  // Force DarkTwo it init internally.
 
+  const tweakerStyle = new StyleTweaker("Windows");
+
+  const iconSize = uiStyle.getMenuIconSize(guiScale, dpi);
+  const buttonIconSize = uiStyle.getButtonIconSize(guiScale, dpi);
+  tweakerStyle.setPixelMetric(QStylePixelMetric.PM_SmallIconSize, iconSize);
+  tweakerStyle.setPixelMetric(QStylePixelMetric.PM_ToolBarIconSize, iconSize);
+  tweakerStyle.setPixelMetric(QStylePixelMetric.PM_ButtonIconSize, buttonIconSize);
+  tweakerStyle.setPixelMetric(QStylePixelMetric.PM_TabCloseIndicatorHeight, iconSize);
+  tweakerStyle.setPixelMetric(QStylePixelMetric.PM_TabCloseIndicatorWidth, iconSize);
+  tweakerStyle.setStyleHint(0 /* QStyle::SH_EtchDisabledText */, 0);
+
+  QApplication.setStyle(tweakerStyle);
+
   let stylesheetEdit: QTextEdit = null;
 
   centralWidget = ScrollArea({
@@ -90,9 +103,10 @@ function main(): void {
           ToolButton({text: "QToolButton Danger", cssClass: ["danger"]}),
 
           LineEdit({text: "Some text input"}),
-
+          LineEdit({text: "Disabled text input", enabled: false}),
 
           ComboBox({items: ["One", "Two"]}),
+          ComboBox({items: ["Disabled One", "Disabled Two"], enabled: false}),
 
           Widget({layout:
             BoxLayout({
@@ -219,6 +233,7 @@ function main(): void {
           ),
 
           SpinBox({suffix: " frames", minimum: 0, maximum: 1000}),
+          SpinBox({suffix: " disabled", minimum: 0, maximum: 1000, enabled: false}),
 
           ProgressBar({
             minimum: 0,

diff --git a/main/src/ui/styles/DarkTwo.ts b/main/src/ui/styles/DarkTwo.ts
@@ -60,6 +60,7 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
     const textSelectedColor = "#ffffff";
     const backgroundHighlightColor = rgba(255, 255, 255, 0.07);
 
+
     const textMatchColor = accentOnlyTextColor;
     styleTextMatchColor = textMatchColor;
 
@@ -74,6 +75,7 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
 
     const textColorSubtle = mix(textColor, backgroundColor, 20);
     const textMutedColor = mix(textColor, backgroundColor, 75);
+    const textDisabledColor = darken(backgroundColor, 6);
 
     const brandPrimary = "hsl(219,  79%, 66%)";
     const brandSuccess = "hsl(140,  44%, 62%)";
@@ -279,11 +281,12 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
   }
 
   QCheckBox::disabled {
-    color: ${textColorSubtle};
+    color: ${textDisabledColor};
+    text-decoration: none;
   }
 
   QCheckBox::indicator::disabled {
-    background-color: ${toHex(componentBackgroundColor)};
+    background-color: ${textDisabledColor};
   }
   `;
     }
@@ -311,6 +314,12 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
     border-color: ${accentColor};
   }
 
+  QComboBox:disabled {
+    color: ${textDisabledColor};
+    border-color: ${toHex(componentBackgroundColor)};
+    background-color: ${toHex(componentBackgroundColor)};
+  }
+
   QComboBox::drop-down {
     subcontrol-origin: padding;
     subcontrol-position: top right;
@@ -331,6 +340,10 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
     image: url(${resourceDirectory}/combobox_arrow.svg);
   }
 
+  QComboBox::down-arrow:disabled {
+    image: url(${resourceDirectory}/empty.svg);
+  }
+
   QComboBox::down-arrow:hover {
     image: url(${resourceDirectory}/combobox_arrow_hover.svg);
   }
@@ -501,9 +514,16 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
     border-radius: ${borderRadius};
   }
 
+  QLineEdit:disabled, QSpinBox:disabled {
+    color: ${textDisabledColor};
+    border-color: ${toHex(componentBackgroundColor)};
+    background-color: ${toHex(componentBackgroundColor)};
+  }
+
   QLineEdit[cssClass~="warning"], QSpinBox[cssClass~="warning"] {
     border: ${inputBorderWidth} solid ${brandWarning};
   }
+
   QLineEdit[cssClass~="warning"]:focus, QSpinBox[cssClass~="warning"]:focus {
     border: ${inputBorderWidth} solid ${brandWarning};
   }
@@ -692,8 +712,9 @@ export function createUiStyle(resourceDirectory: string, titleBarStyle: TitleBar
   }
 
   ${baseRule}:disabled {
-    color: ${mix(textHighlightColor, backgroundColor, 65)};
-    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 ${toHex(mix(lighten(color, 2), backgroundColor, 65))}, stop: 1 ${toHex(mix(color, backgroundColor, 65))});
+    color: ${textDisabledColor};
+    background-color: ${toHex(componentBackgroundColor)};
+    border-color: ${toHex(componentBackgroundColor)};
   }
 
   ${baseRule}:hover:disabled {