mirror of https://github.com/status-im/StatusQ.git
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 color backgroundColor: baseColor3
|
||||
property color rightPanelBackgroundColor: baseColor3
|
||||
}
|
||||
|
||||
property QtObject statusAppNavBar: QtObject {
|
||||
|
|
|
@ -121,6 +121,7 @@ ThemePalette {
|
|||
|
||||
property QtObject statusAppLayout: QtObject {
|
||||
property color backgroundColor: white
|
||||
property color rightPanelBackgroundColor: white
|
||||
}
|
||||
|
||||
property QtObject statusAppNavBar: QtObject {
|
||||
|
|
|
@ -82,6 +82,7 @@ QtObject {
|
|||
|
||||
property QtObject statusAppLayout: QtObject {
|
||||
property color backgroundColor
|
||||
property color rightPanelBackgroundColor
|
||||
}
|
||||
|
||||
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
|
||||
StatusAppNavBar 0.1 StatusAppNavBar.qml
|
||||
StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue