feat(StatusQ.Layout): introducing StatusAppThreePanelLayout

Added new component to support a 3 column view

Closes #272

ui/StatusQ/sandbox/DemoApp.qml

@@ -295,11 +295,10 @@ Rectangle {
     Component {
         id: statusAppCommunityView
 
-        StatusAppTwoPanelLayout {
-
+        StatusAppThreePanelLayout {
+            id: root
             leftPanel: Item {
                 id: leftPanel
-                anchors.fill: parent
 
                 StatusChatInfoToolBar {
                     id: statusChatInfoToolBar
@@ -348,8 +347,8 @@ Rectangle {
 
                     StatusChatListAndCategories {
                         id: communityCategories
-                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
                         width: leftPanel.width
+                        height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
 
                         chatList.model: demoCommunityChatListItems
                         categoryList.model: demoCommunityCategoryItems
@@ -439,9 +438,7 @@ Rectangle {
                 }
             }
 
-            rightPanel: Item {
-                anchors.fill: parent
-
+            centerPanel: Item {
                 StatusChatToolBar {
                     anchors.top: parent.top
                     width: parent.width
@@ -450,9 +447,53 @@ Rectangle {
                     chatInfoButton.subTitle: "Community Chat"
                     chatInfoButton.icon.color: Theme.palette.miscColor6
                     chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
-
                     searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
                     membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
+                    onMembersButtonClicked: {
+                        root.showRightPanel = !root.showRightPanel;
+                    }
+                }
+            }
+
+            rightPanel: Item {
+                StatusBaseText {
+                    id: titleText
+                    anchors.top: parent.top
+                    anchors.topMargin:16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 16
+                    font.pixelSize: 15
+                    text: qsTr("Members")
+                }
+
+                ListView {
+                    anchors.top: titleText.bottom
+                    anchors.topMargin: 16
+                    anchors.left: parent.left
+                    anchors.leftMargin: 8
+                    anchors.right: parent.right
+                    anchors.rightMargin: 8
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 16
+                    boundsBehavior: Flickable.StopAtBounds
+                    model: ["John", "Nick", "Maria", "Mike"]
+                    delegate: Row {
+                        width: parent.width
+                        height: 30
+                        spacing: 8
+                        Rectangle {
+                            width: 24
+                            height: 24
+                            radius: width/2
+                            color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
+                        }
+                        StatusBaseText {
+                            height: parent.height
+                            horizontalAlignment: Text.AlignHCenter
+                            font.pixelSize: 15
+                            text: modelData
+                        }
+                    }
                 }
             }
         }

ui/StatusQ/src/StatusQ/Layout/StatusAppThreePanelLayout.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import StatusQ.Core.Theme 0.1
+
+SplitView {
+    id: root
+
+    implicitWidth: 822
+    implicitHeight: 600
+
+    handle: Item { }
+
+    property Item leftPanel
+    property Item centerPanel
+    property Component rightPanel
+    property bool showRightPanel
+
+    Control {
+        SplitView.preferredWidth: 300
+        SplitView.fillHeight: true
+        contentItem: (!!leftPanel) ? leftPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+
+    Control {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        contentItem: (!!centerPanel) ? centerPanel : null
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
+        }
+    }
+
+    Control {
+        SplitView.preferredWidth: root.showRightPanel ? 250 : 0
+        SplitView.minimumWidth: root.showRightPanel ? 50 : 0
+        visible: (opacity > 0.1)
+        contentItem: Loader {
+            anchors.fill: parent
+            sourceComponent: (!!rightPanel) ? rightPanel : null
+        }
+        background: Rectangle {
+            anchors.fill: parent
+            color: Theme.palette.baseColor4
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Layout/qmldir

@@ -3,5 +3,4 @@ module StatusQ.Layout
 StatusAppLayout 0.1 StatusAppLayout.qml
 StatusAppNavBar 0.1 StatusAppNavBar.qml
 StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
-
-
+StatusAppThreePanelLayout 0.1 StatusAppThreePanelLayout.qml