feat(Layout): introduce `StatusAppTwoPanelLayout`

This is a component to easily render two panel layouts used in different
view of Status Desktop. Designed to be used with `StatusAppLayout`

Usage:

```qml
import StatusQ.Layout 0.1

StatusAppLayout {
    ...
    appView: StackView {
        anchors.fill: parent

        initialItem: Component {

            StatusAppTwoPanelLayout {

                leftPanel: Component {...}
                rightPanel: Component {...}
            }
        }
    }
}
```

Closes: #78
This commit is contained in:
Pascal Precht 2021-05-26 15:18:37 +02:00 committed by Michał Cieślak
parent ce2ec48665
commit 5b4a5d780a
5 changed files with 50 additions and 0 deletions

View File

@ -121,6 +121,7 @@ ThemePalette {
property QtObject statusAppLayout: QtObject { property QtObject statusAppLayout: QtObject {
property color backgroundColor: baseColor3 property color backgroundColor: baseColor3
property color rightPanelBackgroundColor: baseColor3
} }
property QtObject statusAppNavBar: QtObject { property QtObject statusAppNavBar: QtObject {

View File

@ -121,6 +121,7 @@ ThemePalette {
property QtObject statusAppLayout: QtObject { property QtObject statusAppLayout: QtObject {
property color backgroundColor: white property color backgroundColor: white
property color rightPanelBackgroundColor: white
} }
property QtObject statusAppNavBar: QtObject { property QtObject statusAppNavBar: QtObject {

View File

@ -82,6 +82,7 @@ QtObject {
property QtObject statusAppLayout: QtObject { property QtObject statusAppLayout: QtObject {
property color backgroundColor property color backgroundColor
property color rightPanelBackgroundColor
} }
property QtObject statusAppNavBar: QtObject { property QtObject statusAppNavBar: QtObject {

View File

@ -0,0 +1,46 @@
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
Item {
id: statusAppTwoPanelLayout
implicitWidth: 822
implicitHeight: 600
property Item leftPanel
property Item rightPanel
onLeftPanelChanged: {
if (!!leftPanel) {
leftPanel.parent = leftPanelSlot
}
}
onRightPanelChanged: {
if (!!rightPanel) {
rightPanel.parent = rightPanelSlot
}
}
Row {
anchors.fill: parent
Rectangle {
id: leftPanelSlot
height: parent.height
width: 304
color: Theme.palette.baseColor4
}
Rectangle {
id: rightPanelSlot
height: parent.height
width: parent.width - leftPanelSlot.width
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
}
}
}

View File

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