status-desktop/ui/StatusQ/sandbox/DemoApp.qml

236 lines
7.5 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"
import "demoapp/data" 1.0
import SortFilterProxyModel 0.2
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 communitiesPortal: 2
readonly property int wallet: 3
readonly property int browser: 3
readonly property int nodeManagement: 5
readonly property int profileSettings: 6
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"
}
StatusMainLayout {
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
leftPanel: StatusAppNavBar {
id: navBar
chatItemsModel: SortFilterProxyModel {
sourceModel: Models.demoAppSectionsModel
filters: ValueFilter {
roleName: "sectionType"
value: appSectionType.chat
}
}
chatItemDelegate: navButtonComponent
communityItemsModel: SortFilterProxyModel {
sourceModel: Models.demoAppSectionsModel
filters: ValueFilter {
roleName: "sectionType"
value: appSectionType.community
}
}
communityItemDelegate: 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-left"
type: StatusMenuItem.Type.Danger
}
}
}
regularItemsModel: SortFilterProxyModel {
sourceModel: Models.demoAppSectionsModel
filters: RangeFilter {
roleName: "sectionType"
minimumValue: appSectionType.communitiesPortal
maximumValue: appSectionType.demoApp
}
}
regularItemDelegate: navButtonComponent
delegateHeight: 40
Component {
id: navButtonComponent
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.communitiesPortal)
{
appView.sourceComponent = statusCommunityPortalView
demoApp.setActiveItem(model.sectionId)
}
else if(model.sectionType === appSectionType.profileSettings)
{
appView.sourceComponent = statusAppProfileSettingsView
demoApp.setActiveItem(model.sectionId)
}
}
}
}
}
rightPanel: Loader {
id: appView
anchors.fill: parent
sourceComponent: statusAppChatView
}
}
Component {
id: statusAppChatView
StatusAppChatView { }
}
Component {
id: statusAppCommunityView
StatusAppCommunityView {
communityDetailModalTitle: demoCommunityDetailModal.header.title
communityDetailModalImage: demoCommunityDetailModal.header.asset.name
onChatInfoButtonClicked: {
demoCommunityDetailModal.open();
}
}
}
Component {
id: statusAppProfileSettingsView
StatusAppProfileSettingsView { }
}
Component {
id: statusCommunityPortalView
StatusAppCommunitiesPortalView { }
}
DemoContactRequestsModal {
id: demoContactRequestsModal
anchors.centerIn: parent
}
DemoCommunityDetailModal {
id: demoCommunityDetailModal
}
}