contents/ui/main.qml

0001 /*
0002     SPDX-FileCopyrightText: 2012 Viranch Mehta <viranch.mehta@gmail.com>
0003     SPDX-FileCopyrightText: 2012 Marco Martin <mart@kde.org>
0004     SPDX-FileCopyrightText: 2013 David Edmundson <davidedmundson@kde.org>
0005
0006     SPDX-License-Identifier: LGPL-2.0-or-later
0007 */
0008
0009 import QtQuick 2.15
0010 import QtQuick.Layouts 1.1
0011
0012 import org.kde.plasma.plasmoid 2.0
0013 import org.kde.plasma.core as PlasmaCore
0014 import org.kde.ksvg 1.0 as KSvg
0015 import org.kde.plasma.components 3.0 as PlasmaComponents
0016 import org.kde.plasma.plasma5support 2.0 as P5Support
0017 import org.kde.kirigami 2.20 as Kirigami
0018
0019 import org.kde.plasma.workspace.calendar 2.0 as PlasmaCalendar
0020
0021 PlasmoidItem {
0022     id: analogclock
0023
0024     width: Kirigami.Units.gridUnit * 15
0025     height: Kirigami.Units.gridUnit * 15
0026
0027     readonly property string currentTime: Qt.formatTime(dataSource.data["Local"]["DateTime"],  Qt.locale().timeFormat(Locale.LongFormat))
0028     readonly property string currentDate: Qt.formatDate(dataSource.data["Local"]["DateTime"], Qt.locale().dateFormat(Locale.LongFormat).replace(/(^dddd.?\s)|(,?\sdddd$)/, ""))
0029
0030     property int hours
0031     property int minutes
0032     property int seconds
0033     property bool showSecondsHand: Plasmoid.configuration.showSecondHand
0034     property bool showTimezone: Plasmoid.configuration.showTimezoneString
0035     property int tzOffset
0036
0037     Plasmoid.backgroundHints: "NoBackground";
0038     preferredRepresentation: compactRepresentation
0039
0040     toolTipMainText: Qt.formatDate(dataSource.data["Local"]["DateTime"],"dddd")
0041     toolTipSubText: `${currentTime}\n${currentDate}`
0042
0043
0044     function dateTimeChanged() {
0045         var currentTZOffset = dataSource.data["Local"]["Offset"] / 60;
0046         if (currentTZOffset !== tzOffset) {
0047             tzOffset = currentTZOffset;
0048             Date.timeZoneUpdated(); // inform the QML JS engine about TZ change
0049         }
0050     }
0051
0052     P5Support.DataSource {
0053         id: dataSource
0054         engine: "time"
0055         connectedSources: "Local"
0056         interval: showSecondsHand || (analogclock.compactRepresentationItem && analogclock.compactRepresentationItem.containsMouse) ? 1000 : 30000
0057         onDataChanged: {
0058             var date = new Date(data["Local"]["DateTime"]);
0059             hours = date.getHours();
0060             minutes = date.getMinutes();
0061             seconds = date.getSeconds();
0062         }
0063         Component.onCompleted: {
0064             dataChanged();
0065         }
0066     }
0067
0068     compactRepresentation: MouseArea {
0069         id: representation
0070
0071         Layout.minimumWidth: Plasmoid.formFactor !== PlasmaCore.Types.Vertical ? representation.height : Kirigami.Units.gridUnit
0072         Layout.minimumHeight: Plasmoid.formFactor === PlasmaCore.Types.Vertical ? representation.width : Kirigami.Units.gridUnit
0073
0074         property bool wasExpanded
0075
0076         activeFocusOnTab: true
0077         hoverEnabled: true
0078
0079         Accessible.name: Plasmoid.title
0080         Accessible.description: i18nc("@info:tooltip", "Current time is %1; Current date is %2", analogclock.currentTime, analogclock.currentDate)
0081         Accessible.role: Accessible.Button
0082
0083         onPressed: wasExpanded = analogclock.expanded
0084         onClicked: analogclock.expanded = !wasExpanded
0085
0086         KSvg.Svg {
0087             id: clockSvg
0088
0089             property double naturalHorizontalHandShadowOffset: estimateHorizontalHandShadowOffset()
0090             property double naturalVerticalHandShadowOffset: estimateVerticalHandShadowOffset()
0091
0092             imagePath: "widgets/clock"
0093             function estimateHorizontalHandShadowOffset() {
0094                 var id = "hint-hands-shadow-offset-to-west";
0095                 if (hasElement(id)) {
0096                     return -elementSize(id).width;
0097                 }
0098                 id = "hint-hands-shadows-offset-to-east";
0099                 if (hasElement(id)) {
0100                     return elementSize(id).width;
0101                 }
0102                 return 0;
0103             }
0104             function estimateVerticalHandShadowOffset() {
0105                 var id = "hint-hands-shadow-offset-to-north";
0106                 if (hasElement(id)) {
0107                     return -elementSize(id).height;
0108                 }
0109                 id = "hint-hands-shadow-offset-to-south";
0110                 if (hasElement(id)) {
0111                     return elementSize(id).height;
0112                 }
0113                 return 0;
0114             }
0115
0116             onRepaintNeeded: {
0117                 naturalHorizontalHandShadowOffset = estimateHorizontalHandShadowOffset();
0118                 naturalVerticalHandShadowOffset = estimateVerticalHandShadowOffset();
0119             }
0120         }
0121
0122         Item {
0123             id: clock
0124
0125             anchors {
0126                 top: parent.top
0127                 bottom: showTimezone ? timezoneBg.top : parent.bottom
0128             }
0129             width: parent.width
0130
0131             readonly property double svgScale: face.width / face.naturalSize.width
0132             readonly property double horizontalShadowOffset:
0133                 Math.round(clockSvg.naturalHorizontalHandShadowOffset * svgScale) + Math.round(clockSvg.naturalHorizontalHandShadowOffset * svgScale) % 2
0134             readonly property double verticalShadowOffset:
0135                 Math.round(clockSvg.naturalVerticalHandShadowOffset * svgScale) + Math.round(clockSvg.naturalVerticalHandShadowOffset * svgScale) % 2
0136
0137             KSvg.SvgItem {
0138                 id: face
0139                 anchors.centerIn: parent
0140                 width: Math.min(parent.width, parent.height)
0141                 height: Math.min(parent.width, parent.height)
0142                 svg: clockSvg
0143                 elementId: "ClockFace"
0144             }
0145
0146             Hand {
0147                 elementId: "HourHandShadow"
0148                 rotationCenterHintId: "hint-hourhandshadow-rotation-center-offset"
0149                 horizontalRotationOffset: clock.horizontalShadowOffset
0150                 verticalRotationOffset: clock.verticalShadowOffset
0151                 rotation: 180 + hours * 30 + (minutes/2)
0152                 svgScale: clock.svgScale
0153
0154             }
0155             Hand {
0156                 elementId: "HourHand"
0157                 rotationCenterHintId: "hint-hourhand-rotation-center-offset"
0158                 rotation: 180 + hours * 30 + (minutes/2)
0159                 svgScale: clock.svgScale
0160             }
0161
0162             Hand {
0163                 elementId: "MinuteHandShadow"
0164                 rotationCenterHintId: "hint-minutehandshadow-rotation-center-offset"
0165                 horizontalRotationOffset: clock.horizontalShadowOffset
0166                 verticalRotationOffset: clock.verticalShadowOffset
0167                 rotation: 180 + minutes * 6
0168                 svgScale: clock.svgScale
0169             }
0170             Hand {
0171                 elementId: "MinuteHand"
0172                 rotationCenterHintId: "hint-minutehand-rotation-center-offset"
0173                 rotation: 180 + minutes * 6
0174                 svgScale: clock.svgScale
0175             }
0176
0177             Hand {
0178                 visible: showSecondsHand
0179                 elementId: "SecondHandShadow"
0180                 rotationCenterHintId: "hint-secondhandshadow-rotation-center-offset"
0181                 horizontalRotationOffset: clock.horizontalShadowOffset
0182                 verticalRotationOffset: clock.verticalShadowOffset
0183                 rotation: 180 + seconds * 6
0184                 svgScale: clock.svgScale
0185             }
0186             Hand {
0187                 visible: showSecondsHand
0188                 elementId: "SecondHand"
0189                 rotationCenterHintId: "hint-secondhand-rotation-center-offset"
0190                 rotation: 180 + seconds * 6
0191                 svgScale: clock.svgScale
0192             }
0193
0194             KSvg.SvgItem {
0195                 id: center
0196                 anchors.centerIn: clock
0197                 width: naturalSize.width * clock.svgScale
0198                 height: naturalSize.height * clock.svgScale
0199                 svg: clockSvg
0200                 elementId: "HandCenterScrew"
0201                 z: 1000
0202             }
0203
0204             KSvg.SvgItem {
0205                 anchors.fill: face
0206                 width: naturalSize.width * clock.svgScale
0207                 height: naturalSize.height * clock.svgScale
0208                 svg: clockSvg
0209                 elementId: "Glass"
0210             }
0211         }
0212
0213         KSvg.FrameSvgItem {
0214             id: timezoneBg
0215
0216             anchors {
0217                 horizontalCenter: parent.horizontalCenter
0218                 bottom: parent.bottom
0219                 bottomMargin: 10
0220             }
0221             width: childrenRect.width + margins.right + margins.left
0222             height: childrenRect.height + margins.top + margins.bottom
0223             visible: showTimezone
0224
0225             imagePath: "widgets/background"
0226
0227             PlasmaComponents.Label {
0228                 id: timezoneText
0229                 x: timezoneBg.margins.left
0230                 y: timezoneBg.margins.top
0231                 text: dataSource.data["Local"]["Timezone"]
0232                 textFormat: Text.PlainText
0233             }
0234         }
0235     }
0236
0237     fullRepresentation: PlasmaCalendar.MonthView {
0238         Layout.minimumWidth: Kirigami.Units.gridUnit * 22
0239         Layout.maximumWidth: Kirigami.Units.gridUnit * 80
0240         Layout.minimumHeight: Kirigami.Units.gridUnit * 22
0241         Layout.maximumHeight: Kirigami.Units.gridUnit * 40
0242
0243         readonly property var appletInterface: analogclock
0244
0245         today: dataSource.data["Local"]["DateTime"]
0246     }
0247
0248     Component.onCompleted: {
0249         tzOffset = new Date().getTimezoneOffset();
0250         dataSource.onDataChanged.connect(dateTimeChanged);
0251     }
0252 }