diff --git a/applets/digital-clock/package/contents/ui/DigitalClock.qml b/applets/digital-clock/package/contents/ui/DigitalClock.qml index b032fb37..e1bf1f7e 100644 --- a/applets/digital-clock/package/contents/ui/DigitalClock.qml +++ b/applets/digital-clock/package/contents/ui/DigitalClock.qml @@ -1,623 +1,681 @@ /* * Copyright 2013 Heena Mahour * Copyright 2013 Sebastian Kügler * Copyright 2013 Martin Klapetek * Copyright 2014 David Edmundson * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License as * published by the Free Software Foundation; either version 2 of * the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . */ -import QtQuick 2.5 +import QtQuick 2.7 import QtQuick.Layouts 1.1 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.components 2.0 as Components import org.kde.plasma.private.digitalclock 1.0 Item { id: main property string timeFormat property date currentTime property bool showSeconds: plasmoid.configuration.showSeconds property bool showLocalTimezone: plasmoid.configuration.showLocalTimezone property bool showDate: plasmoid.configuration.showDate property int dateFormat: { if (plasmoid.configuration.dateFormat === "longDate") { return Qt.SystemLocaleLongDate; } else if (plasmoid.configuration.dateFormat === "isoDate") { return Qt.ISODate; } return Qt.SystemLocaleShortDate; } property string lastSelectedTimezone: plasmoid.configuration.lastSelectedTimezone property bool displayTimezoneAsCode: plasmoid.configuration.displayTimezoneAsCode property int use24hFormat: plasmoid.configuration.use24hFormat property string lastDate: "" property int tzOffset // This is the index in the list of user selected timezones property int tzIndex: 0 // if the date/timezone cannot be fit with the smallest font to its designated space - readonly property bool tooSmall: plasmoid.formFactor == PlasmaCore.Types.Horizontal && Math.round(2 * (main.height / 5)) <= theme.smallestFont.pixelSize + readonly property bool oneLineMode: plasmoid.formFactor == PlasmaCore.Types.Horizontal && + main.height <= 2 * theme.smallestFont.pixelSize && + (main.showDate || timezoneLabel.visible) onDateFormatChanged: { setupLabels(); } onDisplayTimezoneAsCodeChanged: { setupLabels(); } onStateChanged: { setupLabels(); } onLastSelectedTimezoneChanged: { timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)) } onShowSecondsChanged: { timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)) } onShowLocalTimezoneChanged: { timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)) } onShowDateChanged: { timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)) } onUse24hFormatChanged: { timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)) } Connections { target: plasmoid.configuration onSelectedTimeZonesChanged: { // If the currently selected timezone was removed, // default to the first one in the list var lastSelectedTimezone = plasmoid.configuration.lastSelectedTimezone; if (plasmoid.configuration.selectedTimeZones.indexOf(lastSelectedTimezone) == -1) { plasmoid.configuration.lastSelectedTimezone = plasmoid.configuration.selectedTimeZones[0]; } setupLabels(); setTimezoneIndex(); } } states: [ State { name: "horizontalPanel" - when: plasmoid.formFactor == PlasmaCore.Types.Horizontal && !main.tooSmall + when: plasmoid.formFactor == PlasmaCore.Types.Horizontal && !main.oneLineMode PropertyChanges { target: main Layout.fillHeight: true Layout.fillWidth: false - Layout.minimumWidth: Math.max(labelsFlow.width, dateLabel.paintedWidth) + Layout.minimumWidth: contentItem.width Layout.maximumWidth: Layout.minimumWidth + } + + PropertyChanges { + target: contentItem + height: timeLabel.height + (main.showDate || timezoneLabel.visible ? 0.8 * timeLabel.height : 0) + width: Math.max(labelsGrid.width, dateLabel.paintedWidth) + } + + PropertyChanges { + target: labelsGrid + + rows: main.showDate ? 1 : 2 + } + + AnchorChanges { + target: labelsGrid + + anchors.horizontalCenter: contentItem.horizontalCenter } PropertyChanges { target: timeLabel height: sizehelper.height - width: sizehelper.width + width: sizehelper.contentWidth - wrapMode: Text.NoWrap - fontSizeMode: Text.VerticalFit + font.pixelSize: timeLabel.height } PropertyChanges { target: timezoneLabel - height: main.showDate ? timeLabel.height : Math.round(2 * (timeLabel.height / 3)) + height: main.showDate ? 0.7 * timeLabel.height : 0.8 * timeLabel.height width: main.showDate ? timezoneLabel.paintedWidth : timeLabel.width - fontSizeMode: Text.VerticalFit - minimumPointSize: 1 - font.pointSize: 1024 - elide: Text.ElideNone - horizontalAlignment: Text.AlignHCenter + font.pixelSize: timezoneLabel.height } PropertyChanges { target: dateLabel - height: Math.round(2 * (main.height / 5)) + height: 0.8 * timeLabel.height width: dateLabel.paintedWidth - anchors.horizontalCenter: main.horizontalCenter + font.pixelSize: dateLabel.height } - PropertyChanges { - target: labelsFlow + AnchorChanges { + target: dateLabel - flow: main.showDate ? Flow.LeftToRight : Flow.TopToBottom + anchors.top: labelsGrid.bottom + anchors.horizontalCenter: labelsGrid.horizontalCenter } PropertyChanges { target: sizehelper - height: main.showDate || timezoneLabel.visible ? Math.round(3 * (main.height / 5)) : main.height - width: sizehelper.paintedWidth + height: Math.min(main.showDate || timezoneLabel.visible ? 0.56 * main.height : main.height, 3 * theme.defaultFont.pixelSize) - fontSizeMode: Text.VerticalFit + font.pixelSize: sizehelper.height } }, State { name: "horizontalPanelSmall" - when: plasmoid.formFactor == PlasmaCore.Types.Horizontal && main.tooSmall + when: plasmoid.formFactor == PlasmaCore.Types.Horizontal && main.oneLineMode PropertyChanges { target: main Layout.fillHeight: true Layout.fillWidth: false - Layout.minimumWidth: labelsFlow.width + Layout.minimumWidth: contentItem.width Layout.maximumWidth: Layout.minimumWidth } PropertyChanges { - target: timeLabel + target: contentItem height: sizehelper.height - width: sizehelper.width + width: dateLabel.width + dateLabel.anchors.rightMargin + labelsGrid.width + } + + AnchorChanges { + target: labelsGrid + + anchors.right: contentItem.right + } + + PropertyChanges { + target: dateLabel + + height: timeLabel.height + width: dateLabel.paintedWidth + + anchors.rightMargin: labelsGrid.columnSpacing - wrapMode: Text.NoWrap fontSizeMode: Text.VerticalFit - font.pointSize: theme.defaultFont.pointSize + } + + AnchorChanges { + target: dateLabel + + anchors.right: labelsGrid.left + anchors.verticalCenter: labelsGrid.verticalCenter } PropertyChanges { - target: timezoneLabel + target: timeLabel height: sizehelper.height - width: timezoneLabel.paintedWidth + width: sizehelper.contentWidth fontSizeMode: Text.VerticalFit - minimumPointSize: 1 - font.pointSize: theme.defaultFont.pointSize - elide: Text.ElideNone - horizontalAlignment: Text.AlignHCenter } PropertyChanges { - target: labelsFlow + target: timezoneLabel - flow: Flow.LeftToRight + height: 0.7 * timeLabel.height + width: timezoneLabel.paintedWidth + + fontSizeMode: Text.VerticalFit + horizontalAlignment: Text.AlignHCenter } PropertyChanges { target: sizehelper - height: main.height - width: sizehelper.paintedWidth + height: Math.min(main.height, 3 * theme.defaultFont.pixelSize) fontSizeMode: Text.VerticalFit + font.pixelSize: 3 * theme.defaultFont.pixelSize } }, State { name: "verticalPanel" when: plasmoid.formFactor == PlasmaCore.Types.Vertical PropertyChanges { target: main Layout.fillHeight: false Layout.fillWidth: true - Layout.maximumHeight: main.showDate ? labelsFlow.height + dateLabel.height : labelsFlow.height + Layout.maximumHeight: contentItem.height Layout.minimumHeight: Layout.maximumHeight } + PropertyChanges { + target: contentItem + + height: main.showDate ? labelsGrid.height + dateLabel.height : labelsGrid.height + width: main.width + } + + PropertyChanges { + target: labelsGrid + + rows: 2 + } + PropertyChanges { target: timeLabel - height: sizehelper.height - width: sizehelper.width - minimumPointSize: 0 + height: sizehelper.contentHeight + width: main.width + font.pixelSize: Math.min(timeLabel.height, 3 * theme.defaultFont.pixelSize) fontSizeMode: Text.HorizontalFit } PropertyChanges { target: timezoneLabel - height: Math.max(sizehelper.lineCount > 1 ? 2 * Math.round(timeLabel.height / 6) : 2 * Math.round(timeLabel.height / 3), theme.smallestFont.pixelSize) + height: Math.max(0.7 * timeLabel.height, minimumPixelSize) width: main.width - fontSizeMode: Text.HorizontalFit - minimumPointSize: 0 + fontSizeMode: Text.Fit + minimumPixelSize: dateLabel.minimumPixelSize elide: Text.ElideRight } PropertyChanges { target: dateLabel - height: timezoneLabel.height - width: timezoneLabel.width + // this can be marginal bigger than contentHeight because of the horizontal fit + height: Math.max(0.8 * timeLabel.height, minimumPixelSize) + width: main.width - fontSizeMode: Text.HorizontalFit - minimumPointSize: 0 + fontSizeMode: Text.Fit + minimumPixelSize: Math.min(0.7 * theme.smallestFont.pixelSize, timeLabel.height) elide: Text.ElideRight } + AnchorChanges { + target: dateLabel + + anchors.top: labelsGrid.bottom + anchors.horizontalCenter: labelsGrid.horizontalCenter + } + PropertyChanges { target: sizehelper - height: sizehelper.paintedHeight width: main.width - minimumPointSize: 0 - fontSizeMode: Text.HorizontalFit - horizontalAlignment: Text.AlignHCenter - wrapMode: Text.WordWrap + font.pixelSize: 3 * theme.defaultFont.pixelSize } }, State { name: "other" when: plasmoid.formFactor != PlasmaCore.Types.Vertical && plasmoid.formFactor != PlasmaCore.Types.Horizontal PropertyChanges { target: main Layout.fillHeight: false Layout.fillWidth: false Layout.minimumWidth: units.gridUnit * 3 - Layout.maximumWidth: Math.max(labelsFlow.width, dateLabel.width) Layout.minimumHeight: units.gridUnit * 3 - Layout.maximumHeight: main.showDate ? labelsFlow.height + dateLabel.height : labelsFlow.height + } + + PropertyChanges { + target: contentItem + + height: main.height + width: main.width + } + + PropertyChanges { + target: labelsGrid + + rows: 2 } PropertyChanges { target: timeLabel height: sizehelper.height width: main.width - wrapMode: Text.NoWrap fontSizeMode: Text.Fit } PropertyChanges { target: timezoneLabel - height: dateLabel.visible ? Math.round(1 * (main.height / 5)) : Math.round(2 * (main.height / 5)) + height: 0.7 * timeLabel.height width: main.width fontSizeMode: Text.Fit - minimumPixelSize: 0 - elide: Text.ElideRight + minimumPixelSize: 1 } PropertyChanges { target: dateLabel - height: timezoneLabel.visible ? Math.round(1 * (main.height / 5)) : Math.round(2 * (main.height / 5)) - width: main.width + height: 0.8 * timeLabel.height + width: Math.max(timeLabel.contentWidth, units.gridUnit * 3) - anchors.horizontalCenter: main.horizontalCenter fontSizeMode: Text.Fit + minimumPixelSize: 1 + } + + AnchorChanges { + target: dateLabel + + anchors.top: labelsGrid.bottom + anchors.horizontalCenter: labelsGrid.horizontalCenter } PropertyChanges { target: sizehelper - height: main.showDate || timezoneLabel.visible ? Math.round(3 * (main.height / 5)) : main.height + height: { + if (main.showDate) { + if (timezoneLabel.visible) { + return 0.4 * main.height + } + return 0.56 * main.height + } else if (timezoneLabel.visible) { + return 0.59 * main.height + } + return main.height + } width: main.width fontSizeMode: Text.Fit + font.pixelSize: 1024 } } - ] MouseArea { id: mouseArea property int wheelDelta: 0 anchors.fill: parent onClicked: plasmoid.expanded = !plasmoid.expanded onWheel: { if (!plasmoid.configuration.wheelChangesTimezone) { return; } var delta = wheel.angleDelta.y || wheel.angleDelta.x var newIndex = main.tzIndex; wheelDelta += delta; // magic number 120 for common "one click" // See: http://qt-project.org/doc/qt-5/qml-qtquick-wheelevent.html#angleDelta-prop while (wheelDelta >= 120) { wheelDelta -= 120; newIndex--; } while (wheelDelta <= -120) { wheelDelta += 120; newIndex++; } if (newIndex >= plasmoid.configuration.selectedTimeZones.length) { newIndex = 0; } else if (newIndex < 0) { newIndex = plasmoid.configuration.selectedTimeZones.length - 1; } if (newIndex != main.tzIndex) { plasmoid.configuration.lastSelectedTimezone = plasmoid.configuration.selectedTimeZones[newIndex]; main.tzIndex = newIndex; dataSource.dataChanged(); setupLabels(); } } } - Flow { - id: labelsFlow + /* + * Visible elements + * + */ + Item { + id: contentItem + anchors.verticalCenter: main.verticalCenter - anchors.horizontalCenter: main.horizontalCenter + Grid { + id: labelsGrid - flow: Flow.TopToBottom - spacing: flow == Flow.LeftToRight && (timezoneLabel.visible || main.tooSmall) ? units.smallSpacing : 0 + rows: 1 + horizontalItemAlignment: Grid.AlignHCenter + verticalItemAlignment: Grid.AlignVCenter - Components.Label { - id: dateLabelLeft - - height: sizehelper.height - visible: main.showDate && main.tooSmall - - font { - weight: timeLabel.font.weight - italic: timeLabel.font.italic - pointSize: theme.defaultFont.pointSize - } - minimumPixelSize: 0 - - fontSizeMode: Text.VerticalFit - - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - - Item { - height: dateLabelLeft.height - width: 1 - visible: main.showDate && main.tooSmall + flow: Grid.TopToBottom + columnSpacing: units.smallSpacing Rectangle { - id: delimiter - - height: dateLabelLeft.font.pixelSize + height: 0.8 * sizehelper.height width: 1 - anchors.verticalCenter: parent.verticalCenter + visible: main.showDate && main.oneLineMode color: theme.textColor opacity: 0.4 } - } - Components.Label { - id: timeLabel + Components.Label { + id: timeLabel - font { - family: plasmoid.configuration.fontFamily || theme.defaultFont.family - weight: plasmoid.configuration.boldText ? Font.Bold : theme.defaultFont.weight - italic: plasmoid.configuration.italicText - pointSize: 1024 - } + font { + family: plasmoid.configuration.fontFamily || theme.defaultFont.family + weight: plasmoid.configuration.boldText ? Font.Bold : theme.defaultFont.weight + italic: plasmoid.configuration.italicText + pixelSize: 1024 + } + minimumPixelSize: 1 + + text: { + // get the time for the given timezone from the dataengine + var now = dataSource.data[plasmoid.configuration.lastSelectedTimezone]["DateTime"]; + // get current UTC time + var msUTC = now.getTime() + (now.getTimezoneOffset() * 60000); + // add the dataengine TZ offset to it + var currentTime = new Date(msUTC + (dataSource.data[plasmoid.configuration.lastSelectedTimezone]["Offset"] * 1000)); - text: { - // get the time for the given timezone from the dataengine - var now = dataSource.data[plasmoid.configuration.lastSelectedTimezone]["DateTime"]; - // get current UTC time - var msUTC = now.getTime() + (now.getTimezoneOffset() * 60000); - // add the dataengine TZ offset to it - var currentTime = new Date(msUTC + (dataSource.data[plasmoid.configuration.lastSelectedTimezone]["Offset"] * 1000)); + main.currentTime = currentTime; + return Qt.formatTime(currentTime, main.timeFormat); + } - main.currentTime = currentTime; - return Qt.formatTime(currentTime, main.timeFormat); + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter } - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter + Components.Label { + id: timezoneLabel + + font.weight: timeLabel.font.weight + font.italic: timeLabel.font.italic + font.pixelSize: 1024 + minimumPixelSize: 1 + + visible: text.length > 0 + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } } Components.Label { - id: timezoneLabel + id: dateLabel + visible: main.showDate + + font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic - font.pointSize: 1024 - minimumPixelSize: 0 + font.pixelSize: 1024 + minimumPixelSize: 1 - visible: text.length > 0 horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } } - - Components.Label { - id: dateLabel - - anchors.top: labelsFlow.bottom - visible: main.showDate && !main.tooSmall - - font.family: timeLabel.font.family - font.weight: timeLabel.font.weight - font.italic: timeLabel.font.italic - font.pointSize: 1024 - minimumPixelSize: 0 - - fontSizeMode: Text.VerticalFit - - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } + /* + * end: Visible Elements + * + */ Components.Label { id: sizehelper font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic - font.pointSize: 1024 - - verticalAlignment: Text.AlignVCenter + minimumPixelSize: 1 visible: false } FontMetrics { id: timeMetrics font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic } // Qt's QLocale does not offer any modular time creating like Klocale did // eg. no "gimme time with seconds" or "gimme time without seconds and with timezone". // QLocale supports only two formats - Long and Short. Long is unusable in many situations // and Short does not provide seconds. So if seconds are enabled, we need to add it here. // // What happens here is that it looks for the delimiter between "h" and "m", takes it // and appends it after "mm" and then appends "ss" for the seconds. function timeFormatCorrection(timeFormatString) { var regexp = /(hh*)(.+)(mm)/i var match = regexp.exec(timeFormatString); var hours = match[1]; var delimiter = match[2]; var minutes = match[3] var seconds = "ss"; var amPm = "AP"; var uses24hFormatByDefault = timeFormatString.toLowerCase().indexOf("ap") == -1; // because QLocale is incredibly stupid and does not convert 12h/24h clock format // when uppercase H is used for hours, needs to be h or hh, so toLowerCase() var result = hours.toLowerCase() + delimiter + minutes; if (main.showSeconds) { result += delimiter + seconds; } // add "AM/PM" either if the setting is the default and locale uses it OR if the user unchecked "use 24h format" if ((main.use24hFormat == Qt.PartiallyChecked && !uses24hFormatByDefault) || main.use24hFormat == Qt.Unchecked) { result += " " + amPm; } main.timeFormat = result; setupLabels(); } function setupLabels() { var showTimezone = main.showLocalTimezone || (plasmoid.configuration.lastSelectedTimezone != "Local" && dataSource.data["Local"]["Timezone City"] != dataSource.data[plasmoid.configuration.lastSelectedTimezone]["Timezone City"]); var timezoneString = ""; if (showTimezone) { timezoneString = plasmoid.configuration.displayTimezoneAsCode ? dataSource.data[plasmoid.configuration.lastSelectedTimezone]["Timezone Abbreviation"] : TimezonesI18n.i18nCity(dataSource.data[plasmoid.configuration.lastSelectedTimezone]["Timezone City"]); - timezoneLabel.text = (main.showDate || main.tooSmall) && plasmoid.formFactor == PlasmaCore.Types.Horizontal ? "(" + timezoneString + ")" : timezoneString; + timezoneLabel.text = (main.showDate || main.oneLineMode) && plasmoid.formFactor == PlasmaCore.Types.Horizontal ? "(" + timezoneString + ")" : timezoneString; } else { // this clears the label and that makes it hidden timezoneLabel.text = timezoneString; } if (main.showDate) { - if (main.tooSmall) { - dateLabelLeft.text = Qt.formatDate(main.currentTime, main.dateFormat); - } else { - dateLabel.text = Qt.formatDate(main.currentTime, main.dateFormat); - } + dateLabel.text = Qt.formatDate(main.currentTime, main.dateFormat); } else { // clear it so it doesn't take space in the layout dateLabel.text = ""; - dateLabelLeft.text = ""; } // find widest character between 0 and 9 var maximumWidthNumber = 0; var maximumAdvanceWidth = 0; for (var i = 0; i <= 9; i++) { var advanceWidth = timeMetrics.advanceWidth(i); if (advanceWidth > maximumAdvanceWidth) { maximumAdvanceWidth = advanceWidth; maximumWidthNumber = i; } } // replace all placeholders with the widest number (two digits) var format = main.timeFormat.replace(/(h+|m+|s+)/g, "" + maximumWidthNumber + maximumWidthNumber); // make sure maximumWidthNumber is formatted as string // build the time string twice, once with an AM time and once with a PM time var date = new Date(2000, 0, 1, 1, 0, 0); var timeAm = Qt.formatTime(date, format); var advanceWidthAm = timeMetrics.advanceWidth(timeAm); date.setHours(13); var timePm = Qt.formatTime(date, format); var advanceWidthPm = timeMetrics.advanceWidth(timePm); // set the sizehelper's text to the widest time string if (advanceWidthAm > advanceWidthPm) { sizehelper.text = timeAm; } else { sizehelper.text = timePm; } } function dateTimeChanged() { var doCorrections = false; if (main.showDate) { // If the date has changed, force size recalculation, because the day name // or the month name can now be longer/shorter, so we need to adjust applet size var currentDate = Qt.formatDateTime(dataSource.data["Local"]["DateTime"], "yyyy-mm-dd"); if (main.lastDate != currentDate) { doCorrections = true; main.lastDate = currentDate } } var currentTZOffset = dataSource.data["Local"]["Offset"] / 60; if (currentTZOffset != tzOffset) { doCorrections = true; tzOffset = currentTZOffset; Date.timeZoneUpdated(); // inform the QML JS engine about TZ change } if (doCorrections) { timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)); } } function setTimezoneIndex() { for (var i = 0; i < plasmoid.configuration.selectedTimeZones.length; i++) { if (plasmoid.configuration.selectedTimeZones[i] == plasmoid.configuration.lastSelectedTimezone) { main.tzIndex = i; break; } } } Component.onCompleted: { // Sort the timezones according to their offset // Calling sort() directly on plasmoid.configuration.selectedTimeZones // has no effect, so sort a copy and then assign the copy to it var sortArray = plasmoid.configuration.selectedTimeZones; sortArray.sort(function(a, b) { return dataSource.data[a]["Offset"] - dataSource.data[b]["Offset"]; }); plasmoid.configuration.selectedTimeZones = sortArray; setTimezoneIndex(); tzOffset = -(new Date().getTimezoneOffset()); dateTimeChanged(); timeFormatCorrection(Qt.locale().timeFormat(Locale.ShortFormat)); dataSource.onDataChanged.connect(dateTimeChanged); } }