Render community items

6 files changed, 165 insertions, 9 deletions

diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml
index 84c22da1..9eb3380e 100644
--- a/resources/qml/Avatar.qml
+++ b/resources/qml/Avatar.qml
@@ -14,6 +14,7 @@ Rectangle {
     property alias url: img.source
     property string userid
     property string displayName
+    property alias textColor: label.color
 
     signal clicked(var mouse)
 
@@ -26,6 +27,7 @@ Rectangle {
     }
 
     Label {
+        id: label
         anchors.fill: parent
         text: TimelineManager.escapeEmoji(displayName ? String.fromCodePoint(displayName.codePointAt(0)) : "")
         textFormat: Text.RichText
diff --git a/resources/qml/ChatPage.qml b/resources/qml/ChatPage.qml
index 0f884d75..5ccdd9f1 100644
--- a/resources/qml/ChatPage.qml
+++ b/resources/qml/ChatPage.qml
@@ -23,13 +23,14 @@ Rectangle {
         AdaptiveLayoutElement {
             id: communityListC
 
-            minimumWidth: Nheko.avatarSize * 2 + Nheko.paddingSmall * 2
-            collapsedWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
-            preferredWidth: Nheko.avatarSize + Nheko.paddingSmall * 2
-            maximumWidth: Nheko.avatarSize * 7 + Nheko.paddingSmall * 2
+            minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
+            collapsedWidth: communitiesList.avatarSize + 2* Nheko.paddingMedium
+            preferredWidth: collapsedWidth
+            maximumWidth: communitiesList.avatarSize * 10 + 2* Nheko.paddingMedium
 
-            Rectangle {
-                color: Nheko.theme.sidebarBackground
+            CommunitiesList {
+                id: communitiesList
+                collapsed: parent.collapsed
             }
 
         }
diff --git a/resources/qml/CommunitiesList.qml b/resources/qml/CommunitiesList.qml
new file mode 100644
index 00000000..6ca619c4
--- /dev/null
+++ b/resources/qml/CommunitiesList.qml
@@ -0,0 +1,151 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import "./dialogs"
+import Qt.labs.platform 1.1 as Platform
+import QtQml 2.13
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtQuick.Layouts 1.3
+import im.nheko 1.0
+
+
+Page {
+    //leftPadding: Nheko.paddingSmall
+    //rightPadding: Nheko.paddingSmall
+    property int avatarSize: Math.ceil(fontMetrics.lineSpacing * 1.6)
+    property bool collapsed: false
+
+    ListView {
+        id: communitiesList
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: parent.height
+        model: Communities
+
+        ScrollHelper {
+            flickable: parent
+            anchors.fill: parent
+            enabled: !Settings.mobileMode
+        }
+
+        Platform.Menu {
+            id: communityContextMenu
+
+            property string id
+
+            function show(id_, tags_) {
+                id = id_;
+                open();
+            }
+
+            Platform.MenuItem {
+                text: qsTr("Leave room")
+                onTriggered: Rooms.leave(roomContextMenu.roomid)
+            }
+
+        }
+
+        delegate: Rectangle {
+            id: communityItem
+
+            property color background: Nheko.colors.window
+            property color importantText: Nheko.colors.text
+            property color unimportantText: Nheko.colors.buttonText
+            property color bubbleBackground: Nheko.colors.highlight
+            property color bubbleText: Nheko.colors.highlightedText
+
+            color: background
+            height: avatarSize + 2 * Nheko.paddingMedium
+            width: ListView.view.width
+            state: "normal"
+            ToolTip.visible: hovered.hovered && collapsed
+            ToolTip.text: model.tooltip
+            states: [
+                State {
+                    name: "highlight"
+                    when: hovered.hovered && !(Communities.currentTagId == model.id)
+
+                    PropertyChanges {
+                        target: communityItem
+                        background: Nheko.colors.dark
+                        importantText: Nheko.colors.brightText
+                        unimportantText: Nheko.colors.brightText
+                        bubbleBackground: Nheko.colors.highlight
+                        bubbleText: Nheko.colors.highlightedText
+                    }
+
+                },
+                State {
+                    name: "selected"
+                    when: Communities.currentTagId == model.id
+
+                    PropertyChanges {
+                        target: communityItem
+                        background: Nheko.colors.highlight
+                        importantText: Nheko.colors.highlightedText
+                        unimportantText: Nheko.colors.highlightedText
+                        bubbleBackground: Nheko.colors.highlightedText
+                        bubbleText: Nheko.colors.highlight
+                    }
+
+                }
+            ]
+
+            TapHandler {
+                margin: -Nheko.paddingSmall
+                acceptedButtons: Qt.RightButton
+                onSingleTapped: communityContextMenu.show(model.id);
+
+                gesturePolicy: TapHandler.ReleaseWithinBounds
+            }
+
+            TapHandler {
+                margin: -Nheko.paddingSmall
+                onSingleTapped: Communities.setCurrentTagId(model.id)
+                onLongPressed: communityContextMenu.show(model.id)
+            }
+
+            HoverHandler {
+                id: hovered
+
+                margin: -Nheko.paddingSmall
+            }
+
+            RowLayout {
+                spacing: Nheko.paddingMedium
+                anchors.fill: parent
+                anchors.margins: Nheko.paddingMedium
+
+                Avatar {
+                    id: avatar
+
+                    enabled: false
+                    Layout.alignment: Qt.AlignVCenter
+                    height: avatarSize
+                    width: avatarSize
+                    url: {
+                        if (model.avatarUrl.startsWith("mxc://"))  {
+                            return model.avatarUrl.replace("mxc://", "image://MxcImage/")
+                        } else {
+                            return "image://colorimage/"+model.avatarUrl+"?" + communityItem.unimportantText
+                        }
+                    }
+                    displayName: model.displayName
+                    color: communityItem.background
+
+                }
+
+            }
+
+        }
+
+    }
+
+    background: Rectangle {
+        color: Nheko.theme.sidebarBackground
+    }
+
+}
diff --git a/resources/qml/RoomList.qml b/resources/qml/RoomList.qml
index a6637467..09fb3701 100644
--- a/resources/qml/RoomList.qml
+++ b/resources/qml/RoomList.qml
@@ -32,8 +32,8 @@ Page {
 
         Connections {
             onActiveTimelineChanged: {
-                roomlist.positionViewAtIndex(Rooms.roomidToIndex(TimelineManager.timeline.roomId()), ListView.Contain);
-                console.log("Test" + TimelineManager.timeline.roomId() + " " + Rooms.roomidToIndex(TimelineManager.timeline.roomId));
+                roomlist.positionViewAtIndex(Rooms.roomidToIndex(Rooms.currentRoom.roomId()), ListView.Contain);
+                console.log("Test" + Rooms.currentRoom.roomId() + " " + Rooms.roomidToIndex(Rooms.currentRoom.roomId()));
             }
             target: TimelineManager
         }
@@ -121,7 +121,7 @@ Page {
             states: [
                 State {
                     name: "highlight"
-                    when: hovered.hovered && !(TimelineManager.timeline && model.roomId == TimelineManager.timeline.roomId())
+                    when: hovered.hovered && !(Rooms.currentRoom && model.roomId == Rooms.currentRoom.roomId())
 
                     PropertyChanges {
                         target: roomItem
diff --git a/resources/qml/device-verification/Success.qml b/resources/qml/device-verification/Success.qml
index b858a1a1..70cfafaf 100644
--- a/resources/qml/device-verification/Success.qml
+++ b/resources/qml/device-verification/Success.qml
@@ -5,6 +5,7 @@
 import QtQuick 2.3
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.10
+import im.nheko 1.0
 
 Pane {
     property string title: qsTr("Successful Verification")
diff --git a/resources/res.qrc b/resources/res.qrc
index 531e9be2..53c74ae3 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -125,6 +125,7 @@
 
         <file>qml/Root.qml</file>
         <file>qml/ChatPage.qml</file>
+        <file>qml/CommunitiesList.qml</file>
         <file>qml/RoomList.qml</file>
         <file>qml/TimelineView.qml</file>
         <file>qml/Avatar.qml</file>