From 4cf5f661c4c801c28f2f60d4c57a8ec3ae1cfb0e Mon Sep 17 00:00:00 2001 From: John Gibbon Date: Mon, 18 Jan 2021 22:55:15 +0100 Subject: [PATCH] Visually optimize chat list - work on pin icon (mirrored/pointier) - align profile thumbnail the same as the text fallback - harmonize list delegate (and profile thumbnail) height (no more variable height) - minimally reduce column spacing --- images/icon-s-pin.svg | 28 +-- qml/components/PhotoTextsListItem.qml | 297 +++++++++++++------------- qml/components/ProfileThumbnail.qml | 1 - 3 files changed, 161 insertions(+), 165 deletions(-) diff --git a/images/icon-s-pin.svg b/images/icon-s-pin.svg index 80dfab8..44cd75c 100644 --- a/images/icon-s-pin.svg +++ b/images/icon-s-pin.svg @@ -5,22 +5,22 @@ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" - xml:space="preserve" - style="enable-background:new 0 0 32 32;" - viewBox="0 0 32 32" - height="32px" - width="32px" - y="0px" - x="0px" + version="1.1" id="Layer_1" - version="1.1">image/svg+xml \ No newline at end of file + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999988;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" + d="m 17.260984,14.609156 12.154237,14.059752 c 1.061142,1.031584 0.340976,1.769735 -0.690592,0.708574 L 14.68129,17.182807 c 0.519848,-0.324835 1.002326,-0.705954 1.438705,-1.136457 0.431996,-0.435673 0.814645,-0.917643 1.140989,-1.437194 z" + id="path4567-6-9-2-9-0" /> \ No newline at end of file diff --git a/qml/components/PhotoTextsListItem.qml b/qml/components/PhotoTextsListItem.qml index 5c69d39..78c7f39 100644 --- a/qml/components/PhotoTextsListItem.qml +++ b/qml/components/PhotoTextsListItem.qml @@ -18,175 +18,172 @@ ListItem { property bool isMuted: false property alias pictureThumbnail: pictureThumbnail - contentHeight: mainRow.height + separator.height + 2 * Theme.paddingMedium + contentHeight: Theme.itemSizeExtraLarge contentWidth: parent.width - Column { - id: mainColumn - width: parent.width - ( 2 * Theme.horizontalPageMargin ) - spacing: Theme.paddingSmall + + ShaderEffectSource { + id: pictureItem + height: Theme.itemSizeLarge + width: height anchors { - horizontalCenter: parent.horizontalCenter + left: parent.left + leftMargin: Theme.horizontalPageMargin verticalCenter: parent.verticalCenter } + sourceItem: Item { + width: pictureItem.width + height: pictureItem.width + + ProfileThumbnail { + id: pictureThumbnail + replacementStringHint: primaryText.text + width: parent.width + height: parent.width + } + + Rectangle { + id: chatPinnedBackground + color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityFaint) + width: Theme.fontSizeLarge + height: Theme.fontSizeLarge + anchors.top: parent.top + radius: parent.width / 2 + visible: chatListViewItem.isPinned + } + + Icon { + source: "../../images/icon-s-pin.svg" + height: Theme.iconSizeExtraSmall + width: Theme.iconSizeExtraSmall + highlighted: chatListViewItem.highlighted + sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall) + anchors.centerIn: chatPinnedBackground + visible: chatListViewItem.isPinned + } + + Rectangle { + id: chatSecretBackground + color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityFaint) + width: Theme.fontSizeLarge + height: Theme.fontSizeLarge + anchors.bottom: parent.bottom + radius: parent.width / 2 + visible: chatListViewItem.isSecret + } + + Icon { + source: "image://theme/icon-s-secure" + height: Theme.iconSizeExtraSmall + width: Theme.iconSizeExtraSmall + highlighted: chatListViewItem.highlighted + anchors.centerIn: chatSecretBackground + visible: chatListViewItem.isSecret + } + + Rectangle { + id: chatUnreadMessagesCountBackground + color: Theme.highlightBackgroundColor + width: Theme.fontSizeLarge + height: Theme.fontSizeLarge + anchors.right: parent.right + anchors.bottom: parent.bottom + radius: parent.width / 2 + visible: chatListViewItem.unreadCount > 0 || chatListViewItem.isMarkedAsUnread + } + + Text { + id: chatUnreadMessagesCount + font.pixelSize: Theme.fontSizeExtraSmall + font.bold: true + color: Theme.primaryColor + anchors.centerIn: chatUnreadMessagesCountBackground + visible: chatListViewItem.unreadCount > 0 + text: chatListViewItem.unreadCount > 99 ? "99+" : chatListViewItem.unreadCount + } + } + } + Column { + id: contentColumn + anchors { + verticalCenter: parent.verticalCenter + left: pictureItem.right + leftMargin: Theme.paddingSmall + right: parent.right + rightMargin: Theme.horizontalPageMargin + } + spacing: Theme.paddingSmall / 2 + Row { - id: mainRow - height: contentColumn.height + id: primaryTextRow spacing: Theme.paddingMedium - ShaderEffectSource { - id: pictureItem - width: contentColumn.height - Theme.paddingSmall - height: contentColumn.height - Theme.paddingSmall + Label { + id: primaryText + textFormat: Text.StyledText + font.pixelSize: Theme.fontSizeMedium + truncationMode: TruncationMode.Fade anchors.verticalCenter: parent.verticalCenter - sourceItem: Item { - width: pictureItem.width - height: pictureItem.width - - ProfileThumbnail { - id: pictureThumbnail - replacementStringHint: primaryText.text - width: parent.width - height: parent.width - } - - Rectangle { - id: chatPinnedBackground - color: Theme.highlightBackgroundColor - width: Theme.fontSizeLarge - height: Theme.fontSizeLarge - anchors.top: parent.top - radius: parent.width / 2 - visible: chatListViewItem.isPinned - } - - Image { - source: "../../images/icon-s-pin.svg" - height: Theme.fontSizeSmall - width: Theme.fontSizeSmall - sourceSize: Qt.size(Theme.iconSizeSmall, Theme.iconSizeSmall) - anchors.centerIn: chatPinnedBackground - visible: chatListViewItem.isPinned - } - - Rectangle { - id: chatSecretBackground - color: Theme.highlightBackgroundColor - width: Theme.fontSizeLarge - height: Theme.fontSizeLarge - anchors.bottom: parent.bottom - radius: parent.width / 2 - visible: chatListViewItem.isSecret - } - - Image { - source: "image://theme/icon-s-secure" - height: Theme.fontSizeSmall - width: Theme.fontSizeSmall - anchors.centerIn: chatSecretBackground - visible: chatListViewItem.isSecret - } - - Rectangle { - id: chatUnreadMessagesCountBackground - color: Theme.highlightBackgroundColor - width: Theme.fontSizeLarge - height: Theme.fontSizeLarge - anchors.right: parent.right - anchors.bottom: parent.bottom - radius: parent.width / 2 - visible: chatListViewItem.unreadCount > 0 || chatListViewItem.isMarkedAsUnread - } - - Text { - id: chatUnreadMessagesCount - font.pixelSize: Theme.fontSizeExtraSmall - font.bold: true - color: Theme.primaryColor - anchors.centerIn: chatUnreadMessagesCountBackground - visible: chatListViewItem.unreadCount > 0 - text: chatListViewItem.unreadCount > 99 ? "99+" : chatListViewItem.unreadCount - } - } + width: Math.min(contentColumn.width - (verifiedImage.visible ? (verifiedImage.width + primaryTextRow.spacing) : 0) - (mutedImage.visible ? (mutedImage.width + primaryTextRow.spacing) : 0), implicitWidth) } - Column { - id: contentColumn - width: mainColumn.width - pictureItem.width - mainRow.spacing - spacing: Theme.paddingSmall - - Row { - id: primaryTextRow - spacing: Theme.paddingMedium - - Label { - id: primaryText - textFormat: Text.StyledText - font.pixelSize: Theme.fontSizeMedium - truncationMode: TruncationMode.Fade - anchors.verticalCenter: parent.verticalCenter - width: Math.min(contentColumn.width - (verifiedImage.visible ? (verifiedImage.width + primaryTextRow.spacing) : 0) - (mutedImage.visible ? (mutedImage.width + primaryTextRow.spacing) : 0), implicitWidth) - } - - Image { - id: verifiedImage - anchors.verticalCenter: parent.verticalCenter - source: chatListViewItem.isVerified ? "../../images/icon-verified.svg" : "" - sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall) - width: Theme.iconSizeSmall - height: Theme.iconSizeSmall - visible: status === Image.Ready - } - - Image { - id: mutedImage - anchors.verticalCenter: parent.verticalCenter - source: chatListViewItem.isMuted ? "../js/emoji/1f507.svg" : "" - sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall) - width: Theme.iconSizeSmall - height: Theme.iconSizeSmall - visible: status === Image.Ready - } - } - - Row { - width: parent.width - spacing: Theme.paddingSmall - Label { - id: prologSecondaryText - font.pixelSize: Theme.fontSizeExtraSmall - width: Math.min(implicitWidth, parent.width) - color: Theme.highlightColor - textFormat: Text.StyledText - truncationMode: TruncationMode.Fade - } - Label { - id: secondaryText - font.pixelSize: Theme.fontSizeExtraSmall - width: parent.width - Theme.paddingMedium - prologSecondaryText.width - truncationMode: TruncationMode.Fade - textFormat: Text.StyledText - visible: prologSecondaryText.width < ( parent.width - Theme.paddingLarge ) - } - } - - Label { - id: tertiaryText - width: parent.width - font.pixelSize: Theme.fontSizeTiny - color: Theme.secondaryColor - truncationMode: TruncationMode.Fade - } + Image { + id: verifiedImage + anchors.verticalCenter: parent.verticalCenter + source: chatListViewItem.isVerified ? "../../images/icon-verified.svg" : "" + sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall) + width: Theme.iconSizeSmall + height: Theme.iconSizeSmall + visible: status === Image.Ready } + + Image { + id: mutedImage + anchors.verticalCenter: parent.verticalCenter + source: chatListViewItem.isMuted ? "../js/emoji/1f507.svg" : "" + sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall) + width: Theme.iconSizeSmall + height: Theme.iconSizeSmall + visible: status === Image.Ready + } + } + + Row { + width: parent.width + spacing: Theme.paddingSmall + Label { + id: prologSecondaryText + font.pixelSize: Theme.fontSizeExtraSmall + width: Math.min(implicitWidth, parent.width) + color: Theme.highlightColor + textFormat: Text.StyledText + truncationMode: TruncationMode.Fade + } + Label { + id: secondaryText + font.pixelSize: Theme.fontSizeExtraSmall + width: parent.width - Theme.paddingMedium - prologSecondaryText.width + truncationMode: TruncationMode.Fade + textFormat: Text.StyledText + visible: prologSecondaryText.width < ( parent.width - Theme.paddingLarge ) + } + } + + Label { + id: tertiaryText + width: parent.width + font.pixelSize: Theme.fontSizeTiny + color: Theme.secondaryColor + truncationMode: TruncationMode.Fade } } Separator { id: separator anchors { - top: mainColumn.bottom - topMargin: Theme.paddingMedium + bottom: parent.bottom + bottomMargin: -1 } width: parent.width diff --git a/qml/components/ProfileThumbnail.qml b/qml/components/ProfileThumbnail.qml index 555cc1c..04abf48 100644 --- a/qml/components/ProfileThumbnail.qml +++ b/qml/components/ProfileThumbnail.qml @@ -69,7 +69,6 @@ Item { id: singleImage width: parent.width - Theme.paddingSmall height: width - anchors.centerIn: parent source: file.path sourceSize.width: optimizeImageSize ? width : undefined sourceSize.height: optimizeImageSize ? height : undefined