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:
Pascal Precht 2021-05-26 14:37:47 +02:00 committed by Pascal Precht
parent 44b275f23d
commit 554998dc34
5 changed files with 62 additions and 0 deletions

View File

@ -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
}

View File

@ -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
}

View File

@ -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
}

View File

@ -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
}
}
}

View File

@ -1,5 +1,6 @@
module StatusQ.Layout
StatusAppLayout 0.1 StatusAppLayout.qml
StatusAppNavBar 0.1 StatusAppNavBar.qml