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

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

qml/components/PhotoTextsListItem.qml

@@ -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: Theme.itemSizeLarge
-                height: contentColumn.height - Theme.paddingSmall
+        width: height
-                anchors.verticalCenter: parent.verticalCenter
+        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
+                height: Theme.iconSizeExtraSmall
-                        width: Theme.fontSizeSmall
+                width: Theme.iconSizeExtraSmall
-                        sourceSize: Qt.size(Theme.iconSizeSmall, Theme.iconSizeSmall)
+                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
+                height: Theme.iconSizeExtraSmall
-                        width: Theme.fontSizeSmall
+                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
+        anchors {
-                spacing: Theme.paddingSmall
+            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
+            bottom: parent.bottom
-            topMargin: Theme.paddingMedium
+            bottomMargin: -1
         }
 
         width: parent.width

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