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.Controls 1.0 import NERvGear.Templates 1.0 as T import NERvGear.Preferences 1.0 as P WidgetTemplate { id: widget title: qsTr("Reflection Clock") editing: styleDialog.active resizable: true version: "1.0.0" defaultValues: { "Hour Settings": { "Full Clock": true, "Clock BG Color": "#2196f3", "Clock Font Color": "#ffffff", "Panel BG Color": "#2196f3", "Panel Font Color": "#ffffff" }, "Min Settings": { "Clock BG Color": "#2196f3", "Clock Font Color": "#ffffff", "Panel BG Color": "#2196f3", "Panel Font Color": "#ffffff" }, "Sec Settings": { "Visible": true, "Clock BG Color": "#ff006a", "Clock Font Color": "#ffffff", "Panel BG Color": "#ff006a", "Panel Font Color": "#ffffff" } } readonly property real minWH: Math.min(width/1.64, height) readonly property real multi: minWH/220 readonly property bool full_clock: widget.settings.styles["Hour Settings"]["Full Clock"] 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["Hour Settings"]["Clock BG Color"] 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: "" style: Text.Outline styleColor: "transparent" color: widget.settings.styles["Hour Settings"]["Clock Font Color"] anchors.centerIn: parent font.pointSize: 35*multi font.weight: Font.Light font.family: "Microsoft YaHei" } } Rectangle { id: hour_bottom color: widget.settings.styles["Hour Settings"]["Panel BG Color"] 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 style: Text.Outline styleColor: "transparent" color: widget.settings.styles["Hour Settings"]["Panel Font Color"] 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["Min Settings"]["Clock BG Color"] 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: "" style: Text.Outline styleColor: "transparent" color: widget.settings.styles["Min Settings"]["Clock Font Color"] anchors.centerIn: parent font.pointSize: 35*multi font.weight: Font.Light font.family: "Microsoft YaHei" } } Rectangle { id: min_bottom color: widget.settings.styles["Min Settings"]["Panel BG Color"] width: 100*multi height: 30*multi anchors.top: min_top.bottom anchors.topMargin: multi anchors.left: parent.left anchors.leftMargin: 0 Text { text: "MINUTES" style: Text.Outline styleColor: "transparent" color: widget.settings.styles["Min Settings"]["Panel Font Color"] 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["Sec Settings"]["Visible"] width: 100*multi height: 111*multi Rectangle { id: sec_top color: widget.settings.styles["Sec Settings"]["Clock BG Color"] 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: "" style: Text.Outline styleColor: "transparent" color: widget.settings.styles["Sec Settings"]["Clock Font Color"] anchors.centerIn: parent font.pointSize: 35*multi font.weight: Font.Light font.family: "Microsoft YaHei" } } Rectangle { id: sec_bottom color: widget.settings.styles["Sec Settings"]["Panel BG Color"] width: 100*multi height: 30*multi anchors.top: sec_top.bottom anchors.topMargin: multi anchors.left: parent.left anchors.leftMargin: 0 Text { text: "SECONDS" style: Text.Outline styleColor: "transparent" color: widget.settings.styles["Sec Settings"]["Panel Font Color"] 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 width: minimumWidth height: minimumHeight transientParent: widget.NVG.View.window property var configuration Page { id: cfg_page anchors.fill: parent header: TitleBar { text: qsTr("Settings") standardButtons: Dialog.Save | Dialog.Reset onAccepted: { configuration = rootPreference.save(); widget.settings.styles = configuration; styleDialog.active = false; } onReset: { rootPreference.load(); let cfg = rootPreference.save(); widget.settings.styles = cfg; } } ColumnLayout { id: root anchors.fill: parent anchors.margins: 16 anchors.topMargin: 0 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: defaultValues["Hour Settings"]["Full Clock"] } P.Separator {} P.ColorPreference { name: "Clock BG Color" label: qsTr("Clock Background Color") defaultValue: defaultValues["Hour Settings"]["Clock BG Color"] } P.ColorPreference { name: "Clock Font Color" label: qsTr("Clock Font Color") defaultValue: defaultValues["Hour Settings"]["Clock Font Color"] } P.Separator {} P.ColorPreference { name: "Panel BG Color" label: qsTr("Panel Background Color") defaultValue: defaultValues["Hour Settings"]["Panel BG Color"] } P.ColorPreference { name: "Panel Font Color" label: qsTr("Panel Font Color") defaultValue: defaultValues["Hour Settings"]["Panel Font Color"] } } 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: defaultValues["Min Settings"]["Clock BG Color"] } P.ColorPreference { name: "Clock Font Color" label: qsTr("Clock Font Color") defaultValue: defaultValues["Min Settings"]["Clock Font Color"] } P.Separator {} P.ColorPreference { name: "Panel BG Color" label: qsTr("Panel Background Color") defaultValue: defaultValues["Min Settings"]["Panel BG Color"] } P.ColorPreference { name: "Panel Font Color" label: qsTr("Panel Font Color") defaultValue: defaultValues["Min Settings"]["Panel Font Color"] } } 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: defaultValues["Sec Settings"]["Visible"] } P.Separator {} P.ColorPreference { name: "Clock BG Color" label: qsTr("Clock Background Color") enabled: cfg_sec_en.value defaultValue: defaultValues["Sec Settings"]["Clock BG Color"] } P.ColorPreference { name: "Clock Font Color" label: qsTr("Clock Font Color") enabled: cfg_sec_en.value defaultValue: defaultValues["Sec Settings"]["Clock Font Color"] } P.Separator {} P.ColorPreference { name: "Panel BG Color" label: qsTr("Panel Background Color") enabled: cfg_sec_en.value defaultValue: defaultValues["Sec Settings"]["Panel BG Color"] } P.ColorPreference { name: "Panel Font Color" label: qsTr("Panel Font Color") enabled: cfg_sec_en.value defaultValue: defaultValues["Sec Settings"]["Panel Font Color"] } } Component.onCompleted: { rootPreference.load(widget.settings.styles); configuration = widget.settings.styles; } } } } } } onClosing: { widget.settings.styles = configuration; styleDialog.active = false; } } } }