Storybook: generic, unified theme handling

storybook/CMakeLists.txt

@@ -49,7 +49,7 @@ FetchContent_Declare(
   QmlStorybook
 
   GIT_REPOSITORY https://github.com/status-im/QmlStorybook.git
-  GIT_TAG 6cc84cc5fbafb33398f6d2762c3837b7b18c9a96
+  GIT_TAG 031d8d15e78fbf578888d06958860ba1c07a9736
 )
 FetchContent_MakeAvailable(QmlStorybook)
 

storybook/PageOverlay.qml

@@ -0,0 +1,124 @@
+import QtCore
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+import StatusQ.Core.Theme
+
+Loader {
+    id: root
+
+    function setPage(pageName: string, pageItem: Item) {
+        active = false
+        d.currentPage = pageName
+        d.currentPageItem = pageItem
+        active = true
+    }
+
+    function clear() {
+        root.active = false
+    }
+
+    QtObject {
+        id: d
+
+        property string currentPage
+        property Item currentPageItem
+    }
+
+    active: false
+
+    sourceComponent: Item {
+        RoundButton {
+            id: openPopupButton
+
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.margins: 5
+
+            text: "🎨📏"
+            font.pixelSize: 20
+
+            checkable: true
+            checked: popup.visible
+
+            onClicked: {
+                if (!popup.visible)
+                    popup.open()
+                else
+                    popup.close()
+            }
+        }
+
+        Popup {
+            id: popup
+
+            parent: openPopupButton
+
+            x: -width + parent.width
+            y: parent.height + 5
+
+            closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+            PageOverlayPanel {
+                style: d.currentPageItem.Theme.style
+                themePadding: d.currentPageItem.Theme.padding
+                fontSizeOffset: d.currentPageItem.Theme.fontSizeOffset
+
+                onStyleRequested: style => {
+                    d.currentPageItem.Theme.style = style
+                }
+
+                onPaddingRequested: padding => {
+                    d.currentPageItem.Theme.padding = padding
+                }
+
+                onPaddingFactorRequested: paddingFactor => {
+                    ThemeUtils.setPaddingFactor(d.currentPageItem, paddingFactor)
+                }
+
+                onFontSizeOffsetRequested: fontSizeOffset => {
+                    d.currentPageItem.Theme.fontSizeOffset = fontSizeOffset
+                }
+
+                onFontSizeRequested: fontSize => {
+                    ThemeUtils.setFontSize(d.currentPageItem, fontSize)
+                }
+
+                onResetRequested: {
+                    d.currentPageItem.Theme.style = undefined
+                    d.currentPageItem.Theme.padding = undefined
+                    d.currentPageItem.Theme.fontSizeOffset = undefined
+                }
+            }
+        }
+
+        Component.onCompleted: {
+            if (!settings.initialized) {
+                settings.initialized = true
+            } else {
+                d.currentPageItem.Theme.style = settings.style
+                d.currentPageItem.Theme.padding = settings.padding
+                d.currentPageItem.Theme.fontSizeOffset = settings.fontSizeOffset
+            }
+
+            settings.style
+                    = Qt.binding(() => d.currentPageItem.Theme.style)
+            settings.padding
+                    = Qt.binding(() => d.currentPageItem.Theme.padding)
+            settings.fontSizeOffset
+                    = Qt.binding(() => d.currentPageItem.Theme.fontSizeOffset)
+        }
+
+        Settings {
+            id: settings
+
+            category: "page_" + d.currentPage
+
+            property bool initialized
+            property int style
+            property real padding
+            property int fontSizeOffset
+        }
+    }
+}

storybook/PageOverlayPanel.qml

@@ -0,0 +1,173 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+import StatusQ.Core.Theme
+
+Control {
+    id: root
+
+    property int style // Theme.Style
+    property int fontSizeOffset
+    property real themePadding
+
+    signal styleRequested(int style) // Theme.Style
+
+    signal paddingRequested(int padding)
+    signal paddingFactorRequested(int paddingFactor) // ThemeUtils.PaddingFactor
+
+    signal fontSizeOffsetRequested(int fontSizeOffset)
+    signal fontSizeRequested(int fontSize) // ThemeUtils.FontSize
+
+    signal resetRequested
+
+    contentItem: ColumnLayout {
+        RowLayout {
+
+            Label {
+                text: "Theme:"
+            }
+
+            Flow {
+                Layout.fillWidth: true
+                spacing: 2
+
+                RoundButton {
+                    text: "Light"
+                    checked: root.style === Theme.Style.Light
+
+                    onClicked: root.styleRequested(Theme.Style.Light)
+                }
+
+                RoundButton {
+                    text: "Dark"
+                    checked: root.style === Theme.Style.Dark
+
+                    onClicked: root.styleRequested(Theme.Style.Dark)
+                }
+            }
+        }
+
+        ToolSeparator {
+            orientation: Qt.Horizontal
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            Label {
+                text: "Padding:"
+            }
+
+            Slider {
+                id: paddingSlider
+
+                Layout.fillWidth: true
+
+                from: 0
+                to: 40
+                stepSize: 1
+
+                value: root.themePadding
+
+                onValueChanged: {
+                    if (value !== root.themePadding)
+                        root.paddingRequested(value)
+                }
+            }
+            Label {
+                text: root.themePadding
+            }
+        }
+
+        Flow {
+            Layout.fillWidth: true
+
+            spacing: 2
+
+            Repeater {
+                model: [
+                    "XXS", "XS", "S", "M", "L"
+                ]
+
+                RoundButton {
+                    required property string modelData
+
+                    checked: root.themePadding === Theme.defaultPadding * ThemeUtils["paddingFactor" + modelData]
+
+                    text: modelData
+
+                    onClicked: root.paddingFactorRequested(
+                                   ThemeUtils["Padding" + modelData])
+                }
+            }
+        }
+
+        ToolSeparator {
+            orientation: Qt.Horizontal
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            Label {
+                text: "Font size offset:"
+            }
+
+            Slider {
+                id: fontSizeOffsetSlider
+
+                Layout.fillWidth: true
+
+                from: -4
+                to: 6
+                stepSize: 1
+
+                value: root.fontSizeOffset
+
+
+                onValueChanged: {
+                    if (root.fontSizeOffset !== value)
+                        root.fontSizeOffsetRequested(value)
+                }
+            }
+
+            Label {
+                text: root.fontSizeOffset
+            }
+        }
+
+        Flow {
+            spacing: 2
+
+            Layout.fillWidth: true
+
+            Repeater {
+                model: [
+                    "XS", "S", "M", "L", "XL", "XXL"
+                ]
+
+                RoundButton {
+                    required property string modelData
+
+                    checked: root.fontSizeOffset ===
+                             ThemeUtils["fontSizeOffset" + modelData]
+
+                    text: modelData
+
+                    onClicked: root.fontSizeRequested(ThemeUtils["FontSize" + modelData])
+                }
+            }
+        }
+
+        ToolSeparator {
+            orientation: Qt.Horizontal
+            Layout.fillWidth: true
+        }
+
+        RoundButton {
+            Layout.alignment: Qt.AlignHCenter
+            text: "Reset"
+
+            onClicked: root.resetRequested()
+        }
+    }
+}

storybook/main.qml

@@ -18,17 +18,29 @@ ApplicationWindow {
     visible: true
 
     title: "%1 – %2".arg(storybook.currentPage).arg(Qt.application.displayName)
-    font.pixelSize: Theme.additionalTextSize
 
     // cf. Universal theme kept here as the basic light/dark theme for the app itself
     Universal.theme: storybook.darkMode ? Universal.Dark : Universal.Light
+    font.pixelSize: 13
 
     Storybook {
         id: storybook
 
         anchors.fill: parent
 
-        onDarkModeChanged: ThemeUtils.setTheme(root, darkMode ? ThemeUtils.Style.Dark
-                                                              : ThemeUtils.Style.Light)
+        onCurrentPageItemChanged: {
+            if (currentPageItem)
+                overlay.setPage(currentPage, currentPageItem)
+            else
+                overlay.clear()
+        }
+
+        pageOverlay: PageOverlay {
+            id: overlay
+        }
+
+        Component.onCompleted: {
+            storybook.onCurrentPageItemChanged()
+        }
     }
 }

storybook/pages/NotificationAvatarEditor.qml

@@ -21,7 +21,8 @@ Control {
     property bool  isFullContentAvailable: true
 
     background: Rectangle {
-        color: Theme.palette.directColor8
+        color: "lightgray"
+        opacity: 0.2
         radius: 8
     }