import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import QtGraphicalEffects 1.15 import QtQuick.Layouts 1.15 import Qt.labs.settings 1.0 import QtQml.Models 2.15 import QtMultimedia 5.15 import StatusQ 0.1 // https://github.com/status-im/status-desktop/issues/10218 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: 1224 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 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 readonly property int qrScanner: 103 } 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) } else if (model.sectionType === appSectionType.qrScanner) { stackView.push(qrScannerComponent) } 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: "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); } StatusNavigationListItem { title: "LoadingStates" selected: viewLoader.source.toString().includes(title) onClicked: mainPageView.control(title); } StatusNavigationListItem { title: "StatusPageIndicator" 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" } } } Component { id: qrScannerComponent QrCodeScannerPage { anchors.fill: parent } } 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 alias x: rootWindow.x property alias y: rootWindow.y property alias width: rootWindow.width property alias height: rootWindow.height property string selected: "" property string selectedExample: "" property bool lightTheme: true property bool fillPage: false } }