mirror of https://github.com/status-im/StatusQ.git
714 lines
25 KiB
QML
714 lines
25 KiB
QML
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
|
|
width: 1002
|
|
border.width: 1
|
|
border.color: Theme.palette.baseColor2
|
|
|
|
property string titleStyle: "osx"
|
|
|
|
QtObject {
|
|
id: appSectionType
|
|
readonly property int chat: 0
|
|
readonly property int community: 1
|
|
readonly property int wallet: 2
|
|
readonly property int browser: 3
|
|
readonly property int nodeManagement: 4
|
|
readonly property int profileSettings: 5
|
|
readonly property int apiDocumentation: 100
|
|
readonly property int demoApp: 101
|
|
}
|
|
|
|
function setActiveItem(sectionId) {
|
|
for (var i = 0; i < models.demoAppSectionsModel.count; i++) {
|
|
let item = models.demoAppSectionsModel.get(i)
|
|
if (item.sectionId !== sectionId)
|
|
{
|
|
models.demoAppSectionsModel.setProperty(i, "active", false)
|
|
continue
|
|
}
|
|
|
|
models.demoAppSectionsModel.setProperty(i, "active", true);
|
|
}
|
|
}
|
|
|
|
StatusMacTrafficLights {
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
anchors.margins: 13
|
|
z: statusAppLayout.z + 1
|
|
visible: titleStyle === "osx"
|
|
}
|
|
|
|
StatusWindowsTitleBar {
|
|
id: windowsTitle
|
|
anchors.top: parent.top
|
|
width: parent.width
|
|
z: statusAppLayout.z + 1
|
|
visible: titleStyle === "windows"
|
|
}
|
|
|
|
StatusAppLayout {
|
|
id: statusAppLayout
|
|
anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
|
|
anchors.left: demoApp.left
|
|
anchors.topMargin: demoApp.border.width
|
|
anchors.leftMargin: demoApp.border.width
|
|
|
|
height: demoApp.height - demoApp.border.width * 2
|
|
width: demoApp.width - demoApp.border.width * 2
|
|
|
|
appNavBar: StatusAppNavBar {
|
|
|
|
id: navBar
|
|
|
|
communityTypeRole: "sectionType"
|
|
communityTypeValue: appSectionType.community
|
|
sectionModel: models.demoAppSectionsModel
|
|
|
|
property bool communityAdded: false
|
|
|
|
onAboutToUpdateFilteredRegularModel: {
|
|
communityAdded = false
|
|
}
|
|
|
|
filterRegularItem: function(item) {
|
|
if(item.sectionType === appSectionType.community)
|
|
if(communityAdded)
|
|
return false
|
|
else
|
|
communityAdded = true
|
|
|
|
return true
|
|
}
|
|
|
|
filterCommunityItem: function(item) {
|
|
return item.sectionType === appSectionType.community
|
|
}
|
|
|
|
regularNavBarButton: StatusNavBarTabButton {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
name: model.icon.length > 0? "" : model.name
|
|
icon.name: model.icon
|
|
icon.source: model.image
|
|
tooltip.text: model.name
|
|
autoExclusive: true
|
|
checked: model.active
|
|
badge.value: model.notificationsCount
|
|
badge.visible: model.hasNotification
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
onClicked: {
|
|
if(model.sectionType === appSectionType.chat)
|
|
{
|
|
appView.sourceComponent = statusAppChatView
|
|
demoApp.setActiveItem(model.sectionId)
|
|
}
|
|
else if(model.sectionType === appSectionType.profileSettings)
|
|
{
|
|
appView.sourceComponent = statusAppProfileSettingsView
|
|
demoApp.setActiveItem(model.sectionId)
|
|
}
|
|
}
|
|
}
|
|
|
|
communityNavBarButton: StatusNavBarTabButton {
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
name: model.icon.length > 0? "" : model.name
|
|
icon.name: model.icon
|
|
icon.source: model.image
|
|
tooltip.text: model.name
|
|
autoExclusive: true
|
|
checked: model.active
|
|
badge.value: model.notificationsCount
|
|
badge.visible: model.hasNotification
|
|
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
|
badge.border.width: 2
|
|
onClicked: {
|
|
if(model.sectionType === appSectionType.community)
|
|
{
|
|
appView.sourceComponent = statusAppCommunityView
|
|
demoApp.setActiveItem(model.sectionId)
|
|
}
|
|
}
|
|
|
|
popupMenu: StatusPopupMenu {
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("Invite People")
|
|
icon.name: "share-ios"
|
|
}
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("View Community")
|
|
icon.name: "group"
|
|
}
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("Edit Community")
|
|
icon.name: "edit"
|
|
enabled: false
|
|
}
|
|
|
|
StatusMenuSeparator {}
|
|
|
|
StatusMenuItem {
|
|
text: qsTr("Leave Community")
|
|
icon.name: "arrow-right"
|
|
icon.width: 14
|
|
iconRotation: 180
|
|
type: StatusMenuItem.Type.Danger
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
appView: Loader {
|
|
id: appView
|
|
anchors.fill: parent
|
|
sourceComponent: statusAppChatView
|
|
}
|
|
}
|
|
|
|
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
|
|
|
|
model: models.demoChatListItems
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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
|
|
model: models.demoCommunityChatListItems
|
|
showCategoryActionButtons: true
|
|
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: statusAppProfileSettingsView
|
|
StatusAppProfileSettingsView { }
|
|
}
|
|
|
|
DemoContactRequestsModal {
|
|
id: demoContactRequestsModal
|
|
anchors.centerIn: parent
|
|
}
|
|
|
|
DemoCommunityDetailModal {
|
|
id: demoCommunityDetailModal
|
|
}
|
|
}
|