feat(Layout): introduce StatusAppLayout component
This introduces a layout component to quickly scaffold a Status Desktop ui layout. Usage: ```qml import StatusQ.Layout 0.1 StatusAppLayout { appNavBar: StatusAppNavBar { ... } appView: StackView { anchors.fill: parent initialItem: Component { ... } } } ``` Closes: #77
This commit is contained in:
parent
4b9f996d06
commit
ce2ec48665
|
@ -119,6 +119,10 @@ ThemePalette {
|
|||
miscColor10: getColor('brown3')
|
||||
miscColor11: getColor('yellow2')
|
||||
|
||||
property QtObject statusAppLayout: QtObject {
|
||||
property color backgroundColor: baseColor3
|
||||
}
|
||||
|
||||
property QtObject statusAppNavBar: QtObject {
|
||||
property color backgroundColor: baseColor5
|
||||
}
|
||||
|
|
|
@ -119,6 +119,10 @@ ThemePalette {
|
|||
miscColor10: getColor('brown')
|
||||
miscColor11: getColor('brown2')
|
||||
|
||||
property QtObject statusAppLayout: QtObject {
|
||||
property color backgroundColor: white
|
||||
}
|
||||
|
||||
property QtObject statusAppNavBar: QtObject {
|
||||
property color backgroundColor: baseColor4
|
||||
}
|
||||
|
|
|
@ -80,6 +80,10 @@ QtObject {
|
|||
property color miscColor10
|
||||
property color miscColor11
|
||||
|
||||
property QtObject statusAppLayout: QtObject {
|
||||
property color backgroundColor
|
||||
}
|
||||
|
||||
property QtObject statusAppNavBar: QtObject {
|
||||
property color backgroundColor
|
||||
}
|
||||
|
|
|
@ -0,0 +1,49 @@
|
|||
import QtQuick 2.13
|
||||
import QtQuick.Layouts 1.13
|
||||
import QtQuick.Controls 2.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Rectangle {
|
||||
id: statusAppLayout
|
||||
|
||||
implicitWidth: 900
|
||||
implicitHeight: 600
|
||||
|
||||
color: Theme.palette.statusAppLayout.backgroundColor
|
||||
|
||||
property StatusAppNavBar appNavBar
|
||||
property Item appView
|
||||
|
||||
onAppNavBarChanged: {
|
||||
if (!!appNavBar) {
|
||||
appNavBar.parent = appNavBarSlot
|
||||
}
|
||||
}
|
||||
|
||||
onAppViewChanged: {
|
||||
if (!!appView) {
|
||||
appView.parent = appViewSlot
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: rowLayout
|
||||
spacing: 0
|
||||
height: statusAppLayout.height
|
||||
width: statusAppLayout.width
|
||||
|
||||
Item {
|
||||
id: appNavBarSlot
|
||||
height: statusAppLayout.height
|
||||
width: 78
|
||||
}
|
||||
|
||||
Item {
|
||||
id: appViewSlot
|
||||
height: statusAppLayout.height
|
||||
width: statusAppLayout.width - appNavBarSlot.width
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
module StatusQ.Layout
|
||||
|
||||
StatusAppLayout 0.1 StatusAppLayout.qml
|
||||
StatusAppNavBar 0.1 StatusAppNavBar.qml
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue