From 5b4a5d780a3c3d023cee4eae2fdbf6620ffd6a44 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Wed, 26 May 2021 15:18:37 +0200
Subject: [PATCH] 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
---
 .../StatusQ/Core/Theme/StatusDarkTheme.qml    |  1 +
 .../StatusQ/Core/Theme/StatusLightTheme.qml   |  1 +
 .../src/StatusQ/Core/Theme/ThemePalette.qml   |  1 +
 .../Layout/StatusAppTwoPanelLayout.qml        | 46 +++++++++++++++++++
 ui/StatusQ/src/StatusQ/Layout/qmldir          |  1 +
 5 files changed, 50 insertions(+)
 create mode 100644 ui/StatusQ/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml

diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
index 896e7fc3f2..0edfcd9e4b 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
@@ -121,6 +121,7 @@ ThemePalette {
 
     property QtObject statusAppLayout: QtObject {
         property color backgroundColor: baseColor3
+        property color rightPanelBackgroundColor: baseColor3
     }
 
     property QtObject statusAppNavBar: QtObject {
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
index 336e584b95..2e053918bf 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
@@ -121,6 +121,7 @@ ThemePalette {
 
     property QtObject statusAppLayout: QtObject {
         property color backgroundColor: white
+        property color rightPanelBackgroundColor: white
     }
 
     property QtObject statusAppNavBar: QtObject {
diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
index e7838ae987..6b68089979 100644
--- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
+++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
@@ -82,6 +82,7 @@ QtObject {
 
     property QtObject statusAppLayout: QtObject {
         property color backgroundColor
+        property color rightPanelBackgroundColor
     }
 
     property QtObject statusAppNavBar: QtObject {
diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml b/ui/StatusQ/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml
new file mode 100644
index 0000000000..ab4a29f224
--- /dev/null
+++ b/ui/StatusQ/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml
@@ -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
+        }
+    }
+}
diff --git a/ui/StatusQ/src/StatusQ/Layout/qmldir b/ui/StatusQ/src/StatusQ/Layout/qmldir
index 12f1ba4b83..0cccfc764a 100644
--- a/ui/StatusQ/src/StatusQ/Layout/qmldir
+++ b/ui/StatusQ/src/StatusQ/Layout/qmldir
@@ -2,5 +2,6 @@ module StatusQ.Layout
 
 StatusAppLayout 0.1 StatusAppLayout.qml
 StatusAppNavBar 0.1 StatusAppNavBar.qml
+StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml