Merge pull request #328 from jgibbon/feature/chat-indicators

Visually optimize chat list
This commit is contained in:
Sebastian Wolf 2021-01-19 19:28:15 +01:00 committed by GitHub
commit 52be4901db
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 158 additions and 161 deletions

View file

@ -17,10 +17,11 @@
id="metadata17"><rdf:RDF><cc:Work
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
id="defs15" /><path
id="path4567-6-9-2-9-0"
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"
id="defs3" /> Updated upstream
id=&quot;defs15&quot; /&gt;<path
id="path4567-6-9-2-9-0-3"
d="m 18.070362,15.595073 11.557261,13.3774 c 1.011409,0.983239 0.324995,1.686796 -0.658223,0.67537 L 15.619387,18.059831 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="path4569-2-1-7-6-6"
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"
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="rect814-5-6"
d="M 10.644531,1.8125 C 10.384078,1.8161365 10.13532,1.9212454 9.9511719,2.1054688 L 2.1210938,9.9355469 c -0.3903681,0.3905301 -0.3903681,1.0235321 0,1.4140621 l 4.4667968,4.46875 0.78125,8.173829 c 0.079282,0.842901 1.1046782,1.212138 1.703125,0.613281 l 7.7734374,-7.775391 7.775391,-7.7734374 c 0.598857,-0.5984471 0.22962,-1.623844 -0.613282,-1.703125 L 15.832031,6.5722656 11.365234,2.1054688 C 11.174385,1.9145467 10.91446,1.8088858 10.644531,1.8125 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:0.6;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /></svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

View file

@ -18,28 +18,20 @@ 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
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
Row {
id: mainRow
height: contentColumn.height
spacing: Theme.paddingMedium
ShaderEffectSource {
id: pictureItem
width: contentColumn.height - Theme.paddingSmall
height: contentColumn.height - Theme.paddingSmall
anchors.verticalCenter: parent.verticalCenter
height: Theme.itemSizeLarge
width: height
anchors {
left: parent.left
leftMargin: Theme.horizontalPageMargin
verticalCenter: parent.verticalCenter
}
sourceItem: Item {
width: pictureItem.width
height: pictureItem.width
@ -53,7 +45,7 @@ ListItem {
Rectangle {
id: chatPinnedBackground
color: Theme.highlightBackgroundColor
color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityFaint)
width: Theme.fontSizeLarge
height: Theme.fontSizeLarge
anchors.top: parent.top
@ -61,18 +53,19 @@ ListItem {
visible: chatListViewItem.isPinned
}
Image {
Icon {
source: "../../images/icon-s-pin.svg"
height: Theme.fontSizeSmall
width: Theme.fontSizeSmall
sourceSize: Qt.size(Theme.iconSizeSmall, Theme.iconSizeSmall)
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.highlightBackgroundColor
color: Theme.rgba(Theme.overlayBackgroundColor, Theme.opacityFaint)
width: Theme.fontSizeLarge
height: Theme.fontSizeLarge
anchors.bottom: parent.bottom
@ -80,10 +73,11 @@ ListItem {
visible: chatListViewItem.isSecret
}
Image {
Icon {
source: "image://theme/icon-s-secure"
height: Theme.fontSizeSmall
width: Theme.fontSizeSmall
height: Theme.iconSizeExtraSmall
width: Theme.iconSizeExtraSmall
highlighted: chatListViewItem.highlighted
anchors.centerIn: chatSecretBackground
visible: chatListViewItem.isSecret
}
@ -110,11 +104,16 @@ ListItem {
}
}
}
Column {
id: contentColumn
width: mainColumn.width - pictureItem.width - mainRow.spacing
spacing: Theme.paddingSmall
anchors {
verticalCenter: parent.verticalCenter
left: pictureItem.right
leftMargin: Theme.paddingSmall
right: parent.right
rightMargin: Theme.horizontalPageMargin
}
spacing: Theme.paddingSmall / 2
Row {
id: primaryTextRow
@ -179,14 +178,12 @@ ListItem {
truncationMode: TruncationMode.Fade
}
}
}
}
Separator {
id: separator
anchors {
top: mainColumn.bottom
topMargin: Theme.paddingMedium
bottom: parent.bottom
bottomMargin: -1
}
width: parent.width

View file

@ -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