From af2b8dd59ad7211a246d37bdba90d919c5469e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20B=C5=99=C3=ADza?= Date: Wed, 11 Oct 2023 08:58:59 +0200 Subject: [PATCH] Implememnt exclusive button lists as RadioButtons in settings --- modules/Lith/Style/CMakeLists.txt | 1 + modules/Lith/Style/RadioButton.qml | 87 ++++++++++++++++++++ modules/Lith/UI/CMakeLists.txt | 1 + modules/Lith/UI/ChannelInputBar.qml | 2 +- modules/Lith/UI/ChannelTextInput.qml | 2 +- modules/Lith/UI/SettingsFields/RadioList.qml | 56 +++++++++++++ modules/Lith/UI/SettingsInterface.qml | 30 ++----- 7 files changed, 155 insertions(+), 24 deletions(-) create mode 100644 modules/Lith/Style/RadioButton.qml create mode 100644 modules/Lith/UI/SettingsFields/RadioList.qml diff --git a/modules/Lith/Style/CMakeLists.txt b/modules/Lith/Style/CMakeLists.txt index 6008736..788c5e2 100644 --- a/modules/Lith/Style/CMakeLists.txt +++ b/modules/Lith/Style/CMakeLists.txt @@ -8,6 +8,7 @@ set(LITHSTYLE_QML Label.qml LithPalette.qml Popup.qml + RadioButton.qml ScrollBar.qml SpinBox.qml Switch.qml diff --git a/modules/Lith/Style/RadioButton.qml b/modules/Lith/Style/RadioButton.qml new file mode 100644 index 0000000..5953d5c --- /dev/null +++ b/modules/Lith/Style/RadioButton.qml @@ -0,0 +1,87 @@ +import QtQuick +import QtQuick.Templates as T + +import Lith.Core + +T.RadioButton { + id: control + checked: true + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + Math.max(implicitContentWidth, indicator.width) + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding, + implicitIndicatorHeight + topPadding + bottomPadding) + + spacing: 0 + padding: 6 + + background: Item {} + + indicator: Rectangle { + id: backgroundRect + implicitWidth: 26 * Math.max(1.0, Lith.settings.baseFontSize / 20) + implicitHeight: implicitWidth + anchors.verticalCenter: parent.verticalCenter + + radius: width / 2 + border.color: ColorUtils.mixColors(LithPalette.regular.button, LithPalette.regular.text, 0.9) + border.width: control.flat ? 0 : 0.5 + readonly property real themeQuotient: WindowHelper.lightTheme ? 0.0 : WindowHelper.useBlack ? 0.5 : 0.5 + color: { + if (control.flat) + return LithPalette.regular.window + if (!control.enabled) { + if (control.down) { + return ColorUtils.darken(LithPalette.disabled.button, 1.1 + backgroundRect.themeQuotient) + } + else { + return LithPalette.disabled.button + } + } + return LithPalette.regular.button + } + property color startColor: { + if (!control.enabled) + return backgroundRect.color + if (control.pressed) + return ColorUtils.darken(LithPalette.regular.button, 1.4 + backgroundRect.themeQuotient) + if (control.hovered || !control.flat) + return ColorUtils.lighten(LithPalette.regular.button, 1.15 + 0.2 * backgroundRect.themeQuotient) + return backgroundRect.color + } + property color endColor: { + if (!control.enabled) + return backgroundRect.color + if (control.pressed) + return ColorUtils.darken(LithPalette.regular.button, 1.2 + backgroundRect.themeQuotient) + if (control.hovered) + return ColorUtils.lighten(LithPalette.regular.button, 1.2 + 0.2 * backgroundRect.themeQuotient) + return backgroundRect.color + } + Behavior on startColor { ColorAnimation { duration: 100 } } + Behavior on endColor { ColorAnimation { duration: 100 } } + gradient: Gradient { + GradientStop { position: 0.0; color: backgroundRect.startColor } + GradientStop { position: 0.6; color: backgroundRect.endColor } + } + + Rectangle { + anchors.centerIn: parent + width: parent.width / 3 + height: width + radius: width / 2 + color: ColorUtils.mixColors(LithPalette.regular.windowText, LithPalette.regular.button, control.enabled ? 1.0 : 0.4) + visible: control.checked + } + } + + contentItem: Label { + leftPadding: visible && control.indicator && !control.mirrored ? control.indicator.width + control.spacing : 0 + rightPadding: visible && control.indicator && control.mirrored ? control.indicator.width + control.spacing : 0 + visible: text.length > 0 + text: control.text + font: control.font + color: ColorUtils.mixColors(LithPalette.regular.windowText, LithPalette.regular.window, enabled ? 1.0 : 0.3) + verticalAlignment: Text.AlignVCenter + } +} diff --git a/modules/Lith/UI/CMakeLists.txt b/modules/Lith/UI/CMakeLists.txt index 73f8d90..0c9b555 100644 --- a/modules/Lith/UI/CMakeLists.txt +++ b/modules/Lith/UI/CMakeLists.txt @@ -30,6 +30,7 @@ set(LITH_QML SettingsFields/IntSpinBox.qml SettingsFields/Integer.qml SettingsFields/MultiLineString.qml + SettingsFields/RadioList.qml SettingsFields/String.qml SettingsHotlistFormatEditor.qml SettingsInterface.qml diff --git a/modules/Lith/UI/ChannelInputBar.qml b/modules/Lith/UI/ChannelInputBar.qml index 671d721..4549ba0 100644 --- a/modules/Lith/UI/ChannelInputBar.qml +++ b/modules/Lith/UI/ChannelInputBar.qml @@ -135,7 +135,7 @@ Rectangle { ToolTip.delay: 800 onClicked: { if (channelTextInput.text.length > 0) { - Lith.selectedBuffer.input(channelTextInput.text) + Lith.selectedBuffer.userInput(channelTextInput.text) channelTextInput.text = "" } } diff --git a/modules/Lith/UI/ChannelTextInput.qml b/modules/Lith/UI/ChannelTextInput.qml index 20fd9ef..79a37aa 100644 --- a/modules/Lith/UI/ChannelTextInput.qml +++ b/modules/Lith/UI/ChannelTextInput.qml @@ -41,7 +41,7 @@ TextField { onAccepted: { if (text.length > 0) { - if (Lith.selectedBuffer.input(text)) { + if (Lith.selectedBuffer.userInput(text)) { text = "" } } diff --git a/modules/Lith/UI/SettingsFields/RadioList.qml b/modules/Lith/UI/SettingsFields/RadioList.qml new file mode 100644 index 0000000..c713a86 --- /dev/null +++ b/modules/Lith/UI/SettingsFields/RadioList.qml @@ -0,0 +1,56 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts + +Base { + id: root + property alias model: repeater.model + property int currentIndex: -1 + onCurrentIndexChanged: { + if (currentIndex < 0) { + for (const button in buttonGroup.buttons) { + button.checked = false + } + } + else if (currentIndex < buttonGroup.buttons.length) { + buttonGroup.buttons[currentIndex].checked = true + } + } + Component.onCompleted: { + if (currentIndex >= 0 && currentIndex < buttonGroup.buttons.length) { + buttonGroup.buttons[currentIndex].checked = true + } + } + + ButtonGroup { + id: buttonGroup + onCheckedButtonChanged: root.currentIndex = checkedButton.index + } + + rowComponent: ColumnLayout { + Layout.topMargin: 6 + Layout.bottomMargin: 6 + spacing: 6 + Repeater { + id: repeater + RowLayout { + id: radioDelegateLayout + required property var modelData + required property int index + + Layout.alignment: Qt.AlignRight + + Label { + text: modelData + } + + RadioButton { + ButtonGroup.group: buttonGroup + checked: false + readonly property int index: radioDelegateLayout.index + padding: 0 + } + } + } + } +} diff --git a/modules/Lith/UI/SettingsInterface.qml b/modules/Lith/UI/SettingsInterface.qml index b2b4ad3..7421dbf 100644 --- a/modules/Lith/UI/SettingsInterface.qml +++ b/modules/Lith/UI/SettingsInterface.qml @@ -45,8 +45,8 @@ ScrollView { Lith.settings.openLinksDirectly = openLinksDirectlyCheckbox.checked Lith.settings.openLinksDirectlyInBrowser = openLinksDirectlyInBrowserSwitch.checked Lith.settings.scrollbarsOverlayContents = scrollbarsOverlayContentsCheckbox.checked - Lith.settings.forceLightTheme = forceLightThemeCheckbox.checked - Lith.settings.forceDarkTheme = forceDarkThemeCheckbox.checked + Lith.settings.forceLightTheme = colorSchemeRadioList.currentIndex === 1 + Lith.settings.forceDarkTheme = colorSchemeRadioList.currentIndex === 2 Lith.settings.useTrueBlackWithDarkTheme = useTrueBlackWithDarkThemeCheckbox.checked Lith.settings.hotlistEnabled = hotlistEnabledCheckbox.checked Lith.settings.hotlistCompact = hotlistCompactCheckbox.checked @@ -76,8 +76,7 @@ ScrollView { openLinksDirectlyCheckbox.checked = Lith.settings.openLinksDirectly openLinksDirectlyInBrowserSwitch.checked = Lith.settings.openLinksDirectlyInBrowser scrollbarsOverlayContentsCheckbox.checked = Lith.settings.scrollbarsOverlayContents - forceLightThemeCheckbox.checked = Lith.settings.forceLightTheme - forceDarkThemeCheckbox.checked = Lith.settings.forceDarkTheme + colorSchemeRadioList.currentIndex = Lith.settings.forceLightTheme ? 1 : Lith.settings.forceDarkTheme ? 2 : 0 useTrueBlackWithDarkThemeCheckbox.checked = Lith.settings.useTrueBlackWithDarkTheme hotlistEnabledCheckbox.checked = Lith.settings.hotlistEnabled hotlistCompactCheckbox.checked = Lith.settings.hotlistCompact @@ -202,24 +201,11 @@ ScrollView { text: qsTr("Color theme") } - Fields.Boolean { - id: forceLightThemeCheckbox - summary: qsTr("Force light theme") - checked: Lith.settings.forceLightTheme - onCheckedChanged: { - if (checked) - forceDarkThemeCheckbox.checked = false - } - } - - Fields.Boolean { - id: forceDarkThemeCheckbox - summary: qsTr("Force dark theme") - checked: Lith.settings.forceDarkTheme - onCheckedChanged: { - if (checked) - forceLightThemeCheckbox.checked = false - } + Fields.RadioList { + id: colorSchemeRadioList + summary: qsTr("Color scheme") + model: [qsTr("System default", "color scheme"), qsTr("Light", "color scheme"), qsTr("Dark", "color scheme")] + currentIndex: Lith.settings.forceLightTheme ? 1 : Lith.settings.forceDarkTheme ? 2 : 0 } Fields.Boolean {