From c76f29345e5a0c01f139c710bc6603deeb93b805 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 16 Sep 2025 08:48:23 -0400 Subject: [PATCH] tabbbss are still kinda fucked --- components/StyledTabBar.qml | 1 + components/StyledTabButton.qml | 2 + modules/configuration/Configuration.qml | 92 ++++++++++++++++++++----- modules/storybook/Storybook.qml | 85 ++++++++++++----------- 4 files changed, 122 insertions(+), 58 deletions(-) diff --git a/components/StyledTabBar.qml b/components/StyledTabBar.qml index 5459d8b..1067f4a 100644 --- a/components/StyledTabBar.qml +++ b/components/StyledTabBar.qml @@ -5,6 +5,7 @@ TabBar { id: control property alias orientation: view.orientation + spacing: 12 contentItem: Item { ListView { diff --git a/components/StyledTabButton.qml b/components/StyledTabButton.qml index fc78729..8e40026 100644 --- a/components/StyledTabButton.qml +++ b/components/StyledTabButton.qml @@ -6,6 +6,8 @@ TabButton { id: control property alias radius: rectangle.radius + padding: 10 + radius: Styling.theme.radiusField contentItem: Text { font.pixelSize: Styling.typography.textSize.base diff --git a/modules/configuration/Configuration.qml b/modules/configuration/Configuration.qml index 8a6606a..e6e9400 100644 --- a/modules/configuration/Configuration.qml +++ b/modules/configuration/Configuration.qml @@ -1,7 +1,9 @@ import qs.components +import qs.config import qs.services import QtQuick import QtQuick.Controls +import QtQuick.Layouts import Quickshell.Hyprland import Quickshell.Wayland @@ -13,6 +15,7 @@ StyledPanelWindow { visible: Visibility.configuration implicitWidth: 800 implicitHeight: 400 + background.color: Styling.theme.base200 WlrLayershell.layer: WlrLayer.Top WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None @@ -32,19 +35,39 @@ StyledPanelWindow { anchors.bottom: parent.bottom anchors.right: view.left - implicitWidth: 200 + implicitWidth: 150 orientation: ListView.Vertical - StyledTabButton { - anchors.left: parent.left - anchors.right: parent.right - - text: "Audio" - } - StyledTabButton { - anchors.left: parent.left - anchors.right: parent.right - text: "Styling" + Repeater { + model: views.data + delegate: StyledTabButton { + id: tabButton + required property ConfigurationView modelData + anchors.left: parent.left + anchors.right: parent.right + contentItem: RowLayout { + states: [ + State { + when: tabButton.hovered + PropertyChanges { + tabIcon.color: Styling.theme.primarycontent + tabText.color: Styling.theme.primarycontent + } + } + ] + LucideIcon { + id: tabIcon + text: tabButton.modelData.icon + font.pixelSize: Styling.typography.textSize.lg + } + StyledText { + id: tabText + text: tabButton.modelData.title + font.pixelSize: Styling.typography.textSize.lg + } + } + text: tabButton.modelData.title + } } } @@ -55,19 +78,54 @@ StyledPanelWindow { anchors.right: parent.right anchors.bottom: parent.bottom anchors.left: tabs.right + anchors.topMargin: 4 + anchors.rightMargin: 4 + anchors.bottomMargin: 4 clip: true orientation: Qt.Vertical currentIndex: tabs.currentIndex - ScrollView { - padding: 24 - AudioView {} + background: Rectangle { + color: Styling.theme.base100 + radius: Styling.theme.radiusBox } - ScrollView { - padding: 24 - StylingView {} + + Repeater { + model: views.data + delegate: ScrollView { + id: scrollView + required property ConfigurationView modelData + padding: 24 + Loader { + anchors.fill: parent + active: scrollView.modelData.view + sourceComponent: scrollView.modelData.view + } + } } } + + Item { + id: views + + ConfigurationView { + icon: Styling.lucide.icons.audioLines + title: "Audio" + view: AudioView {} + } + + ConfigurationView { + icon: Styling.lucide.icons.swatchBook + title: "Styling" + view: StylingView {} + } + } + + component ConfigurationView: QtObject { + property string icon + property string title + property Component view + } } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index fdb17b6..b0e411f 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -1,10 +1,10 @@ pragma ComponentBehavior: Bound import qs.components +import qs.config import qs.services import QtQuick import QtQuick.Controls -import QtQuick.Layouts import Quickshell.Hyprland import Quickshell.Wayland @@ -16,6 +16,8 @@ StyledPanelWindow { implicitWidth: 500 implicitHeight: 600 + background.color: Styling.theme.base200 + WlrLayershell.layer: WlrLayer.Top WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None @@ -27,50 +29,51 @@ StyledPanelWindow { } } - Item { - id: layout - anchors.fill: parent + StyledTabBar { + id: tabs + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: view.top + implicitHeight: 40 - StyledTabBar { - id: tabs - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: view.top + StyledTabButton { + text: "Fields" + } + StyledTabButton { + text: "Selectors" + } + StyledTabButton { + text: "Components" + } + } - StyledTabButton { - text: "Fields" - } - StyledTabButton { - text: "Selectors" - } - StyledTabButton { - text: "Components" - } + SwipeView { + id: view + + anchors.top: tabs.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + + currentIndex: tabs.currentIndex + + background: Rectangle { + color: Styling.theme.base100 + radius: Styling.theme.radiusBox } - SwipeView { - id: view - - anchors.top: tabs.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - - currentIndex: tabs.currentIndex - - ScrollView { - padding: 36 - Fields {} - } - ScrollView { - padding: 36 - Selectors {} - } - ScrollView { - padding: 36 - Components {} - } + ScrollView { + padding: 36 + Fields {} + } + ScrollView { + padding: 36 + Selectors {} + } + ScrollView { + padding: 36 + Components {} } } }