From e8abedfb2a64883d62d923ef964876a80a0bb0f1 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 14:48:49 +0100 Subject: [PATCH] Functions, reorganisation, nice stuff. --- src/gui/qml2/DissolveDark/Button.qml | 2 +- src/gui/qml2/DissolveDark/ButtonPanel.qml | 6 +- src/gui/qml2/DissolveDark/CheckBox.qml | 2 +- src/gui/qml2/DissolveDark/Switch.qml | 2 +- src/gui/qml2/DissolveDark/SwitchIndicator.qml | 47 ++---------- src/gui/qml2/DissolveDark/Theme.qml | 73 ++++++++++--------- src/gui/qml2/DissolveDark/ThemeColours.qml | 8 -- .../qml2/DissolveDark/ThemeColoursDark.qml | 38 ++++++++++ src/gui/qml2/DissolveDark/qmldir | 6 +- src/gui/qml2/test.qml | 7 +- 10 files changed, 98 insertions(+), 93 deletions(-) delete mode 100644 src/gui/qml2/DissolveDark/ThemeColours.qml create mode 100644 src/gui/qml2/DissolveDark/ThemeColoursDark.qml diff --git a/src/gui/qml2/DissolveDark/Button.qml b/src/gui/qml2/DissolveDark/Button.qml index 82d999f0c2..5223d50dad 100644 --- 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 index 8bf500c63d..071d073447 100644 --- 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 index d55a6c9d46..390e2ff97a 100644 --- 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 index 96ab8c60fd..88b0ec4ac9 100644 --- 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 index 8bc9238228..fd9dc16aec 100644 --- 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,25 +44,14 @@ 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 @@ -92,7 +59,7 @@ 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 index 396d67fac2..097a6c1f85 100644 --- 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 deleted file mode 100644 index 17784eb4c7..0000000000 --- a/src/gui/qml2/DissolveDark/ThemeColours.qml +++ /dev/null @@ -1,8 +0,0 @@ -// 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 { - property color background: "#101" -} diff --git a/src/gui/qml2/DissolveDark/ThemeColoursDark.qml b/src/gui/qml2/DissolveDark/ThemeColoursDark.qml new file mode 100644 index 0000000000..3b280b1dec --- /dev/null +++ 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 index dd68aa0e7d..28878b9143 100644 --- 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 index 3890a682b7..3d5c1f528e 100644 --- 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" }