From fa8925eba02cda1290f8c1f7acb8d0ffa84a8d50 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni Date: Thu, 22 Jul 2021 17:41:29 +0300 Subject: [PATCH] feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272 --- ui/StatusQ/sandbox/DemoApp.qml | 73 +++++++++++++++---- .../Layout/StatusAppThreePanelLayout.qml | 51 +++++++++++++ ui/StatusQ/src/StatusQ/Layout/qmldir | 3 +- 3 files changed, 109 insertions(+), 18 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Layout/StatusAppThreePanelLayout.qml diff --git a/ui/StatusQ/sandbox/DemoApp.qml b/ui/StatusQ/sandbox/DemoApp.qml index 1973fa5174..f0f8bea404 100644 --- a/ui/StatusQ/sandbox/DemoApp.qml +++ b/ui/StatusQ/sandbox/DemoApp.qml @@ -249,7 +249,7 @@ Rectangle { anchors.top: parent.top width: parent.width - chatInfoButton.title: "Amazing Funny Squirrel" + chatInfoButton.title: "Amazing Funny Squirrel" chatInfoButton.subTitle: "Contact" chatInfoButton.icon.color: Theme.palette.miscColor7 chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat @@ -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 @@ -370,12 +369,12 @@ Rectangle { icon.name: "notification" } - StatusMenuItem { + StatusMenuItem { text: "Mark as Read" icon.name: "checkmark-circle" } - StatusMenuItem { + StatusMenuItem { text: "Edit Category" icon.name: "edit" } @@ -439,20 +438,62 @@ Rectangle { } } - rightPanel: Item { - anchors.fill: parent - + centerPanel: Item { StatusChatToolBar { anchors.top: parent.top width: parent.width - chatInfoButton.title: "general" + chatInfoButton.title: "general" 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 + } + } } } } @@ -507,7 +548,7 @@ Rectangle { } } - Item { + Item { id: invisibleSeparator height: 16 width: parent.width @@ -570,15 +611,15 @@ Rectangle { anchors.centerIn: parent - header.title: "Cryptokitties" + header.title: "Cryptokitties" header.subTitle: "Public Community" header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" content: Column { width: demoCommunityDetailModal.width - StatusModalDivider { - bottomPadding: 8 + StatusModalDivider { + bottomPadding: 8 } StatusBaseText { diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusAppThreePanelLayout.qml b/ui/StatusQ/src/StatusQ/Layout/StatusAppThreePanelLayout.qml new file mode 100644 index 0000000000..d701a719ce --- /dev/null +++ b/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 + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Layout/qmldir b/ui/StatusQ/src/StatusQ/Layout/qmldir index 0cccfc764a..48d704f45c 100644 --- a/ui/StatusQ/src/StatusQ/Layout/qmldir +++ b/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