nClocks/qml/ReflectionClock.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.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;
            }
        }
    }
}