diff --git a/src/qml/Chat/Timeline/EventContent.qml b/src/qml/Chat/Timeline/EventContent.qml index 5067b653..47ad10bd 100644 --- a/src/qml/Chat/Timeline/EventContent.qml +++ b/src/qml/Chat/Timeline/EventContent.qml @@ -70,7 +70,7 @@ Row { // time "  " + - Qt.formatDateTime(model.date, "hh:mm:ss") + + Utils.formatTime(model.date) + "" + // local echo icon (model.is_local_echo ? diff --git a/src/qml/SidePane/RoomDelegate.qml b/src/qml/SidePane/RoomDelegate.qml index fcf7f41a..5b16d501 100644 --- a/src/qml/SidePane/RoomDelegate.qml +++ b/src/qml/SidePane/RoomDelegate.qml @@ -15,7 +15,7 @@ HInteractiveRectangle { id: rowLayout x: sidePane.currentSpacing width: parent.width - sidePane.currentSpacing * 1.5 - height: roomLabel.height + subtitleLabel.height + + height: roomName.height + subtitle.height + sidePane.currentSpacing / 1.5 spacing: sidePane.currentSpacing @@ -28,23 +28,53 @@ HInteractiveRectangle { HColumnLayout { Layout.fillWidth: true - HLabel { - id: roomLabel - color: theme.sidePane.room.name - text: model.display_name || "Empty room" - textFormat: - model.display_name? Text.PlainText : Text.StyledText - elide: Text.ElideRight - verticalAlignment: Qt.AlignVCenter + HRowLayout { + spacing: theme.spacing / 2 - Layout.fillWidth: true + HLabel { + id: roomName + color: theme.sidePane.room.name + text: model.display_name || "Empty room" + textFormat: + model.display_name? Text.PlainText : Text.StyledText + elide: Text.ElideRight + verticalAlignment: Qt.AlignVCenter + + Layout.fillWidth: true + } + + HLabel { + readonly property var evDate: + model.last_event ? model.last_event.date : null + + id: lastEventDate + font.pixelSize: theme.fontSize.small + color: theme.sidePane.room.lastEventDate + + text: ! evDate ? "" : + + Utils.dateIsToday(evDate) ? + Utils.formatTime(evDate, false) : // no seconds + + Utils.dateIsYesterday(evDate) ? qsTr("Yesterday") : + + Qt.formatDate(evDate, "dd MMM") // e.g. "24 Nov" + + visible: Layout.maximumWidth > 0 + Layout.maximumWidth: + text && roomDelegate.width >= 200 ? implicitWidth : 0 + Behavior on Layout.maximumWidth { HNumberAnimation {} } + + } } HRichLabel { - id: subtitleLabel + id: subtitle color: theme.sidePane.room.subtitle visible: Boolean(text) textFormat: Text.StyledText + font.pixelSize: theme.fontSize.small + elide: Text.ElideRight text: { if (! model.last_event) { return "" } @@ -61,10 +91,6 @@ HInteractiveRectangle { ) + ": " + ev.inline_content } - - font.pixelSize: theme.fontSize.small - elide: Text.ElideRight - Layout.fillWidth: true } } diff --git a/src/qml/utils.js b/src/qml/utils.js index 1feb6357..fe7a57ed 100644 --- a/src/qml/utils.js +++ b/src/qml/utils.js @@ -123,6 +123,38 @@ function minutesBetween(date1, date2) { } +function dateIsDay(date, dayDate) { + return date.getDate() == dayDate.getDate() && + date.getMonth() == dayDate.getMonth() && + date.getFullYear() == dayDate.getFullYear() +} + + +function dateIsToday(date) { + return dateIsDay(date, new Date()) +} + + +function dateIsYesterday(date) { + const yesterday = new Date() + yesterday.setDate(yesterday.getDate() - 1) + return dateIsDay(date, yesterday) +} + + +function formatTime(time, seconds=true) { + return Qt.formatTime( + time, + + Qt.locale().timeFormat( + seconds ? Locale.LongFormat : Locale.NarrowFormat + ).replace(/\./g, ":").replace(/ t$/, "") + // en_DK.UTF-8 locale wrongfully gives "." separators; + // remove the timezone at the end + ) +} + + function getItem(array, mainKey, value) { for (let i = 0; i < array.length; i++) { if (array[i][mainKey] === value) { return array[i] } diff --git a/src/themes/Default.qpl b/src/themes/Default.qpl index a2c62e04..2dcc3785 100644 --- a/src/themes/Default.qpl +++ b/src/themes/Default.qpl @@ -48,13 +48,14 @@ colors: color inputBackground: hsluv(hue, saturation, intensity * 2, Math.min(0.6, opacity)) - color brightText: hsluv(0, 0, intensity * 100) - color text: hsluv(0, 0, intensity * 80) - color dimText: hsluv(0, 0, intensity * 55) - color dimmerText: hsluv(0, 0, intensity * 30) - color accentText: hsluv(hue - 10, saturation * 2.25, 60) - color link: accentText - color code: hsluv(hue + 5, saturation * 1.5, intensity * 60) + color brightText: hsluv(0, 0, intensity * 100) + color text: hsluv(0, 0, intensity * 80) + color halfDimText: hsluv(0, 0, intensity * 70) + color dimText: hsluv(0, 0, intensity * 55) + color dimmerText: hsluv(0, 0, intensity * 30) + color accentText: hsluv(hue - 10, saturation * 2.25, 60) + color link: accentText + color code: hsluv(hue + 5, saturation * 1.5, intensity * 60) // Example of an animation, set running: true to enable NumberAnimation on hue @@ -159,9 +160,10 @@ sidePane: color name: colors.text room: - color background: "transparent" - color name: colors.text - color subtitle: colors.dimText + color background: "transparent" + color name: colors.text + color subtitle: colors.dimText + color lastEventDate: colors.halfDimText settingsButton: color background: colors.inputBackground