diff --git a/storybook/CMakeLists.txt b/storybook/CMakeLists.txt index 896f9800f6d..0bbf243c67d 100644 --- a/storybook/CMakeLists.txt +++ b/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) diff --git a/storybook/PageOverlay.qml b/storybook/PageOverlay.qml new file mode 100644 index 00000000000..072718384ad --- /dev/null +++ b/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 + } + } +} diff --git a/storybook/PageOverlayPanel.qml b/storybook/PageOverlayPanel.qml new file mode 100644 index 00000000000..d14b16fe5a0 --- /dev/null +++ b/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() + } + } +} diff --git a/storybook/main.qml b/storybook/main.qml index 44cc6f1caca..f5916271dd2 100644 --- a/storybook/main.qml +++ b/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() + } } } diff --git a/storybook/pages/NotificationAvatarEditor.qml b/storybook/pages/NotificationAvatarEditor.qml index 26192f2fa7e..6ab67cfa4d5 100644 --- a/storybook/pages/NotificationAvatarEditor.qml +++ b/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 } diff --git a/storybook/pages/NotificationCardBaseEditor.qml b/storybook/pages/NotificationCardBaseEditor.qml index 2bb7c0616fc..8275dd080e8 100644 --- a/storybook/pages/NotificationCardBaseEditor.qml +++ b/storybook/pages/NotificationCardBaseEditor.qml @@ -16,7 +16,8 @@ Control { property int maxCardWidth: 400 background: Rectangle { - color: Theme.palette.directColor8 + color: "lightgray" + opacity: 0.2 radius: 8 } @@ -28,7 +29,7 @@ Control { Layout.topMargin: Theme.padding Layout.leftMargin: Theme.padding Layout.bottomMargin: Theme.padding - text: "LAYOUT AND TEXT SIZES" + text: "LAYOUT" font.weight: Font.Bold } @@ -39,61 +40,6 @@ Control { checked: true } - Label { - text: "Text Size" - Layout.leftMargin: Theme.padding - font.weight: Font.Bold - } - - RadioButton { - Layout.leftMargin: Theme.padding - text: "XS" - onCheckedChanged: { - ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXS) - } - } - - RadioButton { - Layout.leftMargin: Theme.padding - text: "S" - onCheckedChanged: { - ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeS) - } - } - - RadioButton { - Layout.leftMargin: Theme.padding - text: "M" - checked: true - onCheckedChanged: { - ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeM) - } - } - - RadioButton { - Layout.leftMargin: Theme.padding - text: "L" - onCheckedChanged: { - ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeL) - } - } - - RadioButton { - Layout.leftMargin: Theme.padding - text: "XL" - onCheckedChanged: { - ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXL) - } - } - - RadioButton { - Layout.leftMargin: Theme.padding - text: "XXL" - onCheckedChanged: { - ThemeUtils.setFontSize(Window.window, ThemeUtils.FontSize.FontSizeXXL) - } - } - Label { text: "Card width" Layout.leftMargin: Theme.padding diff --git a/storybook/pages/NotificationCardPage.qml b/storybook/pages/NotificationCardPage.qml index 7d7a0c39c8e..9dd13aeaf02 100644 --- a/storybook/pages/NotificationCardPage.qml +++ b/storybook/pages/NotificationCardPage.qml @@ -106,6 +106,8 @@ SplitView { clip: true Pane { + Theme.padding: Theme.defaultPadding + ColumnLayout { width: scroll.width diff --git a/storybook/pages/NotificationContentBlockEditor.qml b/storybook/pages/NotificationContentBlockEditor.qml index 3f8f659b54a..5c94d6fc18d 100644 --- a/storybook/pages/NotificationContentBlockEditor.qml +++ b/storybook/pages/NotificationContentBlockEditor.qml @@ -22,7 +22,8 @@ Control { property bool fullEditorVisible: true background: Rectangle { - color: Theme.palette.directColor8 + color: "lightgray" + opacity: 0.2 radius: 8 } diff --git a/storybook/pages/NotificationContextRowEditor.qml b/storybook/pages/NotificationContextRowEditor.qml index fad982d835a..c6f4144fdaa 100644 --- a/storybook/pages/NotificationContextRowEditor.qml +++ b/storybook/pages/NotificationContextRowEditor.qml @@ -31,7 +31,8 @@ Control { property bool areColorEditorsVisible: true background: Rectangle { - color: Theme.palette.directColor8 + color: "lightgray" + opacity: 0.2 radius: 8 } diff --git a/storybook/pages/NotificationHeaderRowEditor.qml b/storybook/pages/NotificationHeaderRowEditor.qml index 6f882614946..f0d4adc53be 100644 --- a/storybook/pages/NotificationHeaderRowEditor.qml +++ b/storybook/pages/NotificationHeaderRowEditor.qml @@ -20,7 +20,8 @@ Control { property bool areColorEditorsVisible: true background: Rectangle { - color: Theme.palette.directColor8 + color: "lightgray" + opacity: 0.2 radius: 8 } diff --git a/storybook/resources.qrc b/storybook/resources.qrc index 5f6483ac33f..79f3b017f79 100644 --- a/storybook/resources.qrc +++ b/storybook/resources.qrc @@ -1,5 +1,7 @@ + PageOverlay.qml + PageOverlayPanel.qml main.qml diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml index f29bc65048d..8ebcad20178 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemeUtils.qml @@ -56,25 +56,38 @@ QtObject { } } + readonly property int fontSizeOffsetXS: -2 + readonly property int fontSizeOffsetS: -1 + readonly property int fontSizeOffsetM: 0 + readonly property int fontSizeOffsetL: 1 + readonly property int fontSizeOffsetXL: 2 + readonly property int fontSizeOffsetXXL: 3 + + readonly property real paddingFactorXXS: 0.4 + readonly property real paddingFactorXS: 0.6 + readonly property real paddingFactorS: 0.8 + readonly property real paddingFactorM: 1 + readonly property real paddingFactorL: 1.2 + function setFontSize(target: QtObject, fontSize: int) { switch (fontSize) { case ThemeUtils.FontSizeXS: - target.Theme.fontSizeOffset = -2 + target.Theme.fontSizeOffset = fontSizeOffsetXS break case ThemeUtils.FontSizeS: - target.Theme.fontSizeOffset = -1 + target.Theme.fontSizeOffset = fontSizeOffsetS break case ThemeUtils.FontSizeM: - target.Theme.fontSizeOffset = 0 + target.Theme.fontSizeOffset = fontSizeOffsetM break case ThemeUtils.FontSizeL: - target.Theme.fontSizeOffset = 1 + target.Theme.fontSizeOffset = fontSizeOffsetL break case ThemeUtils.FontSizeXL: - target.Theme.fontSizeOffset = 2 + target.Theme.fontSizeOffset = fontSizeOffsetXL break case ThemeUtils.FontSizeXXL: - target.Theme.fontSizeOffset = 3 + target.Theme.fontSizeOffset = fontSizeOffsetXXL break } } @@ -82,19 +95,19 @@ QtObject { function setPaddingFactor(target: QtObject, paddingFactor: int) { switch (paddingFactor) { case ThemeUtils.PaddingXXS: - target.Theme.padding = target.Theme.defaultPadding * 0.4 + target.Theme.padding = target.Theme.defaultPadding * paddingFactorXXS break case ThemeUtils.PaddingXS: - target.Theme.padding = target.Theme.defaultPadding * 0.6 + target.Theme.padding = target.Theme.defaultPadding * paddingFactorXS break case ThemeUtils.PaddingS: - target.Theme.padding = target.Theme.defaultPadding * 0.8 + target.Theme.padding = target.Theme.defaultPadding * paddingFactorS break case ThemeUtils.PaddingM: - target.Theme.padding = target.Theme.defaultPadding + target.Theme.padding = target.Theme.defaultPadding * paddingFactorM break case ThemeUtils.PaddingL: - target.Theme.padding = target.Theme.defaultPadding * 1.2 + target.Theme.padding = target.Theme.defaultPadding * paddingFactorL break } }