import QtQuick 2.12 import QtQuick.Controls 2.14 import StatusQ.Core 0.1 import StatusQ.Popups 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Layout 0.1 import StatusQ.Core.Theme 0.1 import "data" 1.0 StatusAppThreePanelLayout { id: root property string communityDetailModalTitle: "" property string communityDetailModalImage: "" signal chatInfoButtonClicked() handle: Rectangle { implicitWidth: 5 color: SplitHandle.pressed ? Theme.palette.baseColor2 : (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent") } leftPanel: Item { id: leftPanel StatusChatInfoToolBar { id: statusChatInfoToolBar anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter chatInfoButton.title: "CryptoKitties" chatInfoButton.subTitle: "128 Members" chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" chatInfoButton.icon.color: Theme.palette.miscColor6 chatInfoButton.onClicked: { chatInfoButtonClicked(); } popupMenu: StatusPopupMenu { StatusMenuItem { text: "Create channel" icon.name: "channel" } StatusMenuItem { text: "Create category" icon.name: "channel-category" } StatusMenuSeparator {} StatusMenuItem { text: "Invite people" icon.name: "share-ios" } } } ScrollView { id: scrollView anchors.top: statusChatInfoToolBar.bottom anchors.topMargin: 8 anchors.bottom: parent.bottom width: leftPanel.width contentHeight: communityCategories.height clip: true StatusChatListAndCategories { id: communityCategories width: leftPanel.width height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64 draggableItems: true draggableCategories: false chatList.model: Models.demoCommunityChatListItems categoryList.model: Models.demoCommunityCategoryItems showCategoryActionButtons: true onChatItemSelected: selectedChatId = id categoryPopupMenu: StatusPopupMenu { property string categoryId openHandler: function (id) { categoryId = id } StatusMenuItem { text: "Mute Category" icon.name: "notification" } StatusMenuItem { text: "Mark as Read" icon.name: "checkmark-circle" } StatusMenuItem { text: "Edit Category" icon.name: "edit" } StatusMenuSeparator {} StatusMenuItem { text: "Delete Category" icon.name: "delete" type: StatusMenuItem.Type.Danger } } chatListPopupMenu: StatusPopupMenu { property string chatId StatusMenuItem { text: "Mute chat" icon.name: "notification" } StatusMenuItem { text: "Mark as Read" icon.name: "checkmark-circle" } StatusMenuItem { text: "Clear history" icon.name: "close-circle" } StatusMenuSeparator {} StatusMenuItem { text: "Delete chat" icon.name: "delete" type: StatusMenuItem.Type.Danger } } popupMenu: StatusPopupMenu { StatusMenuItem { text: "Create channel" icon.name: "channel" } StatusMenuItem { text: "Create category" icon.name: "channel-category" } StatusMenuSeparator {} StatusMenuItem { text: "Invite people" icon.name: "share-ios" } } } } } centerPanel: Item { StatusChatToolBar { id: statusChatToolBar anchors.top: parent.top width: parent.width chatInfoButton.title: "general" chatInfoButton.subTitle: "Community Chat" chatInfoButton.icon.color: Theme.palette.miscColor6 chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat onSearchButtonClicked: { searchButton.highlighted = !searchButton.highlighted; searchPopup.setSearchSelection(communityDetailModalTitle, "", communityDetailModalImage); searchPopup.open(); } membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted onMembersButtonClicked: { root.showRightPanel = !root.showRightPanel; } } StatusSearchPopup { id: searchPopup searchOptionsPopupMenu: searchPopupMenu onAboutToHide: { if (searchPopupMenu.visible) { searchPopupMenu.close(); } //clear menu for (var i = 2; i < searchPopupMenu.count; i++) { searchPopupMenu.removeItem(searchPopupMenu.takeItem(i)); } } onClosed: { statusChatToolBar.searchButton.highlighted = false searchPopupMenu.dismiss(); } onSearchTextChanged: { if (searchPopup.searchText !== "") { searchPopup.loading = true; searchModelSimTimer.start(); } else { searchPopup.searchResults = []; searchModelSimTimer.stop(); } } Timer { id: searchModelSimTimer interval: 500 onTriggered: { if (searchPopup.searchText.startsWith("c")) { searchPopup.searchResults = Models.searchResultsA; } else { searchPopup.searchResults = Models.searchResultsB; } searchPopup.loading = false; } } } StatusSearchLocationMenu { id: searchPopupMenu searchPopup: searchPopup locationModel: Models.optionsModel } } rightPanel: Item { id: rightPanel StatusBaseText { id: titleText anchors.top: parent.top anchors.topMargin:16 anchors.left: parent.left anchors.leftMargin: 16 opacity: (rightPanel.width > 50) ? 1.0 : 0.0 visible: (opacity > 0.1) 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 opacity: (rightPanel.width > 50) ? 1.0 : 0.0 visible: (opacity > 0.1) font.pixelSize: 15 color: Theme.palette.directColor1 text: modelData } } } } }