tabbbss are still kinda fucked

This commit is contained in:
Benjamin Palko 2025-09-16 08:48:23 -04:00
parent 9d6a88aa43
commit c76f29345e
4 changed files with 122 additions and 58 deletions

View file

@ -5,6 +5,7 @@ TabBar {
id: control id: control
property alias orientation: view.orientation property alias orientation: view.orientation
spacing: 12
contentItem: Item { contentItem: Item {
ListView { ListView {

View file

@ -6,6 +6,8 @@ TabButton {
id: control id: control
property alias radius: rectangle.radius property alias radius: rectangle.radius
padding: 10
radius: Styling.theme.radiusField
contentItem: Text { contentItem: Text {
font.pixelSize: Styling.typography.textSize.base font.pixelSize: Styling.typography.textSize.base

View file

@ -1,7 +1,9 @@
import qs.components import qs.components
import qs.config
import qs.services import qs.services
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Wayland import Quickshell.Wayland
@ -13,6 +15,7 @@ StyledPanelWindow {
visible: Visibility.configuration visible: Visibility.configuration
implicitWidth: 800 implicitWidth: 800
implicitHeight: 400 implicitHeight: 400
background.color: Styling.theme.base200
WlrLayershell.layer: WlrLayer.Top WlrLayershell.layer: WlrLayer.Top
WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None WlrLayershell.keyboardFocus: window.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@ -32,19 +35,39 @@ StyledPanelWindow {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.right: view.left anchors.right: view.left
implicitWidth: 200 implicitWidth: 150
orientation: ListView.Vertical orientation: ListView.Vertical
StyledTabButton { Repeater {
anchors.left: parent.left model: views.data
anchors.right: parent.right delegate: StyledTabButton {
id: tabButton
text: "Audio" required property ConfigurationView modelData
} anchors.left: parent.left
StyledTabButton { anchors.right: parent.right
anchors.left: parent.left contentItem: RowLayout {
anchors.right: parent.right states: [
text: "Styling" 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.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.left: tabs.right anchors.left: tabs.right
anchors.topMargin: 4
anchors.rightMargin: 4
anchors.bottomMargin: 4
clip: true clip: true
orientation: Qt.Vertical orientation: Qt.Vertical
currentIndex: tabs.currentIndex currentIndex: tabs.currentIndex
ScrollView { background: Rectangle {
padding: 24 color: Styling.theme.base100
AudioView {} radius: Styling.theme.radiusBox
} }
ScrollView {
padding: 24 Repeater {
StylingView {} 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
}
} }

View file

@ -1,10 +1,10 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior: Bound
import qs.components import qs.components
import qs.config
import qs.services import qs.services
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Wayland import Quickshell.Wayland
@ -16,6 +16,8 @@ StyledPanelWindow {
implicitWidth: 500 implicitWidth: 500
implicitHeight: 600 implicitHeight: 600
background.color: Styling.theme.base200
WlrLayershell.layer: WlrLayer.Top WlrLayershell.layer: WlrLayer.Top
WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@ -27,50 +29,51 @@ StyledPanelWindow {
} }
} }
Item { StyledTabBar {
id: layout id: tabs
anchors.fill: parent anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: view.top
implicitHeight: 40
StyledTabBar { StyledTabButton {
id: tabs text: "Fields"
anchors.top: parent.top }
anchors.left: parent.left StyledTabButton {
anchors.right: parent.right text: "Selectors"
anchors.bottom: view.top }
StyledTabButton {
text: "Components"
}
}
StyledTabButton { SwipeView {
text: "Fields" id: view
}
StyledTabButton { anchors.top: tabs.bottom
text: "Selectors" anchors.left: parent.left
} anchors.right: parent.right
StyledTabButton { anchors.bottom: parent.bottom
text: "Components"
} currentIndex: tabs.currentIndex
background: Rectangle {
color: Styling.theme.base100
radius: Styling.theme.radiusBox
} }
SwipeView { ScrollView {
id: view padding: 36
Fields {}
anchors.top: tabs.bottom }
anchors.left: parent.left ScrollView {
anchors.right: parent.right padding: 36
anchors.bottom: parent.bottom Selectors {}
}
currentIndex: tabs.currentIndex ScrollView {
padding: 36
ScrollView { Components {}
padding: 36
Fields {}
}
ScrollView {
padding: 36
Selectors {}
}
ScrollView {
padding: 36
Components {}
}
} }
} }
} }