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

218 lines
4.8 KiB
QML
Raw Normal View History

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
2021-05-20 06:25:52 +00:00
import Sandbox 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
2021-05-20 06:25:52 +00:00
StatusWindow {
id: rootWindow
2021-05-17 10:18:41 +00:00
width: 1024
height: 840
visible: true
title: qsTr("Status App Sandbox")
2021-05-17 10:18:41 +00:00
property ThemePalette lightTheme: StatusLightTheme {}
property ThemePalette darkTheme: StatusDarkTheme { }
ButtonGroup {
id: topicsGroup
buttons: tabs.children
}
2021-05-17 10:18:41 +00:00
ButtonGroup {
buttons: switchRow.children
}
Flow {
id: tabs
2021-05-17 10:18:41 +00:00
anchors.left: parent.left
anchors.leftMargin: 100
anchors.right: parent.right
Button {
text: "Reload QML"
onClicked: app.restartQml()
}
Button {
id: iconsTab
checkable: true
text: "Icons"
}
Button {
id: controlsTab
checkable: true
text: "Controls"
}
Button {
id: listItemsTab
checkable: true
text: "List Items"
}
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
Button {
id: layoutTab
checkable: true
text: "Layout"
}
Button {
id: otherTab
checkable: true
text: "Other"
}
2021-05-17 10:18:41 +00:00
Button {
id: buttonsTab
checkable: true
text: "Buttons"
}
}
2021-05-17 10:18:41 +00:00
ScrollView {
width: parent.width
anchors.top: tabs.bottom
anchors.bottom: parent.bottom
contentHeight: lightThemeBg.height * rootWindow.factor
contentWidth: rootWindow.width * rootWindow.factor
clip: true
2021-05-17 10:18:41 +00:00
Rectangle {
id: lightThemeBg
width: rootWindow.width
height: page.height + 64
anchors.topMargin: 32
2021-05-17 10:18:41 +00:00
color: Theme.palette.baseColor5
clip: true
scale: rootWindow.factor
2021-05-17 10:18:41 +00:00
Loader {
id: page
2021-05-17 10:18:41 +00:00
active: true
anchors.centerIn: parent
sourceComponent: {
switch(topicsGroup.checkedButton) {
case iconsTab:
return iconsComponent;
case controlsTab:
return controlsComponent;
case listItemsTab:
return listItemsComponent;
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
case layoutTab:
return layoutComponent;
2021-05-17 10:18:41 +00:00
case otherTab:
return othersComponent;
case buttonsTab:
return buttonsComponent;
default:
return null;
}
}
}
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
2021-05-17 10:18:41 +00:00
Row {
id: switchRow
scale: 0.8
anchors.right: parent.right
anchors.top: parent.top
Button {
checkable: true
checked: true
text: "Light Theme"
onCheckedChanged: {
if (checked) {
Theme.setTheme(lightTheme)
}
}
}
2021-05-17 10:18:41 +00:00
Button {
checkable: true
text: "Dark Theme"
onCheckedChanged: {
if (checked) {
Theme.setTheme(darkTheme)
}
}
}
}
}
}
readonly property real maxFactor: 2.0
readonly property real minFactor: 0.5
property real factor: 1.0
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 {
anchors.centerIn: parent
2021-05-17 10:18:41 +00:00
iconColor: Theme.palette.primaryColor1
}
}
Component {
id: controlsComponent
Controls {
anchors.centerIn: parent
}
}
Component {
id: listItemsComponent
ListItems {
anchors.centerIn: parent
}
}
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 {
anchors.centerIn: parent
}
}
Component {
id: othersComponent
Others {
anchors.centerIn: parent
2021-05-17 10:18:41 +00:00
}
}
Component {
id: buttonsComponent
Buttons {
anchors.centerIn: parent
}
}
}