Functions, reorganisation, nice stuff.

disorderedmaterials · Apr 25, 2024 · e8abedf · e8abedf
1 parent f78f52a
commit e8abedf
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 93 deletions.
diff --git a/src/gui/qml2/DissolveDark/Button.qml b/src/gui/qml2/DissolveDark/Button.qml
@@ -27,7 +27,7 @@ T.Button {
         icon: control.icon
         text: control.text
         font: Theme.normalFont
-        color: Theme.getTextColour(control)
+        color: Theme.getForegroundColour(control)
     }
 
     background: ButtonPanel {

diff --git a/src/gui/qml2/DissolveDark/ButtonPanel.qml b/src/gui/qml2/DissolveDark/ButtonPanel.qml
@@ -14,17 +14,17 @@ Rectangle {
 
     gradient: {
         if (!control.enabled) { Theme.disabledGradient }
-        else (control.down || control.checked ? Theme.buttonDownGradient : Theme.buttonUpGradient)
+        else (control.down || control.checked ? Theme.controlBackgroundGradient : Theme.controlForegroundGradient)
     }
 
     radius: 2
-    border.color: Theme.mid
+    border.color: Theme.colours.mid
 
     Rectangle {
         x: 1; y: 1
         width: parent.width - 2
         height: parent.height - 2
-        border.color: Theme.background
+        border.color: Theme.colours.background
         color: "transparent"
 
         radius: 2

diff --git a/src/gui/qml2/DissolveDark/CheckBox.qml b/src/gui/qml2/DissolveDark/CheckBox.qml
@@ -29,7 +29,7 @@ T.CheckBox {
 
         text: control.text
         font: Theme.normalFont
-        color: Theme.getTextColour(control)
+        color: Theme.getForegroundColour(control)
         elide: Text.ElideRight
         verticalAlignment: Text.AlignVCenter
     }

diff --git a/src/gui/qml2/DissolveDark/Switch.qml b/src/gui/qml2/DissolveDark/Switch.qml
@@ -29,7 +29,7 @@ T.Switch {
 
         font: Theme.normalFont
         text: control.text
-        color: Theme.getTextColour(control)
+        color: Theme.getForegroundColour(control)
         elide: Text.ElideRight
         verticalAlignment: Text.AlignVCenter
     }

diff --git a/src/gui/qml2/DissolveDark/SwitchIndicator.qml b/src/gui/qml2/DissolveDark/SwitchIndicator.qml
@@ -4,32 +4,19 @@
 import QtQuick
 import QtQuick.Templates as T
 import QtQuick.Controls.impl
-import QtQuick.Controls.Fusion
-import QtQuick.Controls.Fusion.impl
 
 Rectangle {
     id: indicator
 
     property T.AbstractButton control
-    readonly property color pressedColor: Fusion.mergedColors(control.palette.base, control.palette.windowText, 85)
-    readonly property color checkMarkColor: Qt.darker(control.palette.text, 1.2)
 
     implicitWidth: 40
     implicitHeight: 16
 
     radius: 2
-    border.color: Fusion.outline(control.palette)
+    border.color: Theme.colours.mid
 
-    gradient: Gradient {
-        GradientStop {
-            position: 0
-            color: Qt.darker(Fusion.grooveColor(indicator.control.palette), 1.1)
-        }
-        GradientStop {
-            position: 1
-            color: Qt.lighter(Fusion.grooveColor(indicator.control.palette), 1.1)
-        }
-    }
+    gradient: Theme.controlBackgroundGradient
 
     Rectangle {
         x: indicator.control.mirrored ? handle.x : 0
@@ -43,19 +30,10 @@ Rectangle {
         }
 
         radius: 2
-        border.color: Qt.darker(Fusion.highlightedOutline(indicator.control.palette), 1.1)
+        border.color: Theme.colours.mid
         border.width: indicator.control.enabled ? 1 : 0
 
-        gradient: Gradient {
-            GradientStop {
-                position: 0
-                color: Fusion.highlight(indicator.control.palette)
-            }
-            GradientStop {
-                position: 1
-                color: Qt.lighter(Fusion.highlight(indicator.control.palette), 1.2)
-            }
-        }
+        gradient: Theme.controlForegroundGradient
     }
 
     Rectangle {
@@ -66,33 +44,22 @@ Rectangle {
         height: 16
         radius: 2
 
-        gradient: Gradient {
-            GradientStop {
-                position: 0
-                color: Fusion.gradientStart(Fusion.buttonColor(indicator.control.palette,
-                    indicator.control.visualFocus, indicator.control.pressed, indicator.enabled && indicator.control.hovered))
-            }
-            GradientStop {
-                position: 1
-                color: Fusion.gradientStop(Fusion.buttonColor(indicator.control.palette,
-                    indicator.control.visualFocus, indicator.control.pressed, indicator.enabled && indicator.control.hovered))
-            }
-        }
+        gradient: Theme.getForegroundGradient(control)
         border.width: 1
         border.color: "transparent"
 
         Rectangle {
             width: parent.width
             height: parent.height
-            border.color: indicator.control.visualFocus ? Fusion.highlightedOutline(indicator.control.palette) : Fusion.outline(indicator.control.palette)
+            border.color: Theme.getForegroundColour(control)
             color: "transparent"
             radius: 2
 
             Rectangle {
                 x: 1; y: 1
                 width: parent.width - 2
                 height: parent.height - 2
-                border.color: Fusion.innerContrastLine
+                border.color: Theme.colours.mid
                 color: "transparent"
                 radius: 2
             }

diff --git a/src/gui/qml2/DissolveDark/Theme.qml b/src/gui/qml2/DissolveDark/Theme.qml
@@ -14,47 +14,52 @@ QtObject {
         pointSize: 10 * baseSize
     })
 
-    // Core Colour Definitions
-    // -- Constants & Factors
-    property real brightenFactor: 1.2
-    property real darkenFactor: 0.8
-    readonly property real extraDarkenFactor: darkenFactor*darkenFactor
-    // -- Dark
-    property color foreground: "#ddd"
-    property color background: "#101"
-    property color principal: "#313"
-
-    readonly property color normalText: foreground
-    readonly property color highlightedText: Qt.rgba(foreground.r*brightenFactor, foreground.g*brightenFactor, foreground.b*brightenFactor, 1.0)
-    readonly property color disabledText: Qt.rgba(foreground.r*extraDarkenFactor, foreground.g*extraDarkenFactor, foreground.b*extraDarkenFactor, 1.0)
-    readonly property color mid: Qt.rgba(
-        (background.r + principal.r)*0.5,
-        (background.g + principal.g)*0.5,
-        (background.b + principal.b)*0.5,
-        1.0
-    )
-
-    function getTextColour(control){
-            if (!control.enabled) { return Theme.disabledText }
-            else return (control.down || control.checked ? Theme.highlightedText : Theme.normalText)
+    // Choose theme colours (TODO Light / normal version)
+    property ThemeColoursDark colours: ThemeColoursDark {}
+
+    function getForegroundColour(control){
+            if (!control.enabled) { return colours.foregroundDisabled }
+            else return (control.down || control.checked ? colours.foregroundHighlighted : colours.foregroundNormal)
         }
 
+    function getForegroundGradient(control){
+        if (!control.enabled) { return foregroundDisabledGradient }
+        else return (control.down || control.checked ? Theme.foregroundHighlightGradient : Theme.foregroundNormalGradient)
+    }
+
     // Gradients
     property Gradient mainGradient: Gradient {
-        GradientStop { position: 0.0; color: background }
-        GradientStop { position: 0.9; color: background }
-        GradientStop { position: 1.0; color: principal }
+        GradientStop { position: 0.0; color: colours.background }
+        GradientStop { position: 0.9; color: colours.background }
+        GradientStop { position: 1.0; color: colours.principal }
+    }
+    property Gradient foregroundNormalGradient: Gradient {
+        GradientStop { position: 0.0; color: colours.foregroundNormal }
+        GradientStop { position: 1.0; color: colours.foregroundDisabled }
+    }
+    property Gradient foregroundHighlightGradient: Gradient {
+        GradientStop { position: 0.0; color: colours.foregroundNormal }
+        GradientStop { position: 1.0; color: colours.foregroundHighlighted }
+    }
+    property Gradient foregroundDisabledGradient: Gradient {
+        GradientStop { position: 0.0; color: colours.foregroundDisabled }
+        GradientStop { position: 1.0; color: colours.background }
     }
     property Gradient disabledGradient: Gradient {
-        GradientStop { position: 0.0; color: Qt.rgba(principal.r*extraDarkenFactor, principal.g*extraDarkenFactor, principal.b*extraDarkenFactor, 1.0) }
-        GradientStop { position: 1.0; color: background }
+        GradientStop { position: 0.0; color: colours.extraDark(colours.principal) }
+        GradientStop { position: 1.0; color: colours.background }
     }
-    property Gradient buttonUpGradient: Gradient {
-        GradientStop { position: 0.0; color: Qt.rgba(principal.r*brightenFactor, principal.g*brightenFactor, principal.b*brightenFactor, 1.0) }
-        GradientStop { position: 1.0; color: Qt.rgba(principal.r*darkenFactor, principal.g*darkenFactor, principal.b*darkenFactor, 1.0) }
+    property Gradient controlForegroundGradient: Gradient {
+        GradientStop { position: 0.0; color: colours.brighter(colours.principal) }
+        GradientStop { position: 1.0; color: colours.darker(colours.principal) }
     }
-    property Gradient buttonDownGradient: Gradient {
-        GradientStop { position: 0.0; color: Qt.rgba(principal.r*darkenFactor, principal.g*darkenFactor, principal.b*darkenFactor, 1.0) }
-        GradientStop { position: 1.0; color: Qt.rgba(principal.r*extraDarkenFactor, principal.g*extraDarkenFactor, principal.b*extraDarkenFactor, 1.0) }
+    property Gradient controlBackgroundGradient: Gradient {
+        GradientStop { position: 0.0; color: colours.darker(colours.principal) }
+        GradientStop { position: 1.0; color: colours.extraDark(colours.principal) }
     }
+    property Gradient testGradient: Gradient {
+        GradientStop { position: 0.0; color: "#100" }
+        GradientStop { position: 1.0; color: "#110" }
+    }
+
 }
diff --git a/src/gui/qml2/DissolveDark/ThemeColours.qml b/src/gui/qml2/DissolveDark/ThemeColours.qml
diff --git a/src/gui/qml2/DissolveDark/ThemeColoursDark.qml b/src/gui/qml2/DissolveDark/ThemeColoursDark.qml
@@ -0,0 +1,38 @@
+// Copyright (C) 2017 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+
+import QtQuick
+
+QtObject {
+    // Constants & Factors
+    readonly property real brightenFactor: 1.2
+    readonly property real darkenFactor: 0.8
+    readonly property real extraDarkenFactor: darkenFactor*0.6
+
+    // Core Colour Definitions
+    readonly property color foregroundBase: "#ddd"
+    readonly property color background: "#101"
+    readonly property color principal: "#313"
+
+    // Derived Colours
+    readonly property color foregroundNormal: foregroundBase
+    readonly property color foregroundHighlighted: brighter(foregroundBase)
+    readonly property color foregroundDisabled: extraDark(foregroundBase)
+    readonly property color mid: Qt.rgba(
+        (background.r + principal.r)*0.5,
+        (background.g + principal.g)*0.5,
+        (background.b + principal.b)*0.5,
+        1.0
+    )
+
+    // Colour Functions
+    function brighter(colour) {
+        return Qt.rgba(colour.r*brightenFactor, colour.g*brightenFactor, colour.b*brightenFactor, 1.0)
+    }
+    function darker(colour) {
+        return Qt.rgba(colour.r*darkenFactor, colour.g*darkenFactor, colour.b*darkenFactor, 1.0)
+    }
+    function extraDark(colour) {
+        return Qt.rgba(colour.r*extraDarkenFactor, colour.g*extraDarkenFactor, colour.b*extraDarkenFactor, 1.0)
+    }
+}
diff --git a/src/gui/qml2/DissolveDark/qmldir b/src/gui/qml2/DissolveDark/qmldir
@@ -1,11 +1,13 @@
 module DissolveDark
+
 singleton Theme 1.0 Theme.qml
-ThemeColours 1.0 ThemeColours.qml
-Pane 1.0 Pane.qml
+ThemeColoursDark 1.0 ThemeColoursDark.qml
+
 Button 1.0 Button.qml
 ButtonPanel 1.0 ButtonPanel.qml
 CheckBox 1.0 CheckBox.qml
 CheckIndicator 1.0 CheckIndicator.qml
+Pane 1.0 Pane.qml
 Switch 1.0 Switch.qml
 SwitchIndicator 1.0 SwitchIndicator.qml
 Text 1.0 Text.qml
diff --git a/src/gui/qml2/test.qml b/src/gui/qml2/test.qml
@@ -20,13 +20,14 @@ Pane {
         Row {
             spacing: 25
             CheckBox { text: "Checkbox" }
-            CheckBox { text: "Checkbox"; checked: true }
+            CheckBox { text: "Checkbox"; checked: true; enabled: false }
         }
 
         Row {
             spacing: 25
-            Switch {}
-            Switch { checked: true }
+            Switch { text: "Switch A" }
+            Switch { }
+            Switch { text: "Switch C"; checked: true; enabled: false }
         }
 
         Label { text: "Label" }