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

582 lines
22 KiB
QML

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.14
import Qt.labs.settings 1.0
import QtQml.Models 2.14
import Sandbox 0.1
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.Platform 0.1
import SortFilterProxyModel 0.2
import "demoapp/data" 1.0
StatusWindow {
id: rootWindow
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
: 1224
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
:840
visible: true
title: qsTr("StatusQ Documentation App")
property ThemePalette lightTheme: StatusLightTheme {}
property ThemePalette darkTheme: StatusDarkTheme {}
readonly property real maxFactor: 2.0
readonly property real minFactor: 0.5
property real factor: 1.0
Component.onCompleted: rootWindow.updatePosition()
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 examples: 101
readonly property int demoApp: 102
}
function setActiveItem(sectionId) {
for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
let item = Models.mainAppSectionsModel.get(i)
if (item.sectionId !== sectionId) {
Models.mainAppSectionsModel.setProperty(i, "active", false);
continue
}
Models.mainAppSectionsModel.setProperty(i, "active", true);
}
}
StatusMainLayout {
id: appLayout
anchors.fill: parent
leftPanel: StatusAppNavBar {
height: rootWindow.height
regularItemsModel: Models.mainAppSectionsModel
regularItemDelegate: 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: {
stackView.clear()
if(model.sectionType === appSectionType.apiDocumentation)
{
stackView.push(libraryDocumentationCmp)
}
else if(model.sectionType === appSectionType.examples)
{
stackView.push(examplesCmp)
}
else if(model.sectionType === appSectionType.demoApp)
{
stackView.push(demoAppCmp)
}
rootWindow.setActiveItem(model.sectionId)
}
}
delegateHeight: 40
}
rightPanel: Item {
anchors.fill: parent
StackView {
id: stackView
anchors.fill: parent
initialItem: libraryDocumentationCmp
}
ThemeSwitch {
anchors.top: parent.top
anchors.topMargin: 32
anchors.right: parent.right
anchors.rightMargin: 32
lightThemeEnabled: storeSettings.lightTheme
onLightThemeEnabledChanged: {
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
storeSettings.lightTheme = lightThemeEnabled
}
}
}
}
Component {
id: libraryDocumentationCmp
StatusSectionLayout {
id: mainPageView
showHeader: false
function page(name, fillPage) {
storeSettings.fillPage = fillPage ? true : false
viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
}
function control(name) {
viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
storeSettings.fillPage = false
}
leftPanel: StatusScrollView {
anchors.fill: parent
anchors.topMargin: 48
Column {
id: navigation
spacing: 0
StatusListSectionHeadline { text: "StatusQ.Core" }
StatusNavigationListItem {
title: "Icons"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
}
StatusListSectionHeadline { text: "StatusQ.Layout" }
StatusNavigationListItem {
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: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
}
StatusNavigationListItem {
title: "StatusSwitchTab"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page("StatusTabSwitch");
}
StatusNavigationListItem {
title: "StatusChatCommandButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "Controls"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
}
StatusNavigationListItem {
title: "StatusTabBarButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusTabBarIconButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusInput"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusTextArea"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusSelect"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusComboBox"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusAccountSelector"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusColorSelector"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusWalletColorButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusWalletColorSelect"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusPasswordStrengthIndicator"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusPinInput"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusListSectionHeadline { text: "StatusQ.Components" }
StatusNavigationListItem {
title: "StatusAddress"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "List Items"
selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
onClicked: mainPageView.control(title.replace(/\s+/g, ''));
}
StatusNavigationListItem {
title: "StatusChatInfoToolBar"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "Others"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
}
StatusNavigationListItem {
title: "StatusExpandableItem"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page("StatusExpandableSettingsItem");
}
StatusNavigationListItem {
title: "StatusTagSelector"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusToastMessage"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusWizardStepper"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusListPicker"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusCommunityCard"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusCommunityTags"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusItemSelector"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
}
StatusNavigationListItem {
title: "StatusChartPanel"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusMenu"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusModal"
selected: viewLoader.source.toString().includes("Popups")
onClicked: mainPageView.control("Popups");
}
StatusNavigationListItem {
title: "StatusDialog"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusListSectionHeadline { text: "StatusQ.Platform" }
StatusNavigationListItem {
title: "StatusMacNotification"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusColorSelectorGrid"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusImageCropPanel"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
}
StatusNavigationListItem {
title: "StatusColorSpace"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
}
StatusNavigationListItem {
title: "StatusCard"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title, true);
}
StatusNavigationListItem {
title: "StatusStepper"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
}
}
centerPanel: Item {
id: centerPanel
anchors.fill: parent
StatusScrollView {
visible: !storeSettings.fillPage
anchors.fill: parent
anchors.topMargin: 64
contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
contentWidth: (pageWrapper.width * rootWindow.factor)
clip: true
Item {
id: pageWrapper
width: centerPanel.width
anchors.top: parent.top
height: Math.max(rootWindow.height, viewLoader.height + 128)
scale: rootWindow.factor
Loader {
id: viewLoader
active: !storeSettings.fillPage
anchors.centerIn: parent
source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
onSourceChanged: {
storeSettings.selected = viewLoader.source
if (source.toString().includes("Icons")) {
item.iconColor = Theme.palette.primaryColor1;
}
}
}
}
}
Loader {
active: storeSettings.fillPage
anchors.fill: parent
anchors.topMargin: 64
visible: storeSettings.fillPage
clip: true
source: viewLoader.source
}
}
}
}
Action {
shortcut: "CTRL+="
onTriggered: {
if (rootWindow.factor < 2.0)
rootWindow.factor += 0.2
}
}
Action {
shortcut: "CTRL+-"
onTriggered: {
if (rootWindow.factor > 0.5)
rootWindow.factor -= 0.2
}
}
Action {
shortcut: "CTRL+0"
onTriggered: {
rootWindow.factor = 1.0
}
}
Component {
id: examplesCmp
StatusSectionLayout {
id: examplesView
showHeader: false
function example(name) {
examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
storeSettings.selectedExample = examplesLoader.source
}
readonly property string defaultExampleSource: example("FilteringSorting")
leftPanel: StatusScrollView {
id: examplesLeftPanel
anchors.fill: parent
anchors.topMargin: 48
ColumnLayout {
width: examplesLeftPanel.availableWidth
spacing: 0
StatusNavigationListItem {
Layout.fillWidth: true
title: "FilteringSorting"
selected: examplesLoader.source.toString().includes(title)
onClicked: examplesView.example(title)
}
}
}
centerPanel: Item {
anchors.fill: parent
StatusScrollView {
id: examplesCenterPanel
anchors.fill: parent
anchors.margins: 64
anchors.topMargin: anchors.margins + 32
Loader {
id: examplesLoader
width: examplesCenterPanel.availableWidth
source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
}
}
}
}
}
Component {
id: demoAppCmp
Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor3
Row {
id: platformSwitch
anchors.left: demoApp.left
anchors.bottom: demoApp.top
anchors.bottomMargin: 20
spacing: 2
Text {
text: "OSX"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
StatusSwitch {
onCheckedChanged: {
if (checked) {
demoApp.titleStyle = "windows"
} else {
demoApp.titleStyle = "osx"
}
}
}
Text {
text: "Win"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
}
DemoApp {
id: demoApp
anchors.centerIn: parent
}
DropShadow {
anchors.fill: demoApp
source: demoApp
horizontalOffset: 0
verticalOffset: 5
radius: 20
samples: 20
color: "#22000000"
}
}
}
StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
visible: Qt.platform.os == "osx"
onClose: {
rootWindow.close()
}
onMinimised: {
rootWindow.showMinimized()
}
onMaximized: {
rootWindow.toggleFullScreen()
}
}
StatusWindowsTitleBar {
anchors.top: parent.top
width: parent.width
visible: Qt.platform.os == "windows"
onClose: {
rootWindow.close()
}
onMinimised: {
rootWindow.showMinimized()
}
onMaximized: {
rootWindow.toggleFullScreen()
}
}
Settings {
id: storeSettings
property string selected: ""
property string selectedExample: ""
property bool lightTheme: true
property bool fillPage: false
}
}