diff --git a/package/contents/config/main.xml b/package/contents/config/main.xml index 8cdc022..124a6a2 100644 --- a/package/contents/config/main.xml +++ b/package/contents/config/main.xml @@ -6,6 +6,7 @@ + @@ -16,7 +17,7 @@ . - + #ffffff @@ -35,6 +36,27 @@ 220 + + + false + + + + #80000000 + + + + 10 + + + + 0 + + + + 0 + + @@ -60,6 +82,27 @@ 100 + + + false + + + + #80000000 + + + + 10 + + + + 0 + + + + 0 + + @@ -93,5 +136,26 @@ 2 + + + false + + + + #80000000 + + + + 10 + + + + 0 + + + + 0 + + diff --git a/package/contents/ui/config/configAppearance.qml b/package/contents/ui/config/configAppearance.qml index 6422fba..1046465 100644 --- a/package/contents/ui/config/configAppearance.qml +++ b/package/contents/ui/config/configAppearance.qml @@ -26,6 +26,11 @@ Item { property bool cfg_clockBoldText property bool cfg_clockItalicText property int cfg_clockFontSize + property alias cfg_clockShadowEnabled: clockShadowCheckBox.checked + property color cfg_clockShadowColor + property int cfg_clockShadowRadius + property int cfg_clockShadowXOffset + property int cfg_clockShadowYOffset property alias cfg_showDayDisplay: showDayDisplayCheckBox.checked property string cfg_dayFontColor @@ -33,6 +38,11 @@ Item { property bool cfg_dayBoldText property bool cfg_dayItalicText property int cfg_dayFontSize + property alias cfg_dayShadowEnabled: dayShadowCheckBox.checked + property color cfg_dayShadowColor + property int cfg_dayShadowRadius + property int cfg_dayShadowXOffset + property int cfg_dayShadowYOffset property alias cfg_showDateDisplay: showDateDisplayCheckBox.checked property alias cfg_dateCustomDateFormat: customDateFormat.text @@ -41,6 +51,11 @@ Item { property bool cfg_dateBoldText property bool cfg_dateItalicText property int cfg_dateFontSize + property alias cfg_dateShadowEnabled: dateShadowCheckBox.checked + property color cfg_dateShadowColor + property int cfg_dateShadowRadius + property int cfg_dateShadowXOffset + property int cfg_dateShadowYOffset function fixFontFamilyChange(id, comboBox) { @@ -88,178 +103,276 @@ Item { } } - QtLayouts.ColumnLayout { - id: layout - anchors.fill: parent + QtControls.ScrollView { + id: scrollView QtLayouts.ColumnLayout { - QtLayouts.Layout.fillWidth: true - spacing: 10 + id: layout + anchors.fill: parent + spacing: 30 - QtControls.Label { - text: i18n("Clock Display Settings") - font.bold: true - font.pixelSize: 17 - } - - QtControls.CheckBox { - id: use24hFormat - text: i18n("Use 24-hour clock") - tristate: false - checked: cfg_clockUse24hFormat - } - - QtLayouts.RowLayout { - QtControls.Label { - text: i18n("Separator:") - } - - QtControls.TextField { - id: clockSeparatorTextField - maximumLength: 1 - } - } - - FontConfig { - fontModel: fontsModel - - colorValue: cfg_clockFontColor - onColorValueChanged: { - cfg_clockFontColor = colorValue - } - - fontValue: cgf_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 - } - } - } - - QtLayouts.ColumnLayout { - QtLayouts.Layout.fillWidth: true - spacing: 10 - - QtControls.Label { - text: i18n("Day Display Settings") - font.bold: true - font.pixelSize: 17 - } - - QtControls.CheckBox { - id: showDayDisplayCheckBox - text: i18n("Show day display") - } - - FontConfig { - fontModel: fontsModel - enabled: showDayDisplayCheckBox.checked - - colorValue: cfg_dayFontColor - onColorValueChanged: { - cfg_dayFontColor = colorValue - } - - fontValue: cgf_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 - } - } - } - - QtLayouts.ColumnLayout { - QtLayouts.Layout.fillWidth: true - spacing: 10 - - QtControls.Label { - text: i18n("Date Display Settings") - font.bold: true - font.pixelSize: 17 - } - - QtControls.CheckBox { - id: showDateDisplayCheckBox - text: i18n("Show date display") - } - - QtLayouts.RowLayout { - enabled: showDateDisplayCheckBox.checked + QtLayouts.ColumnLayout { + QtLayouts.Layout.fillWidth: true + spacing: 10 QtControls.Label { - text: i18n("Date format:") - opacity: if (enabled) 1 - else 0.4 + text: i18n("Clock Display Settings") + font.bold: true + font.pixelSize: 17 + } + + QtControls.CheckBox { + id: use24hFormat + text: i18n("Use 24-hour clock") + tristate: false + checked: cfg_clockUse24hFormat } QtLayouts.RowLayout { - QtControls.TextField { - id: customDateFormat - QtLayouts.Layout.fillWidth: true + QtControls.Label { + text: i18n("Separator:") } - QtControls.Button { - icon.name: "exifinfo" - onClicked: Qt.openUrlExternally("https://doc.qt.io/qt-5/qml-qtqml-qt.html#formatDateTime-method") + QtControls.TextField { + id: clockSeparatorTextField + maximumLength: 1 + } + } + + FontConfig { + fontModel: fontsModel + + colorValue: cfg_clockFontColor + onColorValueChanged: { + cfg_clockFontColor = colorValue + } + + fontValue: cgf_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 } } } - FontConfig { - fontModel: fontsModel - enabled: showDateDisplayCheckBox.checked + QtLayouts.ColumnLayout { + QtLayouts.Layout.fillWidth: true + spacing: 10 - colorValue: cfg_dateFontColor - onColorValueChanged: { - cfg_dateFontColor = colorValue + QtControls.Label { + text: i18n("Day Display Settings") + font.bold: true + font.pixelSize: 17 } - fontValue: cgf_dateFontFamily - onFontValueChanged: { - cfg_dateFontFamily = fontValue + QtControls.CheckBox { + id: showDayDisplayCheckBox + text: i18n("Show day display") } - boldValue: cfg_dateBoldText - onBoldValueChanged: { - cfg_dateBoldText = boldValue + FontConfig { + fontModel: fontsModel + enabled: showDayDisplayCheckBox.checked + + colorValue: cfg_dayFontColor + onColorValueChanged: { + cfg_dayFontColor = colorValue + } + + fontValue: cgf_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_dateItalicText - onItalicValueChanged: { - cfg_dateItalicText = italicValue + QtControls.CheckBox { + id: dayShadowCheckBox + text: i18n("Enable shadow") + tristate: false + checked: cfg_dayShadowEnabled } - pxSizeValue: cfg_dateFontSize - onPxSizeValueChanged: { - cfg_dateFontSize = pxSizeValue + 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 { + QtLayouts.Layout.fillWidth: true + spacing: 10 + + QtControls.Label { + text: i18n("Date Display Settings") + font.bold: true + font.pixelSize: 17 + } + + QtControls.CheckBox { + id: showDateDisplayCheckBox + text: i18n("Show date display") + } + + 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") + } + } + } + + FontConfig { + fontModel: fontsModel + enabled: showDateDisplayCheckBox.checked + + colorValue: cfg_dateFontColor + onColorValueChanged: { + cfg_dateFontColor = colorValue + } + + fontValue: cgf_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 { + 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 + } } } } diff --git a/package/contents/ui/lib/ShadowConfig.qml b/package/contents/ui/lib/ShadowConfig.qml new file mode 100644 index 0000000..5fc28e7 --- /dev/null +++ b/package/contents/ui/lib/ShadowConfig.qml @@ -0,0 +1,77 @@ +import QtQuick 2.4 +import QtQuick.Controls 2.12 as QtControls +import QtQuick.Layouts 1.15 as QtLayouts +import QtLocation 5.12 +import QtQuick.Dialogs 1.2 + +import "." + +QtLayouts.RowLayout { + + property color colorValue + property int radiusValue + property int offsetXValue + property int offsetYValue + + + QtControls.Label { + text: i18n("Shadow style:") + opacity: if (enabled) 1 + else 0.4 + } + + ColorButton { + id: shadowColorButton + value: colorValue + + onValueChanged: { + colorValue = value + } + } + + QtControls.Label { + text: i18n("Radius") + opacity: if (enabled) 1 + else 0.4 + } + + QtControls.SpinBox { + id: radiusSpinBox + from: 0 + to: 25 + value: radiusValue + + onValueChanged: { + radiusValue = value + } + } + + QtControls.Label { + text: i18n("Offset") + opacity: if (enabled) 1 + else 0.4 + } + + QtControls.SpinBox { + id: offsetXSpinBox + from: 0 + to: 25 + value: offsetXValue + + onValueChanged: { + offsetXValue = value + } + } + + QtControls.SpinBox { + id: offsetYSpinBox + from: 0 + to: 25 + value: offsetYValue + + onValueChanged: { + offsetYValue = value + } + } + +} diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml index 50eaa81..390218d 100644 --- a/package/contents/ui/main.qml +++ b/package/contents/ui/main.qml @@ -5,6 +5,7 @@ import QtQuick 2.12 import QtQuick.Layouts 1.12 +import QtGraphicalEffects 1.12 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.plasmoid 2.0 @@ -67,7 +68,7 @@ Item { height: Math.max(textMetricsClockLabel.height, textMetricsDayLabel.height) Layout.alignment: Qt.AlignCenter - PlasmaComponents.Label { + Text { id: clockLabel anchors.centerIn: parent @@ -80,9 +81,18 @@ Item { font.bold: plasmoid.configuration.clockBoldText font.italic: plasmoid.configuration.clockItalicText font.pixelSize: plasmoid.configuration.clockFontSize + + layer.enabled: plasmoid.configuration.clockShadowEnabled + layer.effect: DropShadow { + color: plasmoid.configuration.clockShadowColor + radius: plasmoid.configuration.clockShadowRadius + horizontalOffset: plasmoid.configuration.clockShadowXOffset + verticalOffset: plasmoid.configuration.clockShadowYOffset + samples: 10 + } } - PlasmaComponents.Label { + Text { id: dayLabel visible: plasmoid.configuration.showDayDisplay anchors.centerIn: parent @@ -95,10 +105,19 @@ Item { font.bold: plasmoid.configuration.daykBoldText font.italic: plasmoid.configuration.dayItalicText font.pixelSize: plasmoid.configuration.dayFontSize + + layer.enabled: plasmoid.configuration.dayShadowEnabled + layer.effect: DropShadow { + color: plasmoid.configuration.dayShadowColor + radius: plasmoid.configuration.dayShadowRadius + horizontalOffset: plasmoid.configuration.dayShadowXOffset + verticalOffset: plasmoid.configuration.dayShadowYOffset + samples: 10 + } } } - PlasmaComponents.Label { + Text { id: dateLabel visible: plasmoid.configuration.showDateDisplay Layout.alignment: Qt.AlignCenter @@ -113,6 +132,15 @@ Item { font.pixelSize: plasmoid.configuration.dateFontSize font.capitalization: Font.AllUppercase font.letterSpacing: plasmoid.configuration.dateLetterSpacing + + layer.enabled: plasmoid.configuration.dateShadowEnabled + layer.effect: DropShadow { + color: plasmoid.configuration.dateShadowColor + radius: plasmoid.configuration.dateShadowRadius + horizontalOffset: plasmoid.configuration.dateShadowXOffset + verticalOffset: plasmoid.configuration.dateShadowYOffset + samples: 10 + } } } }