feat: make channel list compact in compact mode

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -36,8 +36,6 @@ Item {
     property var scrollToBottom: function () {}
     property var appSettings
 
-    property bool isCompact: appSettings.compactMode
-
     id: messageItem
     width: parent.width
     anchors.right: !isCurrentUser ? undefined : parent.right
@@ -58,7 +56,6 @@ Item {
     Loader {
         active :true
         width: parent.width
-        // TODO get prop from settings
         sourceComponent: {
             switch(contentType) {
                 case Constants.chatIdentifier:
@@ -66,7 +63,7 @@ Item {
                 case Constants.systemMessagePrivateGroupType:
                     return channelIdentifierComponent
                 default:
-                    return isCompact ? compactMessageComponent : messageComponent
+                    return appSettings.compactMode ? compactMessageComponent : messageComponent
             }
         }
     }

ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml

@@ -21,6 +21,10 @@ Rectangle {
       channelName: chatsModel.activeChannel.name
       channelType: chatsModel.activeChannel.chatType
       channelIdenticon: chatsModel.activeChannel.identicon
+      anchors.left: parent.left
+      anchors.leftMargin: Style.current.padding
+      anchors.top: parent.top
+      anchors.topMargin: Style.current.smallPadding
     }
 
     StyledTextEdit {

ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml

@@ -12,6 +12,7 @@ Rectangle {
     property bool hasMentions: false
     property int chatType: Constants.chatTypePublic
     property string searchStr: ""
+    property bool isCompact: appSettings.compactMode
 
     id: wrapper
     color: ListView.isCurrentItem ? Style.current.secondaryBackground : Style.current.transparent
@@ -22,7 +23,7 @@ Rectangle {
     // Hide the box if it is filtered out
     property bool isVisible: searchStr == "" || name.includes(searchStr)
     visible: isVisible ? true : false
-    height: isVisible ? 64 : 0
+    height: isVisible ? !isCompact ? 64 : contactImage.height + Style.current.smallPadding * 2 : 0
 
     MouseArea {
         cursorShape: Qt.PointingHandCursor
@@ -35,13 +36,15 @@ Rectangle {
 
     ChannelIcon {
       id: contactImage
-      height: 40
-      width: 40
-      topMargin: 12
-      bottomMargin: 12
+      height: !isCompact ? 40 : 20
+      width: !isCompact ? 40 : 20
+      fontSize: !isCompact ? this.defaultFontSize : 14
       channelName: wrapper.name
       channelType: wrapper.chatType
       channelIdenticon: identicon
+      anchors.left: parent.left
+      anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+      anchors.verticalCenter: parent.verticalCenter
     }
 
     SVGImage {
@@ -52,8 +55,9 @@ Rectangle {
         source: "../../../img/channel-icon-" + (wrapper.chatType === Constants.chatTypePublic ? "public-chat.svg" : "group.svg")
         anchors.left: contactImage.right
         anchors.leftMargin: Style.current.padding
-        anchors.top: parent.top
-        anchors.topMargin: Style.current.smallPadding
+        anchors.top: !isCompact ? parent.top : undefined
+        anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
+        anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
         visible: wrapper.chatType !== Constants.chatTypeOneToOne
     }
 
@@ -67,12 +71,14 @@ Rectangle {
         font.pixelSize: 15
         anchors.left: channelIcon.visible ? channelIcon.right : contactImage.right
         anchors.leftMargin: channelIcon.visible ? 2 : Style.current.padding
-        anchors.top: parent.top
-        anchors.topMargin: Style.current.smallPadding
+        anchors.top: !isCompact ? parent.top : undefined
+        anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
+        anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
     }
     
     StyledText {
         id: lastChatMessage
+        visible: !isCompact
         //% "No messages"
         text: lastMessage ? Emoji.parse(lastMessage, "26x26").replace(/\n|\r/g, ' ') : qsTrId("no-messages")
         clip: true // This is needed because emojis don't ellide correctly
@@ -86,54 +92,63 @@ Rectangle {
         anchors.leftMargin: Style.current.padding
         color: Style.current.darkGrey
     }
+
     StyledText {
         id: contactTime
         text: {
-          let now = new Date()
-          let yesterday = new Date()
-          yesterday.setDate(now.getDate()-1)
-          let messageDate = new Date(Math.floor(wrapper.timestamp))
-          let lastWeek = new Date()
-          lastWeek.setDate(now.getDate()-7)
+            let now = new Date()
+            let yesterday = new Date()
+            yesterday.setDate(now.getDate()-1)
+            let messageDate = new Date(Math.floor(wrapper.timestamp))
+            let lastWeek = new Date()
+            lastWeek.setDate(now.getDate()-7)
 
-          let minutes = messageDate.getMinutes();
-          let hours = messageDate.getHours();
+            let minutes = messageDate.getMinutes();
+            let hours = messageDate.getHours();
 
-          if (now.toDateString() == messageDate.toDateString()) {
-            return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes)
-          } else if (yesterday.toDateString() == messageDate.toDateString()) {
-            //% "Yesterday"
-            return qsTrId("yesterday")
-          } else if (lastWeek.getTime() < messageDate.getTime()) {
-            //% "Sunday"
-            //% "Monday"
-            //% "Tuesday"
-            //% "Wednesday"
-            //% "Thursday"
-            //% "Friday"
-            //% "Saturday"
-            let days = [qsTrId("sunday"), qsTrId("monday"), qsTrId("tuesday"), qsTrId("wednesday"), qsTrId("thursday"), qsTrId("friday"), qsTrId("saturday")];
-            return days[messageDate.getDay()];
-          } else {
-            return messageDate.getMonth()+1+"/"+messageDate.getDay()+"/"+messageDate.getFullYear()
-          }
-        }
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        anchors.top: parent.top
-        anchors.topMargin: Style.current.smallPadding
-        font.pixelSize: 11
-        color: Style.current.darkGrey
+            if (now.toDateString() === messageDate.toDateString()) {
+                return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes)
+            } else if (yesterday.toDateString() === messageDate.toDateString()) {
+                //% "Yesterday"
+                return qsTrId("yesterday")
+            } else if (lastWeek.getTime() < messageDate.getTime()) {
+                //% "Sunday"
+                let days = [qsTrId("sunday"),
+                            //% "Monday"
+                            qsTrId("monday"),
+                            //% "Tuesday"
+                            qsTrId("tuesday"),
+                            //% "Wednesday"
+                            qsTrId("wednesday"),
+                            //% "Thursday"
+                            qsTrId("thursday"),
+                            //% "Friday"
+                            qsTrId("friday"),
+                            //% "Saturday"
+                            qsTrId("saturday")];
+                return days[messageDate.getDay()];
+            } else {
+                return messageDate.getMonth()+1+"/"+messageDate.getDay()+"/"+messageDate.getFullYear()
+            }
+            }
+            anchors.right: parent.right
+            anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+            anchors.top: !isCompact ? parent.top : undefined
+            anchors.topMargin: !isCompact ? Style.current.smallPadding : 0
+            anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
+            font.pixelSize: 11
+            color: Style.current.darkGrey
     }
     Rectangle {
         id: contactNumberChatsCircle
         width: 22
         height: 22
         radius: 50
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: Style.current.smallPadding
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
+        anchors.right: !isCompact ? parent.right : contactTime.left
+        anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+        anchors.bottom: !isCompact ? parent.bottom : undefined
+        anchors.bottomMargin: !isCompact ? Style.current.smallPadding : 0
+        anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter
         color: Style.current.blue
         visible: (unviewedMessagesCount > 0) || wrapper.hasMentions
         StyledText {
@@ -142,7 +157,7 @@ Rectangle {
             font.pixelSize: 12
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
-            color: "white"
+            color: Style.current.white
         }
     }
 }

ui/app/AppLayouts/Chat/components/ChannelIcon.qml

@@ -4,75 +4,68 @@ import QtQuick.Layouts 1.13
 import "../../../../imports"
 import "../../../../shared"
 
-Rectangle {
-  property int topMargin: Style.current.smallPadding
-  property int bottomMargin: Style.current.smallPadding
-  property string channelName
-  property int channelType
-  property string channelIdenticon
-  id: contactImage
-  width: 36
-  height: 36
-  anchors.left: parent.left
-  anchors.leftMargin: Style.current.padding
-  anchors.top: parent.top
-  anchors.topMargin: topMargin
-  anchors.bottom: parent.bottom
-  anchors.bottomMargin: bottomMargin
-  radius: 50
+Item {
+    property string channelName
+    property int channelType
+    property string channelIdenticon
+    readonly property int defaultFontSize: 21
+    property int fontSize: defaultFontSize
+    id: contactImage
+    width: 36
+    height: 36
 
-  Loader {
-    sourceComponent: channelType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
-    anchors.fill: parent
-  }
+    Loader {
+        sourceComponent: channelType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
+        anchors.fill: parent
+    }
 
-  Component {
-    id: letterIdenticon
-    Rectangle {
-      width: contactImage.width ? contactImage.width : 36
-      height: contactImage.height ? contactImage.height: 36
-      radius: 120
-      color: {
-          const color = chatsModel.getChannelColor(channelName)
-          if (!color) {
-              return Style.current.transparent
-          }
-          return color
-      }
+    Component {
+        id: letterIdenticon
+        Rectangle {
+            width: contactImage.width
+            height: contactImage.height
+            radius: 50
+            color: {
+                const color = chatsModel.getChannelColor(channelName)
+                if (!color) {
+                    return Style.current.transparent
+                }
+                return color
+            }
 
-      StyledText {
-        text: {
-          if (channelType == Constants.chatTypeOneToOne) {
-            return channelName;
-          } else {
-            return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase();
-          }
+            StyledText {
+                text: {
+                    if (channelType == Constants.chatTypeOneToOne) {
+                        return channelName
+                    } else {
+                        return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase()
+                    }
+                }
+                opacity: 0.7
+                font.weight: Font.Bold
+                font.pixelSize: fontSize
+                color: "white"
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+            }
         }
-        opacity: 0.7
-        font.weight: Font.Bold
-        font.pixelSize: 21
-        color: "white"
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
-      }
     }
-  }
 
-  Component {
-    id: imageIdenticon
-    Rectangle {
-      width: contactImage.width ? contactImage.width : 40
-      height: contactImage.height ? contactImage.height : 40
-      radius: 50
-      border.color: "#10000000"
-      border.width: 1
-      color: Style.current.transparent
-      SVGImage {
-          width: contactImage.width ? contactImage.width : 40
-          height: contactImage.height ? contactImage.height : 40
-          fillMode: Image.PreserveAspectFit
-          source: channelIdenticon
-      }
+    Component {
+        id: imageIdenticon
+        Rectangle {
+            width: contactImage.width ? contactImage.width : 40
+            height: contactImage.height ? contactImage.height : 40
+            radius: 50
+            border.color: "#10000000"
+            border.width: 1
+            color: Style.current.transparent
+            SVGImage {
+                width: contactImage.width ? contactImage.width : 40
+                height: contactImage.height ? contactImage.height : 40
+                fillMode: Image.PreserveAspectFit
+                source: channelIdenticon
+            }
+        }
     }
-  }
 }