feat: implement redesign of communities on the left tab

ui/app/AppLayouts/Chat/CommunityColumn.qml

@@ -29,23 +29,14 @@ Item {
         id: communityHeader
         width: parent.width
         height: communityHeaderButton.height
+        anchors.left: parent.left
+        anchors.leftMargin: 12
         anchors.top: parent.top
         anchors.topMargin: Style.current.padding
 
-        StatusIconButton {
-            id: backArrow
-            icon.name: "arrow-right"
-            iconRotation: 180
-            iconColor: Style.current.inputColor
-            anchors.left: parent.left
-            anchors.leftMargin: Style.current.bigPadding
-            anchors.verticalCenter: communityHeaderButton.verticalCenter
-            onClicked: chatsModel.communities.activeCommunity.active = false
-        }
-
         CommunityHeaderButton {
             id: communityHeaderButton
-            anchors.left: backArrow.right
+            anchors.left: parent.left
             anchors.top: parent.top
             anchors.topMargin: -4
         }

ui/app/AppLayouts/Chat/CommunityComponents/CommunityButton.qml

@@ -5,98 +5,48 @@ import "../../../../shared/status"
 import "../../../../imports"
 import "../components"
 
-Rectangle {
+StatusIconTabButton {
     property string communityId: ""
     property string name: "channelName"
-    property string description: "channel description"
     property string unviewedMessagesCount: "0"
     property string image
     property bool hasMentions: false
-    property string searchStr: ""
-    property bool isCompact: appSettings.useCompactMode
-    property bool hovered: false
 
     id: communityButton
-    color: {
+    anchors.horizontalCenter: parent.horizontalCenter
-      if (communityButton.hovered) {
+    iconSource: communityButton.image
-        return Style.current.secondaryBackground
+    anchors.topMargin: 0
-      }
-      return Style.current.background
-    }
-    anchors.right: parent.right
-    anchors.top: applicationWindow.top
-    anchors.left: parent.left
-    radius: Style.current.radius
-    // Hide the box if it is filtered out
-    property bool isVisible: searchStr === "" ||
-                             communityButton.name.toLowerCase().includes(searchStr) ||
-                             communityButton.description.toLowerCase().includes(searchStr)
-    visible: isVisible ? true : false
-    height: isVisible ? !isCompact ? 64 : communityImage.height + Style.current.smallPadding * 2 : 0
 
-    RoundedImage {
+    section: Constants.community
-        id: communityImage
-        height: !isCompact ? 40 : 20
-        width: !isCompact ? 40 : 20
-        source: communityButton.image
-        anchors.left: parent.left
-        anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
-        anchors.verticalCenter: parent.verticalCenter
-    }
 
-    StyledText {
+    checked: chatsModel.communities.activeCommunity.active && chatsModel.communities.activeCommunity.id === communityId
-        id: contactInfo
+
-        text: communityButton.name
+    borderOnChecked: true
-        anchors.right: contactNumberChatsCircle.left
+    doNotHandleClick: true
-        anchors.rightMargin: Style.current.smallPadding
+    onClicked: {
-        elide: Text.ElideRight
+        appMain.changeAppSection(Constants.chat)
-        font.weight: Font.Medium
+        chatsModel.communities.setActiveCommunity(communityId)
-        font.pixelSize: 15
-        anchors.left: communityImage.right
-        anchors.leftMargin: Style.current.padding
-        anchors.verticalCenter: parent.verticalCenter
     }
 
     Rectangle {
-        id: contactNumberChatsCircle
+        id: chatBadge
-        width: 22
+        visible: unviewedMessagesCount > 0
+        anchors.top: parent.top
+        anchors.left: parent.right
+        anchors.leftMargin: -17
+        anchors.topMargin: 1
+        radius: height / 2
+        color: Style.current.blue
+        border.color: Style.current.background
+        border.width: 2
+        width: unviewedMessagesCount < 10 ? 22 : messageCount.width + 14
         height: 22
-        radius: 50
+        Text {
-        anchors.right: parent.right
+            id: messageCount
-        anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
+            font.pixelSize: chatsModel.unreadMessagesCount > 99 ? 10 : 12
-        anchors.verticalCenter: parent.verticalCenter
-        color: Style.current.primary
-        visible: (unviewedMessagesCount > 0) || communityButton.hasMentions
-        StyledText {
-            id: contactNumberChats
-            text: communityButton.hasMentions ? '@' : (communityButton.unviewedMessagesCount < 100 ? communityButton.unviewedMessagesCount : "99")
-            font.pixelSize: 12
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
             color: Style.current.white
+            anchors.centerIn: parent
+            text: unviewedMessagesCount > 99 ? "99+" : unviewedMessagesCount
         }
     }
-
-    MouseArea {
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        anchors.fill: parent
-        hoverEnabled: true
-        onEntered: {
-          communityButton.hovered = true
-        }
-        onExited: {
-          communityButton.hovered = false
-        }
-        onClicked: {
-            chatsModel.communities.setActiveCommunity(communityId)
-        }
-    }
-
 }
-
-/*##^##
-Designer {
-    D{i:0;formeditorColor:"#ffffff";height:64;width:640}
-}
-##^##*/

ui/app/AppLayouts/Chat/CommunityComponents/CommunityList.qml

@@ -6,50 +6,18 @@ import "../../../../imports"
 import "../components"
 import "./"
 
-Item {
+ListView {
-    property string searchStr: ""
-    id: root
-    width: parent.width
-    height: Math.max(communityListView.height, noSearchResults.height)
-    ListView {
     id: communityListView
-        spacing: Style.current.halfPadding
+    spacing: 12
-        anchors.top: parent.top
     height: childrenRect.height
     visible: height > 10
     width:parent.width
     interactive: false
+
     model: chatsModel.communities.joinedCommunities
     delegate: CommunityButton {
         communityId: model.id
         name: model.name
-            description: model.description
-            searchStr: root.searchStr
         image: model.thumbnailImage
     }
-    }
-
-    Item {
-        id: noSearchResults
-        anchors.top: parent.top
-        height: visible ? 200 : 0
-        visible: !communityListView.visible && root.searchStr !== ""
-        width: parent.width
-
-        StyledText {
-            font.pixelSize: 15
-            color: Style.current.darkGrey
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-            //% "No search results in Communities"
-            text: qsTrId("no-search-results-in-communities")
-        }
-    }
 }
-
-
-/*##^##
-Designer {
-    D{i:0;autoSize:true;height:480;width:640}
-}
-##^##*/

ui/app/AppLayouts/Chat/ContactsColumn.qml

@@ -120,37 +120,8 @@ Item {
         contentHeight: communitiesListLoader.height + channelList.height + 2 * Style.current.padding + emptyViewAndSuggestions.height
         clip: true
 
-        Loader {
-            id: communitiesListLoader
-            active: appSettings.communitiesEnabled
-            width: parent.width
-            height: {
-                if (item && active) {
-                    return item.height
-                }
-
-                return 0
-            }
-            sourceComponent: Component {
-                CommunityList {
-                    id: communityList
-                    visible: appSettings.communitiesEnabled
-                    searchStr: contactsColumn.searchStr.toLowerCase()
-                }
-            }
-        }
-
-        Separator {
-            id: communitySep
-            visible: communitiesListLoader.active && communitiesListLoader.height > 0
-            anchors.top: communitiesListLoader.bottom
-            anchors.topMargin: visible ? Style.current.halfPadding : 0
-        }
-
         ChannelList {
             id: channelList
-            anchors.top: communitySep.bottom
-            anchors.topMargin: Style.current.halfPadding
             searchStr: contactsColumn.searchStr.toLowerCase()
             channelModel: chatsModel.chats
         }

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

@@ -0,0 +1,76 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../../imports"
+import "../../../../shared"
+import "../../../../shared/status"
+
+Column {
+    spacing: 12
+    width: parent.width
+    height: childrenRect.height
+
+    Rectangle {
+        width: 40
+        height: 1
+        color: Style.current.border
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    StatusIconTabButton {
+        id: walletBtn
+        enabled: isExperimental === "1" || appSettings.walletEnabled
+        icon.name: "wallet"
+        section: Constants.wallet
+    }
+
+    StatusIconTabButton {
+        id: browserBtn
+        enabled: isExperimental === "1" || appSettings.browserEnabled
+        icon.name: "compass"
+        section: Constants.browser
+    }
+
+    StatusIconTabButton {
+        id: timelineBtn
+        enabled: isExperimental === "1" || appSettings.timelineEnabled
+        icon.name: "timeline"
+        section: Constants.timeline
+    }
+
+    StatusIconTabButton {
+        id: profileBtn
+        icon.name: "profile"
+        section: Constants.profile
+
+        Rectangle {
+            id: profileBadge
+            visible: !profileModel.mnemonic.isBackedUp && sLayout.children[sLayout.currentIndex] !== profileLayoutContainer
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.rightMargin: 4
+            anchors.topMargin: 5
+            radius: height / 2
+            color: Style.current.blue
+            border.color: profileBtn.hovered ? Style.current.secondaryBackground : Style.current.background
+            border.width: 2
+            width: 14
+            height: 14
+        }
+    }
+
+    StatusIconTabButton {
+        id: nodeBtn
+        enabled: isExperimental === "1" && appSettings.nodeManagementEnabled
+        icon.name: "node"
+        section: Constants.node
+    }
+
+    StatusIconTabButton {
+        id: uiComponentBtn
+        enabled: isExperimental === "1"
+        icon.name: "node"
+        section: Constants.ui
+    }
+}

ui/app/AppMain.qml

@@ -10,6 +10,7 @@ import "./AppLayouts"
 import "./AppLayouts/Timeline"
 import "./AppLayouts/Wallet"
 import "./AppLayouts/Chat/components"
+import "./AppLayouts/Chat/CommunityComponents"
 import Qt.labs.settings 1.0
 
 RowLayout {
@@ -282,45 +283,45 @@ RowLayout {
     }
 
     function changeAppSection(section) {
-        let sectionId = -1
+        sLayout.currentIndex = Utils.getAppSectionIndex(section)
-        switch (section) {
-        case Constants.chat: sectionId = 0; break;
-        case Constants.wallet: sectionId = 1; break;
-        case Constants.browser: sectionId = 2; break;
-        case Constants.profile: sectionId = 4; break;
-        case Constants.node: sectionId = 5; break;
-        case Constants.ui: sectionId = 6; break;
-        }
-        if (sectionId === -1) {
-            throw new Exception ("Unknown section name. Check the Constants to know the available ones")
-        }
-        tabBar.setCurrentIndex(sectionId)
     }
 
-    TabBar {
+
-        id: tabBar
+    Item {
-        width: 78
+        id: leftTab
-        Layout.maximumWidth: 80
+        Layout.topMargin: 50
-        Layout.preferredWidth: 80
+        Layout.maximumWidth: 78
-        Layout.minimumWidth: 80
+        Layout.minimumWidth: 78
-        currentIndex: 0
+        Layout.preferredWidth: 78
-        topPadding: 57
-        rightPadding: 19
-        leftPadding: 19
-        transformOrigin: Item.Top
-        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
         Layout.fillHeight: true
-        spacing: 5
+        height: parent.height
-        background: Rectangle {
+
-            color: "#00000000"
+        ScrollView {
-            border.color: Style.current.border
+            id: scrollView
-        }
+            width: leftTab.width
+            anchors.top: parent.top
+            anchors.bottom: leftTabButtons.visible ? leftTabButtons.top : parent.bottom
+            anchors.bottomMargin: tabBar.spacing
+            clip: true
+
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+            Column {
+                id: tabBar
+                spacing: 12
+                width: scrollView.width
 
                 StatusIconTabButton {
                     id: chatBtn
-              anchors.horizontalCenter: parent.horizontalCenter
                     icon.name: "message"
-              anchors.topMargin: 0
+                    section: Constants.chat
+                    doNotHandleClick: true
+                    onClicked: {
+                        chatsModel.communities.activeCommunity.active = false
+                        appMain.changeAppSection(Constants.chat)
+                    }
+
+                    checked: !chatsModel.communities.activeCommunity.active  && sLayout.currentIndex === Utils.getAppSectionIndex(Constants.chat)
 
                     Rectangle {
                         id: chatBadge
@@ -345,61 +346,49 @@ RowLayout {
                     }
                 }
 
-        StatusIconTabButton {
+                Loader {
-              id: walletBtn
+                    id: communitiesListLoader
-              anchors.top: chatBtn.top
+                    active: appSettings.communitiesEnabled
-              enabled: isExperimental === "1" || appSettings.walletEnabled
+                    anchors.horizontalCenter: parent.horizontalCenter
-              icon.name: "wallet"
+                    width: parent.width
+                    height: {
+                        if (item && active) {
+                            return item.height
                         }
 
-        StatusIconTabButton {
+                        return 0
-              id: browserBtn
+                    }
-              anchors.top: walletBtn.top
+                    sourceComponent: Component {
-              enabled: isExperimental === "1" || appSettings.browserEnabled
+                        CommunityList {}
-              icon.name: "compass"
+                    }
                 }
 
-        StatusIconTabButton {
+                Loader {
-              id: timelineBtn
+                    active: !leftTabButtons.visible
-              anchors.top: browserBtn.enabled ? browserBtn.top : walletBtn.top
+                    width: parent.width
-              enabled: isExperimental === "1" || appSettings.timelineEnabled
+                    height: {
-              icon.name: "timeline"
+                        if (item && active) {
+                            return item.height
+                        }
+                        return 0
+                    }
+                    sourceComponent: LeftTabBottomButtons {}
+                }
+            }
         }
 
-        StatusIconTabButton {
+        LeftTabBottomButtons {
-              id: profileBtn
+            id: leftTabButtons
-              anchors.top: timelineBtn.enabled ? timelineBtn.top : browserBtn.top
+            visible: scrollView.contentHeight > leftTab.height
-              icon.name: "profile"
+            anchors.bottom: parent.bottom
-
+            anchors.bottomMargin: Style.current.padding
-              Rectangle {
-                id: profileBadge
-                visible: !profileModel.mnemonic.isBackedUp && sLayout.children[sLayout.currentIndex] !== profileLayoutContainer
-                anchors.top: parent.top
-                anchors.right: parent.right
-                anchors.rightMargin: 4
-                anchors.topMargin: 5
-                radius: height / 2
-                color: Style.current.blue
-                border.color: profileBtn.hovered ? Style.current.secondaryBackground : Style.current.background
-                border.width: 2
-                width: 14
-                height: 14
         }
     }
 
-        StatusIconTabButton {
+    Rectangle {
-              id: nodeBtn
+        height: parent.height
-              enabled: isExperimental === "1" && appSettings.nodeManagementEnabled
+        width: 1
-              anchors.top: profileBtn.top
+        color: Style.current.border
-              icon.name: "node"
-        }
-
-        StatusIconTabButton {
-              id: uiComponentBtn
-              enabled: isExperimental === "1"
-              anchors.top: nodeBtn.top
-              icon.name: "node"
-        }
     }
 
     StackLayout {
@@ -407,7 +396,7 @@ RowLayout {
         Layout.fillWidth: true
         Layout.alignment: Qt.AlignLeft | Qt.AlignTop
         Layout.fillHeight: true
-        currentIndex: tabBar.currentIndex
+        currentIndex: 0
         onCurrentIndexChanged: {
             if (typeof this.children[currentIndex].onActivated === "function") {
                 this.children[currentIndex].onActivated()
@@ -494,6 +483,6 @@ RowLayout {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:0.33000001311302185;height:770;width:1232}
+    D{i:0;formeditorZoom:1.75;height:770;width:1232}
 }
 ##^##*/

ui/imports/Constants.qml

@@ -26,10 +26,12 @@ QtObject {
 
     readonly property string chat: "chat"
     readonly property string wallet: "wallet"
+    readonly property string timeline: "timeline"
     readonly property string browser: "browser"
     readonly property string profile: "profile"
     readonly property string node: "node"
     readonly property string ui: "ui"
+    readonly property string community: "community"
 
     readonly property int fontSizeXS: 0
     readonly property int fontSizeS: 1

ui/imports/Utils.qml

@@ -30,6 +30,24 @@ QtObject {
                                 (!startsWith0x(value) && value.length === 64))
     }
 
+    function getAppSectionIndex(section) {
+        let sectionId = -1
+        switch (section) {
+        case Constants.chat: sectionId = 0; break;
+        case Constants.wallet: sectionId = 1; break;
+        case Constants.browser: sectionId = 2; break;
+        case Constants.timeline: sectionId = 3; break;
+        case Constants.profile: sectionId = 4; break;
+        case Constants.node: sectionId = 5; break;
+        case Constants.ui: sectionId = 6; break;
+        case Constants.community: sectionId = 99; break;
+        }
+        if (sectionId === -1) {
+            throw new Exception ("Unknown section name. Check the Constants to know the available ones")
+        }
+        return sectionId
+    }
+
     function getDisplayName(publicKey, contactIndex) {
         if (contactIndex === undefined) {
             contactIndex = profileModel.contacts.list.getContactIndexByPubkey(publicKey)

ui/nim-status-client.pro

@@ -156,6 +156,7 @@ DISTFILES += \
     app/AppLayouts/Chat/components/EmojiCategoryButton.qml \
     app/AppLayouts/Chat/components/EmojiPopup.qml \
     app/AppLayouts/Chat/components/EmojiReaction.qml \
+    app/AppLayouts/Chat/components/LeftTabBottomButtons.qml \
     app/AppLayouts/Chat/components/NoFriendsRectangle.qml \
     app/AppLayouts/Chat/components/ProfilePopup.qml \
     app/AppLayouts/Chat/components/EmojiSection.qml \

ui/shared/ImageLoader.qml

@@ -5,6 +5,7 @@ import "../imports"
 Rectangle {
     id: root
     property bool noHover: false
+    property bool noMouseArea: false
     property alias source: image.source
     property alias fillMode: image.fillMode
     property bool showLoadingIndicator: true
@@ -156,6 +157,7 @@ Rectangle {
             }
         }
         MouseArea {
+            enabled: !noMouseArea
             cursorShape: noHover ? Qt.ArrowCursor : Qt.PointingHandCursor
             anchors.fill: parent
             onClicked: {

ui/shared/RoundedImage.qml

@@ -4,6 +4,7 @@ import QtGraphicalEffects 1.0
 Rectangle {
     id: root
     signal clicked
+    property bool noMouseArea: false
     property bool noHover: false
     property alias showLoadingIndicator: imgStickerPackThumb.showLoadingIndicator
     property alias source: imgStickerPackThumb.source
@@ -27,6 +28,7 @@ Rectangle {
 
     ImageLoader {
         id: imgStickerPackThumb
+        noMouseArea: root.noMouseArea
         noHover: root.noHover
         opacity: 1
         smooth: false

ui/shared/status/StatusIconTabButton.qml

@@ -10,11 +10,25 @@ TabButton {
     visible: enabled
     width: 40
     height: enabled ? 40 : 0
-    anchors.topMargin: enabled ? 50 : 0
     anchors.horizontalCenter: parent.horizontalCenter
     property color iconColor: Style.current.secondaryText
     property color disabledColor: iconColor
     property int iconRotation: 0
+    property string iconSource
+    property string section
+    property int sectionIndex: Utils.getAppSectionIndex(section)
+    property bool doNotHandleClick: false
+    property bool borderOnChecked: false
+
+    onClicked: {
+        if (doNotHandleClick) {
+            return
+        }
+
+        appMain.changeAppSection(section)
+    }
+
+    checked: sLayout.currentIndex === sectionIndex
 
     icon.height: 24
     icon.width: 24
@@ -26,35 +40,55 @@ TabButton {
     }
 
     onIconChanged: {
+        if (iconSource) {
+            icon.source = iconSource
+            return
+        }
+
         icon.source = icon.name ? "../../app/img/" + icon.name + ".svg" : ""
     }
 
     contentItem: Item {
         anchors.fill: parent
 
+        Loader {
+            active: true
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            sourceComponent: !!iconSource ? imageIcon : defaultIcon
+        }
+
+        Component {
+            id: defaultIcon
             SVGImage {
                 id: iconImg
-            visible: false
                 source: control.icon.source
                 height: control.icon.height
                 width: control.icon.width
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
                 fillMode: Image.PreserveAspectFit
                 rotation: control.iconRotation
-        }
                 ColorOverlay {
                     anchors.fill: iconImg
                     source: iconImg
                     color: control.icon.color
                     antialiasing: true
                     smooth: true
-            rotation: control.iconRotation
+                }
+            }
         }
 
+        Component {
+            id: imageIcon
+            RoundedImage {
+                source: iconSource
+                noMouseArea: true
+            }
+        }
     }
     background: Rectangle {
-        color: hovered ? Style.current.secondaryBackground : "transparent"
+        color: hovered || (borderOnChecked && checked) ? Style.current.secondaryBackground : "transparent"
+        border.color: Style.current.primary
+        border.width: borderOnChecked && checked ? 1 : 0
         radius: control.width / 2
     }