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

306 lines
9.4 KiB
QML
Raw Normal View History

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.13
2021-05-20 06:25:52 +00:00
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
2021-05-20 06:25:52 +00:00
StatusWindow {
id: rootWindow
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
: 1024
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.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
Component.onCompleted: {
Theme.palette = lightTheme
apiDocsButton.checked = true
rootWindow.updatePosition();
}
2021-05-17 10:18:41 +00:00
StatusAppLayout {
id: appLayout
anchors.fill: parent
appNavBar: StatusAppNavBar {
height: rootWindow.height
2021-06-03 14:14:52 +00:00
navBarChatButton: StatusNavBarTabButton {
icon.name: "refresh"
tooltip.text: "Reload App"
onClicked: app.restartQml()
}
navBarTabButtons: [
StatusNavBarTabButton {
id: apiDocsButton
icon.name: "edit"
tooltip.text: "API Documentation"
onClicked: {
stackView.clear()
stackView.push(libraryDocumentationCmp)
checked = !checked
demoAppButton.checked = false
}
},
StatusNavBarTabButton {
id: demoAppButton
icon.name: "status"
tooltip.text: "Demo Application"
checked: stackView.currentItem == demoAppCmp
onClicked: {
stackView.clear()
stackView.push(demoAppCmp)
checked = !checked
apiDocsButton.checked = false
}
}
]
}
2021-05-17 10:18:41 +00:00
appView: StackView {
id: stackView
anchors.fill: parent
initialItem: libraryDocumentationCmp
2021-05-17 10:18:41 +00:00
}
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 {
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
NavigationHeader { text: "StatusQ.Core" }
StatusNavigationListItem {
title: "Icons"
selected: page.sourceComponent == iconsComponent
onClicked: page.sourceComponent = iconsComponent
}
NavigationHeader { text: "StatusQ.Layout" }
StatusNavigationListItem {
title: "Layouts"
selected: page.sourceComponent == layoutComponent
onClicked: page.sourceComponent = layoutComponent
}
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
NavigationHeader { text: "StatusQ.Controls" }
StatusNavigationListItem {
title: "Buttons"
selected: page.sourceComponent == buttonsComponent
onClicked: page.sourceComponent = buttonsComponent
}
StatusNavigationListItem {
title: "Controls"
selected: page.sourceComponent == controlsComponent
onClicked: page.sourceComponent = controlsComponent
}
NavigationHeader { text: "StatusQ.Components" }
StatusNavigationListItem {
title: "List Items"
selected: page.sourceComponent == listItemsComponent
onClicked: page.sourceComponent = listItemsComponent
}
StatusNavigationListItem {
title: "StatusChatInfoToolBar"
selected: page.sourceComponent == chatInfoToolBarComponent
onClicked: page.sourceComponent = chatInfoToolBarComponent
}
StatusNavigationListItem {
title: "Others"
selected: page.sourceComponent == othersComponent
onClicked: page.sourceComponent = othersComponent
}
NavigationHeader { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusPopupMenu"
selected: page.sourceComponent == popupMenuComponent
onClicked: page.sourceComponent = popupMenuComponent
}
}
}
}
rightPanel: Item {
id: rightPanel
anchors.fill: parent
ScrollView {
width: parent.width
height: parent.height
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, page.height + 128)
scale: rootWindow.factor
Loader {
id: page
active: true
anchors.centerIn: parent
sourceComponent: iconsComponent
2021-05-17 10:18:41 +00:00
}
}
}
}
}
}
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: iconsComponent
Icons { iconColor: Theme.palette.primaryColor1 }
}
Component {
id: controlsComponent
Controls {}
}
Component {
id: listItemsComponent
ListItems {}
}
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
Component {
id: layoutComponent
Layout {}
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
}
Component {
id: othersComponent
Others {}
2021-05-17 10:18:41 +00:00
}
Component {
id: buttonsComponent
Buttons {}
}
Component {
id: popupMenuComponent
StatusPopupMenuPage {}
}
Component {
id: chatInfoToolBarComponent
StatusChatInfoToolBarPage {}
}
Component {
id: demoAppCmp
Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor3
DemoApp {
id: demoApp
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
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
onClose: {
rootWindow.close()
}
onMinimised: {
rootWindow.showMinimized()
}
onMaximized: {
rootWindow.toggleFullScreen()
}
}
}