From 9adae58589d57f8dda40f8447d1b01678abf1633 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:41:07 -0400 Subject: [PATCH 1/4] swipeview --- modules/storybook/Storybook.qml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 0c0851f..8cc9dcf 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -36,7 +36,7 @@ StyledPanelWindow { anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - anchors.bottom: stack.top + anchors.bottom: view.top StyledTabButton { text: "Fields" @@ -49,8 +49,8 @@ StyledPanelWindow { } } - StackLayout { - id: stack + SwipeView { + id: view anchors.top: tabs.bottom anchors.left: parent.left From 93b3a09a0a3d89e000048d57c39e9287f761a75c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:41:14 -0400 Subject: [PATCH 2/4] remove id --- components/StyledTabButton.qml | 1 - 1 file changed, 1 deletion(-) diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index dea1d40..8cfbbfe 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -6,7 +6,6 @@ TabButton { id: control contentItem: Text { - id: icon font.pixelSize: Styling.typography.textSize.base font.family: Styling.typography.fontFamily text: control.text From 83e9c6f08c3174d9cad7dc49ee2addb1b69ca1ff Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:56:56 -0400 Subject: [PATCH 3/4] override contentItem and alias orientation --- components/StyledTabBar.qml | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index 70a92c1..3c0b933 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -1,8 +1,20 @@ +import qs.config import QtQuick import QtQuick.Controls.Basic TabBar { id: control - background: Item {} + property alias orientation: view.orientation + + contentItem: ListView { + id: view + model: control.contentModel + currentIndex: control.currentIndex + orientation: ListView.Horizontal + boundsBehavior: Flickable.StopAtBounds + } + background: Rectangle { + color: Styling.theme.base200 + } } From 8ba0567d2823c9dd4ab15d1b4a7ebeeb67381875 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Thu, 11 Sep 2025 23:57:12 -0400 Subject: [PATCH 4/4] vertical tabs on configuration --- modules/configuration/Configuration.qml | 83 ++++++++++++------------- modules/configuration/StylingView.qml | 25 ++++++++ modules/configuration/ThemeConfig.qml | 5 -- modules/storybook/Storybook.qml | 2 - 4 files changed, 65 insertions(+), 50 deletions(-) create mode 100644 modules/configuration/StylingView.qml delete mode 100644 modules/configuration/ThemeConfig.qml diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index d64fe74..5684f30 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,9 +1,7 @@ import qs.components -import qs.config import qs.services import QtQuick import QtQuick.Controls -import QtQuick.Layouts StyledPanelWindow { id: window @@ -14,53 +12,52 @@ StyledPanelWindow { implicitWidth: 800 implicitHeight: 400 - ColumnLayout { - spacing: 0 - anchors.fill: parent - StyledText { - Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + StyledTabBar { + id: tabs + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right: view.left - text: "Configurations" - font.pixelSize: Styling.typography.textSize.xl - padding: 8 + implicitWidth: 200 + orientation: ListView.Vertical + + StyledTabButton { + anchors.left: parent.left + anchors.right: parent.right + + text: "General" } - - StyledRectangle { - id: titleBar - - Layout.fillWidth: true - Layout.preferredHeight: 4 + StyledTabButton { + anchors.left: parent.left + anchors.right: parent.right + text: "Styling" } + } + + SwipeView { + id: view + + anchors.top: parent.top + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.left: tabs.right + + clip: true + orientation: Qt.Vertical + + currentIndex: tabs.currentIndex ScrollView { - id: view - - Layout.fillHeight: true - padding: 24 - background: Item {} - - GridLayout { - - columnSpacing: Styling.layout.spacing.xl - - StyledText { - text: "Theme" - // font.bold: true - font.pixelSize: Styling.typography.textSize.lg - } - - StyledComboBox { - currentIndex: Theme.themes.indexOf(Theme.currentTheme) - model: Theme.themes - onActivated: index => { - Theme.currentTheme = Theme.themes[index]; - } - } + padding: 36 + StyledPane { + anchors.left: parent.left + anchors.right: parent.right } } - } - - component Menus: QtObject { - property Component theme + ScrollView { + padding: 36 + StylingView {} + } } } diff --git a/modules/configuration/StylingView.qml b/modules/configuration/StylingView.qml new file mode 100644 index 0000000..731ecaf --- /dev/null +++ b/modules/configuration/StylingView.qml @@ -0,0 +1,25 @@ +import qs.components +import qs.config +import QtQuick +import QtQuick.Layouts + +StyledPane { + GridLayout { + + columnSpacing: Styling.layout.spacing.xl + + StyledText { + text: "Theme" + // font.bold: true + font.pixelSize: Styling.typography.textSize.lg + } + + StyledComboBox { + currentIndex: Theme.themes.indexOf(Theme.currentTheme) + model: Theme.themes + onActivated: index => { + Theme.currentTheme = Theme.themes[index]; + } + } + } +} diff --git a/modules/configuration/ThemeConfig.qml b/modules/configuration/ThemeConfig.qml deleted file mode 100644 index b2e4f9e..0000000 --- a/modules/configuration/ThemeConfig.qml +++ /dev/null @@ -1,5 +0,0 @@ -import QtQuick -import QtQuick.Layouts -import Quickshell - -GridLayout {} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 8cc9dcf..fdb17b6 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -60,7 +60,6 @@ StyledPanelWindow { currentIndex: tabs.currentIndex ScrollView { - Layout.fillWidth: true padding: 36 Fields {} } @@ -69,7 +68,6 @@ StyledPanelWindow { Selectors {} } ScrollView { - Layout.fillWidth: true padding: 36 Components {} }