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); } } } 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 } }