mirror of
https://github.com/developersu/ClearClock.git
synced 2025-05-14 19:20:26 +03:00
Make configuration use Kirigami FormLayout
This commit is contained in:
parent
cee507a227
commit
fa0bb4f9fb
4 changed files with 230 additions and 279 deletions
|
@ -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}
|
||||
}
|
||||
##^##*/
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue