import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls 2.14 import QtGraphicalEffects 1.13 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 "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: { Theme.palette = lightTheme 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 demoApp: 101 } 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); } } StatusAppLayout { id: appLayout anchors.fill: parent appNavBar: StatusAppNavBar { height: rootWindow.height communityTypeRole: "sectionType" communityTypeValue: appSectionType.community sectionModel: Models.mainAppSectionsModel 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: { stackView.clear() if(model.sectionType === appSectionType.apiDocumentation) { stackView.push(libraryDocumentationCmp) rootWindow.setActiveItem(sectionId) } else if(model.sectionType === appSectionType.demoApp) { stackView.push(demoAppCmp) rootWindow.setActiveItem(model.sectionId) } } } } appView: StackView { id: stackView anchors.fill: parent initialItem: libraryDocumentationCmp } ThemeSwitch { anchors.top: parent.top anchors.topMargin: 32 anchors.right: parent.right anchors.rightMargin: 32 onCheckedChanged: { if (Theme.palette === rootWindow.lightTheme) { Theme.palette = rootWindow.darkTheme } else { Theme.palette = rootWindow.lightTheme } } } } Component { 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 ScrollView { anchors.top: parent.top anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter contentHeight: navigation.height + 56 contentWidth: navigation.width clip: true Column { id: navigation anchors.top: parent.top anchors.topMargin: 48 anchors.horizontalCenter: parent.horizontalCenter 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: "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: "StatusSelect" 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: "StatusAssetSelector" 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); } StatusListSectionHeadline { text: "StatusQ.Popup" } StatusNavigationListItem { title: "StatusPopupMenu" selected: viewLoader.source.toString().includes(title) onClicked: mainPageView.page(title); } StatusNavigationListItem { title: "StatusModal" selected: viewLoader.source.toString().includes("Popups") onClicked: mainPageView.control("Popups"); } 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); } } } } rightPanel: Item { id: rightPanel anchors.fill: parent ScrollView { anchors.fill: parent contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor contentWidth: (pageWrapper.width * rootWindow.factor) clip: true Item { id: pageWrapper width: rightPanel.width anchors.top: parent.top anchors.topMargin: 64 height: Math.max(rootWindow.height, viewLoader.height + 128) scale: rootWindow.factor Loader { id: viewLoader anchors.centerIn: parent source: mainPageView.control("Icons") onSourceChanged: { if (source.toString().includes("Icons")) { item.iconColor = Theme.palette.primaryColor1; } } } } } } } } 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: 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() } } }