import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.12 import QtGraphicalEffects 1.0 import NERvGear 1.0 as NVG import NERvGear.Templates 1.0 as T import NERvGear.Preferences 1.0 as P T.Widget { id: widget solid: true title: qsTr("Reflection Clock") resizable: true readonly property real minWH: Math.min(width/1.64, height) readonly property real multi: minWH/220 readonly property bool full_clock: widget.settings.styles ? widget.settings.styles["Hour Settings"]["Full Clock"] : true property string am_pm: "" Rectangle { id: main color: "transparent" anchors.top: parent.top anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 width: 345*multi height: 222*multi Rectangle { id: hour color: "transparent" anchors.top: parent.top anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: 15*multi width: 100*multi height: 111*multi Rectangle { id: hour_top color: widget.settings.styles ? widget.settings.styles["Hour Settings"]["Clock BG Color"] : "#2196f3" width: 100*multi height: 80*multi anchors.top: parent.top anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 Text { id: hour_text text: "" color: widget.settings.styles ? widget.settings.styles["Hour Settings"]["Clock Font Color"] : "#ffffff" anchors.centerIn: parent font.pointSize: 35*multi font.weight: Font.Light font.family: "Microsoft YaHei" } } Rectangle { id: hour_bottom color: widget.settings.styles ? widget.settings.styles["Hour Settings"]["Panel BG Color"] : "#2196f3" width: 100*multi height: 30*multi anchors.top: hour_top.bottom anchors.topMargin: multi anchors.left: parent.left anchors.leftMargin: 0 Text { text: "HOURS"+am_pm color: widget.settings.styles ? widget.settings.styles["Hour Settings"]["Panel Font Color"] : "#ffffff" anchors.centerIn: parent font.pointSize: 9*multi font.weight: Font.Normal font.family: "Microsoft YaHei" font.letterSpacing: 2*multi } } } Rectangle { id: min color: "transparent" anchors.top: parent.top anchors.topMargin: 0 anchors.left: hour.right anchors.leftMargin: 15*multi width: 100*multi height: 111*multi Rectangle { id: min_top color: widget.settings.styles ? widget.settings.styles["Min Settings"]["Clock BG Color"] : "#2196f3" anchors.top: parent.top anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 width: 100*multi height: 80*multi Text { id: min_text text: "" color: widget.settings.styles ? widget.settings.styles["Min Settings"]["Clock Font Color"] : "#ffffff" anchors.centerIn: parent font.pointSize: 35*multi font.weight: Font.Light font.family: "Microsoft YaHei" } } Rectangle { id: min_bottom color: widget.settings.styles ? widget.settings.styles["Min Settings"]["Panel BG Color"] : "#2196f3" width: 100*multi height: 30*multi anchors.top: min_top.bottom anchors.topMargin: multi anchors.left: parent.left anchors.leftMargin: 0 Text { text: "MINUTES" color: widget.settings.styles ? widget.settings.styles["Min Settings"]["Panel Font Color"] : "#ffffff" anchors.centerIn: parent font.pointSize: 9*multi font.weight: Font.Normal font.family: "Microsoft YaHei" font.letterSpacing: 2*multi } } } Rectangle { id: sec color: "transparent" anchors.top: parent.top anchors.topMargin: 0 anchors.left: min.right anchors.leftMargin: 15*multi visible: widget.settings.styles ? widget.settings.styles["Sec Settings"]["Visible"] : true width: 100*multi height: 111*multi Rectangle { id: sec_top color: widget.settings.styles ? widget.settings.styles["Sec Settings"]["Clock BG Color"] : "#ff006a" width: 100*multi height: 80*multi anchors.top: parent.top anchors.topMargin: 0 anchors.left: parent.left anchors.leftMargin: 0 Text { id: sec_text text: "" color: widget.settings.styles ? widget.settings.styles["Sec Settings"]["Clock Font Color"] : "#ffffff" anchors.centerIn: parent font.pointSize: 35*multi font.weight: Font.Light font.family: "Microsoft YaHei" } } Rectangle { id: sec_bottom color: widget.settings.styles ? widget.settings.styles["Sec Settings"]["Panel BG Color"] : "#ff006a" width: 100*multi height: 30*multi anchors.top: sec_top.bottom anchors.topMargin: multi anchors.left: parent.left anchors.leftMargin: 0 Text { text: "SECONDS" color: widget.settings.styles ? widget.settings.styles["Sec Settings"]["Panel Font Color"] : "#ffffff" anchors.centerIn: parent font.pointSize: 9*multi font.weight: Font.Normal font.family: "Microsoft YaHei" font.letterSpacing: 2*multi } } } } OpacityMask { width: main.width height: main.height anchors.top: main.bottom anchors.topMargin: multi source: main maskSource: Rectangle { width: main.width height: main.height gradient: Gradient{ GradientStop{position: 0.0;color:"transparent"} GradientStop{position: 1.0;color:"#FFF"} } } transform: Scale {yScale: -1} } Timer { interval: 250 repeat: true running: widget.NVG.View.exposed onTriggered: { var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); if(!full_clock) { am_pm = "|" + (hr > 11 ? "PM" : "AM"); if (hr === 0 || hr === 24) hr = 12; else if(hr > 12) hr -= 12; } else { am_pm = ""; } hour_text.text = hr < 10 ? "0"+hr : hr; min_text.text = min < 10 ? "0"+min : min; sec_text.text = sec < 10 ? "0"+sec : sec; } } menu: Menu { Action { text: qsTr("Settings") + "..." onTriggered: styleDialog.active = true } } Loader { id: styleDialog active: false sourceComponent: NVG.Window { id: window title: qsTr("Clock Settings") visible: true minimumWidth: 380 minimumHeight: 480 maximumWidth: minimumWidth maximumHeight: minimumHeight width: minimumWidth height: minimumHeight transientParent: widget.NVG.View.window property var configuration ColumnLayout { id: root anchors.fill: parent anchors.margins: 16 anchors.topMargin: 0 Row { spacing: 234 ToolButton { text: qsTr("Save") onClicked: { configuration = rootPreference.save(); widget.settings.styles = configuration; styleDialog.active = false; } } ToolButton { text: qsTr("Reset") onClicked: { rootPreference.load(); let cfg = rootPreference.save(); widget.settings.styles = cfg; } } } Label { Layout.alignment: Qt.AlignCenter text: qsTr("Settings") font.pixelSize: 24 } Flickable { Layout.fillWidth: true Layout.fillHeight: true clip: true contentWidth: preferenceLayout.implicitWidth contentHeight: preferenceLayout.implicitHeight ColumnLayout { id: preferenceLayout width: root.width P.PreferenceGroup { id: rootPreference Layout.fillWidth: true label: qsTr("Configuration") onPreferenceEdited: { widget.settings.styles = rootPreference.save(); } P.DialogPreference { name: "Hour Settings" label: qsTr("Hour Settings") live: true icon.name: "regular:\uf1de" P.SwitchPreference { name: "Full Clock" label: qsTr("24 Hour Clock") defaultValue: true } P.Separator {} P.ColorPreference { name: "Clock BG Color" label: qsTr("Clock Background Color") defaultValue: "#2196f3" } P.ColorPreference { name: "Clock Font Color" label: qsTr("Clock Font Color") defaultValue: "#ffffff" } P.Separator {} P.ColorPreference { name: "Panel BG Color" label: qsTr("Panel Background Color") defaultValue: "#2196f3" } P.ColorPreference { name: "Panel Font Color" label: qsTr("Panel Font Color") defaultValue: "#ffffff" } } P.Separator {} P.DialogPreference { name: "Min Settings" label: qsTr("Minute Settings") live: true icon.name: "regular:\uf1de" P.ColorPreference { name: "Clock BG Color" label: qsTr("Clock Background Color") defaultValue: "#2196f3" } P.ColorPreference { name: "Clock Font Color" label: qsTr("Clock Font Color") defaultValue: "#ffffff" } P.Separator {} P.ColorPreference { name: "Panel BG Color" label: qsTr("Panel Background Color") defaultValue: "#2196f3" } P.ColorPreference { name: "Panel Font Color" label: qsTr("Panel Font Color") defaultValue: "#ffffff" } } P.Separator {} P.DialogPreference { name: "Sec Settings" label: qsTr("Second Settings") live: true icon.name: "regular:\uf1de" P.SwitchPreference { id: cfg_sec_en name: "Visible" label: qsTr("Show") defaultValue: true } P.Separator {} P.ColorPreference { name: "Clock BG Color" label: qsTr("Clock Background Color") enabled: cfg_sec_en.value defaultValue: "#ff006a" } P.ColorPreference { name: "Clock Font Color" label: qsTr("Clock Font Color") enabled: cfg_sec_en.value defaultValue: "#ffffff" } P.Separator {} P.ColorPreference { name: "Panel BG Color" label: qsTr("Panel Background Color") enabled: cfg_sec_en.value defaultValue: "#ff006a" } P.ColorPreference { name: "Panel Font Color" label: qsTr("Panel Font Color") enabled: cfg_sec_en.value defaultValue: "#ffffff" } } Component.onCompleted: { if(!widget.settings.styles) { configuration = rootPreference.save(); widget.settings.styles = configuration; } rootPreference.load(widget.settings.styles); configuration = widget.settings.styles; } } } } } onClosing: { widget.settings.styles = configuration; styleDialog.active = false; } } } }