From 7cfcac91e3e0adc4b379eb71fbb33b2cd2681fdb Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 13:42:58 +0100 Subject: [PATCH 01/12] Just exploring QML theming. --- src/gui/qml2/DissolveDark/Button.qml | 44 ++++++++ src/gui/qml2/DissolveDark/ButtonPanel.qml | 32 ++++++ src/gui/qml2/DissolveDark/CheckBox.qml | 36 ++++++ src/gui/qml2/DissolveDark/CheckIndicator.qml | 58 ++++++++++ src/gui/qml2/DissolveDark/Pane.qml | 28 +++++ src/gui/qml2/DissolveDark/Slider.qml | 87 ++++++++++++++ src/gui/qml2/DissolveDark/Switch.qml | 35 ++++++ src/gui/qml2/DissolveDark/SwitchIndicator.qml | 106 ++++++++++++++++++ src/gui/qml2/DissolveDark/Text.qml | 11 ++ src/gui/qml2/DissolveDark/Theme.qml | 55 +++++++++ src/gui/qml2/DissolveDark/ThemeColours.qml | 8 ++ src/gui/qml2/DissolveDark/qmldir | 11 ++ src/gui/qml2/test.qml | 34 ++++++ 13 files changed, 545 insertions(+) create mode 100644 src/gui/qml2/DissolveDark/Button.qml create mode 100644 src/gui/qml2/DissolveDark/ButtonPanel.qml create mode 100644 src/gui/qml2/DissolveDark/CheckBox.qml create mode 100644 src/gui/qml2/DissolveDark/CheckIndicator.qml create mode 100644 src/gui/qml2/DissolveDark/Pane.qml create mode 100644 src/gui/qml2/DissolveDark/Slider.qml create mode 100644 src/gui/qml2/DissolveDark/Switch.qml create mode 100644 src/gui/qml2/DissolveDark/SwitchIndicator.qml create mode 100644 src/gui/qml2/DissolveDark/Text.qml create mode 100644 src/gui/qml2/DissolveDark/Theme.qml create mode 100644 src/gui/qml2/DissolveDark/ThemeColours.qml create mode 100644 src/gui/qml2/DissolveDark/qmldir create mode 100644 src/gui/qml2/test.qml diff --git a/src/gui/qml2/DissolveDark/Button.qml b/src/gui/qml2/DissolveDark/Button.qml new file mode 100644 index 0000000000..9fd5f02b10 --- /dev/null +++ b/src/gui/qml2/DissolveDark/Button.qml @@ -0,0 +1,44 @@ +// 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 +import QtQuick.Templates as T +import QtQuick.Controls.impl + +T.Button { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + padding: 4 + spacing: 6 + + icon.width: 16 + icon.height: 16 + + contentItem: IconLabel { + spacing: control.spacing + mirrored: control.mirrored + display: control.display + + icon: control.icon + text: control.text + font: Theme.normalFont + color: { + if (!control.enabled) { Theme.disabledText } + else (control.down || control.checked ? Theme.highlightedText : Theme.normalText) + } + } + + background: ButtonPanel { + implicitWidth: 80 + implicitHeight: 24 + + control: control + visible: !control.flat || control.down || control.checked || control.highlighted || control.visualFocus + || (enabled && control.hovered) + } +} diff --git a/src/gui/qml2/DissolveDark/ButtonPanel.qml b/src/gui/qml2/DissolveDark/ButtonPanel.qml new file mode 100644 index 0000000000..8bf500c63d --- /dev/null +++ b/src/gui/qml2/DissolveDark/ButtonPanel.qml @@ -0,0 +1,32 @@ +// 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 +import QtQuick.Controls.impl + +Rectangle { + id: panel + + property Item control + property bool highlighted: control.highlighted + + visible: !control.flat || control.down || control.checked + + gradient: { + if (!control.enabled) { Theme.disabledGradient } + else (control.down || control.checked ? Theme.buttonDownGradient : Theme.buttonUpGradient) + } + + radius: 2 + border.color: Theme.mid + + Rectangle { + x: 1; y: 1 + width: parent.width - 2 + height: parent.height - 2 + border.color: Theme.background + color: "transparent" + + radius: 2 + } +} diff --git a/src/gui/qml2/DissolveDark/CheckBox.qml b/src/gui/qml2/DissolveDark/CheckBox.qml new file mode 100644 index 0000000000..db0e0f40a8 --- /dev/null +++ b/src/gui/qml2/DissolveDark/CheckBox.qml @@ -0,0 +1,36 @@ +// 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 +import QtQuick.Templates as T + + +T.CheckBox { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + padding: 6 + spacing: 6 + + indicator: CheckIndicator { + x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 + y: control.topPadding + (control.availableHeight - height) / 2 + control: control + } + + contentItem: Text { + leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + + text: control.text + font: Theme.normalFont + color: Theme.palette.windowText + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } +} diff --git a/src/gui/qml2/DissolveDark/CheckIndicator.qml b/src/gui/qml2/DissolveDark/CheckIndicator.qml new file mode 100644 index 0000000000..58de99654a --- /dev/null +++ b/src/gui/qml2/DissolveDark/CheckIndicator.qml @@ -0,0 +1,58 @@ +// 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 +import QtQuick.Controls.impl +import QtQuick.Controls.Fusion +import QtQuick.Controls.Fusion.impl + +Rectangle { + id: indicator + + property Item 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: 14 + implicitHeight: 14 + + color: control.down ? indicator.pressedColor : control.palette.base + border.color: control.visualFocus ? Fusion.highlightedOutline(control.palette) + : Qt.lighter(Fusion.outline(control.palette), 1.1) + + Rectangle { + x: 1; y: 1 + width: parent.width - 2 + height: 1 + color: Fusion.topShadow + visible: indicator.control.enabled && !indicator.control.down + } + + ColorImage { + x: (parent.width - width) / 2 + y: (parent.height - height) / 2 + color: Color.transparent(indicator.checkMarkColor, 210 / 255) + source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/checkmark.png" + visible: indicator.control.checkState === Qt.Checked || (indicator.control.checked && indicator.control.checkState === undefined) + } + + Rectangle { + x: 3; y: 3 + width: parent.width - 6 + height: parent.width - 6 + + visible: indicator.control.checkState === Qt.PartiallyChecked + + gradient: Gradient { + GradientStop { + position: 0 + color: Color.transparent(indicator.checkMarkColor, 80 / 255) + } + GradientStop { + position: 1 + color: Color.transparent(indicator.checkMarkColor, 140 / 255) + } + } + border.color: Color.transparent(indicator.checkMarkColor, 180 / 255) + } +} diff --git a/src/gui/qml2/DissolveDark/Pane.qml b/src/gui/qml2/DissolveDark/Pane.qml new file mode 100644 index 0000000000..d2f6a5a146 --- /dev/null +++ b/src/gui/qml2/DissolveDark/Pane.qml @@ -0,0 +1,28 @@ +// 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 +import QtQuick.Templates as T + +T.Pane { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + contentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + contentHeight + topPadding + bottomPadding) + + topPadding: background ? background.topPadding : 0 + leftPadding: background ? background.leftPadding : 0 + rightPadding: background ? background.rightPadding : 0 + bottomPadding: background ? background.bottomPadding : 0 + + topInset: background ? -background.topInset || 0 : 0 + leftInset: background ? -background.leftInset || 0 : 0 + rightInset: background ? -background.rightInset || 0 : 0 + bottomInset: background ? -background.bottomInset || 0 : 0 + + background: Rectangle { + gradient: Theme.mainGradient + } +} diff --git a/src/gui/qml2/DissolveDark/Slider.qml b/src/gui/qml2/DissolveDark/Slider.qml new file mode 100644 index 0000000000..01b5899fcb --- /dev/null +++ b/src/gui/qml2/DissolveDark/Slider.qml @@ -0,0 +1,87 @@ +// 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 +import QtQuick.Templates as T +import QtQuick.Controls.Imagine +import QtQuick.Controls.Imagine.impl + +T.Slider { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitHandleWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitHandleHeight + topPadding + bottomPadding) + + topPadding: background ? background.topPadding : 0 + leftPadding: background ? background.leftPadding : 0 + rightPadding: background ? background.rightPadding : 0 + bottomPadding: background ? background.bottomPadding : 0 + + topInset: background ? -background.topInset || 0 : 0 + leftInset: background ? -background.leftInset || 0 : 0 + rightInset: background ? -background.rightInset || 0 : 0 + bottomInset: background ? -background.bottomInset || 0 : 0 + + handle: Image { + x: Math.round(control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)) + y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))) + + source: control.Imagine.url + "slider-handle" + ImageSelector on source { + states: [ + {"vertical": control.vertical}, + {"horizontal": control.horizontal}, + {"disabled": !control.enabled}, + {"pressed": control.pressed}, + {"focused": control.visualFocus}, + {"mirrored": control.mirrored}, + {"hovered": control.enabled && control.hovered} + ] + } + } + + background: NinePatchImage { + scale: control.horizontal && control.mirrored ? -1 : 1 + + source: control.Imagine.url + "slider-background" + NinePatchImageSelector on source { + states: [ + {"vertical": control.vertical}, + {"horizontal": control.horizontal}, + {"disabled": !control.enabled}, + {"pressed": control.down}, + {"focused": control.visualFocus}, + {"mirrored": control.mirrored}, + {"hovered": control.enabled && control.hovered} + ] + } + + NinePatchImage { + x: control.horizontal ? 0 : (parent.width - width) / 2 + y: control.horizontal + ? (parent.height - height) / 2 + : control.handle.height / 2 + control.visualPosition * (parent.height - control.handle.height) + width: control.horizontal + ? control.handle.width / 2 + control.position * (parent.width - control.handle.width) + : parent.width + height: control.vertical + ? control.handle.height / 2 + control.position * (parent.height - control.handle.height) + : parent.height + + source: control.Imagine.url + "slider-progress" + NinePatchImageSelector on source { + states: [ + {"vertical": control.vertical}, + {"horizontal": control.horizontal}, + {"disabled": !control.enabled}, + {"pressed": control.down}, + {"focused": control.visualFocus}, + {"mirrored": control.mirrored}, + {"hovered": control.enabled && control.hovered} + ] + } + } + } +} diff --git a/src/gui/qml2/DissolveDark/Switch.qml b/src/gui/qml2/DissolveDark/Switch.qml new file mode 100644 index 0000000000..77093c118d --- /dev/null +++ b/src/gui/qml2/DissolveDark/Switch.qml @@ -0,0 +1,35 @@ +// 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 +import QtQuick.Templates as T + + +T.Switch { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + padding: 6 + spacing: 6 + + indicator: SwitchIndicator { + x: control.text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 + y: control.topPadding + (control.availableHeight - height) / 2 + control: control + } + + contentItem: Text { + leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + + text: control.text + color: Theme.palette.text + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } +} diff --git a/src/gui/qml2/DissolveDark/SwitchIndicator.qml b/src/gui/qml2/DissolveDark/SwitchIndicator.qml new file mode 100644 index 0000000000..8bc9238228 --- /dev/null +++ b/src/gui/qml2/DissolveDark/SwitchIndicator.qml @@ -0,0 +1,106 @@ +// 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 +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) + + 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) + } + } + + Rectangle { + x: indicator.control.mirrored ? handle.x : 0 + width: indicator.control.mirrored ? parent.width - handle.x : handle.x + handle.width + height: parent.height + + opacity: indicator.control.checked ? 1 : 0 + Behavior on opacity { + enabled: !indicator.control.down + NumberAnimation { duration: 80 } + } + + radius: 2 + border.color: Qt.darker(Fusion.highlightedOutline(indicator.control.palette), 1.1) + 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) + } + } + } + + Rectangle { + id: handle + x: Math.max(0, Math.min(parent.width - width, indicator.control.visualPosition * parent.width - (width / 2))) + y: (parent.height - height) / 2 + width: 20 + 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)) + } + } + 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) + color: "transparent" + radius: 2 + + Rectangle { + x: 1; y: 1 + width: parent.width - 2 + height: parent.height - 2 + border.color: Fusion.innerContrastLine + color: "transparent" + radius: 2 + } + } + + Behavior on x { + enabled: !indicator.control.down + SmoothedAnimation { velocity: 200 } + } + } +} diff --git a/src/gui/qml2/DissolveDark/Text.qml b/src/gui/qml2/DissolveDark/Text.qml new file mode 100644 index 0000000000..7d90839ca9 --- /dev/null +++ b/src/gui/qml2/DissolveDark/Text.qml @@ -0,0 +1,11 @@ +// 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 +import QtQuick.Templates as T + +T.Text { + font.pointSize: 9 + wrapMode: Text.Wrap + color: #f00 +} diff --git a/src/gui/qml2/DissolveDark/Theme.qml b/src/gui/qml2/DissolveDark/Theme.qml new file mode 100644 index 0000000000..2a9137041d --- /dev/null +++ b/src/gui/qml2/DissolveDark/Theme.qml @@ -0,0 +1,55 @@ +// 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 + +pragma Singleton + +import QtQuick + +QtObject { + id: root + + property real baseSize: 1.0 + + property font normalFont: Qt.font({ + 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 + ) + + // Gradients + property Gradient mainGradient: Gradient { + GradientStop { position: 0.0; color: background } + GradientStop { position: 0.9; color: background } + GradientStop { position: 1.0; color: principal } + } + 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 } + } + 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 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) } + } +} diff --git a/src/gui/qml2/DissolveDark/ThemeColours.qml b/src/gui/qml2/DissolveDark/ThemeColours.qml new file mode 100644 index 0000000000..17784eb4c7 --- /dev/null +++ b/src/gui/qml2/DissolveDark/ThemeColours.qml @@ -0,0 +1,8 @@ +// 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/qmldir b/src/gui/qml2/DissolveDark/qmldir new file mode 100644 index 0000000000..dd68aa0e7d --- /dev/null +++ b/src/gui/qml2/DissolveDark/qmldir @@ -0,0 +1,11 @@ +module DissolveDark +singleton Theme 1.0 Theme.qml +ThemeColours 1.0 ThemeColours.qml +Pane 1.0 Pane.qml +Button 1.0 Button.qml +ButtonPanel 1.0 ButtonPanel.qml +CheckBox 1.0 CheckBox.qml +CheckIndicator 1.0 CheckIndicator.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 new file mode 100644 index 0000000000..3890a682b7 --- /dev/null +++ b/src/gui/qml2/test.qml @@ -0,0 +1,34 @@ +import QtQuick 2.11 +import QtQuick.Controls 2.1 + +Pane { + width: 600 + height: 600 + + Column { + anchors.fill: parent + + padding: 50 + spacing: 25 + + Row { + spacing: 25 + Button { text: "Button" } + Button { text: "Button"; enabled: false } + } + + Row { + spacing: 25 + CheckBox { text: "Checkbox" } + CheckBox { text: "Checkbox"; checked: true } + } + + Row { + spacing: 25 + Switch {} + Switch { checked: true } + } + + Label { text: "Label" } + } +} From f78f52aa4106c50a037a8676f9c32e7087c98e08 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 13:53:51 +0100 Subject: [PATCH 02/12] Function to get text colour for control. --- src/gui/qml2/DissolveDark/Button.qml | 5 +---- src/gui/qml2/DissolveDark/CheckBox.qml | 2 +- src/gui/qml2/DissolveDark/Switch.qml | 3 ++- src/gui/qml2/DissolveDark/Theme.qml | 5 +++++ 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/gui/qml2/DissolveDark/Button.qml b/src/gui/qml2/DissolveDark/Button.qml index 9fd5f02b10..82d999f0c2 100644 --- a/src/gui/qml2/DissolveDark/Button.qml +++ b/src/gui/qml2/DissolveDark/Button.qml @@ -27,10 +27,7 @@ T.Button { icon: control.icon text: control.text font: Theme.normalFont - color: { - if (!control.enabled) { Theme.disabledText } - else (control.down || control.checked ? Theme.highlightedText : Theme.normalText) - } + color: Theme.getTextColour(control) } background: ButtonPanel { diff --git a/src/gui/qml2/DissolveDark/CheckBox.qml b/src/gui/qml2/DissolveDark/CheckBox.qml index db0e0f40a8..d55a6c9d46 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.palette.windowText + color: Theme.getTextColour(control) elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } diff --git a/src/gui/qml2/DissolveDark/Switch.qml b/src/gui/qml2/DissolveDark/Switch.qml index 77093c118d..96ab8c60fd 100644 --- a/src/gui/qml2/DissolveDark/Switch.qml +++ b/src/gui/qml2/DissolveDark/Switch.qml @@ -27,8 +27,9 @@ T.Switch { leftPadding: control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 rightPadding: control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + font: Theme.normalFont text: control.text - color: Theme.palette.text + color: Theme.getTextColour(control) elide: Text.ElideRight verticalAlignment: Text.AlignVCenter } diff --git a/src/gui/qml2/DissolveDark/Theme.qml b/src/gui/qml2/DissolveDark/Theme.qml index 2a9137041d..396d67fac2 100644 --- a/src/gui/qml2/DissolveDark/Theme.qml +++ b/src/gui/qml2/DissolveDark/Theme.qml @@ -34,6 +34,11 @@ QtObject { 1.0 ) + function getTextColour(control){ + if (!control.enabled) { return Theme.disabledText } + else return (control.down || control.checked ? Theme.highlightedText : Theme.normalText) + } + // Gradients property Gradient mainGradient: Gradient { GradientStop { position: 0.0; color: background } From e8abedfb2a64883d62d923ef964876a80a0bb0f1 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 14:48:49 +0100 Subject: [PATCH 03/12] 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" } From 98f48cf484ac0f8d4eda09810d4a9b0d498a6619 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 16:27:28 +0100 Subject: [PATCH 04/12] Work up check indicator and slider. --- src/gui/qml2/DissolveDark/CheckIndicator.qml | 56 +++++++-------- src/gui/qml2/DissolveDark/SwitchIndicator.qml | 6 +- src/gui/qml2/DissolveDark/Theme.qml | 57 ++++++++++++---- .../qml2/DissolveDark/ThemeColoursDark.qml | 9 +-- src/gui/qml2/DissolveDark/assets/tick.png | Bin 0 -> 1656 bytes src/gui/qml2/DissolveDark/assets/tick.svg | 64 ++++++++++++++++++ src/gui/qml2/test.qml | 10 +-- 7 files changed, 146 insertions(+), 56 deletions(-) create mode 100644 src/gui/qml2/DissolveDark/assets/tick.png create mode 100644 src/gui/qml2/DissolveDark/assets/tick.svg diff --git a/src/gui/qml2/DissolveDark/CheckIndicator.qml b/src/gui/qml2/DissolveDark/CheckIndicator.qml index 58de99654a..79ad1ca64e 100644 --- a/src/gui/qml2/DissolveDark/CheckIndicator.qml +++ b/src/gui/qml2/DissolveDark/CheckIndicator.qml @@ -13,46 +13,36 @@ Rectangle { 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: 14 - implicitHeight: 14 + implicitWidth: 16 + implicitHeight: 16 - color: control.down ? indicator.pressedColor : control.palette.base - border.color: control.visualFocus ? Fusion.highlightedOutline(control.palette) - : Qt.lighter(Fusion.outline(control.palette), 1.1) + gradient: Theme.controlBackgroundGradient + border.color: Theme.colours.mid Rectangle { x: 1; y: 1 width: parent.width - 2 - height: 1 - color: Fusion.topShadow - visible: indicator.control.enabled && !indicator.control.down - } + height: parent.width - 2 + border.color: Theme.colours.background + gradient: Theme.controlBackgroundGradient + + Image { + x: 1; y: 1 + width: parent.width - 2 + height: parent.width - 2 + visible: indicator.control.checkState === Qt.Checked + source: "assets/tick.png" + } - ColorImage { - x: (parent.width - width) / 2 - y: (parent.height - height) / 2 - color: Color.transparent(indicator.checkMarkColor, 210 / 255) - source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/checkmark.png" - visible: indicator.control.checkState === Qt.Checked || (indicator.control.checked && indicator.control.checkState === undefined) - } + Rectangle { + x: 2; y: 2 + width: parent.width - 4 + height: parent.width - 4 - Rectangle { - x: 3; y: 3 - width: parent.width - 6 - height: parent.width - 6 - - visible: indicator.control.checkState === Qt.PartiallyChecked - - gradient: Gradient { - GradientStop { - position: 0 - color: Color.transparent(indicator.checkMarkColor, 80 / 255) - } - GradientStop { - position: 1 - color: Color.transparent(indicator.checkMarkColor, 140 / 255) - } + visible: indicator.control.checkState === Qt.PartiallyChecked + + gradient: Theme.getAccentGradient(indicator.control) + border.color: Theme.colours.background } - border.color: Color.transparent(indicator.checkMarkColor, 180 / 255) } } diff --git a/src/gui/qml2/DissolveDark/SwitchIndicator.qml b/src/gui/qml2/DissolveDark/SwitchIndicator.qml index fd9dc16aec..e770b3e10d 100644 --- a/src/gui/qml2/DissolveDark/SwitchIndicator.qml +++ b/src/gui/qml2/DissolveDark/SwitchIndicator.qml @@ -30,10 +30,10 @@ Rectangle { } radius: 2 - border.color: Theme.colours.mid - border.width: indicator.control.enabled ? 1 : 0 + border.color: Theme.colours.background + //border.width: indicator.control.enabled ? 1 : 0 - gradient: Theme.controlForegroundGradient + gradient: Theme.getAccentGradient(indicator.control) } Rectangle { diff --git a/src/gui/qml2/DissolveDark/Theme.qml b/src/gui/qml2/DissolveDark/Theme.qml index 097a6c1f85..9071157b85 100644 --- a/src/gui/qml2/DissolveDark/Theme.qml +++ b/src/gui/qml2/DissolveDark/Theme.qml @@ -10,29 +10,50 @@ QtObject { property real baseSize: 1.0 + /* + * Fonts + */ property font normalFont: Qt.font({ pointSize: 10 * baseSize }) + /* + * Colours + */ + // Choose theme colours (TODO Light / normal version) property ThemeColoursDark colours: ThemeColoursDark {} + // Functions 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) + function getPrincipalColour(control){ + if (!control.enabled) { return colours.darker(colours.principal) } + else return (control.down || control.checked ? colours.brighter(colours.principal) : colours.principal) } - // Gradients + /* + * Gradients + */ + + // Basic Gradients property Gradient mainGradient: Gradient { GradientStop { position: 0.0; color: colours.background } GradientStop { position: 0.9; color: colours.background } GradientStop { position: 1.0; color: colours.principal } } + property Gradient disabledGradient: Gradient { + GradientStop { position: 0.0; color: colours.extraDark(colours.principal) } + GradientStop { position: 1.0; color: colours.background } + } + property Gradient testGradient: Gradient { + GradientStop { position: 0.0; color: "#100" } + GradientStop { position: 1.0; color: "#110" } + } + + // Foreground Gradients property Gradient foregroundNormalGradient: Gradient { GradientStop { position: 0.0; color: colours.foregroundNormal } GradientStop { position: 1.0; color: colours.foregroundDisabled } @@ -45,10 +66,8 @@ QtObject { GradientStop { position: 0.0; color: colours.foregroundDisabled } GradientStop { position: 1.0; color: colours.background } } - property Gradient disabledGradient: Gradient { - GradientStop { position: 0.0; color: colours.extraDark(colours.principal) } - GradientStop { position: 1.0; color: colours.background } - } + + // Control Element Gradients property Gradient controlForegroundGradient: Gradient { GradientStop { position: 0.0; color: colours.brighter(colours.principal) } GradientStop { position: 1.0; color: colours.darker(colours.principal) } @@ -57,9 +76,23 @@ QtObject { 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" } + + // Accent Gradients + property Gradient accentNormalGradient: Gradient { + GradientStop { position: 0.0; color: colours.accent } + GradientStop { position: 1.0; color: colours.extraDark(colours.accent) } + } + property Gradient accentDisabledGradient: Gradient { + GradientStop { position: 0.0; color: colours.extraDark(colours.accent) } + GradientStop { position: 1.0; color: colours.background } } + // Functions + function getForegroundGradient(control){ + if (!control.enabled) { return foregroundDisabledGradient } + else return (control.down || control.checked ? foregroundHighlightGradient : foregroundNormalGradient) + } + function getAccentGradient(control){ + return control.enabled ? accentNormalGradient : accentDisabledGradient + } } diff --git a/src/gui/qml2/DissolveDark/ThemeColoursDark.qml b/src/gui/qml2/DissolveDark/ThemeColoursDark.qml index 3b280b1dec..236db1b737 100644 --- a/src/gui/qml2/DissolveDark/ThemeColoursDark.qml +++ b/src/gui/qml2/DissolveDark/ThemeColoursDark.qml @@ -10,14 +10,15 @@ QtObject { readonly property real extraDarkenFactor: darkenFactor*0.6 // Core Colour Definitions - readonly property color foregroundBase: "#ddd" + readonly property color foreground: "#ddd" readonly property color background: "#101" readonly property color principal: "#313" + readonly property color accent: "#316549" // Derived Colours - readonly property color foregroundNormal: foregroundBase - readonly property color foregroundHighlighted: brighter(foregroundBase) - readonly property color foregroundDisabled: extraDark(foregroundBase) + readonly property color foregroundNormal: foreground + readonly property color foregroundHighlighted: brighter(foreground) + readonly property color foregroundDisabled: extraDark(foreground) readonly property color mid: Qt.rgba( (background.r + principal.r)*0.5, (background.g + principal.g)*0.5, diff --git a/src/gui/qml2/DissolveDark/assets/tick.png b/src/gui/qml2/DissolveDark/assets/tick.png new file mode 100644 index 0000000000000000000000000000000000000000..7bf3b5693d91289c589737810387e6300979cc2f GIT binary patch literal 1656 zcmV-;28a2HP)pF8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H11_en( zK~#90?cG~!6jd0&@&9+a+hCN4DbQjxF;VWNblcFx7!yJXbh#82@r4jEYzu;kPhw)! z7$HUmB(y<#?#Eeetc16MGktmK>WLQxaR%-?8^+H~X_7B~-uufk_g-au9S=-VKFc zWXM@G@W#QjW9`#|6q##`;WXz3wP;}H{%`YbraYN$oK-LefKa1xdJ`LybMkLyE2u2S zNYH|9qmDTgt*KjjFDYXB8&Sw4xAkM zMGN90A25cys6?7aqF9hI@)2XWi=y@7ft_6^z+OZ0*0iO$N>yI&#Xk&yDO%*(HN_qw zIcnO{T$M>zeyTNzfR_Aea423^5zu0hs%cAeRr*S0Hw1|x_2xEN>6D`Qq8rxS+7RTu&*wfT?2{`sy7Fi5O4|Ri{AMz+a#ESSP znZF@fuauq%Dm^she0^e9*BQ@83#cqcrU$4Cdlt}p3VPbxupzlpD_#YrU;l_4(Kt^W z>+Jf{!|8l4@mO*SF}g7VgNsUHb6lUY8rqXvwc=y`hXJ6Q1UZ~YB_H;1KwmQqV^E2H zsJ~}!tiMHg^z$@gxk&Gd%u4$b9{rQ2jC-ZC{%Gb*!fBC@E7ueG_)^!0oY#PBF3VajsbZ<5~<{i!1F~eW*kZs zFdzp=qOD~cBF~k$s4*yYo0d#fqKwCYQ9$Zb$?YQYtVfH7j#9U2$<&xr5eW>q0VL7Z z@{))=Z^S_wHdvkhKGy z2j25z=e4QU>bRtPfxI6`3#dUy)QaOB`(0rGD6~9Duy5tYH2Up^wq=iaz2gO&m(|22 z-A6<*02G@0{hBCGo}(<-ysRdZ*1f=Nul89&MPWepQzw&s7|2bYp_B^-WRH-)yq>6l zN=C_I&_@|y04Rj7yqu_rVjBHUeOq#Eq2E}WYOT(sbvNi)ehgM%gQ8hk3I>1@tvkG$ zsDvs6-YVosX>4CQEiReQFzBhRoBNEhsyH`r_H<3-J+lP~`v+6NgKq9q8rzpn)2Kec zh$Exa)6~cmpwoX$T&H257dtGmF;8E$sn%*ot8T5C8RTF&^5ir%vI>BUr%nx3-JRI2 zCR|Af%*NYX=kcLO& zap}pVbq{5Z0XbeWS-5`Tgg@gqeFQA^W6=W3Ae=*UXV`<_@dbRea=wOT*pXsFz8)FF z<$O=wuxm=#1%d%%eCoua00Clvi_c|^bCf_azy%15Ta-bRZav!B6&MD%1c7mflEv83 z)f4o>1^vR#I6(;w0}2FzvPTIO1Bw8FvPB6U1BwKJvO_Tf14;mavOzHh14;ye$fFpA z0Um%rWKoR60FOW*i*n0-(?6)pP#*ylBQd~35P;v0oQ(pCu^8Yn2pErIGzRzp0>+{k zj{!b`fN?01zyKdXz!;RsV1Umc5IRbvFdzUB2n{827!VK$1db9(3k z0S19U7G+l59UuM^tGr8c|2@QWD81t7j;_Oj4i`|y{&$2#+tS5|N(t0!&CMV`is*fR zXX3A)*|jIk->tXVY&M(CX0zFBHk-|6v)ODm^ZFMpNmp{ZmFQmp0000 + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/gui/qml2/test.qml b/src/gui/qml2/test.qml index 3d5c1f528e..bc300773ee 100644 --- a/src/gui/qml2/test.qml +++ b/src/gui/qml2/test.qml @@ -14,20 +14,22 @@ Pane { Row { spacing: 25 Button { text: "Button" } - Button { text: "Button"; enabled: false } + Button { text: "Button (Disabled)"; enabled: false } } Row { spacing: 25 - CheckBox { text: "Checkbox" } - CheckBox { text: "Checkbox"; checked: true; enabled: false } + CheckBox { text: "Checkbox A" } + CheckBox { text: "Checkbox B (Tristate)"; tristate: true } + CheckBox { text: "Checkbox C (Disabled)"; checked: true; enabled: false } + CheckBox { text: "Checkbox D (Disabled, Tristate)"; tristate: true; checkState: Qt.PartiallyChecked; enabled: false } } Row { spacing: 25 Switch { text: "Switch A" } Switch { } - Switch { text: "Switch C"; checked: true; enabled: false } + Switch { text: "Switch C (Disabled)"; checked: true; enabled: false } } Label { text: "Label" } From 613d72e1e58a010a7ff80ab237906fc24fd8e613 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 16:30:35 +0100 Subject: [PATCH 05/12] Update headers. --- src/gui/qml2/DissolveDark/Button.qml | 5 ++--- src/gui/qml2/DissolveDark/ButtonPanel.qml | 5 ++--- src/gui/qml2/DissolveDark/CheckBox.qml | 5 ++--- src/gui/qml2/DissolveDark/CheckIndicator.qml | 9 ++------- src/gui/qml2/DissolveDark/Pane.qml | 4 ++-- src/gui/qml2/DissolveDark/Slider.qml | 4 ++-- src/gui/qml2/DissolveDark/Switch.qml | 5 ++--- src/gui/qml2/DissolveDark/SwitchIndicator.qml | 5 ++--- src/gui/qml2/DissolveDark/Text.qml | 4 ++-- src/gui/qml2/DissolveDark/Theme.qml | 4 ++-- src/gui/qml2/DissolveDark/ThemeColoursDark.qml | 4 ++-- 11 files changed, 22 insertions(+), 32 deletions(-) diff --git a/src/gui/qml2/DissolveDark/Button.qml b/src/gui/qml2/DissolveDark/Button.qml index 5223d50dad..d9255674f6 100644 --- a/src/gui/qml2/DissolveDark/Button.qml +++ b/src/gui/qml2/DissolveDark/Button.qml @@ -1,9 +1,8 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T -import QtQuick.Controls.impl T.Button { id: control diff --git a/src/gui/qml2/DissolveDark/ButtonPanel.qml b/src/gui/qml2/DissolveDark/ButtonPanel.qml index 071d073447..c5c6995b0a 100644 --- a/src/gui/qml2/DissolveDark/ButtonPanel.qml +++ b/src/gui/qml2/DissolveDark/ButtonPanel.qml @@ -1,8 +1,7 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick -import QtQuick.Controls.impl Rectangle { id: panel diff --git a/src/gui/qml2/DissolveDark/CheckBox.qml b/src/gui/qml2/DissolveDark/CheckBox.qml index 390e2ff97a..5c210c7723 100644 --- a/src/gui/qml2/DissolveDark/CheckBox.qml +++ b/src/gui/qml2/DissolveDark/CheckBox.qml @@ -1,10 +1,9 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T - T.CheckBox { id: control diff --git a/src/gui/qml2/DissolveDark/CheckIndicator.qml b/src/gui/qml2/DissolveDark/CheckIndicator.qml index 79ad1ca64e..0da4583637 100644 --- a/src/gui/qml2/DissolveDark/CheckIndicator.qml +++ b/src/gui/qml2/DissolveDark/CheckIndicator.qml @@ -1,17 +1,12 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick -import QtQuick.Controls.impl -import QtQuick.Controls.Fusion -import QtQuick.Controls.Fusion.impl Rectangle { id: indicator property Item 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: 16 implicitHeight: 16 diff --git a/src/gui/qml2/DissolveDark/Pane.qml b/src/gui/qml2/DissolveDark/Pane.qml index d2f6a5a146..d034006638 100644 --- a/src/gui/qml2/DissolveDark/Pane.qml +++ b/src/gui/qml2/DissolveDark/Pane.qml @@ -1,5 +1,5 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T diff --git a/src/gui/qml2/DissolveDark/Slider.qml b/src/gui/qml2/DissolveDark/Slider.qml index 01b5899fcb..1471998a4d 100644 --- a/src/gui/qml2/DissolveDark/Slider.qml +++ b/src/gui/qml2/DissolveDark/Slider.qml @@ -1,5 +1,5 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T diff --git a/src/gui/qml2/DissolveDark/Switch.qml b/src/gui/qml2/DissolveDark/Switch.qml index 88b0ec4ac9..c5c776f25e 100644 --- a/src/gui/qml2/DissolveDark/Switch.qml +++ b/src/gui/qml2/DissolveDark/Switch.qml @@ -1,10 +1,9 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T - T.Switch { id: control diff --git a/src/gui/qml2/DissolveDark/SwitchIndicator.qml b/src/gui/qml2/DissolveDark/SwitchIndicator.qml index e770b3e10d..60f8565663 100644 --- a/src/gui/qml2/DissolveDark/SwitchIndicator.qml +++ b/src/gui/qml2/DissolveDark/SwitchIndicator.qml @@ -1,9 +1,8 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T -import QtQuick.Controls.impl Rectangle { id: indicator diff --git a/src/gui/qml2/DissolveDark/Text.qml b/src/gui/qml2/DissolveDark/Text.qml index 7d90839ca9..b47bc9cc13 100644 --- a/src/gui/qml2/DissolveDark/Text.qml +++ b/src/gui/qml2/DissolveDark/Text.qml @@ -1,5 +1,5 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick import QtQuick.Templates as T diff --git a/src/gui/qml2/DissolveDark/Theme.qml b/src/gui/qml2/DissolveDark/Theme.qml index 9071157b85..ed83f4d3e8 100644 --- a/src/gui/qml2/DissolveDark/Theme.qml +++ b/src/gui/qml2/DissolveDark/Theme.qml @@ -1,5 +1,5 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors pragma Singleton diff --git a/src/gui/qml2/DissolveDark/ThemeColoursDark.qml b/src/gui/qml2/DissolveDark/ThemeColoursDark.qml index 236db1b737..2c976f270e 100644 --- a/src/gui/qml2/DissolveDark/ThemeColoursDark.qml +++ b/src/gui/qml2/DissolveDark/ThemeColoursDark.qml @@ -1,5 +1,5 @@ -// 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 +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors import QtQuick From 4f1c664826ef7f7e39db1395a5b0683278515c70 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 16:31:41 +0100 Subject: [PATCH 06/12] Remove unused Slider.qml --- src/gui/qml2/DissolveDark/Slider.qml | 87 ---------------------------- 1 file changed, 87 deletions(-) delete mode 100644 src/gui/qml2/DissolveDark/Slider.qml diff --git a/src/gui/qml2/DissolveDark/Slider.qml b/src/gui/qml2/DissolveDark/Slider.qml deleted file mode 100644 index 1471998a4d..0000000000 --- a/src/gui/qml2/DissolveDark/Slider.qml +++ /dev/null @@ -1,87 +0,0 @@ -// SPDX-License-Identifier: GPL-3.0-or-later -// Copyright (c) 2024 Team Dissolve and contributors - -import QtQuick -import QtQuick.Templates as T -import QtQuick.Controls.Imagine -import QtQuick.Controls.Imagine.impl - -T.Slider { - id: control - - implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, - implicitHandleWidth + leftPadding + rightPadding) - implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, - implicitHandleHeight + topPadding + bottomPadding) - - topPadding: background ? background.topPadding : 0 - leftPadding: background ? background.leftPadding : 0 - rightPadding: background ? background.rightPadding : 0 - bottomPadding: background ? background.bottomPadding : 0 - - topInset: background ? -background.topInset || 0 : 0 - leftInset: background ? -background.leftInset || 0 : 0 - rightInset: background ? -background.rightInset || 0 : 0 - bottomInset: background ? -background.bottomInset || 0 : 0 - - handle: Image { - x: Math.round(control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)) - y: Math.round(control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))) - - source: control.Imagine.url + "slider-handle" - ImageSelector on source { - states: [ - {"vertical": control.vertical}, - {"horizontal": control.horizontal}, - {"disabled": !control.enabled}, - {"pressed": control.pressed}, - {"focused": control.visualFocus}, - {"mirrored": control.mirrored}, - {"hovered": control.enabled && control.hovered} - ] - } - } - - background: NinePatchImage { - scale: control.horizontal && control.mirrored ? -1 : 1 - - source: control.Imagine.url + "slider-background" - NinePatchImageSelector on source { - states: [ - {"vertical": control.vertical}, - {"horizontal": control.horizontal}, - {"disabled": !control.enabled}, - {"pressed": control.down}, - {"focused": control.visualFocus}, - {"mirrored": control.mirrored}, - {"hovered": control.enabled && control.hovered} - ] - } - - NinePatchImage { - x: control.horizontal ? 0 : (parent.width - width) / 2 - y: control.horizontal - ? (parent.height - height) / 2 - : control.handle.height / 2 + control.visualPosition * (parent.height - control.handle.height) - width: control.horizontal - ? control.handle.width / 2 + control.position * (parent.width - control.handle.width) - : parent.width - height: control.vertical - ? control.handle.height / 2 + control.position * (parent.height - control.handle.height) - : parent.height - - source: control.Imagine.url + "slider-progress" - NinePatchImageSelector on source { - states: [ - {"vertical": control.vertical}, - {"horizontal": control.horizontal}, - {"disabled": !control.enabled}, - {"pressed": control.down}, - {"focused": control.visualFocus}, - {"mirrored": control.mirrored}, - {"hovered": control.enabled && control.hovered} - ] - } - } - } -} From 782e5753e07c603cba96b7576cf642a6a5f35cf3 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 19:57:25 +0100 Subject: [PATCH 07/12] Revert impl include. --- src/gui/qml2/DissolveDark/Button.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/src/gui/qml2/DissolveDark/Button.qml b/src/gui/qml2/DissolveDark/Button.qml index d9255674f6..8a2e36f749 100644 --- a/src/gui/qml2/DissolveDark/Button.qml +++ b/src/gui/qml2/DissolveDark/Button.qml @@ -3,6 +3,7 @@ import QtQuick import QtQuick.Templates as T +import QtQuick.Controls.impl T.Button { id: control From 676f84d2a3cd3bb2610ccd739af5c08bdeaf749a Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 19:58:26 +0100 Subject: [PATCH 08/12] Add SquareButton, test icons. --- src/gui/qml2/DissolveDark/SquareButton.qml | 46 +++++++++++++++++++++ src/gui/qml2/DissolveDark/qmldir | 1 + src/gui/qml2/icons/add.png | Bin 0 -> 1911 bytes src/gui/qml2/icons/threeSpecies.png | Bin 0 -> 7353 bytes src/gui/qml2/icons/warnBox.png | Bin 0 -> 693 bytes src/gui/qml2/test.qml | 12 +++++- 6 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 src/gui/qml2/DissolveDark/SquareButton.qml create mode 100644 src/gui/qml2/icons/add.png create mode 100644 src/gui/qml2/icons/threeSpecies.png create mode 100644 src/gui/qml2/icons/warnBox.png diff --git a/src/gui/qml2/DissolveDark/SquareButton.qml b/src/gui/qml2/DissolveDark/SquareButton.qml new file mode 100644 index 0000000000..321846d1e5 --- /dev/null +++ b/src/gui/qml2/DissolveDark/SquareButton.qml @@ -0,0 +1,46 @@ +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors + +import QtQuick +import QtQuick.Templates as T +import QtQuick.Controls.impl + +T.Button { + id: control + + property int size: 32 + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + + width: size + height: size + padding: 4 + spacing: 4 + + icon.width: size + icon.height: size + + contentItem: IconLabel { + width: 50 + height: 50 + spacing: control.spacing + mirrored: control.mirrored + display: control.display + + icon: control.icon + font: Theme.normalFont + color: Theme.getForegroundColour(control) + } + + background: ButtonPanel { + implicitWidth: parent.width + implicitHeight: parent.height + + control: control + visible: !control.flat || control.down || control.checked || control.highlighted || control.visualFocus + || (enabled && control.hovered) + } +} diff --git a/src/gui/qml2/DissolveDark/qmldir b/src/gui/qml2/DissolveDark/qmldir index 28878b9143..87d235936f 100644 --- a/src/gui/qml2/DissolveDark/qmldir +++ b/src/gui/qml2/DissolveDark/qmldir @@ -10,4 +10,5 @@ CheckIndicator 1.0 CheckIndicator.qml Pane 1.0 Pane.qml Switch 1.0 Switch.qml SwitchIndicator 1.0 SwitchIndicator.qml +SquareButton 1.0 SquareButton.qml Text 1.0 Text.qml diff --git a/src/gui/qml2/icons/add.png b/src/gui/qml2/icons/add.png new file mode 100644 index 0000000000000000000000000000000000000000..0e35226595a21a82118276c8475173ff1142e900 GIT binary patch literal 1911 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 Date: Thu, 25 Apr 2024 20:03:00 +0100 Subject: [PATCH 09/12] Rename test, add README. --- src/gui/qml2/README.md | 7 +++++++ src/gui/qml2/{test.qml => testGallery.qml} | 0 2 files changed, 7 insertions(+) create mode 100644 src/gui/qml2/README.md rename src/gui/qml2/{test.qml => testGallery.qml} (100%) diff --git a/src/gui/qml2/README.md b/src/gui/qml2/README.md new file mode 100644 index 0000000000..fac2e8b0a9 --- /dev/null +++ b/src/gui/qml2/README.md @@ -0,0 +1,7 @@ +Testing a new Theme and widgets for the Dissolve GUI v2.0. + +To show the test widget gallery (on Linux at least) run the following from the directory containing the testGallery.qml file: + +user:~> export QML_IMPORT_PATH=`pwd` +user:~> qml6 testGallery.qml --style DissolveDark + diff --git a/src/gui/qml2/test.qml b/src/gui/qml2/testGallery.qml similarity index 100% rename from src/gui/qml2/test.qml rename to src/gui/qml2/testGallery.qml From 3924e8459f656aee5ab16e6a7e1fee54e65e81a2 Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 20:12:10 +0100 Subject: [PATCH 10/12] Tweak spacing and padding. --- src/gui/qml2/testGallery.qml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/gui/qml2/testGallery.qml b/src/gui/qml2/testGallery.qml index 445f524876..8650fe80ba 100644 --- a/src/gui/qml2/testGallery.qml +++ b/src/gui/qml2/testGallery.qml @@ -8,11 +8,11 @@ Pane { Column { anchors.fill: parent - padding: 50 - spacing: 25 + padding: 4 + spacing: 4 Row { - spacing: 25 + spacing: 4 Button { text: "Button A" } Button { text: "Button B (Disabled)"; enabled: false } Button { text: "Button C (Icon)"; icon.source: "icons/add.png" } @@ -20,7 +20,7 @@ Pane { } Row { - spacing: 25 + spacing: 4 CheckBox { text: "Checkbox A" } CheckBox { text: "Checkbox B (Tristate)"; tristate: true } CheckBox { text: "Checkbox C (Disabled)"; checked: true; enabled: false } @@ -28,7 +28,7 @@ Pane { } Row { - spacing: 25 + spacing: 4 Switch { text: "Switch A" } Switch { } Switch { text: "Switch C (Disabled)"; checked: true; enabled: false } From 9fb488ce830c57673606390cf1362abe2040587c Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 21:14:31 +0100 Subject: [PATCH 11/12] Add GroupBox, reorganise gallery. --- src/gui/qml2/DissolveDark/GroupBox.qml | 40 +++++++++++++++ src/gui/qml2/DissolveDark/Theme.qml | 6 +-- src/gui/qml2/DissolveDark/qmldir | 1 + src/gui/qml2/testGallery.qml | 70 ++++++++++++++++---------- 4 files changed, 88 insertions(+), 29 deletions(-) create mode 100644 src/gui/qml2/DissolveDark/GroupBox.qml diff --git a/src/gui/qml2/DissolveDark/GroupBox.qml b/src/gui/qml2/DissolveDark/GroupBox.qml new file mode 100644 index 0000000000..9788f4baa2 --- /dev/null +++ b/src/gui/qml2/DissolveDark/GroupBox.qml @@ -0,0 +1,40 @@ +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors + +import QtQuick +import QtQuick.Templates as T + +T.GroupBox { + id: control + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + contentWidth + leftPadding + rightPadding, + implicitLabelWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + contentHeight + topPadding + bottomPadding) + + spacing: 4 + padding: 4 + topPadding: padding + (implicitLabelWidth > 0 ? implicitLabelHeight + spacing : 0) + + label: Text { + x: control.leftPadding + width: control.availableWidth + + text: control.title + font: Theme.normalFont + color: Theme.getForegroundColour(control) + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + } + + background: Rectangle { + y: control.topPadding - control.bottomPadding + width: parent.width + height: parent.height - control.topPadding + control.bottomPadding + + radius: 2 + gradient: Theme.controlBackgroundGradient + border.color: Theme.colours.mid + } +} diff --git a/src/gui/qml2/DissolveDark/Theme.qml b/src/gui/qml2/DissolveDark/Theme.qml index ed83f4d3e8..4cbe56043d 100644 --- a/src/gui/qml2/DissolveDark/Theme.qml +++ b/src/gui/qml2/DissolveDark/Theme.qml @@ -42,7 +42,7 @@ QtObject { property Gradient mainGradient: Gradient { GradientStop { position: 0.0; color: colours.background } GradientStop { position: 0.9; color: colours.background } - GradientStop { position: 1.0; color: colours.principal } + GradientStop { position: 1.0; color: colours.extraDark(colours.principal) } } property Gradient disabledGradient: Gradient { GradientStop { position: 0.0; color: colours.extraDark(colours.principal) } @@ -73,8 +73,8 @@ QtObject { GradientStop { position: 1.0; color: colours.darker(colours.principal) } } property Gradient controlBackgroundGradient: Gradient { - GradientStop { position: 0.0; color: colours.darker(colours.principal) } - GradientStop { position: 1.0; color: colours.extraDark(colours.principal) } + GradientStop { position: 0.0; color: colours.extraDark(colours.principal) } + GradientStop { position: 1.0; color: colours.background } } // Accent Gradients diff --git a/src/gui/qml2/DissolveDark/qmldir b/src/gui/qml2/DissolveDark/qmldir index 87d235936f..2da2a2aaba 100644 --- a/src/gui/qml2/DissolveDark/qmldir +++ b/src/gui/qml2/DissolveDark/qmldir @@ -7,6 +7,7 @@ Button 1.0 Button.qml ButtonPanel 1.0 ButtonPanel.qml CheckBox 1.0 CheckBox.qml CheckIndicator 1.0 CheckIndicator.qml +GroupBox 1.0 GroupBox.qml Pane 1.0 Pane.qml Switch 1.0 Switch.qml SwitchIndicator 1.0 SwitchIndicator.qml diff --git a/src/gui/qml2/testGallery.qml b/src/gui/qml2/testGallery.qml index 8650fe80ba..0fcb0762f2 100644 --- a/src/gui/qml2/testGallery.qml +++ b/src/gui/qml2/testGallery.qml @@ -1,45 +1,63 @@ import QtQuick 2.11 import QtQuick.Controls 2.1 +import QtQuick.Layouts 2.1 Pane { width: 600 height: 600 - Column { + Grid { anchors.fill: parent + columns: 3 padding: 4 spacing: 4 - Row { - spacing: 4 - Button { text: "Button A" } - Button { text: "Button B (Disabled)"; enabled: false } - Button { text: "Button C (Icon)"; icon.source: "icons/add.png" } - Button { text: "Button D (Icon, Disabled)"; enabled: false; icon.source: "icons/add.png" } + GroupBox { + title: "Button" + ColumnLayout { + spacing: 4 + Button { text: "Normal" } + Button { text: "Disabled"; enabled: false } + Button { text: "Icon"; icon.source: "icons/add.png" } + Button { text: "Icon, Disabled"; enabled: false; icon.source: "icons/add.png" } + } + } + + GroupBox { + title: "CheckBox" + ColumnLayout { + spacing: 4 + CheckBox { text: "Normal" } + CheckBox { text: "Tristate"; tristate: true } + CheckBox { text: "Disabled"; checked: true; enabled: false } + CheckBox { text: "Disabled, Tristate"; tristate: true; checkState: Qt.PartiallyChecked; enabled: false } + } + } + + GroupBox { + title: "Switch" + ColumnLayout { + spacing: 4 + Switch { text: "Normal" } + Switch { text: "Disabled"; checked: true; enabled: false } + } } - Row { - spacing: 4 - CheckBox { text: "Checkbox A" } - CheckBox { text: "Checkbox B (Tristate)"; tristate: true } - CheckBox { text: "Checkbox C (Disabled)"; checked: true; enabled: false } - CheckBox { text: "Checkbox D (Disabled, Tristate)"; tristate: true; checkState: Qt.PartiallyChecked; enabled: false } + GroupBox { + title: "SquareButton" + ColumnLayout { + spacing: 4 + SquareButton { icon.source: "icons/warnBox.png"; text: "Test"; size: 64 } + } } - Row { - spacing: 4 - Switch { text: "Switch A" } - Switch { } - Switch { text: "Switch C (Disabled)"; checked: true; enabled: false } + GroupBox { + title: "Label" + ColumnLayout { + spacing: 4 + Label { text: "Label" } + } } - - SquareButton { - icon.source: "icons/warnBox.png" - text: "Test" - size: 64 - } - - Label { text: "Label" } } } From e89520fdba7ca2dd809dc69ad90ca1a6d48bd74e Mon Sep 17 00:00:00 2001 From: Tristan Youngs Date: Thu, 25 Apr 2024 21:23:54 +0100 Subject: [PATCH 12/12] Add Label. --- src/gui/qml2/DissolveDark/Label.qml | 12 ++++++++++++ src/gui/qml2/DissolveDark/qmldir | 1 + src/gui/qml2/testGallery.qml | 3 ++- 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/gui/qml2/DissolveDark/Label.qml diff --git a/src/gui/qml2/DissolveDark/Label.qml b/src/gui/qml2/DissolveDark/Label.qml new file mode 100644 index 0000000000..775c084c00 --- /dev/null +++ b/src/gui/qml2/DissolveDark/Label.qml @@ -0,0 +1,12 @@ +// SPDX-License-Identifier: GPL-3.0-or-later +// Copyright (c) 2024 Team Dissolve and contributors + +import QtQuick +import QtQuick.Templates as T + +T.Label { + id: control + + font: Theme.normalFont + color: Theme.getForegroundColour(control) +} diff --git a/src/gui/qml2/DissolveDark/qmldir b/src/gui/qml2/DissolveDark/qmldir index 2da2a2aaba..bd53880808 100644 --- a/src/gui/qml2/DissolveDark/qmldir +++ b/src/gui/qml2/DissolveDark/qmldir @@ -8,6 +8,7 @@ ButtonPanel 1.0 ButtonPanel.qml CheckBox 1.0 CheckBox.qml CheckIndicator 1.0 CheckIndicator.qml GroupBox 1.0 GroupBox.qml +Label 1.0 Label.qml Pane 1.0 Pane.qml Switch 1.0 Switch.qml SwitchIndicator 1.0 SwitchIndicator.qml diff --git a/src/gui/qml2/testGallery.qml b/src/gui/qml2/testGallery.qml index 0fcb0762f2..d5c100959c 100644 --- a/src/gui/qml2/testGallery.qml +++ b/src/gui/qml2/testGallery.qml @@ -56,7 +56,8 @@ Pane { title: "Label" ColumnLayout { spacing: 4 - Label { text: "Label" } + Label { text: "Normal" } + Label { text: "Disabled"; enabled: false } } } }