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
This commit is contained in:
John Gibbon
parent
32f884e547
commit
4cf5f661c4
3 changed files with 161 additions and 165 deletions
|
|
@ -5,22 +5,22 @@
|
||||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xml:space="preserve"
|
version="1.1"
|
||||||
style="enable-background:new 0 0 32 32;"
|
|
||||||
viewBox="0 0 32 32"
|
|
||||||
height="32px"
|
|
||||||
width="32px"
|
|
||||||
y="0px"
|
|
||||||
x="0px"
|
|
||||||
id="Layer_1"
|
id="Layer_1"
|
||||||
version="1.1"><metadata
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
width="32px"
|
||||||
|
height="32px"
|
||||||
|
viewBox="0 0 32 32"
|
||||||
|
style="enable-background:new 0 0 32 32;"
|
||||||
|
xml:space="preserve"><metadata
|
||||||
id="metadata17"><rdf:RDF><cc:Work
|
id="metadata17"><rdf:RDF><cc:Work
|
||||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||||
id="defs15" /><path
|
id="defs15" /><path
|
||||||
id="path4567-6-9-2-9-0"
|
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 14.774588,14.651001 2.1829034,28.267313 c -1.0611451,1.031581 0.5159425,2.608675 1.5475102,1.547514 L 17.354282,17.224652 a 8.3460333,8.3460333 0 0 1 -1.438704,-1.136457 8.3460333,8.3460333 0 0 1 -1.14099,-1.437194 z"
|
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"
|
||||||
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" /><path
|
id="path4567-6-9-2-9-0" /><path
|
||||||
id="path4569-2-1-7-6-6"
|
style="opacity:0.6;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
d="m 27.72494,4.2773215 a 8.3460333,8.3460333 0 0 1 -2e-6,11.8030745 8.3460333,8.3460333 0 0 1 -11.803072,0 8.3460333,8.3460333 0 0 1 0,-11.8030745 8.3460333,8.3460333 0 0 1 11.803074,0 z"
|
d="m 4.2750595,4.2773215 a 8.3460333,8.3460333 0 0 0 2e-6,11.8030745 8.3460333,8.3460333 0 0 0 11.8030715,0 8.3460333,8.3460333 0 0 0 0,-11.8030745 8.3460333,8.3460333 0 0 0 -11.8030735,0 z"
|
||||||
style="opacity:0.6;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" /></svg>
|
id="path4569-2-1-7-6-6" /></svg>
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
|
|
@ -18,175 +18,172 @@ ListItem {
|
||||||
property bool isMuted: false
|
property bool isMuted: false
|
||||||
property alias pictureThumbnail: pictureThumbnail
|
property alias pictureThumbnail: pictureThumbnail
|
||||||
|
|
||||||
contentHeight: mainRow.height + separator.height + 2 * Theme.paddingMedium
|
contentHeight: Theme.itemSizeExtraLarge
|
||||||
contentWidth: parent.width
|
contentWidth: parent.width
|
||||||
|
|
||||||
Column {
|
|
||||||
id: mainColumn
|
ShaderEffectSource {
|
||||||
width: parent.width - ( 2 * Theme.horizontalPageMargin )
|
id: pictureItem
|
||||||
spacing: Theme.paddingSmall
|
height: Theme.itemSizeLarge
|
||||||
|
width: height
|
||||||
anchors {
|
anchors {
|
||||||
horizontalCenter: parent.horizontalCenter
|
left: parent.left
|
||||||
|
leftMargin: Theme.horizontalPageMargin
|
||||||
verticalCenter: parent.verticalCenter
|
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 {
|
Row {
|
||||||
id: mainRow
|
id: primaryTextRow
|
||||||
height: contentColumn.height
|
|
||||||
spacing: Theme.paddingMedium
|
spacing: Theme.paddingMedium
|
||||||
|
|
||||||
ShaderEffectSource {
|
Label {
|
||||||
id: pictureItem
|
id: primaryText
|
||||||
width: contentColumn.height - Theme.paddingSmall
|
textFormat: Text.StyledText
|
||||||
height: contentColumn.height - Theme.paddingSmall
|
font.pixelSize: Theme.fontSizeMedium
|
||||||
|
truncationMode: TruncationMode.Fade
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
sourceItem: Item {
|
width: Math.min(contentColumn.width - (verifiedImage.visible ? (verifiedImage.width + primaryTextRow.spacing) : 0) - (mutedImage.visible ? (mutedImage.width + primaryTextRow.spacing) : 0), implicitWidth)
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Column {
|
Image {
|
||||||
id: contentColumn
|
id: verifiedImage
|
||||||
width: mainColumn.width - pictureItem.width - mainRow.spacing
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
spacing: Theme.paddingSmall
|
source: chatListViewItem.isVerified ? "../../images/icon-verified.svg" : ""
|
||||||
|
sourceSize: Qt.size(Theme.iconSizeExtraSmall, Theme.iconSizeExtraSmall)
|
||||||
Row {
|
width: Theme.iconSizeSmall
|
||||||
id: primaryTextRow
|
height: Theme.iconSizeSmall
|
||||||
spacing: Theme.paddingMedium
|
visible: status === Image.Ready
|
||||||
|
|
||||||
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: 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 {
|
Separator {
|
||||||
id: separator
|
id: separator
|
||||||
anchors {
|
anchors {
|
||||||
top: mainColumn.bottom
|
bottom: parent.bottom
|
||||||
topMargin: Theme.paddingMedium
|
bottomMargin: -1
|
||||||
}
|
}
|
||||||
|
|
||||||
width: parent.width
|
width: parent.width
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,6 @@ Item {
|
||||||
id: singleImage
|
id: singleImage
|
||||||
width: parent.width - Theme.paddingSmall
|
width: parent.width - Theme.paddingSmall
|
||||||
height: width
|
height: width
|
||||||
anchors.centerIn: parent
|
|
||||||
source: file.path
|
source: file.path
|
||||||
sourceSize.width: optimizeImageSize ? width : undefined
|
sourceSize.width: optimizeImageSize ? width : undefined
|
||||||
sourceSize.height: optimizeImageSize ? height : undefined
|
sourceSize.height: optimizeImageSize ? height : undefined
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue