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:
parent
554998dc34
commit
af3ca15b7f
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue