refactor(sandbox): make use of StatusQ to layout sandbox app
Closes #41
This commit is contained in:
parent
a4421b5b42
commit
1548212e47
|
@ -0,0 +1,18 @@
|
||||||
|
import QtQuick 2.14
|
||||||
|
|
||||||
|
import StatusQ.Core 0.1
|
||||||
|
import StatusQ.Core.Theme 0.1
|
||||||
|
|
||||||
|
Item {
|
||||||
|
height: 34
|
||||||
|
width: 176
|
||||||
|
property alias text: label.text
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
id: label
|
||||||
|
font.pixelSize: 15
|
||||||
|
color: Theme.palette.baseColor1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
import QtQuick 2.14
|
||||||
|
import QtQuick.Controls 2.14
|
||||||
|
|
||||||
|
import StatusQ.Controls 0.1
|
||||||
|
|
||||||
|
Row {
|
||||||
|
id: themeSwitch
|
||||||
|
signal checkedChanged()
|
||||||
|
|
||||||
|
spacing: 2
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "🌤"
|
||||||
|
font.pixelSize: 15
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusSwitch {
|
||||||
|
onCheckedChanged: themeSwitch.checkedChanged()
|
||||||
|
}
|
||||||
|
|
||||||
|
Text {
|
||||||
|
text: "🌙"
|
||||||
|
font.pixelSize: 15
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
298
sandbox/main.qml
298
sandbox/main.qml
|
@ -1,154 +1,169 @@
|
||||||
import QtQuick 2.14
|
import QtQuick 2.14
|
||||||
import QtQuick.Window 2.14
|
import QtQuick.Window 2.14
|
||||||
import QtQuick.Controls 2.14
|
import QtQuick.Controls 2.14
|
||||||
|
import QtGraphicalEffects 1.13
|
||||||
|
|
||||||
import Sandbox 0.1
|
import Sandbox 0.1
|
||||||
|
|
||||||
import StatusQ.Core 0.1
|
import StatusQ.Core 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
|
import StatusQ.Controls 0.1
|
||||||
|
import StatusQ.Components 0.1
|
||||||
|
import StatusQ.Layout 0.1
|
||||||
|
|
||||||
StatusWindow {
|
StatusWindow {
|
||||||
id: rootWindow
|
id: rootWindow
|
||||||
width: 1024
|
width: 1024
|
||||||
height: 840
|
height: 840
|
||||||
visible: true
|
visible: true
|
||||||
title: qsTr("Status App Sandbox")
|
title: qsTr("StatusQ Documentation App")
|
||||||
|
|
||||||
property ThemePalette lightTheme: StatusLightTheme {}
|
property ThemePalette lightTheme: StatusLightTheme {}
|
||||||
property ThemePalette darkTheme: StatusDarkTheme {}
|
property ThemePalette darkTheme: StatusDarkTheme {}
|
||||||
|
|
||||||
ButtonGroup {
|
|
||||||
id: topicsGroup
|
|
||||||
buttons: tabs.children
|
|
||||||
}
|
|
||||||
|
|
||||||
ButtonGroup {
|
|
||||||
buttons: switchRow.children
|
|
||||||
}
|
|
||||||
|
|
||||||
Flow {
|
|
||||||
id: tabs
|
|
||||||
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"
|
|
||||||
}
|
|
||||||
Button {
|
|
||||||
id: layoutTab
|
|
||||||
checkable: true
|
|
||||||
text: "Layout"
|
|
||||||
}
|
|
||||||
Button {
|
|
||||||
id: otherTab
|
|
||||||
checkable: true
|
|
||||||
text: "Other"
|
|
||||||
}
|
|
||||||
|
|
||||||
Button {
|
|
||||||
id: buttonsTab
|
|
||||||
checkable: true
|
|
||||||
text: "Buttons"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ScrollView {
|
|
||||||
width: parent.width
|
|
||||||
anchors.top: tabs.bottom
|
|
||||||
anchors.bottom: parent.bottom
|
|
||||||
contentHeight: lightThemeBg.height * rootWindow.factor
|
|
||||||
contentWidth: rootWindow.width * rootWindow.factor
|
|
||||||
clip: true
|
|
||||||
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: lightThemeBg
|
|
||||||
|
|
||||||
width: rootWindow.width
|
|
||||||
height: page.height + 64
|
|
||||||
anchors.topMargin: 32
|
|
||||||
color: Theme.palette.baseColor5
|
|
||||||
clip: true
|
|
||||||
scale: rootWindow.factor
|
|
||||||
|
|
||||||
Loader {
|
|
||||||
id: page
|
|
||||||
active: true
|
|
||||||
anchors.centerIn: parent
|
|
||||||
|
|
||||||
sourceComponent: {
|
|
||||||
switch(topicsGroup.checkedButton) {
|
|
||||||
case iconsTab:
|
|
||||||
return iconsComponent;
|
|
||||||
case controlsTab:
|
|
||||||
return controlsComponent;
|
|
||||||
case listItemsTab:
|
|
||||||
return listItemsComponent;
|
|
||||||
case layoutTab:
|
|
||||||
return layoutComponent;
|
|
||||||
case otherTab:
|
|
||||||
return othersComponent;
|
|
||||||
case buttonsTab:
|
|
||||||
return buttonsComponent;
|
|
||||||
default:
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Button {
|
|
||||||
checkable: true
|
|
||||||
text: "Dark Theme"
|
|
||||||
onCheckedChanged: {
|
|
||||||
if (checked) {
|
|
||||||
Theme.setTheme(darkTheme)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
readonly property real maxFactor: 2.0
|
readonly property real maxFactor: 2.0
|
||||||
readonly property real minFactor: 0.5
|
readonly property real minFactor: 0.5
|
||||||
|
|
||||||
property real factor: 1.0
|
property real factor: 1.0
|
||||||
|
|
||||||
|
Component.onCompleted: {
|
||||||
|
Theme.palette = lightTheme
|
||||||
|
apiDocsButton.checked = true
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusAppLayout {
|
||||||
|
id: appLayout
|
||||||
|
anchors.fill: parent
|
||||||
|
|
||||||
|
appNavBar: StatusAppNavBar {
|
||||||
|
height: rootWindow.height
|
||||||
|
navBarTabButtons: [
|
||||||
|
StatusNavBarTabButton {
|
||||||
|
id: apiDocsButton
|
||||||
|
icon.name: "edit"
|
||||||
|
tooltip.text: "API Documentation"
|
||||||
|
onClicked: {
|
||||||
|
stackView.clear()
|
||||||
|
stackView.push(libraryDocumentationCmp)
|
||||||
|
checked = !checked
|
||||||
|
demoAppButton.checked = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
appView: StackView {
|
||||||
|
id: stackView
|
||||||
|
anchors.fill: parent
|
||||||
|
initialItem: libraryDocumentationCmp
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
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: "Others"
|
||||||
|
selected: page.sourceComponent == othersComponent
|
||||||
|
onClicked: page.sourceComponent = othersComponent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Action {
|
Action {
|
||||||
shortcut: "CTRL+="
|
shortcut: "CTRL+="
|
||||||
onTriggered: {
|
onTriggered: {
|
||||||
|
@ -174,44 +189,31 @@ StatusWindow {
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: iconsComponent
|
id: iconsComponent
|
||||||
Icons {
|
Icons { iconColor: Theme.palette.primaryColor1 }
|
||||||
anchors.centerIn: parent
|
|
||||||
iconColor: Theme.palette.primaryColor1
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: controlsComponent
|
id: controlsComponent
|
||||||
Controls {
|
Controls {}
|
||||||
anchors.centerIn: parent
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: listItemsComponent
|
id: listItemsComponent
|
||||||
ListItems {
|
ListItems {}
|
||||||
anchors.centerIn: parent
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: layoutComponent
|
id: layoutComponent
|
||||||
Layout {
|
Layout {}
|
||||||
anchors.centerIn: parent
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: othersComponent
|
id: othersComponent
|
||||||
Others {
|
Others {}
|
||||||
anchors.centerIn: parent
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: buttonsComponent
|
id: buttonsComponent
|
||||||
Buttons {
|
Buttons {}
|
||||||
anchors.centerIn: parent
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue