feat(Storybook): Light/dark mode switch

Moreover:
- load asynchronously switch fixed
- storybook refactored to rely on build-in components only
- some explicit sizes/spacings removed
- some bigger components split into smaller

Closes: #7898

storybook/Storybook/PagesList.qml

@@ -0,0 +1,20 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+ListView {
+    id: root
+
+    spacing: 5
+    clip: true
+
+    property string currentPage
+    signal pageSelected(string page)
+
+    delegate: Button {
+        width: parent.width
+
+        text: model.title
+        checked: root.currentPage === model.title
+        onClicked: root.pageSelected(model.title)
+    }
+}

storybook/Storybook/qmldir

@@ -2,4 +2,5 @@ ImageSelectPopup 1.0 ImageSelectPopup.qml
 Logs 1.0 Logs.qml
 LogsAndControlsPanel 1.0 LogsAndControlsPanel.qml
 LogsView 1.0 LogsView.qml
+PagesList 1.0 PagesList.qml
 singleton StorybookUtils 1.0 StorybookUtils.qml

storybook/main.qml

@@ -1,79 +1,97 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
-
+import QtQuick.Layouts 1.14
-import StatusQ.Core 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
 
 import Qt.labs.settings 1.0
 
+import StatusQ.Core.Theme 0.1
+import Storybook 1.0
 
 ApplicationWindow {
-    id: rootWindow
+    id: root
 
     width: 1450
     height: 840
     visible: true
 
-    StatusSectionLayout {
+    property string currentPage
-        id: mainPageView
 
-        anchors.fill: parent
+    font.pixelSize: 13
-        showHeader: false
 
-        function page(name, fillPage) {
+    ListModel {
-            viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
+        id: pagesModel
-            storeSettings.selected = viewLoader.source
+
+        ListElement {
+             title: "CommunitiesPortalLayout"
+        }
+        ListElement {
+             title: "LoginView"
+        }
     }
 
-        leftPanel: StatusScrollView {
+    SplitView {
         anchors.fill: parent
-            anchors.topMargin: 48
 
-            Column {
+        ColumnLayout {
-                spacing: 0
+            SplitView.preferredWidth: 240
 
             CheckBox {
+                id: loadAsyncCheckBox
+
+                Layout.fillWidth: true
+
                 text: "Load asynchronously"
-                    checked: storeSettings.loadAsynchronously
-
-                    onToggled: storeSettings.loadAsynchronously = checked
             }
 
-                Item { width: 1; height: 30 }
+            CheckBox {
+                id: darkModeCheckBox
 
-                StatusNavigationListItem {
+                Layout.fillWidth: true
-                    title: "CommunitiesPortalLayout"
-                    selected: viewLoader.source.toString().includes(title)
-                    onClicked: mainPageView.page(title);
-                }
 
-                StatusNavigationListItem {
+                text: "Dark mode"
-                    title: "LoginView"
+
-                    selected: viewLoader.source.toString().includes(title)
+                StatusLightTheme { id: lightTheme }
-                    onClicked: mainPageView.page(title);
+                StatusDarkTheme { id: darkTheme }
-                }
+
+                Binding {
+                    target: Theme
+                    property: "palette"
+                    value: darkModeCheckBox.checked ? darkTheme : lightTheme
                 }
             }
 
-        centerPanel: Item {
+            Pane {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                PagesList {
                     anchors.fill: parent
 
+                    currentPage: root.currentPage
+                    model: pagesModel
+
+                    onPageSelected: root.currentPage = page
+                }
+            }
+        }
+
+        Item {
+            SplitView.fillWidth: true
+
             Loader {
                 id: viewLoader
 
                 anchors.fill: parent
                 clip: true
 
-                source: storeSettings.selected
+                source: Qt.resolvedUrl(`./pages/${root.currentPage}Page.qml`)
-                asynchronous: storeSettings.loadAsynchronously
+                asynchronous: loadAsyncCheckBox.checked
                 visible: status === Loader.Ready
 
                 // force reload when `asynchronous` changes
                 onAsynchronousChanged: {
-                    const tmp = storeSettings.selected
+                    active = false
-                    storeSettings.selected = ""
+                    active = true
-                    storeSettings.selected = tmp
                 }
             }
 
@@ -85,9 +103,8 @@ ApplicationWindow {
     }
 
     Settings {
-        id: storeSettings
+        property alias currentPage: root.currentPage
-
+        property alias loadAsynchronously: loadAsyncCheckBox.checked
-        property string selected: ""
+        property alias darkMode: darkModeCheckBox.checked
-        property bool loadAsynchronously: false
     }
 }

storybook/pages/CommunitiesPortalLayoutPage.qml

@@ -1,8 +1,5 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Popups.Dialog 0.1
 
 import AppLayouts.CommunitiesPortal 1.0
 import AppLayouts.CommunitiesPortal.stores 1.0
@@ -69,7 +66,7 @@ SplitView {
             logsView.logText: logs.logText
 
             Row {
-                Text {
+                Label {
                     anchors.verticalCenter: parent.verticalCenter
                     text: "number of communities:"
                 }
@@ -84,12 +81,10 @@ SplitView {
         }
     }
 
-    Control {
+    Pane {
         SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
 
-        font.pixelSize: 13
-
         CommunitiesPortalModelEditor {
             anchors.fill: parent
             model: mockedModel

storybook/pages/CommunitiesPortalModelEditor.qml

@@ -8,7 +8,7 @@ ListView {
     id: root
 
     spacing: 25
-    ScrollBar.vertical: ScrollBar { }
+    ScrollBar.vertical: ScrollBar { x: root.width }
 
     ImageSelectPopup {
         id: iconSelector
@@ -46,17 +46,11 @@ ListView {
         }
     }
 
-    delegate: Rectangle {
+    delegate: ColumnLayout {
-        width: parent.width
+        width: ListView.view.width
-        height: column.implicitHeight
-
-        ColumnLayout {
-            id: column
-
-            width: parent.width
-            spacing: 2
 
         Label {
+            Layout.fillWidth: true
             text: "community id: " + model.communityId
             font.weight: Font.Bold
         }
@@ -99,7 +93,7 @@ ListView {
 
             Rectangle {
                 border.color: 'gray'
-                    Layout.preferredWidth: root.width / 2
+                Layout.fillWidth: true
                 Layout.fillHeight: true
 
                 Image {
@@ -123,7 +117,7 @@ ListView {
 
             Rectangle {
                 border.color: 'gray'
-                    Layout.preferredWidth: root.width / 2
+                Layout.fillWidth: true
                 Layout.fillHeight: true
 
                 Image {
@@ -161,8 +155,6 @@ ListView {
         }
 
         Row {
-                spacing: 4
-
             Label {
                 anchors.verticalCenter: parent.verticalCenter
                 text: "members:\t"
@@ -178,8 +170,6 @@ ListView {
         }
 
         Row {
-                spacing: 4
-
             Label {
                 anchors.verticalCenter: parent.verticalCenter
                 text: "popularity:\t"
@@ -194,5 +184,4 @@ ListView {
             }
         }
     }
-    }
 }

storybook/pages/LoginViewPage.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
 
 import AppLayouts.Onboarding.views 1.0
 import AppLayouts.Onboarding.stores 1.0
@@ -100,8 +99,6 @@ SplitView {
         SplitView.minimumWidth: 300
         SplitView.preferredWidth: 300
 
-        font.pixelSize: 13
-
         // model editor will go here
     }
 }

storybook/qml.qrc

@@ -4,6 +4,7 @@
         <file>Storybook/Logs.qml</file>
         <file>Storybook/LogsAndControlsPanel.qml</file>
         <file>Storybook/LogsView.qml</file>
+        <file>Storybook/PagesList.qml</file>
         <file>Storybook/StorybookUtils.qml</file>
         <file>Storybook/qmldir</file>
         <file>main.qml</file>