From 0056df517d33f44dbf7ec1e07c116f48159c7ed1 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Tue, 18 Jan 2022 21:54:45 +0200 Subject: [PATCH] refactor: refactored/cleaned up sandbox app Grouped QML files by pages, controls and demo app related stuff --- sandbox/DemoApp.qml | 727 +----------------- sandbox/{ => controls}/Buttons.qml | 0 sandbox/{ => controls}/Controls.qml | 0 sandbox/{ => controls}/Icons.qml | 0 sandbox/{ => controls}/Layout.qml | 0 sandbox/{ => controls}/ListItems.qml | 0 sandbox/{ => controls}/Others.qml | 0 sandbox/{ => controls}/Popups.qml | 0 sandbox/demoapp/DemoCommunityDetailModal.qml | 111 +++ sandbox/demoapp/DemoContactRequestsModal.qml | 40 + sandbox/demoapp/StatusAppChatView.qml | 253 ++++++ sandbox/demoapp/StatusAppCommunityView.qml | 283 +++++++ .../demoapp/StatusAppProfileSettingsView.qml | 77 ++ sandbox/{ => demoapp/data}/Models.qml | 3 +- sandbox/demoapp/data/qmldir | 1 + sandbox/main.qml | 241 ++---- .../{ => pages}/StatusAccountSelectorPage.qml | 35 +- sandbox/{ => pages}/StatusAddressPage.qml | 0 .../{ => pages}/StatusAssetSelectorPage.qml | 0 .../StatusChatCommandButtonPage.qml | 0 .../{ => pages}/StatusChatInfoToolBarPage.qml | 0 .../{ => pages}/StatusColorSelectorPage.qml | 0 .../StatusExpandableSettingsItemPage.qml | 0 sandbox/{ => pages}/StatusInputPage.qml | 0 .../{ => pages}/StatusMacNotificationPage.qml | 0 sandbox/{ => pages}/StatusPopupMenuPage.qml | 0 sandbox/{ => pages}/StatusSelectPage.qml | 0 .../StatusTabBarIconButtonPage.qml | 0 sandbox/{ => pages}/StatusTabSwitchPage.qml | 0 .../StatusWalletColorButtonPage.qml | 0 .../StatusWalletColorSelectPage.qml | 0 sandbox/qml.qrc | 40 +- sandbox/sandbox.pro | 2 + .../Controls/StatusAccountSelector.qml | 2 +- statusq.qrc | 1 + 35 files changed, 902 insertions(+), 914 deletions(-) rename sandbox/{ => controls}/Buttons.qml (100%) rename sandbox/{ => controls}/Controls.qml (100%) rename sandbox/{ => controls}/Icons.qml (100%) rename sandbox/{ => controls}/Layout.qml (100%) rename sandbox/{ => controls}/ListItems.qml (100%) rename sandbox/{ => controls}/Others.qml (100%) rename sandbox/{ => controls}/Popups.qml (100%) create mode 100644 sandbox/demoapp/DemoCommunityDetailModal.qml create mode 100644 sandbox/demoapp/DemoContactRequestsModal.qml create mode 100644 sandbox/demoapp/StatusAppChatView.qml create mode 100644 sandbox/demoapp/StatusAppCommunityView.qml create mode 100644 sandbox/demoapp/StatusAppProfileSettingsView.qml rename sandbox/{ => demoapp/data}/Models.qml (99%) create mode 100644 sandbox/demoapp/data/qmldir rename sandbox/{ => pages}/StatusAccountSelectorPage.qml (61%) rename sandbox/{ => pages}/StatusAddressPage.qml (100%) rename sandbox/{ => pages}/StatusAssetSelectorPage.qml (100%) rename sandbox/{ => pages}/StatusChatCommandButtonPage.qml (100%) rename sandbox/{ => pages}/StatusChatInfoToolBarPage.qml (100%) rename sandbox/{ => pages}/StatusColorSelectorPage.qml (100%) rename sandbox/{ => pages}/StatusExpandableSettingsItemPage.qml (100%) rename sandbox/{ => pages}/StatusInputPage.qml (100%) rename sandbox/{ => pages}/StatusMacNotificationPage.qml (100%) rename sandbox/{ => pages}/StatusPopupMenuPage.qml (100%) rename sandbox/{ => pages}/StatusSelectPage.qml (100%) rename sandbox/{ => pages}/StatusTabBarIconButtonPage.qml (100%) rename sandbox/{ => pages}/StatusTabSwitchPage.qml (100%) rename sandbox/{ => pages}/StatusWalletColorButtonPage.qml (100%) rename sandbox/{ => pages}/StatusWalletColorSelectPage.qml (100%) diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index 95e52830..30585baa 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -1,14 +1,13 @@ import QtQuick 2.14 -import QtQuick.Controls 2.14 -import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 -import StatusQ.Components 0.1 import StatusQ.Layout 0.1 import StatusQ.Popups 0.1 import StatusQ.Platform 0.1 +import "demoapp" + Rectangle { id: demoApp height: 602 @@ -148,735 +147,31 @@ Rectangle { Component { id: statusAppChatView - - StatusAppTwoPanelLayout { - - leftPanel: Item { - anchors.fill: parent - - StatusNavigationPanelHeadline { - id: headline - anchors.top: parent.top - anchors.topMargin: 16 - anchors.horizontalCenter: parent.horizontalCenter - text: "Chat" - } - - Item { - id: searchInputWrapper - anchors.top: headline.bottom - anchors.topMargin: 16 - width: parent.width - height: searchInput.height - - StatusBaseInput { - id: searchInput - - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.right: actionButton.left - anchors.leftMargin: 16 - anchors.rightMargin: 16 - - height: 36 - topPadding: 8 - bottomPadding: 0 - placeholderText: "Search" - icon.name: "search" - } - - StatusRoundButton { - id: actionButton - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: 8 - width: 32 - height: 32 - - type: StatusRoundButton.Type.Secondary - icon.name: "add" - state: "default" - - onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4) - states: [ - State { - name: "default" - PropertyChanges { - target: actionButton - icon.rotation: 0 - highlighted: false - } - }, - State { - name: "pressed" - PropertyChanges { - target: actionButton - icon.rotation: 45 - highlighted: true - } - } - ] - - transitions: [ - Transition { - from: "default" - to: "pressed" - - RotationAnimation { - duration: 150 - direction: RotationAnimation.Clockwise - easing.type: Easing.InCubic - } - }, - Transition { - from: "pressed" - to: "default" - RotationAnimation { - duration: 150 - direction: RotationAnimation.Counterclockwise - easing.type: Easing.OutCubic - } - } - ] - - StatusPopupMenu { - id: chatContextMenu - - onOpened: { - actionButton.state = "pressed" - } - - onClosed: { - actionButton.state = "default" - } - - StatusMenuItem { - text: "Start new chat" - icon.name: "private-chat" - } - - StatusMenuItem { - text: "Start group chat" - icon.name: "group-chat" - } - - StatusMenuItem { - text: "Join public chat" - icon.name: "public-chat" - } - - StatusMenuItem { - text: "Communities" - icon.name: "communities" - } - } - } - } - - Column { - anchors.top: searchInputWrapper.bottom - anchors.topMargin: 16 - width: parent.width - spacing: 8 - - StatusContactRequestsIndicatorListItem { - anchors.horizontalCenter: parent.horizontalCenter - title: "Contact requests" - requestsCount: 3 - sensor.onClicked: demoContactRequestsModal.open() - } - - StatusChatList { - anchors.horizontalCenter: parent.horizontalCenter - - chatListItems.model: models.demoChatListItems - selectedChatId: "0" - onChatItemSelected: selectedChatId = id - onChatItemUnmuted: { - for (var i = 0; i < models.demoChatListItems.count; i++) { - let item = models.demoChatListItems.get(i); - if (item.chatId === id) { - models.demoChatListItems.setProperty(i, "muted", false) - } - } - } - - popupMenu: StatusPopupMenu { - - property string chatId - - openHandler: function (id) { - chatId = id - } - - StatusMenuItem { - text: "View Profile" - icon.name: "group-chat" - } - - StatusMenuSeparator {} - - 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 - } - } - } - } - } - - rightPanel: Item { - anchors.fill: parent - - StatusChatToolBar { - anchors.top: parent.top - width: parent.width - - chatInfoButton.title: "Amazing Funny Squirrel" - chatInfoButton.subTitle: "Contact" - chatInfoButton.icon.color: Theme.palette.miscColor7 - chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat - chatInfoButton.pinnedMessagesCount: 1 - - searchButton.visible: false - membersButton.visible: false - notificationCount: 1 - - onNotificationButtonClicked: notificationCount = 0 - - popupMenu: StatusPopupMenu { - id: contextMenu - - 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: "Leave Chat" - icon.name: "arrow-right" - icon.width: 14 - iconRotation: 180 - type: StatusMenuItem.Type.Danger - } - } - } - } - } + StatusAppChatView { } } Component { id: statusAppCommunityView - - StatusAppThreePanelLayout { - id: root - - 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: demoCommunityDetailModal.open() - - 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(demoCommunityDetailModal.header.title, - "", - demoCommunityDetailModal.header.image.source); - 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 - } - } - } + StatusAppCommunityView { + communityDetailModalTitle: demoCommunityDetailModal.header.title + communityDetailModalImage: demoCommunityDetailModal.header.image.source + onChatInfoButtonClicked: { + demoCommunityDetailModal.open(); } } } Component { id: statusAppProfileSettingsView - - StatusAppTwoPanelLayout { - - leftPanel: Item { - anchors.fill: parent - - StatusNavigationPanelHeadline { - id: profileHeadline - anchors.top: parent.top - anchors.topMargin: 16 - anchors.horizontalCenter: parent.horizontalCenter - text: "Profile" - } - - ScrollView { - anchors.top: profileHeadline.bottom - anchors.topMargin: 16 - anchors.bottom: parent.bottom - width: parent.width - - contentHeight: profileMenuItems.height + 8 - contentWidth: parent.width - clip: true - - Column { - id: profileMenuItems - anchors.horizontalCenter: parent.horizontalCenter - spacing: 4 - - Repeater { - model: models.demoProfileGeneralMenuItems - delegate: StatusNavigationListItem { - title: model.title - icon.name: model.icon - } - } - - StatusListSectionHeadline { text: "Settings" } - - Repeater { - model: models.demoProfileSettingsMenuItems - delegate: StatusNavigationListItem { - title: model.title - icon.name: model.icon - } - } - - Item { - id: invisibleSeparator - height: 16 - width: parent.width - } - - Repeater { - model: models.demoProfileOtherMenuItems - delegate: StatusNavigationListItem { - title: model.title - icon.name: model.icon - } - } - } - } - } - - rightPanel: Item { - anchors.fill: parent - } - } + StatusAppProfileSettingsView { } } - StatusModal { + DemoContactRequestsModal { id: demoContactRequestsModal anchors.centerIn: parent - - header.title: "Contact Requests" - headerActionButton: StatusFlatRoundButton { - type: StatusFlatRoundButton.Type.Secondary - width: 32 - height: 32 - - icon.width: 20 - icon.height: 20 - icon.name: "notification" - } - - contentItem: StatusBaseText { - anchors.centerIn: parent - text: "Contact request will be shown here" - font.pixelSize: 15 - color: Theme.palette.directColor1 - } - - rightButtons: [ - StatusButton { - text: "Decline all" - type: StatusBaseButton.Type.Danger - onClicked: demoContactRequestsModal.close() - }, - StatusButton { - text: "Accept all" - onClicked: demoContactRequestsModal.close() - } - ] } - StatusModal { + DemoCommunityDetailModal { id: demoCommunityDetailModal - - anchors.centerIn: parent - - header.title: "Cryptokitties" - header.subTitle: "Public Community" - header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" - - contentItem: Column { - width: demoCommunityDetailModal.width - - StatusModalDivider { - bottomPadding: 8 - } - - StatusBaseText { - text: "A community of cat lovers, meow!" - verticalAlignment: Text.AlignVCenter - font.pixelSize: 15 - height: 46 - color: Theme.palette.directColor1 - anchors.left: parent.left - anchors.right: parent.right - anchors.leftMargin: 16 - anchors.rightMargin: 16 - } - - StatusModalDivider { - topPadding: 8 - bottomPadding: 8 - } - - StatusDescriptionListItem { - title: "Share community" - subTitle: "https://join.status.im/u/0x04...45f19" - tooltip.text: "Copy to clipboard" - icon.name: "copy" - iconButton.onClicked: tooltip.visible = !tooltip.visible - width: parent.width - } - - StatusModalDivider { - topPadding: 8 - bottomPadding: 8 - } - - StatusListItem { - anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 - title: "Members" - icon.name: "group-chat" - label: "184" - components: [ - StatusIcon { - icon: "chevron-down" - rotation: 270 - color: Theme.palette.baseColor1 - } - ] - } - - StatusListItem { - anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 - title: "Notifications" - icon.name: "notification" - components: [ - StatusSwitch {} - ] - } - - StatusModalDivider { - topPadding: 8 - bottomPadding: 8 - } - - StatusListItem { - anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 - title: "Edit community" - icon.name: "edit" - type: StatusListItem.Type.Secondary - } - - StatusListItem { - anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 - title: "Transfer ownership" - icon.name: "exchange" - type: StatusListItem.Type.Secondary - } - - StatusListItem { - anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 - title: "Leave community" - icon.name: "arrow-right" - icon.rotation: 180 - type: StatusListItem.Type.Secondary - } - } - } - - Models { - id: models } } diff --git a/sandbox/Buttons.qml b/sandbox/controls/Buttons.qml similarity index 100% rename from sandbox/Buttons.qml rename to sandbox/controls/Buttons.qml diff --git a/sandbox/Controls.qml b/sandbox/controls/Controls.qml similarity index 100% rename from sandbox/Controls.qml rename to sandbox/controls/Controls.qml diff --git a/sandbox/Icons.qml b/sandbox/controls/Icons.qml similarity index 100% rename from sandbox/Icons.qml rename to sandbox/controls/Icons.qml diff --git a/sandbox/Layout.qml b/sandbox/controls/Layout.qml similarity index 100% rename from sandbox/Layout.qml rename to sandbox/controls/Layout.qml diff --git a/sandbox/ListItems.qml b/sandbox/controls/ListItems.qml similarity index 100% rename from sandbox/ListItems.qml rename to sandbox/controls/ListItems.qml diff --git a/sandbox/Others.qml b/sandbox/controls/Others.qml similarity index 100% rename from sandbox/Others.qml rename to sandbox/controls/Others.qml diff --git a/sandbox/Popups.qml b/sandbox/controls/Popups.qml similarity index 100% rename from sandbox/Popups.qml rename to sandbox/controls/Popups.qml diff --git a/sandbox/demoapp/DemoCommunityDetailModal.qml b/sandbox/demoapp/DemoCommunityDetailModal.qml new file mode 100644 index 00000000..3eff516e --- /dev/null +++ b/sandbox/demoapp/DemoCommunityDetailModal.qml @@ -0,0 +1,111 @@ +import QtQuick 2.12 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 +import StatusQ.Popups 0.1 + +StatusModal { + id: root + + anchors.centerIn: parent + + header.title: "Cryptokitties" + header.subTitle: "Public Community" + header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" + + contentItem: Column { + width: root.width + + StatusModalDivider { + bottomPadding: 8 + } + + StatusBaseText { + text: "A community of cat lovers, meow!" + verticalAlignment: Text.AlignVCenter + font.pixelSize: 15 + height: 46 + color: Theme.palette.directColor1 + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: 16 + anchors.rightMargin: 16 + } + + StatusModalDivider { + topPadding: 8 + bottomPadding: 8 + } + + StatusDescriptionListItem { + title: "Share community" + subTitle: "https://join.status.im/u/0x04...45f19" + tooltip.text: "Copy to clipboard" + icon.name: "copy" + iconButton.onClicked: tooltip.visible = !tooltip.visible + width: parent.width + } + + StatusModalDivider { + topPadding: 8 + bottomPadding: 8 + } + + StatusListItem { + anchors.horizontalCenter: parent.horizontalCenter + statusListItemTitle.font.pixelSize: 17 + title: "Members" + icon.name: "group-chat" + label: "184" + components: [ + StatusIcon { + icon: "chevron-down" + rotation: 270 + color: Theme.palette.baseColor1 + } + ] + } + + StatusListItem { + anchors.horizontalCenter: parent.horizontalCenter + statusListItemTitle.font.pixelSize: 17 + title: "Notifications" + icon.name: "notification" + components: [ + StatusSwitch {} + ] + } + + StatusModalDivider { + topPadding: 8 + bottomPadding: 8 + } + + StatusListItem { + anchors.horizontalCenter: parent.horizontalCenter + statusListItemTitle.font.pixelSize: 17 + title: "Edit community" + icon.name: "edit" + type: StatusListItem.Type.Secondary + } + + StatusListItem { + anchors.horizontalCenter: parent.horizontalCenter + statusListItemTitle.font.pixelSize: 17 + title: "Transfer ownership" + icon.name: "exchange" + type: StatusListItem.Type.Secondary + } + + StatusListItem { + anchors.horizontalCenter: parent.horizontalCenter + statusListItemTitle.font.pixelSize: 17 + title: "Leave community" + icon.name: "arrow-right" + icon.rotation: 180 + type: StatusListItem.Type.Secondary + } + } +} diff --git a/sandbox/demoapp/DemoContactRequestsModal.qml b/sandbox/demoapp/DemoContactRequestsModal.qml new file mode 100644 index 00000000..ca8eec84 --- /dev/null +++ b/sandbox/demoapp/DemoContactRequestsModal.qml @@ -0,0 +1,40 @@ +import QtQuick 2.12 + +import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Popups 0.1 +import StatusQ.Core.Theme 0.1 + +StatusModal { + id: root + + header.title: "Contact Requests" + headerActionButton: StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 32 + height: 32 + + icon.width: 20 + icon.height: 20 + icon.name: "notification" + } + + contentItem: StatusBaseText { + anchors.centerIn: parent + text: "Contact request will be shown here" + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + + rightButtons: [ + StatusButton { + text: "Decline all" + type: StatusBaseButton.Type.Danger + onClicked: root.close() + }, + StatusButton { + text: "Accept all" + onClicked: root.close() + } + ] +} diff --git a/sandbox/demoapp/StatusAppChatView.qml b/sandbox/demoapp/StatusAppChatView.qml new file mode 100644 index 00000000..deb38f90 --- /dev/null +++ b/sandbox/demoapp/StatusAppChatView.qml @@ -0,0 +1,253 @@ +import QtQuick 2.12 + +import StatusQ.Controls 0.1 +import StatusQ.Popups 0.1 +import StatusQ.Components 0.1 +import StatusQ.Layout 0.1 +import StatusQ.Core.Theme 0.1 + +import "data" 1.0 + +StatusAppTwoPanelLayout { + id: root + + leftPanel: Item { + anchors.fill: parent + + StatusNavigationPanelHeadline { + id: headline + anchors.top: parent.top + anchors.topMargin: 16 + anchors.horizontalCenter: parent.horizontalCenter + text: "Chat" + } + + Item { + id: searchInputWrapper + anchors.top: headline.bottom + anchors.topMargin: 16 + width: parent.width + height: searchInput.height + + StatusBaseInput { + id: searchInput + + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.right: actionButton.left + anchors.leftMargin: 16 + anchors.rightMargin: 16 + + height: 36 + topPadding: 8 + bottomPadding: 0 + placeholderText: "Search" + icon.name: "search" + } + + StatusRoundButton { + id: actionButton + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: 8 + width: 32 + height: 32 + + type: StatusRoundButton.Type.Secondary + icon.name: "add" + state: "default" + + onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4) + states: [ + State { + name: "default" + PropertyChanges { + target: actionButton + icon.rotation: 0 + highlighted: false + } + }, + State { + name: "pressed" + PropertyChanges { + target: actionButton + icon.rotation: 45 + highlighted: true + } + } + ] + + transitions: [ + Transition { + from: "default" + to: "pressed" + + RotationAnimation { + duration: 150 + direction: RotationAnimation.Clockwise + easing.type: Easing.InCubic + } + }, + Transition { + from: "pressed" + to: "default" + RotationAnimation { + duration: 150 + direction: RotationAnimation.Counterclockwise + easing.type: Easing.OutCubic + } + } + ] + + StatusPopupMenu { + id: chatContextMenu + + onOpened: { + actionButton.state = "pressed" + } + + onClosed: { + actionButton.state = "default" + } + + StatusMenuItem { + text: "Start new chat" + icon.name: "private-chat" + } + + StatusMenuItem { + text: "Start group chat" + icon.name: "group-chat" + } + + StatusMenuItem { + text: "Join public chat" + icon.name: "public-chat" + } + + StatusMenuItem { + text: "Communities" + icon.name: "communities" + } + } + } + } + + Column { + anchors.top: searchInputWrapper.bottom + anchors.topMargin: 16 + width: parent.width + spacing: 8 + + StatusContactRequestsIndicatorListItem { + anchors.horizontalCenter: parent.horizontalCenter + title: "Contact requests" + requestsCount: 3 + sensor.onClicked: demoContactRequestsModal.open() + } + + StatusChatList { + anchors.horizontalCenter: parent.horizontalCenter + + chatListItems.model: Models.demoChatListItems + selectedChatId: "0" + onChatItemSelected: selectedChatId = id + onChatItemUnmuted: { + for (var i = 0; i < Models.demoChatListItems.count; i++) { + let item = Models.demoChatListItems.get(i); + if (item.chatId === id) { + Models.demoChatListItems.setProperty(i, "muted", false) + } + } + } + + popupMenu: StatusPopupMenu { + + property string chatId + + openHandler: function (id) { + chatId = id + } + + StatusMenuItem { + text: "View Profile" + icon.name: "group-chat" + } + + StatusMenuSeparator {} + + 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 + } + } + } + } + } + + rightPanel: Item { + anchors.fill: parent + + StatusChatToolBar { + anchors.top: parent.top + width: parent.width + + chatInfoButton.title: "Amazing Funny Squirrel" + chatInfoButton.subTitle: "Contact" + chatInfoButton.icon.color: Theme.palette.miscColor7 + chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat + chatInfoButton.pinnedMessagesCount: 1 + + searchButton.visible: false + membersButton.visible: false + notificationCount: 1 + + onNotificationButtonClicked: notificationCount = 0 + + popupMenu: StatusPopupMenu { + id: contextMenu + + 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: "Leave Chat" + icon.name: "arrow-right" + icon.width: 14 + iconRotation: 180 + type: StatusMenuItem.Type.Danger + } + } + } + } +} diff --git a/sandbox/demoapp/StatusAppCommunityView.qml b/sandbox/demoapp/StatusAppCommunityView.qml new file mode 100644 index 00000000..df49e541 --- /dev/null +++ b/sandbox/demoapp/StatusAppCommunityView.qml @@ -0,0 +1,283 @@ +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 + } + } + } + } +} diff --git a/sandbox/demoapp/StatusAppProfileSettingsView.qml b/sandbox/demoapp/StatusAppProfileSettingsView.qml new file mode 100644 index 00000000..7303136c --- /dev/null +++ b/sandbox/demoapp/StatusAppProfileSettingsView.qml @@ -0,0 +1,77 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.14 + +import StatusQ.Components 0.1 +import StatusQ.Layout 0.1 +import StatusQ.Core.Theme 0.1 + +import "data" 1.0 + +StatusAppTwoPanelLayout { + id: root + + leftPanel: Item { + anchors.fill: parent + + StatusNavigationPanelHeadline { + id: profileHeadline + anchors.top: parent.top + anchors.topMargin: 16 + anchors.horizontalCenter: parent.horizontalCenter + text: "Profile" + } + + ScrollView { + anchors.top: profileHeadline.bottom + anchors.topMargin: 16 + anchors.bottom: parent.bottom + width: parent.width + + contentHeight: profileMenuItems.height + 8 + contentWidth: parent.width + clip: true + + Column { + id: profileMenuItems + anchors.horizontalCenter: parent.horizontalCenter + spacing: 4 + + Repeater { + model: Models.demoProfileGeneralMenuItems + delegate: StatusNavigationListItem { + title: model.title + icon.name: model.icon + } + } + + StatusListSectionHeadline { text: "Settings" } + + Repeater { + model: Models.demoProfileSettingsMenuItems + delegate: StatusNavigationListItem { + title: model.title + icon.name: model.icon + } + } + + Item { + id: invisibleSeparator + height: 16 + width: parent.width + } + + Repeater { + model: Models.demoProfileOtherMenuItems + delegate: StatusNavigationListItem { + title: model.title + icon.name: model.icon + } + } + } + } + } + + rightPanel: Item { + anchors.fill: parent + } +} diff --git a/sandbox/Models.qml b/sandbox/demoapp/data/Models.qml similarity index 99% rename from sandbox/Models.qml rename to sandbox/demoapp/data/Models.qml index 80c1a47f..8a38a7f7 100644 --- a/sandbox/Models.qml +++ b/sandbox/demoapp/data/Models.qml @@ -1,9 +1,10 @@ +pragma Singleton import QtQuick 2.14 import StatusQ.Components 0.1 QtObject { - property var demoChatListItems: ListModel { + property ListModel demoChatListItems: ListModel { id: demoChatListItems ListElement { chatId: "0" diff --git a/sandbox/demoapp/data/qmldir b/sandbox/demoapp/data/qmldir new file mode 100644 index 00000000..c96e5e34 --- /dev/null +++ b/sandbox/demoapp/data/qmldir @@ -0,0 +1 @@ +singleton Models 1.0 Models.qml diff --git a/sandbox/main.qml b/sandbox/main.qml index b7175c47..d59793a7 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -101,6 +101,14 @@ StatusWindow { id: libraryDocumentationCmp StatusAppTwoPanelLayout { + id: mainPageView + + function page(name) { + viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml"); + } + function control(name) { + viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml"); + } leftPanel: Item { anchors.fill: parent @@ -120,122 +128,122 @@ StatusWindow { StatusListSectionHeadline { text: "StatusQ.Core" } StatusNavigationListItem { - title: "Icons" - selected: page.sourceComponent == iconsComponent - onClicked: page.sourceComponent = iconsComponent + title: "Icons" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.control(title); } StatusListSectionHeadline { text: "StatusQ.Layout" } StatusNavigationListItem { - title: "Layouts" - selected: page.sourceComponent == layoutComponent - onClicked: page.sourceComponent = layoutComponent + title: "Layouts" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.control(title.substring(0, title.length - 1)); } StatusListSectionHeadline { text: "StatusQ.Controls" } StatusNavigationListItem { - title: "Buttons" - selected: page.sourceComponent == buttonsComponent - onClicked: page.sourceComponent = buttonsComponent + title: "Buttons" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.control(title); } StatusNavigationListItem { - title: "StatusSwitchTab" - selected: page.sourceComponent == statusTabSwitchesComponent - onClicked: page.sourceComponent = statusTabSwitchesComponent + title: "StatusSwitchTab" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page("StatusTabSwitch"); } StatusNavigationListItem { - title: "StatusChatCommandButton" - selected: page.sourceComponent == statusChatCommandButtonPageComponent - onClicked: page.sourceComponent = statusChatCommandButtonPageComponent + title: "StatusChatCommandButton" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "Controls" - selected: page.sourceComponent == controlsComponent - onClicked: page.sourceComponent = controlsComponent + title: "Controls" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.control(title); } StatusNavigationListItem { - title: "StatusTabBarIconButton" - selected: page.sourceComponent == statusTabBarIconButtonPageComponent - onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent + title: "StatusTabBarIconButton" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusInput" - selected: page.sourceComponent == statusInputPageComponent - onClicked: page.sourceComponent = statusInputPageComponent + title: "StatusInput" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusSelect" - selected: page.sourceComponent == statusSelectPageComponent - onClicked: page.sourceComponent = statusSelectPageComponent + title: "StatusSelect" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusAccountSelector" - selected: page.sourceComponent == statusAccountSelectorPageComponent - onClicked: page.sourceComponent = statusAccountSelectorPageComponent + title: "StatusAccountSelector" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusAssetSelector" - selected: page.sourceComponent == statusAssetSelectorPageComponent - onClicked: page.sourceComponent = statusAssetSelectorPageComponent + title: "StatusAssetSelector" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusColorSelector" - selected: page.sourceComponent == statusColorSelectorPageComponent - onClicked: page.sourceComponent = statusColorSelectorPageComponent + title: "StatusColorSelector" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusWalletColorButton" - selected: page.sourceComponent == statusWalletColorButtonPageComponent - onClicked: page.sourceComponent = statusWalletColorButtonPageComponent + title: "StatusWalletColorButton" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { - title: "StatusWalletColorSelect" - selected: page.sourceComponent == statusWalletColorSelectPageComponent - onClicked: page.sourceComponent = statusWalletColorSelectPageComponent + title: "StatusWalletColorSelect" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusListSectionHeadline { text: "StatusQ.Components" } StatusNavigationListItem { title: "StatusAddress" - selected: page.sourceComponent == statusAddressPageComponent - onClicked: page.sourceComponent = statusAddressPageComponent + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { title: "List Items" - selected: page.sourceComponent == listItemsComponent - onClicked: page.sourceComponent = listItemsComponent + selected: viewLoader.source.toString().includes(title.replace(/\s+/g, '')) + onClicked: mainPageView.control(title.replace(/\s+/g, '')); } StatusNavigationListItem { title: "StatusChatInfoToolBar" - selected: page.sourceComponent == chatInfoToolBarComponent - onClicked: page.sourceComponent = chatInfoToolBarComponent + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { title: "Others" - selected: page.sourceComponent == othersComponent - onClicked: page.sourceComponent = othersComponent + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.control(title); } StatusNavigationListItem { title: "StatusExpandableItem" - selected: page.sourceComponent == settingsComponent - onClicked: page.sourceComponent = settingsComponent + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page("StatusExpandableSettingsItem"); } StatusListSectionHeadline { text: "StatusQ.Popup" } StatusNavigationListItem { title: "StatusPopupMenu" - selected: page.sourceComponent == popupMenuComponent - onClicked: page.sourceComponent = popupMenuComponent + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } StatusNavigationListItem { title: "StatusModal" - selected: page.sourceComponent == statusModalComponent - onClicked: page.sourceComponent = statusModalComponent + selected: viewLoader.source.toString().includes("Popups") + onClicked: mainPageView.control("Popups"); } StatusListSectionHeadline { text: "StatusQ.Platform" } StatusNavigationListItem { title: "StatusMacNotification" - selected: page.sourceComponent == notificationComponent - onClicked: page.sourceComponent = notificationComponent + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title); } } } @@ -255,13 +263,12 @@ StatusWindow { width: rightPanel.width anchors.top: parent.top anchors.topMargin: 64 - height: Math.max(rootWindow.height, page.height + 128) + height: Math.max(rootWindow.height, viewLoader.height + 128) scale: rootWindow.factor Loader { - id: page - active: true + id: viewLoader anchors.centerIn: parent - sourceComponent: iconsComponent + source: control("Icons") } } } @@ -292,116 +299,6 @@ StatusWindow { } } - Component { - id: iconsComponent - Icons { iconColor: Theme.palette.primaryColor1 } - } - - Component { - id: controlsComponent - Controls {} - } - - Component { - id: statusInputPageComponent - StatusInputPage {} - } - - Component { - id: statusSelectPageComponent - StatusSelectPage {} - } - - Component { - id: statusAccountSelectorPageComponent - StatusAccountSelectorPage {} - } - - Component { - id: statusAssetSelectorPageComponent - StatusAssetSelectorPage {} - } - - Component { - id: statusColorSelectorPageComponent - StatusColorSelectorPage {} - } - - Component { - id: statusTabBarIconButtonPageComponent - StatusTabBarIconButtonPage {} - } - - Component { - id: statusWalletColorButtonPageComponent - StatusWalletColorButtonPage {} - } - - Component { - id: statusWalletColorSelectPageComponent - StatusWalletColorSelectPage {} - } - - Component { - id: listItemsComponent - ListItems {} - } - - Component { - id: statusAddressPageComponent - StatusAddressPage {} - } - - Component { - id: layoutComponent - Layout {} - } - - Component { - id: othersComponent - Others {} - } - - Component { - id: buttonsComponent - Buttons {} - } - - Component { - id: statusChatCommandButtonPageComponent - StatusChatCommandButtonPage {} - } - - Component { - id: popupMenuComponent - StatusPopupMenuPage {} - } - - Component { - id: chatInfoToolBarComponent - StatusChatInfoToolBarPage {} - } - - Component { - id: statusModalComponent - Popups {} - } - - Component { - id: statusTabSwitchesComponent - StatusTabSwitchPage {} - } - - Component { - id: settingsComponent - StatusExpandableSettingsItemPage{} - } - - Component { - id: notificationComponent - StatusMacNotificationPage {} - } - Component { id: demoAppCmp diff --git a/sandbox/StatusAccountSelectorPage.qml b/sandbox/pages/StatusAccountSelectorPage.qml similarity index 61% rename from sandbox/StatusAccountSelectorPage.qml rename to sandbox/pages/StatusAccountSelectorPage.qml index 34e7030a..ab1bce46 100644 --- a/sandbox/StatusAccountSelectorPage.qml +++ b/sandbox/pages/StatusAccountSelectorPage.qml @@ -2,53 +2,62 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 +import Sandbox 0.1 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Popups 0.1 -import Sandbox 0.1 Column { spacing: 8 StatusAccountSelector { + id: accountSelector accounts: ListModel { ListElement { name: "Pascal" address: "0x1234567891011" - iconColor: "red" - balance: "0" + path: "" + color: "red" + publicKey: "" walletType: "generated" + isChat: "" + currencyBalance: "1199.02" assets: [] - fiatBalance: "1199.02" } ListElement { name: "Boris" address: "0x123" - iconColor: "red" - balance: "0" + path: "" + color: "red" + publicKey: "" walletType: "generated" + isChat: "" + currencyBalance: "0" assets: [] - fiatBalance: "0" } ListElement { name: "Alexandra" address: "0x123" - iconColor: "yellow" - balance: "0" + path: "" + color: "yellow" + publicKey: "" walletType: "generated" + isChat: "" + currencyBalance: "0" assets: [] - fiatBalance: "0" } ListElement { name: "Khushboo" address: "0x123" - iconColor: "blue" - balance: "0" + path: "" + color: "blue" + publicKey: "" walletType: "generated" + isChat: "" + currencyBalance: "0" assets: [] - fiatBalance: "0" } } } diff --git a/sandbox/StatusAddressPage.qml b/sandbox/pages/StatusAddressPage.qml similarity index 100% rename from sandbox/StatusAddressPage.qml rename to sandbox/pages/StatusAddressPage.qml diff --git a/sandbox/StatusAssetSelectorPage.qml b/sandbox/pages/StatusAssetSelectorPage.qml similarity index 100% rename from sandbox/StatusAssetSelectorPage.qml rename to sandbox/pages/StatusAssetSelectorPage.qml diff --git a/sandbox/StatusChatCommandButtonPage.qml b/sandbox/pages/StatusChatCommandButtonPage.qml similarity index 100% rename from sandbox/StatusChatCommandButtonPage.qml rename to sandbox/pages/StatusChatCommandButtonPage.qml diff --git a/sandbox/StatusChatInfoToolBarPage.qml b/sandbox/pages/StatusChatInfoToolBarPage.qml similarity index 100% rename from sandbox/StatusChatInfoToolBarPage.qml rename to sandbox/pages/StatusChatInfoToolBarPage.qml diff --git a/sandbox/StatusColorSelectorPage.qml b/sandbox/pages/StatusColorSelectorPage.qml similarity index 100% rename from sandbox/StatusColorSelectorPage.qml rename to sandbox/pages/StatusColorSelectorPage.qml diff --git a/sandbox/StatusExpandableSettingsItemPage.qml b/sandbox/pages/StatusExpandableSettingsItemPage.qml similarity index 100% rename from sandbox/StatusExpandableSettingsItemPage.qml rename to sandbox/pages/StatusExpandableSettingsItemPage.qml diff --git a/sandbox/StatusInputPage.qml b/sandbox/pages/StatusInputPage.qml similarity index 100% rename from sandbox/StatusInputPage.qml rename to sandbox/pages/StatusInputPage.qml diff --git a/sandbox/StatusMacNotificationPage.qml b/sandbox/pages/StatusMacNotificationPage.qml similarity index 100% rename from sandbox/StatusMacNotificationPage.qml rename to sandbox/pages/StatusMacNotificationPage.qml diff --git a/sandbox/StatusPopupMenuPage.qml b/sandbox/pages/StatusPopupMenuPage.qml similarity index 100% rename from sandbox/StatusPopupMenuPage.qml rename to sandbox/pages/StatusPopupMenuPage.qml diff --git a/sandbox/StatusSelectPage.qml b/sandbox/pages/StatusSelectPage.qml similarity index 100% rename from sandbox/StatusSelectPage.qml rename to sandbox/pages/StatusSelectPage.qml diff --git a/sandbox/StatusTabBarIconButtonPage.qml b/sandbox/pages/StatusTabBarIconButtonPage.qml similarity index 100% rename from sandbox/StatusTabBarIconButtonPage.qml rename to sandbox/pages/StatusTabBarIconButtonPage.qml diff --git a/sandbox/StatusTabSwitchPage.qml b/sandbox/pages/StatusTabSwitchPage.qml similarity index 100% rename from sandbox/StatusTabSwitchPage.qml rename to sandbox/pages/StatusTabSwitchPage.qml diff --git a/sandbox/StatusWalletColorButtonPage.qml b/sandbox/pages/StatusWalletColorButtonPage.qml similarity index 100% rename from sandbox/StatusWalletColorButtonPage.qml rename to sandbox/pages/StatusWalletColorButtonPage.qml diff --git a/sandbox/StatusWalletColorSelectPage.qml b/sandbox/pages/StatusWalletColorSelectPage.qml similarity index 100% rename from sandbox/StatusWalletColorSelectPage.qml rename to sandbox/pages/StatusWalletColorSelectPage.qml diff --git a/sandbox/qml.qrc b/sandbox/qml.qrc index 7e150260..59404dab 100644 --- a/sandbox/qml.qrc +++ b/sandbox/qml.qrc @@ -1,18 +1,36 @@ main.qml - Controls.qml - Icons.qml - Others.qml - Buttons.qml DemoApp.qml - ListItems.qml - StatusChatInfoToolBarPage.qml - StatusPopupMenuPage.qml - StatusInputPage.qml ThemeSwitch.qml - Layout.qml - Popups.qml - StatusExpandableSettingsItemPage.qml + pages/StatusAccountSelectorPage.qml + pages/StatusAddressPage.qml + pages/StatusAssetSelectorPage.qml + pages/StatusChatCommandButtonPage.qml + pages/StatusChatInfoToolBarPage.qml + pages/StatusColorSelectorPage.qml + pages/StatusExpandableSettingsItemPage.qml + pages/StatusInputPage.qml + pages/StatusMacNotificationPage.qml + pages/StatusPopupMenuPage.qml + pages/StatusSelectPage.qml + pages/StatusTabBarIconButtonPage.qml + pages/StatusTabSwitchPage.qml + pages/StatusWalletColorButtonPage.qml + pages/StatusWalletColorSelectPage.qml + controls/Buttons.qml + controls/Controls.qml + controls/Icons.qml + controls/Layout.qml + controls/ListItems.qml + controls/Others.qml + controls/Popups.qml + demoapp/DemoCommunityDetailModal.qml + demoapp/DemoContactRequestsModal.qml + demoapp/StatusAppChatView.qml + demoapp/StatusAppCommunityView.qml + demoapp/StatusAppProfileSettingsView.qml + demoapp/data/Models.qml + demoapp/data/qmldir diff --git a/sandbox/sandbox.pro b/sandbox/sandbox.pro index 43f7876e..9a42c130 100644 --- a/sandbox/sandbox.pro +++ b/sandbox/sandbox.pro @@ -24,6 +24,8 @@ SOURCES += \ TARGET = sandboxapp DESTDIR = $$PWD/bin +DESTDIR = $$PWD/bin + macx { CONFIG -= app_bundle OBJECTIVE_SOURCES += \ diff --git a/src/StatusQ/Controls/StatusAccountSelector.qml b/src/StatusQ/Controls/StatusAccountSelector.qml index 85557d62..1caf1566 100644 --- a/src/StatusQ/Controls/StatusAccountSelector.qml +++ b/src/StatusQ/Controls/StatusAccountSelector.qml @@ -221,7 +221,7 @@ Item { StatusBaseText { id: accountName - text: name + text: model.name elide: Text.ElideRight font.pixelSize: 15 anchors.left: parent.left diff --git a/statusq.qrc b/statusq.qrc index 3a080aea..fa180456 100644 --- a/statusq.qrc +++ b/statusq.qrc @@ -315,5 +315,6 @@ src/assets/img/icons/tiny/time.svg src/assets/img/icons/tiny/tribute-to-talk.svg src/assets/img/icons/tiny/warning.svg + src/StatusQ/Controls/StatusBanner.qml