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

Visually optimize chat list

images/icon-s-pin.svg

@@ -14,13 +14,14 @@
    x="0px"
    id="Layer_1"
    version="1.1"><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="defs3" /> Updated upstream
-     id="path4567-6-9-2-9-0"
+     id=&quot;defs15&quot; /&gt;<path
-     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="path4567-6-9-2-9-0-3"
-     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
+   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"
-     id="path4569-2-1-7-6-6"
+   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
-     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"
+   id="rect814-5-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" /></svg>
+   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>

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
+    ShaderEffectSource {
-        width: parent.width - ( 2 * Theme.horizontalPageMargin )
+        id: pictureItem
-        spacing: Theme.paddingSmall
+        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
+            id: primaryTextRow
-            height: contentColumn.height
             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
-                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 {
         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