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

605 lines
22 KiB
QML
Raw Normal View History

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
2021-05-20 06:25:52 +00:00
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
2021-05-20 06:25:52 +00:00
StatusWindow {
id: rootWindow
width: 1224
height: 840
visible: true
title: qsTr("StatusQ Documentation App")
2021-05-17 10:18:41 +00:00
property ThemePalette lightTheme: StatusLightTheme {}
property ThemePalette darkTheme: StatusDarkTheme {}
2021-05-17 10:18:41 +00:00
readonly property real maxFactor: 2.0
readonly property real minFactor: 0.5
property real factor: 1.0
2021-05-17 10:18:41 +00:00
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
2021-06-03 14:14:52 +00:00
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
}
2021-05-17 10:18:41 +00:00
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);
}
feat(Layout): introduce StatusAppNavBar This commit introduces a new `StatusAppNavBar` component that can be used to create a Status application's tab bar for dedicated tab sections such as chat, profile, wallet etc. The component is build in a way that it support declarative and imperative usage where necessary. In its most simple form, a `StatusAppNavBar` comes with a single tab button for the chat section. Such button has to be of type `StatusNavBarTabButton`: ```qml import StatusQ.Layout 0.1 StatusAppNavBar { navBarChatButton: StatusNavBarTabButton { icon.name: "chat" badge.value: 33 badge.visible: true tooltip.text: "Chat" } } ``` In addition, it's possible to specify a list of `StatusNavBarTabButton` for other sections of the application using the `navBarTabButtons` property: ```qml StatusAppNavBar { ... navBarTabButtons: [ StatusNavBarTabButton { icon.name: "wallet" tooltip.text: "Wallet" }, StatusNavBarTabButton { icon.name: "browser" tooltip.text: "Browser" }, StatusNavBarTabButton { icon.name: "status-update" tooltip.text: "Timeline" } ] } ``` Lastly, when desired to render tabs for Status community, which can grow in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons` property that can have a `model` and a `delegate`. The `delegate` should also be a `StatusNavBarTabButton`: ```qml StatusAppNavBar { ... navBarCommunityTabButtons.model: someModel.communities navBarCommunityTabButtons.delegate: StatusNavBarTabButton { name: model.name tooltip.text: model.name anchors.horizontalCenter: parent.horizontalCenter } } ``` The amount of community tab buttons can grow as they need until their dedicated area becomes scrollable, at which point all `navBarTabButtons` will stick to the bottom of `StatusAppNavBar`. Closes #18
2021-05-11 14:25:46 +00:00
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 {
2022-12-01 16:58:37 +00:00
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;
}
}
2021-05-17 10:18:41 +00:00
}
}
}
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
}
}