desu/ClearClock
1
0
Fork 0
mirror of https://github.com/developersu/ClearClock.git synced 2025-05-14 19:20:26 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make configuration use Kirigami FormLayout

Browse source
This commit is contained in:
qewer33 2024-04-18 21:49:46 +03:00
parent cee507a227
commit fa0bb4f9fb
4 changed files with 230 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

460
package/contents/ui/config/configAppearance.qml
View file

@ -11,10 +11,9 @@ import QtQuick.Dialogs
import org.kde.kirigami 2.3 as Kirigami import org.kde.kirigami 2.3 as Kirigami
import org.kde.kcmutils as KCM import org.kde.kcmutils as KCM
import "../lib" import "../lib"
KCM.ScrollViewKCM { KCM.SimpleKCM {
id: appearancePage id: appearancePage
width: childrenRect.width width: childrenRect.width
height: childrenRect.height height: childrenRect.height
@ -81,288 +80,269 @@ KCM.ScrollViewKCM {
} }
} }
QtLayouts.ColumnLayout { Kirigami.FormLayout {
id: layout id: layout
anchors.fill: parent anchors.fill: parent
spacing: 30
QtLayouts.ColumnLayout {
QtLayouts.Layout.fillWidth: true
spacing: 10
QtControls.Label { Kirigami.Separator {
text: i18n("Clock Display Settings") Kirigami.FormData.isSection: true
font.bold: true Kirigami.FormData.label: "Clock Display Settings"
font.pixelSize: 17 }
}
QtControls.CheckBox { QtControls.CheckBox {
id: use24hFormat Kirigami.FormData.label: "Use 24-hour clock"
text: i18n("Use 24-hour clock") id: use24hFormat
tristate: false tristate: false
checked: cfg_clockUse24hFormat checked: cfg_clockUse24hFormat
} }
QtControls.CheckBox { QtControls.CheckBox {
id: showSeconds Kirigami.FormData.label: "Show seconds"
text: i18n("Show seconds") id: showSeconds
tristate: false tristate: false
checked: cfg_clockShowSeconds checked: cfg_clockShowSeconds
} }
QtLayouts.RowLayout { QtControls.TextField {
QtControls.Label { Kirigami.FormData.label: "Separator"
text: i18n("Separator:") id: clockSeparatorTextField
} maximumLength: 1
}
QtControls.TextField { ColorButton {
id: clockSeparatorTextField Kirigami.FormData.label: "Color"
maximumLength: 1
}
}
FontConfig { onValueChanged: {
fontModel: fontsModel cfg_clockFontColor = value
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
}
} }
} }
QtLayouts.ColumnLayout { FontConfig {
QtLayouts.Layout.fillWidth: true Kirigami.FormData.label: "Font"
spacing: 10 fontModel: fontsModel
QtControls.Label { fontValue: cfg_clockFontFamily
text: i18n("Day Display Settings") onFontValueChanged: {
font.bold: true cfg_clockFontFamily = fontValue
font.pixelSize: 17
} }
QtControls.CheckBox { boldValue: cfg_clockBoldText
id: showDayDisplayCheckBox onBoldValueChanged: {
text: i18n("Show day display") cfg_clockBoldText = boldValue
} }
FontConfig { italicValue: cfg_clockItalicText
fontModel: fontsModel onItalicValueChanged: {
enabled: showDayDisplayCheckBox.checked cfg_clockItalicText = italicValue
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
}
} }
QtControls.CheckBox { pxSizeValue: cfg_clockFontSize
id: dayShadowCheckBox onPxSizeValueChanged: {
text: i18n("Enable shadow") cfg_clockFontSize = pxSizeValue
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
}
} }
} }
QtLayouts.ColumnLayout { QtControls.CheckBox {
QtLayouts.Layout.fillWidth: true id: clockShadowCheckBox
spacing: 10 text: i18n("Enable shadow")
tristate: false
checked: cfg_clockShadowEnabled
}
QtControls.Label { ShadowConfig {
text: i18n("Date Display Settings") Kirigami.FormData.label: "Shadow"
font.bold: true enabled: clockShadowCheckBox.checked
font.pixelSize: 17
colorValue: cfg_clockShadowColor
onColorValueChanged: {
cfg_clockShadowColor = colorValue
} }
QtControls.CheckBox { radiusValue: cfg_clockShadowRadius
id: showDateDisplayCheckBox onRadiusValueChanged: {
text: i18n("Show date display") cfg_clockShadowRadius = radiusValue
} }
QtLayouts.RowLayout { offsetXValue: cfg_clockShadowXOffset
enabled: showDateDisplayCheckBox.checked onOffsetXValueChanged: {
cfg_clockShadowXOffset = offsetXValue
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")
}
}
} }
FontConfig { offsetYValue: cfg_clockShadowYOffset
fontModel: fontsModel onOffsetYValueChanged: {
enabled: showDateDisplayCheckBox.checked cfg_clockShadowYOffset = offsetYValue
}
}
colorValue: cfg_dateFontColor
onColorValueChanged: {
cfg_dateFontColor = colorValue
}
fontValue: cfg_dateFontFamily Kirigami.Separator {
onFontValueChanged: { Kirigami.FormData.isSection: true
cfg_dateFontFamily = fontValue Kirigami.FormData.label: "Day Display Settings"
} }
boldValue: cfg_dateBoldText QtControls.CheckBox {
onBoldValueChanged: { Kirigami.FormData.label: "Show day display"
cfg_dateBoldText = boldValue id: showDayDisplayCheckBox
} }
italicValue: cfg_dateItalicText ColorButton {
onItalicValueChanged: { Kirigami.FormData.label: "Color"
cfg_dateItalicText = italicValue
}
pxSizeValue: cfg_dateFontSize onValueChanged: {
onPxSizeValueChanged: { cfg_dayFontColor = value
cfg_dateFontSize = pxSizeValue }
} }
FontConfig {
Kirigami.FormData.label: "Font"
fontModel: fontsModel
enabled: showDayDisplayCheckBox.checked
fontValue: cfg_dayFontFamily
onFontValueChanged: {
cfg_dayFontFamily = fontValue
} }
QtControls.CheckBox { boldValue: cfg_dayBoldText
id: dateShadowCheckBox onBoldValueChanged: {
text: i18n("Enable shadow") cfg_dayBoldText = boldValue
tristate: false
checked: cfg_dateShadowEnabled
} }
ShadowConfig { italicValue: cfg_dayItalicText
enabled: dateShadowCheckBox.checked onItalicValueChanged: {
cfg_dayItalicText = italicValue
}
colorValue: cfg_dateShadowColor pxSizeValue: cfg_dayFontSize
onColorValueChanged: { onPxSizeValueChanged: {
cfg_dateShadowColor = colorValue cfg_dayFontSize = pxSizeValue
} }
}
radiusValue: cfg_dateShadowRadius QtControls.CheckBox {
onRadiusValueChanged: { id: dayShadowCheckBox
cfg_dateShadowRadius = radiusValue text: i18n("Enable shadow")
} tristate: false
checked: cfg_dayShadowEnabled
}
offsetXValue: cfg_dateShadowXOffset ShadowConfig {
onOffsetXValueChanged: { Kirigami.FormData.label: "Shadow"
cfg_dateShadowXOffset = offsetXValue enabled: dayShadowCheckBox.checked
}
offsetYValue: cfg_dateShadowYOffset colorValue: cfg_dayShadowColor
onOffsetYValueChanged: { onColorValueChanged: {
cfg_dateShadowYOffset = offsetYValue 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}
}
##^##*/

10
package/contents/ui/lib/ColorButton.qml
View file

@ -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-FileCopyrightText: 2022 qewer33
SPDX-License-Identifier: GPL-3.0-or-later 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 import QtQuick.Dialogs
QtControls.Button { QtControls.Button {
id: clockFontColorButton id: clockFontColorButton
implicitWidth: 50 implicitWidth: 50
implicitHeight: parent.height
property color value property color value
@ -21,8 +20,7 @@ QtControls.Button {
anchors.margins: 5 anchors.margins: 5
radius: 3 radius: 3
color: value color: value
opacity: if (enabled) 1 opacity: enabled ? 1 : 0.4
else 0.4
} }
MouseArea { MouseArea {

27
package/contents/ui/lib/FontConfig.qml
View file

@ -16,41 +16,22 @@ QtLayouts.RowLayout {
property var fontModel property var fontModel
property color colorValue
property string fontValue property string fontValue
property bool boldValue property bool boldValue
property bool italicValue property bool italicValue
property int pxSizeValue 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 { QtControls.ComboBox {
id: fontFamilyComboBox id: fontFamilyComboBox
QtLayouts.Layout.fillWidth: true QtLayouts.Layout.maximumWidth: Kirigami.Units.gridUnit * 10
QtLayouts.Layout.minimumWidth: Kirigami.Units.gridUnit * 10
model: fontModel model: fontModel
textRole: "text" textRole: "text"
currentIndex: getIdFromModel() currentIndex: getIdFromModel()
function getIdFromModel(){ function getIdFromModel() {
for(var i = 0; i < model.count; i++){ for (var i = 0; i < model.count; i++) {
if(model.get(i).value === fontValue){ if (model.get(i).value === fontValue) return i;
return i;
}
} }
return 0; return 0;
} }

12
package/contents/ui/lib/ShadowConfig.qml
View file

@ -18,12 +18,6 @@ QtLayouts.RowLayout {
property int offsetYValue property int offsetYValue
QtControls.Label {
text: i18n("Shadow style:")
opacity: if (enabled) 1
else 0.4
}
ColorButton { ColorButton {
id: shadowColorButton id: shadowColorButton
value: colorValue value: colorValue
@ -35,8 +29,7 @@ QtLayouts.RowLayout {
QtControls.Label { QtControls.Label {
text: i18n("Radius") text: i18n("Radius")
opacity: if (enabled) 1 opacity: enabled ? 1 : 0.4
else 0.4
} }
QtControls.SpinBox { QtControls.SpinBox {
@ -52,8 +45,7 @@ QtLayouts.RowLayout {
QtControls.Label { QtControls.Label {
text: i18n("Offset") text: i18n("Offset")
opacity: if (enabled) 1 opacity: enabled ? 1 : 0.4
else 0.4
} }
QtControls.SpinBox { QtControls.SpinBox {