From 029ea841168f98057401ce61aff23e815c7ca134 Mon Sep 17 00:00:00 2001 From: qewer33 Date: Wed, 22 Dec 2021 21:20:24 +0300 Subject: [PATCH] Implement custom ColorConfig button --- .gitignore | 2 + .../contents/ui/config/configAppearance.qml | 100 +++++------------- package/contents/ui/lib/ColorButton.qml | 37 +++++++ package/contents/ui/lib/FontConfig.qml | 99 +++++++++++++++++ 4 files changed, 165 insertions(+), 73 deletions(-) create mode 100644 package/contents/ui/lib/ColorButton.qml create mode 100644 package/contents/ui/lib/FontConfig.qml diff --git a/.gitignore b/.gitignore index 7866282..0277b71 100644 --- a/.gitignore +++ b/.gitignore @@ -7,3 +7,5 @@ ClearClock.files ClearClock.config ClearClock.includes ClearClock.plasmoid +.kdev4 +ClearClock.kdev4 diff --git a/package/contents/ui/config/configAppearance.qml b/package/contents/ui/config/configAppearance.qml index b0fcefe..8af0b6a 100644 --- a/package/contents/ui/config/configAppearance.qml +++ b/package/contents/ui/config/configAppearance.qml @@ -20,7 +20,7 @@ Item { signal configurationChanged property alias cfg_clockUse24hFormat: use24hFormat.checkState - property string cfg_clockFontColor: clockFontColor.value + property string cfg_clockFontColor: clockFontColorButton.value property string cfg_clockFontFamily property alias cfg_clockBoldText: clockBoldCheckBox.checked property alias cfg_clockItalicText: clockItalicCheckBox.checked @@ -114,32 +114,12 @@ Item { text: i18n("Font style:") } - QtControls.Button { + ColorButton { id: clockFontColorButton - text: i18n(" ") - Rectangle { - id: clockFontColorRect - anchors.fill: parent - border.color: "darkgray" - border.width: 1 - radius: 4 - color: cfg_clockFontColor - opacity: if (enabled) 1 - else 0.4 - } - MouseArea { - anchors.fill: parent - onClicked: clockFontColorDialog.open() - } - } + value: cfg_clockFontColor - ColorDialog { - id: clockFontColorDialog - title: "Select Background Color" - currentColor: cfg_clockFontColor - showAlphaChannel: true - onAccepted: { - cfg_clockFontColor = clockFontColorDialog.color + onValueChanged: { + cfg_clockFontColor = value } } @@ -150,6 +130,20 @@ Item { model: fontsModel textRole: "text" + function loadComboBoxValue() { + if (cgf_clockFontFamily === "ccdefault") { + return 0 + } else { + for (i = 0; i < fontsModel.count; i++) { + if (cgf_clockFontFamily === fontsModel.get(i).value) { + return i + 1 + } + } + } + } + + currentIndex: loadComboBoxValue() + onCurrentIndexChanged: { var current = model.get(currentIndex) if (current) { @@ -213,32 +207,12 @@ Item { else 0.4 } - QtControls.Button { + ColorButton { id: dayFontColorButton - text: i18n(" ") - Rectangle { - id: dayFontColorRect - anchors.fill: parent - border.color: "darkgray" - border.width: 1 - radius: 4 - color: cfg_dayFontColor - opacity: if (enabled) 1 - else 0.4 - } - MouseArea { - anchors.fill: parent - onClicked: dayFontColorDialog.open() - } - } + value: cfg_dayFontColor - ColorDialog { - id: dayFontColorDialog - title: "Select Background Color" - currentColor: cfg_dayFontColor - showAlphaChannel: true - onAccepted: { - cfg_dayFontColor = dayFontColorDialog.color + onValueChanged: { + cfg_dayFontColor = value } } @@ -336,32 +310,12 @@ Item { else 0.4 } - QtControls.Button { + ColorButton { id: dateFontColorButton - text: i18n(" ") - Rectangle { - id: dateFontColorRect - anchors.fill: parent - border.color: "darkgray" - border.width: 1 - radius: 4 - color: cfg_dateFontColor - opacity: if (enabled) 1 - else 0.4 - } - MouseArea { - anchors.fill: parent - onClicked: dateFontColorDialog.open() - } - } + value: cfg_dateFontColor - ColorDialog { - id: dateFontColorDialog - title: "Select Background Color" - currentColor: cfg_dateFontColor - showAlphaChannel: true - onAccepted: { - cfg_dateFontColor = dateFontColorDialog.color + onValueChanged: { + cfg_dateFontColor = value } } diff --git a/package/contents/ui/lib/ColorButton.qml b/package/contents/ui/lib/ColorButton.qml new file mode 100644 index 0000000..5659bc1 --- /dev/null +++ b/package/contents/ui/lib/ColorButton.qml @@ -0,0 +1,37 @@ +import QtQuick 2.4 +import QtQuick.Controls 2.12 as QtControls +import QtQuick.Layouts 1.15 as QtLayouts +import QtQuick.Dialogs 1.2 + +QtControls.Button { + id: clockFontColorButton + implicitWidth: 50 + implicitHeight: parent.height + + property color value + + Rectangle { + id: rect + anchors.fill: parent + anchors.margins: 5 + radius: 3 + color: value + opacity: if (enabled) 1 + else 0.4 + } + + MouseArea { + anchors.fill: parent + onClicked: dialog.open() + } + + ColorDialog { + id: dialog + title: "Select Background Color" + currentColor: value + showAlphaChannel: true + onAccepted: { + value = dialog.color + } + } +} diff --git a/package/contents/ui/lib/FontConfig.qml b/package/contents/ui/lib/FontConfig.qml new file mode 100644 index 0000000..2ec207c --- /dev/null +++ b/package/contents/ui/lib/FontConfig.qml @@ -0,0 +1,99 @@ +import QtQuick 2.4 +import QtQuick.Controls 2.12 as QtControls +import QtQuick.Layouts 1.15 as QtLayouts +import QtQuick.Dialogs 1.2 + + +QtLayouts.RowLayout { + + QtControls.Label { + text: i18n("Font style:") + } + + QtControls.Button { + id: clockFontColorButton + text: i18n(" ") + Rectangle { + id: clockFontColorRect + anchors.fill: parent + border.color: "darkgray" + border.width: 1 + radius: 4 + color: cfg_clockFontColor + opacity: if (enabled) 1 + else 0.4 + } + MouseArea { + anchors.fill: parent + onClicked: clockFontColorDialog.open() + } + } + + ColorDialog { + id: clockFontColorDialog + title: "Select Background Color" + currentColor: cfg_clockFontColor + showAlphaChannel: true + onAccepted: { + cfg_clockFontColor = clockFontColorDialog.color + } + } + + QtControls.ComboBox { + id: clockFontFamilyComboBox + QtLayouts.Layout.fillWidth: true + QtLayouts.Layout.minimumWidth: units.gridUnit * 10 + model: fontsModel + textRole: "text" + + function loadComboBoxValue() { + if (cgf_clockFontFamily === "ccdefault") { + return 0 + } else { + for (i = 0; i < fontsModel.count; i++) { + if (cgf_clockFontFamily === fontsModel.get(i).value) { + return i + 1 + } + } + } + } + + currentIndex: loadComboBoxValue() + + onCurrentIndexChanged: { + var current = model.get(currentIndex) + if (current) { + cfg_clockFontFamily = current.value + appearancePage.configurationChanged() + } + } + } + + QtControls.Button { + id: clockBoldCheckBox + // ToolTip.text: i18n("Bold text") + icon.name: "format-text-bold" + checkable: true + // Accessible.name: ToolTip.text + } + + QtControls.Button { + id: clockItalicCheckBox + // ToolTip.text: i18n("Italic text") + icon.name: "format-text-italic" + checkable: true + // Accessible.name: ToolTip.text + } + + QtControls.SpinBox { + id: clockFontSizeSpinBox + + from: 10 + to: 350 + } + + QtControls.Label { + text: "px" + } +} +}