[prev in list] [next in list] [prev in thread] [next in thread]
List: kde-commits
Subject: [plasma-workspace] applets/digital-clock/package/contents/ui: [Digital Clock] Bug fixes and ui code
From: Roman Gilg <null () kde ! org>
Date: 2017-01-03 14:48:12
Message-ID: E1cOQNo-0004cR-Bt () code ! kde ! org
[Download RAW message or body]
Git commit 1d362c4ae2e264a80c002ab6718c1b1d9437c20c by Roman Gilg.
Committed on 03/01/2017 at 14:37.
Pushed by romangilg into branch 'master'.
[Digital Clock] Bug fixes and ui code optimization
Summary:
- Fixed timezone size and alignment in vertical mode
- Instead of `Flow` use `Grid` for labels as it's simpler and gives better
control over alignment
- Seperator in small horizontal mode centered between date and time and in
height now dependent on label size
- Less empty space around time in small horizontal mode
- Binding loop and initlializting anchor errors fixed
- Elements now size completely down and have always the same ratio to each other
with the time label being the largest
- Round functions removed since they disrupted the resizing for small sizes
- Introduce max font size values for text elements in panel mode
BUG: 367585
BUG: 360059
BUG: 373396
Reviewers: #plasma, mart
Subscribers: mart, plasma-devel
Tags: #plasma
Differential Revision: https://phabricator.kde.org/D3630
M +206 -148 applets/digital-clock/package/contents/ui/DigitalClock.qml
https://commits.kde.org/plasma-workspace/1d362c4ae2e264a80c002ab6718c1b1d9437c20c
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
@@ -18,7 +18,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-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
@@ -54,7 +54,9 @@ Item {
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();
@@ -87,115 +89,148 @@ Item {
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
}
},
@@ -207,53 +242,70 @@ Item {
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
}
},
@@ -266,9 +318,20 @@ Item {
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 {
@@ -277,41 +340,56 @@ Item {
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 {
@@ -357,106 +435,93 @@ Item {
}
}
- 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
@@ -464,9 +529,7 @@ Item {
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
}
@@ -523,7 +586,7 @@ Item {
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;
@@ -531,15 +594,10 @@ Item {
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
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic