From fa0bb4f9fbb9db7d464c890856e5cde9a49da199 Mon Sep 17 00:00:00 2001 From: qewer33 Date: Thu, 18 Apr 2024 21:49:46 +0300 Subject: [PATCH] Make configuration use Kirigami FormLayout --- .../contents/ui/config/configAppearance.qml | 460 +++++++++--------- package/contents/ui/lib/ColorButton.qml | 10 +- package/contents/ui/lib/FontConfig.qml | 27 +- package/contents/ui/lib/ShadowConfig.qml | 12 +- 4 files changed, 230 insertions(+), 279 deletions(-) diff --git a/package/contents/ui/config/configAppearance.qml b/package/contents/ui/config/configAppearance.qml index 90106ce..94349f1 100644 --- a/package/contents/ui/config/configAppearance.qml +++ b/package/contents/ui/config/configAppearance.qml @@ -11,10 +11,9 @@ import QtQuick.Dialogs import org.kde.kirigami 2.3 as Kirigami import org.kde.kcmutils as KCM - import "../lib" -KCM.ScrollViewKCM { +KCM.SimpleKCM { id: appearancePage width: childrenRect.width height: childrenRect.height @@ -81,288 +80,269 @@ KCM.ScrollViewKCM { } } - QtLayouts.ColumnLayout { + Kirigami.FormLayout { id: layout anchors.fill: parent - spacing: 30 - QtLayouts.ColumnLayout { - QtLayouts.Layout.fillWidth: true - spacing: 10 - QtControls.Label { - text: i18n("Clock Display Settings") - font.bold: true - font.pixelSize: 17 - } + Kirigami.Separator { + Kirigami.FormData.isSection: true + Kirigami.FormData.label: "Clock Display Settings" + } - QtControls.CheckBox { - id: use24hFormat - text: i18n("Use 24-hour clock") - tristate: false - checked: cfg_clockUse24hFormat - } + QtControls.CheckBox { + Kirigami.FormData.label: "Use 24-hour clock" + id: use24hFormat + tristate: false + checked: cfg_clockUse24hFormat + } - QtControls.CheckBox { - id: showSeconds - text: i18n("Show seconds") - tristate: false - checked: cfg_clockShowSeconds - } + QtControls.CheckBox { + Kirigami.FormData.label: "Show seconds" + id: showSeconds + tristate: false + checked: cfg_clockShowSeconds + } - QtLayouts.RowLayout { - QtControls.Label { - text: i18n("Separator:") - } + QtControls.TextField { + Kirigami.FormData.label: "Separator" + id: clockSeparatorTextField + maximumLength: 1 + } - QtControls.TextField { - id: clockSeparatorTextField - maximumLength: 1 - } - } + ColorButton { + Kirigami.FormData.label: "Color" - FontConfig { - fontModel: fontsModel - - colorValue: cfg_clockFontColor - onColorValueChanged: { - cfg_clockFontColor = colorValue - } - - fontValue: cfg_clockFontFamily - onFontValueChanged: { - cfg_clockFontFamily = fontValue - } - - boldValue: cfg_clockBoldText - onBoldValueChanged: { - cfg_clockBoldText = boldValue - } - - italicValue: cfg_clockItalicText - onItalicValueChanged: { - cfg_clockItalicText = italicValue - } - - pxSizeValue: cfg_clockFontSize - onPxSizeValueChanged: { - cfg_clockFontSize = pxSizeValue - } - } - - QtControls.CheckBox { - id: clockShadowCheckBox - text: i18n("Enable shadow") - tristate: false - checked: cfg_clockShadowEnabled - } - - ShadowConfig { - enabled: clockShadowCheckBox.checked - - colorValue: cfg_clockShadowColor - onColorValueChanged: { - cfg_clockShadowColor = colorValue - } - - radiusValue: cfg_clockShadowRadius - onRadiusValueChanged: { - cfg_clockShadowRadius = radiusValue - } - - offsetXValue: cfg_clockShadowXOffset - onOffsetXValueChanged: { - cfg_clockShadowXOffset = offsetXValue - } - - offsetYValue: cfg_clockShadowYOffset - onOffsetYValueChanged: { - cfg_clockShadowYOffset = offsetYValue - } + onValueChanged: { + cfg_clockFontColor = value } } - QtLayouts.ColumnLayout { - QtLayouts.Layout.fillWidth: true - spacing: 10 + FontConfig { + Kirigami.FormData.label: "Font" + fontModel: fontsModel - QtControls.Label { - text: i18n("Day Display Settings") - font.bold: true - font.pixelSize: 17 + fontValue: cfg_clockFontFamily + onFontValueChanged: { + cfg_clockFontFamily = fontValue } - QtControls.CheckBox { - id: showDayDisplayCheckBox - text: i18n("Show day display") + boldValue: cfg_clockBoldText + onBoldValueChanged: { + cfg_clockBoldText = boldValue } - FontConfig { - fontModel: fontsModel - enabled: showDayDisplayCheckBox.checked - - colorValue: cfg_dayFontColor - onColorValueChanged: { - cfg_dayFontColor = colorValue - } - - fontValue: cfg_dayFontFamily - onFontValueChanged: { - cfg_dayFontFamily = fontValue - } - - boldValue: cfg_dayBoldText - onBoldValueChanged: { - cfg_dayBoldText = boldValue - } - - italicValue: cfg_dayItalicText - onItalicValueChanged: { - cfg_dayItalicText = italicValue - } - - pxSizeValue: cfg_dayFontSize - onPxSizeValueChanged: { - cfg_dayFontSize = pxSizeValue - } + italicValue: cfg_clockItalicText + onItalicValueChanged: { + cfg_clockItalicText = italicValue } - QtControls.CheckBox { - id: dayShadowCheckBox - text: i18n("Enable shadow") - tristate: false - checked: cfg_dayShadowEnabled - } - - ShadowConfig { - enabled: dayShadowCheckBox.checked - - colorValue: cfg_dayShadowColor - onColorValueChanged: { - cfg_dayShadowColor = colorValue - } - - radiusValue: cfg_dayShadowRadius - onRadiusValueChanged: { - cfg_dayShadowRadius = radiusValue - } - - offsetXValue: cfg_dayShadowXOffset - onOffsetXValueChanged: { - cfg_dayShadowXOffset = offsetXValue - } - - offsetYValue: cfg_clockShadowYOffset - onOffsetYValueChanged: { - cfg_dayShadowYOffset = offsetYValue - } + pxSizeValue: cfg_clockFontSize + onPxSizeValueChanged: { + cfg_clockFontSize = pxSizeValue } } - QtLayouts.ColumnLayout { - QtLayouts.Layout.fillWidth: true - spacing: 10 + QtControls.CheckBox { + id: clockShadowCheckBox + text: i18n("Enable shadow") + tristate: false + checked: cfg_clockShadowEnabled + } - QtControls.Label { - text: i18n("Date Display Settings") - font.bold: true - font.pixelSize: 17 + ShadowConfig { + Kirigami.FormData.label: "Shadow" + enabled: clockShadowCheckBox.checked + + colorValue: cfg_clockShadowColor + onColorValueChanged: { + cfg_clockShadowColor = colorValue } - QtControls.CheckBox { - id: showDateDisplayCheckBox - text: i18n("Show date display") + radiusValue: cfg_clockShadowRadius + onRadiusValueChanged: { + cfg_clockShadowRadius = radiusValue } - QtLayouts.RowLayout { - enabled: showDateDisplayCheckBox.checked - - QtControls.Label { - text: i18n("Date format:") - opacity: if (enabled) 1 - else 0.4 - } - - QtLayouts.RowLayout { - QtControls.TextField { - id: customDateFormat - QtLayouts.Layout.fillWidth: true - } - - QtControls.Button { - icon.name: "exifinfo" - onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method") - } - } + offsetXValue: cfg_clockShadowXOffset + onOffsetXValueChanged: { + cfg_clockShadowXOffset = offsetXValue } - FontConfig { - fontModel: fontsModel - enabled: showDateDisplayCheckBox.checked + offsetYValue: cfg_clockShadowYOffset + onOffsetYValueChanged: { + cfg_clockShadowYOffset = offsetYValue + } + } - colorValue: cfg_dateFontColor - onColorValueChanged: { - cfg_dateFontColor = colorValue - } - fontValue: cfg_dateFontFamily - onFontValueChanged: { - cfg_dateFontFamily = fontValue - } + Kirigami.Separator { + Kirigami.FormData.isSection: true + Kirigami.FormData.label: "Day Display Settings" + } - boldValue: cfg_dateBoldText - onBoldValueChanged: { - cfg_dateBoldText = boldValue - } + QtControls.CheckBox { + Kirigami.FormData.label: "Show day display" + id: showDayDisplayCheckBox + } - italicValue: cfg_dateItalicText - onItalicValueChanged: { - cfg_dateItalicText = italicValue - } + ColorButton { + Kirigami.FormData.label: "Color" - pxSizeValue: cfg_dateFontSize - onPxSizeValueChanged: { - cfg_dateFontSize = pxSizeValue - } + onValueChanged: { + cfg_dayFontColor = value + } + } + + FontConfig { + Kirigami.FormData.label: "Font" + fontModel: fontsModel + enabled: showDayDisplayCheckBox.checked + + fontValue: cfg_dayFontFamily + onFontValueChanged: { + cfg_dayFontFamily = fontValue } - QtControls.CheckBox { - id: dateShadowCheckBox - text: i18n("Enable shadow") - tristate: false - checked: cfg_dateShadowEnabled + boldValue: cfg_dayBoldText + onBoldValueChanged: { + cfg_dayBoldText = boldValue } - ShadowConfig { - enabled: dateShadowCheckBox.checked + italicValue: cfg_dayItalicText + onItalicValueChanged: { + cfg_dayItalicText = italicValue + } - colorValue: cfg_dateShadowColor - onColorValueChanged: { - cfg_dateShadowColor = colorValue - } + pxSizeValue: cfg_dayFontSize + onPxSizeValueChanged: { + cfg_dayFontSize = pxSizeValue + } + } - radiusValue: cfg_dateShadowRadius - onRadiusValueChanged: { - cfg_dateShadowRadius = radiusValue - } + QtControls.CheckBox { + id: dayShadowCheckBox + text: i18n("Enable shadow") + tristate: false + checked: cfg_dayShadowEnabled + } - offsetXValue: cfg_dateShadowXOffset - onOffsetXValueChanged: { - cfg_dateShadowXOffset = offsetXValue - } + ShadowConfig { + Kirigami.FormData.label: "Shadow" + enabled: dayShadowCheckBox.checked - offsetYValue: cfg_dateShadowYOffset - onOffsetYValueChanged: { - cfg_dateShadowYOffset = offsetYValue - } + colorValue: cfg_dayShadowColor + onColorValueChanged: { + cfg_dayShadowColor = colorValue + } + + radiusValue: cfg_dayShadowRadius + onRadiusValueChanged: { + cfg_dayShadowRadius = radiusValue + } + + offsetXValue: cfg_dayShadowXOffset + onOffsetXValueChanged: { + cfg_dayShadowXOffset = offsetXValue + } + + offsetYValue: cfg_clockShadowYOffset + onOffsetYValueChanged: { + cfg_dayShadowYOffset = offsetYValue + } + } + + + Kirigami.Separator { + Kirigami.FormData.isSection: true + Kirigami.FormData.label: "Date Display Settings" + } + + QtControls.CheckBox { + Kirigami.FormData.label: "Show date display" + id: showDateDisplayCheckBox + } + + QtLayouts.RowLayout { + Kirigami.FormData.label: "Date format" + enabled: showDateDisplayCheckBox.checked + + QtControls.TextField { + id: customDateFormat + QtLayouts.Layout.fillWidth: true + } + + QtControls.Button { + icon.name: "exifinfo" + onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method") + } + } + + ColorButton { + Kirigami.FormData.label: "Color" + + onValueChanged: { + cfg_dateFontColor = value + } + } + + FontConfig { + Kirigami.FormData.label: "Font" + fontModel: fontsModel + enabled: showDateDisplayCheckBox.checked + + fontValue: cfg_dateFontFamily + onFontValueChanged: { + cfg_dateFontFamily = fontValue + } + + boldValue: cfg_dateBoldText + onBoldValueChanged: { + cfg_dateBoldText = boldValue + } + + italicValue: cfg_dateItalicText + onItalicValueChanged: { + cfg_dateItalicText = italicValue + } + + pxSizeValue: cfg_dateFontSize + onPxSizeValueChanged: { + cfg_dateFontSize = pxSizeValue + } + } + + QtControls.CheckBox { + id: dateShadowCheckBox + text: i18n("Enable shadow") + tristate: false + checked: cfg_dateShadowEnabled + } + + ShadowConfig { + Kirigami.FormData.label: "Shadow" + enabled: dateShadowCheckBox.checked + + colorValue: cfg_dateShadowColor + onColorValueChanged: { + cfg_dateShadowColor = colorValue + } + + radiusValue: cfg_dateShadowRadius + onRadiusValueChanged: { + cfg_dateShadowRadius = radiusValue + } + + offsetXValue: cfg_dateShadowXOffset + onOffsetXValueChanged: { + cfg_dateShadowXOffset = offsetXValue + } + + offsetYValue: cfg_dateShadowYOffset + onOffsetYValueChanged: { + cfg_dateShadowYOffset = offsetYValue } } } } -/*##^## -Designer { - D{i:0;autoSize:true;height:480;width:640}D{i:1}D{i:3}D{i:2} -} -##^##*/ - diff --git a/package/contents/ui/lib/ColorButton.qml b/package/contents/ui/lib/ColorButton.qml index bd19fbb..675cfe0 100644 --- a/package/contents/ui/lib/ColorButton.qml +++ b/package/contents/ui/lib/ColorButton.qml @@ -1,17 +1,16 @@ -import QtQuick 2.4 -import QtQuick.Controls 2.12 as QtControls -import QtQuick.Layouts 1.12 as QtLayouts /* SPDX-FileCopyrightText: 2022 qewer33 SPDX-License-Identifier: GPL-3.0-or-later */ +import QtQuick 2.4 +import QtQuick.Controls 2.12 as QtControls +import QtQuick.Layouts 1.12 as QtLayouts import QtQuick.Dialogs QtControls.Button { id: clockFontColorButton implicitWidth: 50 - implicitHeight: parent.height property color value @@ -21,8 +20,7 @@ QtControls.Button { anchors.margins: 5 radius: 3 color: value - opacity: if (enabled) 1 - else 0.4 + opacity: enabled ? 1 : 0.4 } MouseArea { diff --git a/package/contents/ui/lib/FontConfig.qml b/package/contents/ui/lib/FontConfig.qml index d74cbd9..bbed27a 100644 --- a/package/contents/ui/lib/FontConfig.qml +++ b/package/contents/ui/lib/FontConfig.qml @@ -16,41 +16,22 @@ QtLayouts.RowLayout { property var fontModel - property color colorValue property string fontValue property bool boldValue property bool italicValue property int pxSizeValue - QtControls.Label { - text: i18n("Font style:") - opacity: if (enabled) 1 - else 0.4 - } - - ColorButton { - id: fontColorButton - value: colorValue - - onValueChanged: { - colorValue = value - } - } - QtControls.ComboBox { id: fontFamilyComboBox - QtLayouts.Layout.fillWidth: true - QtLayouts.Layout.minimumWidth: Kirigami.Units.gridUnit * 10 + QtLayouts.Layout.maximumWidth: Kirigami.Units.gridUnit * 10 model: fontModel textRole: "text" currentIndex: getIdFromModel() - function getIdFromModel(){ - for(var i = 0; i < model.count; i++){ - if(model.get(i).value === fontValue){ - return i; - } + function getIdFromModel() { + for (var i = 0; i < model.count; i++) { + if (model.get(i).value === fontValue) return i; } return 0; } diff --git a/package/contents/ui/lib/ShadowConfig.qml b/package/contents/ui/lib/ShadowConfig.qml index 1ab9ef4..fab90f4 100644 --- a/package/contents/ui/lib/ShadowConfig.qml +++ b/package/contents/ui/lib/ShadowConfig.qml @@ -18,12 +18,6 @@ QtLayouts.RowLayout { property int offsetYValue - QtControls.Label { - text: i18n("Shadow style:") - opacity: if (enabled) 1 - else 0.4 - } - ColorButton { id: shadowColorButton value: colorValue @@ -35,8 +29,7 @@ QtLayouts.RowLayout { QtControls.Label { text: i18n("Radius") - opacity: if (enabled) 1 - else 0.4 + opacity: enabled ? 1 : 0.4 } QtControls.SpinBox { @@ -52,8 +45,7 @@ QtLayouts.RowLayout { QtControls.Label { text: i18n("Offset") - opacity: if (enabled) 1 - else 0.4 + opacity: enabled ? 1 : 0.4 } QtControls.SpinBox {