diff --git a/applets/digital-clock/package/contents/ui/DigitalClock.qml b/applets/digital-clock/package/contents/ui/DigitalClock.qml --- a/applets/digital-clock/package/contents/ui/DigitalClock.qml +++ b/applets/digital-clock/package/contents/ui/DigitalClock.qml @@ -54,7 +54,7 @@ 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 tooSmall: plasmoid.formFactor == PlasmaCore.Types.Horizontal && Math.floor(0.4 * main.height) <= theme.smallestFont.pointSize onDateFormatChanged: { setupLabels(); @@ -93,7 +93,7 @@ target: main Layout.fillHeight: true Layout.fillWidth: false - Layout.minimumWidth: Math.max(labelsFlow.width, dateLabel.paintedWidth) + Layout.minimumWidth: Math.max(labelsGrid.width, dateLabelUnder.paintedWidth) Layout.maximumWidth: Layout.minimumWidth } @@ -101,9 +101,6 @@ PropertyChanges { target: timeLabel - height: sizehelper.height - width: sizehelper.width - wrapMode: Text.NoWrap fontSizeMode: Text.VerticalFit } @@ -111,35 +108,32 @@ PropertyChanges { target: timezoneLabel - height: main.showDate ? timeLabel.height : Math.round(2 * (timeLabel.height / 3)) + 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 } PropertyChanges { - target: dateLabel + target: dateLabelUnder - height: Math.round(2 * (main.height / 5)) - width: dateLabel.paintedWidth + width: dateLabelUnder.paintedWidth - anchors.horizontalCenter: main.horizontalCenter + fontSizeMode: Text.VerticalFit } PropertyChanges { - target: labelsFlow + target: labelsGrid - flow: main.showDate ? Flow.LeftToRight : Flow.TopToBottom + rows: main.showDate ? 1 : 2 } PropertyChanges { target: sizehelper - height: main.showDate || timezoneLabel.visible ? Math.round(3 * (main.height / 5)) : main.height + height: main.showDate || timezoneLabel.visible ? 0.6 * main.height : main.height width: sizehelper.paintedWidth fontSizeMode: Text.VerticalFit @@ -154,7 +148,7 @@ target: main Layout.fillHeight: true Layout.fillWidth: false - Layout.minimumWidth: labelsFlow.width + Layout.minimumWidth: labelsGrid.width Layout.maximumWidth: Layout.minimumWidth } @@ -162,31 +156,25 @@ PropertyChanges { target: timeLabel - height: sizehelper.height - width: sizehelper.width - wrapMode: Text.NoWrap fontSizeMode: Text.VerticalFit - font.pointSize: theme.defaultFont.pointSize } PropertyChanges { target: timezoneLabel - height: sizehelper.height + height: 0.8 * timeLabel.height width: timezoneLabel.paintedWidth fontSizeMode: Text.VerticalFit - minimumPointSize: 1 - font.pointSize: theme.defaultFont.pointSize elide: Text.ElideNone horizontalAlignment: Text.AlignHCenter } PropertyChanges { - target: labelsFlow + target: dateLabelLeft - flow: Flow.LeftToRight + fontSizeMode: Text.VerticalFit } PropertyChanges { @@ -207,40 +195,34 @@ target: main Layout.fillHeight: false Layout.fillWidth: true - Layout.maximumHeight: main.showDate ? labelsFlow.height + dateLabel.height : labelsFlow.height + Layout.maximumHeight: main.showDate ? labelsGrid.height + dateLabelUnder.height : labelsGrid.height Layout.minimumHeight: Layout.maximumHeight } PropertyChanges { target: timeLabel - height: sizehelper.height - width: sizehelper.width - minimumPointSize: 0 - - fontSizeMode: Text.HorizontalFit + minimumPointSize: 1 } 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.min(Math.max(sizehelper.lineCount > 1 ? 2 * Math.round(timeLabel.height / 6) : 2 * Math.round(timeLabel.height / 3), theme.smallestFont.pointSize), Math.round(timeLabel.height)) width: main.width - fontSizeMode: Text.HorizontalFit - minimumPointSize: 0 + fontSizeMode: Text.Fit elide: Text.ElideRight } PropertyChanges { - target: dateLabel + target: dateLabelUnder - height: timezoneLabel.height - width: timezoneLabel.width + height: timeLabel.height + width: main.width - fontSizeMode: Text.HorizontalFit - minimumPointSize: 0 - elide: Text.ElideRight + fontSizeMode: Text.Fit + minimumPointSize: 1 } PropertyChanges { @@ -249,12 +231,18 @@ height: sizehelper.paintedHeight width: main.width - minimumPointSize: 0 + minimumPointSize: 1 fontSizeMode: Text.HorizontalFit horizontalAlignment: Text.AlignHCenter wrapMode: Text.WordWrap } + + PropertyChanges { + target: labelsGrid + + rows: 2 + } }, State { @@ -266,46 +254,40 @@ Layout.fillHeight: false Layout.fillWidth: false Layout.minimumWidth: units.gridUnit * 3 - Layout.maximumWidth: Math.max(labelsFlow.width, dateLabel.width) + Layout.maximumWidth: Math.max(labelsGrid.width, dateLabelUnder.width) Layout.minimumHeight: units.gridUnit * 3 - Layout.maximumHeight: main.showDate ? labelsFlow.height + dateLabel.height : labelsFlow.height + Layout.maximumHeight: main.showDate ? labelsGrid.height + dateLabelUnder.height : labelsGrid.height } 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: dateLabelUnder.visible ? Math.round(0.2 * main.height) : Math.round(0.4 * main.height) width: main.width fontSizeMode: Text.Fit - minimumPixelSize: 0 elide: Text.ElideRight } PropertyChanges { - target: dateLabel + target: dateLabelUnder - height: timezoneLabel.visible ? Math.round(1 * (main.height / 5)) : Math.round(2 * (main.height / 5)) + height: timezoneLabel.visible ? Math.round(0.2 * main.height) : Math.round(0.4 * main.height) width: main.width - anchors.horizontalCenter: main.horizontalCenter fontSizeMode: Text.Fit } PropertyChanges { target: sizehelper - height: main.showDate || timezoneLabel.visible ? Math.round(3 * (main.height / 5)) : main.height + height: main.showDate || timezoneLabel.visible ? Math.round(0.6 * main.height) : main.height width: main.width fontSizeMode: Text.Fit @@ -357,59 +339,64 @@ } } - Flow { - id: labelsFlow + /* + * Visual elements + * + */ + + Grid { + id: labelsGrid anchors.horizontalCenter: main.horizontalCenter + rows: 1 + horizontalItemAlignment: Grid.AlignHCenter + verticalItemAlignment: Grid.AlignVCenter + flow: Flow.TopToBottom - spacing: flow == Flow.LeftToRight && (timezoneLabel.visible || main.tooSmall) ? units.smallSpacing : 0 + columnSpacing: units.smallSpacing Components.Label { id: dateLabelLeft - height: sizehelper.height + height: 0.8 * sizehelper.height + width: dateLabelLeft.paintedWidth visible: main.showDate && main.tooSmall font { weight: timeLabel.font.weight italic: timeLabel.font.italic - pointSize: theme.defaultFont.pointSize + pointSize: 1024 } - minimumPixelSize: 0 - - fontSizeMode: Text.VerticalFit + minimumPointSize: Math.floor(0.8 * theme.smallestFont.pointSize) horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } - Item { - height: dateLabelLeft.height + Rectangle { + height: 0.8 * sizehelper.height width: 1 visible: main.showDate && main.tooSmall - Rectangle { - id: delimiter - - height: dateLabelLeft.font.pixelSize - width: 1 - anchors.verticalCenter: parent.verticalCenter - - color: theme.textColor - opacity: 0.4 - } + color: theme.textColor + opacity: 0.4 } Components.Label { id: timeLabel + height: sizehelper.height + width: sizehelper.width + fontSizeMode: Text.Fit + font { family: plasmoid.configuration.fontFamily || theme.defaultFont.family weight: plasmoid.configuration.boldText ? Font.Bold : theme.defaultFont.weight italic: plasmoid.configuration.italicText pointSize: 1024 } + minimumPointSize: theme.smallestFont.pointSize text: { // get the time for the given timezone from the dataengine @@ -433,27 +420,32 @@ font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic font.pointSize: 1024 - minimumPixelSize: 0 + minimumPointSize: 1 visible: text.length > 0 horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } } Components.Label { - id: dateLabel + id: dateLabelUnder - anchors.top: labelsFlow.bottom + height: 0.4 * main.height + anchors.top: labelsGrid.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 + // in order to boost the size in very small layouts, use 0.8 instead of the ratio derived 2/3 + minimumPointSize: Math.floor(0.8 * theme.smallestFont.pointSize) fontSizeMode: Text.VerticalFit + anchors.horizontalCenter: main.horizontalCenter + horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } @@ -461,16 +453,26 @@ Components.Label { id: sizehelper + // will always get changed by states + height: 1 + width: 1 + font.family: timeLabel.font.family font.weight: timeLabel.font.weight font.italic: timeLabel.font.italic font.pointSize: 1024 + minimumPointSize: 1 verticalAlignment: Text.AlignVCenter visible: false } + /* + * end + * + */ + FontMetrics { id: timeMetrics @@ -534,12 +536,12 @@ if (main.tooSmall) { dateLabelLeft.text = Qt.formatDate(main.currentTime, main.dateFormat); } else { - dateLabel.text = Qt.formatDate(main.currentTime, main.dateFormat); + dateLabelUnder.text = Qt.formatDate(main.currentTime, main.dateFormat); } } else { // clear it so it doesn't take space in the layout - dateLabel.text = ""; dateLabelLeft.text = ""; + dateLabelUnder.text = ""; } // find widest character between 0 and 9