status-qml/sandbox/main.qml

497 lines
16 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
: 1224
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
StatusListSectionHeadline { text: "StatusQ.Core" }
StatusNavigationListItem {
title: "Icons"
selected: page.sourceComponent == iconsComponent
onClicked: page.sourceComponent = iconsComponent
}
StatusListSectionHeadline { 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
StatusListSectionHeadline { text: "StatusQ.Controls" }
StatusNavigationListItem {
title: "Buttons"
selected: page.sourceComponent == buttonsComponent
onClicked: page.sourceComponent = buttonsComponent
}
StatusNavigationListItem {
title: "StatusSwitchTab"
selected: page.sourceComponent == statusTabSwitchesComponent
onClicked: page.sourceComponent = statusTabSwitchesComponent
}
StatusNavigationListItem {
title: "StatusChatCommandButton"
selected: page.sourceComponent == statusChatCommandButtonPageComponent
onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
}
StatusNavigationListItem {
title: "Controls"
selected: page.sourceComponent == controlsComponent
onClicked: page.sourceComponent = controlsComponent
}
StatusNavigationListItem {
title: "StatusTabBarIconButton"
selected: page.sourceComponent == statusTabBarIconButtonPageComponent
onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent
}
StatusNavigationListItem {
title: "StatusInput"
selected: page.sourceComponent == statusInputPageComponent
onClicked: page.sourceComponent = statusInputPageComponent
}
feat(StatusQ.Controls): introduce `StatusSelect` This introduces a new `StatusSelect` component which is a select form control. The `model` property can be used to apply a `ListModel` for dynamic data. To give users full control over what the menu items look like, `StatusSelect` exposes a `selectMenu.delegate` property. Most of the time this should be a `StatusMenuItemDelegate` to get access to the comple `MenuItem` component (remember that `StatusMenuItem` is merely an `Action` type). `StatusMenuItemDelegate` derives most of its behaviour by its applied `action`, so the easiest way to construct a dynamic select with StatusQ menu item look and feel is a combination of `StatusMenuItemDelegate` and `StatusMenuItem` as shown below. Further more, because `StatusSelect` can't know what the `delegate` is going to look like it also can't decide what data goes into a `selectedItem`. Therefore, it offers another API, the `selectedItemComponent` which can be any component. This component can then be accessed by menu item actions to set corresponding properties. Usage: ```qml import StatusQ.Controls 0.1 StatusSelect { label: "Some label" model: ListModel { ListElement { name: "Pascal" } ListElement { name: "Khushboo" } ListElement { name: "Alexandra" } ListElement { name: "Eric" } } selectMenu.delegate: StatusMenuItemDelegate { statusPopupMenu: select action: StatusMenuItem { iconSettings.name: "filled-account" text: name onTriggered: { selectedItem.text = name } } } selectedItemComponent: Item { id: selectedItem anchors.fill: parent property string text: "" StatusBaseText { text: selectedItem.text anchors.centerIn: parent color: Theme.palette.directColor1 } } } ``` Closes #436
2021-10-12 15:29:40 +00:00
StatusNavigationListItem {
title: "StatusSelect"
selected: page.sourceComponent == statusSelectPageComponent
onClicked: page.sourceComponent = statusSelectPageComponent
}
StatusNavigationListItem {
title: "StatusAccountSelector"
selected: page.sourceComponent == statusAccountSelectorPageComponent
onClicked: page.sourceComponent = statusAccountSelectorPageComponent
}
StatusNavigationListItem {
title: "StatusAssetSelector"
selected: page.sourceComponent == statusAssetSelectorPageComponent
onClicked: page.sourceComponent = statusAssetSelectorPageComponent
}
StatusNavigationListItem {
title: "StatusColorSelector"
selected: page.sourceComponent == statusColorSelectorPageComponent
onClicked: page.sourceComponent = statusColorSelectorPageComponent
}
StatusNavigationListItem {
title: "StatusWalletColorButton"
selected: page.sourceComponent == statusWalletColorButtonPageComponent
onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
}
StatusNavigationListItem {
title: "StatusWalletColorSelect"
selected: page.sourceComponent == statusWalletColorSelectPageComponent
onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
}
StatusListSectionHeadline { text: "StatusQ.Components" }
StatusNavigationListItem {
title: "StatusAddress"
selected: page.sourceComponent == statusAddressPageComponent
onClicked: page.sourceComponent = statusAddressPageComponent
}
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
}
StatusNavigationListItem {
title: "StatusExpandableItem"
selected: page.sourceComponent == settingsComponent
onClicked: page.sourceComponent = settingsComponent
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
StatusNavigationListItem {
title: "StatusPopupMenu"
selected: page.sourceComponent == popupMenuComponent
onClicked: page.sourceComponent = popupMenuComponent
}
2021-06-14 12:10:36 +00:00
StatusNavigationListItem {
title: "StatusModal"
selected: page.sourceComponent == statusModalComponent
onClicked: page.sourceComponent = statusModalComponent
}
StatusListSectionHeadline { text: "StatusQ.Platform" }
StatusNavigationListItem {
title: "StatusMacNotification"
selected: page.sourceComponent == notificationComponent
onClicked: page.sourceComponent = notificationComponent
}
}
}
}
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, 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: statusInputPageComponent
StatusInputPage {}
}
feat(StatusQ.Controls): introduce `StatusSelect` This introduces a new `StatusSelect` component which is a select form control. The `model` property can be used to apply a `ListModel` for dynamic data. To give users full control over what the menu items look like, `StatusSelect` exposes a `selectMenu.delegate` property. Most of the time this should be a `StatusMenuItemDelegate` to get access to the comple `MenuItem` component (remember that `StatusMenuItem` is merely an `Action` type). `StatusMenuItemDelegate` derives most of its behaviour by its applied `action`, so the easiest way to construct a dynamic select with StatusQ menu item look and feel is a combination of `StatusMenuItemDelegate` and `StatusMenuItem` as shown below. Further more, because `StatusSelect` can't know what the `delegate` is going to look like it also can't decide what data goes into a `selectedItem`. Therefore, it offers another API, the `selectedItemComponent` which can be any component. This component can then be accessed by menu item actions to set corresponding properties. Usage: ```qml import StatusQ.Controls 0.1 StatusSelect { label: "Some label" model: ListModel { ListElement { name: "Pascal" } ListElement { name: "Khushboo" } ListElement { name: "Alexandra" } ListElement { name: "Eric" } } selectMenu.delegate: StatusMenuItemDelegate { statusPopupMenu: select action: StatusMenuItem { iconSettings.name: "filled-account" text: name onTriggered: { selectedItem.text = name } } } selectedItemComponent: Item { id: selectedItem anchors.fill: parent property string text: "" StatusBaseText { text: selectedItem.text anchors.centerIn: parent color: Theme.palette.directColor1 } } } ``` Closes #436
2021-10-12 15:29:40 +00:00
Component {
id: statusSelectPageComponent
StatusSelectPage {}
}
Component {
id: statusAccountSelectorPageComponent
StatusAccountSelectorPage {}
}
Component {
id: statusAssetSelectorPageComponent
StatusAssetSelectorPage {}
}
Component {
id: statusColorSelectorPageComponent
StatusColorSelectorPage {}
}
Component {
id: statusTabBarIconButtonPageComponent
StatusTabBarIconButtonPage {}
}
Component {
id: statusWalletColorButtonPageComponent
StatusWalletColorButtonPage {}
}
Component {
id: statusWalletColorSelectPageComponent
StatusWalletColorSelectPage {}
}
Component {
id: listItemsComponent
ListItems {}
}
Component {
id: statusAddressPageComponent
StatusAddressPage {}
}
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: statusChatCommandButtonPageComponent
StatusChatCommandButtonPage {}
}
Component {
id: popupMenuComponent
StatusPopupMenuPage {}
}
Component {
id: chatInfoToolBarComponent
StatusChatInfoToolBarPage {}
}
2021-06-14 12:10:36 +00:00
Component {
id: statusModalComponent
Popups {}
}
Component {
id: statusTabSwitchesComponent
StatusTabSwitchPage {}
}
Component {
id: settingsComponent
StatusExpandableSettingsItemPage{}
}
Component {
id: notificationComponent
StatusMacNotificationPage {}
}
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.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
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()
}
}
}