nClocks/reflection_clock.qml

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;
            }
        }
    }
}