baobeld/lux-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

formatting tabs

Browse source
This commit is contained in:
Benjamin Palko 2025-09-17 11:57:21 -04:00
parent 338e81d3ad
commit 5e82fd906d
3 changed files with 69 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/StyledTabBar.qml
View file

@ -5,20 +5,14 @@ TabBar {
id: control id: control
property alias orientation: view.orientation property alias orientation: view.orientation
spacing: 12
contentItem: Item { contentItem: ListView {
ListView { id: view
id: view model: control.contentModel
anchors.centerIn: parent currentIndex: control.currentIndex
implicitWidth: parent.width - 20 spacing: control.spacing
implicitHeight: parent.height - 20 orientation: ListView.Horizontal
model: control.contentModel boundsBehavior: Flickable.StopAtBounds
currentIndex: control.currentIndex
spacing: control.spacing
orientation: ListView.Horizontal
boundsBehavior: Flickable.StopAtBounds
}
} }
background: Item {} background: Item {}

3
components/StyledTabButton.qml
View file

@ -6,7 +6,7 @@ TabButton {
id: control id: control
property alias radius: rectangle.radius property alias radius: rectangle.radius
padding: 10 padding: 8
radius: Styling.theme.radiusField radius: Styling.theme.radiusField
contentItem: Text { contentItem: Text {
@ -15,7 +15,6 @@ TabButton {
text: control.text text: control.text
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
padding: 6
color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
Behavior on color { Behavior on color {
ColorAnimation { ColorAnimation {

121
modules/configuration/Configuration.qml
View file

@ -4,6 +4,7 @@ import qs.services
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import Quickshell.Widgets
StyledPanelWindow { StyledPanelWindow {
id: window id: window
@ -13,86 +14,86 @@ StyledPanelWindow {
visible: Visibility.configuration visible: Visibility.configuration
implicitWidth: 800 implicitWidth: 800
implicitHeight: 400 implicitHeight: 400
padding: 8
background.color: Styling.theme.base200 background.color: Styling.theme.base200
onFocusedChanged: { onFocusedChanged: {
Visibility.configuration = focused; Visibility.configuration = focused;
} }
StyledTabBar { GridLayout {
id: tabs
anchors.top: parent.top
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.right: view.left
implicitWidth: 150 anchors.fill: parent
orientation: ListView.Vertical
Repeater { StyledTabBar {
model: views.data id: tabs
delegate: StyledTabButton {
id: tabButton Layout.preferredWidth: 150
required property ConfigurationView modelData Layout.fillHeight: true
anchors.left: parent.left Layout.margins: 2
anchors.right: parent.right orientation: ListView.Vertical
contentItem: RowLayout { spacing: 12
states: [
State { Repeater {
when: tabButton.hovered model: views.data
PropertyChanges { delegate: StyledTabButton {
tabIcon.color: Styling.theme.primarycontent id: tabButton
tabText.color: Styling.theme.primarycontent 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
} }
]
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
} }
text: tabButton.modelData.title
} }
} }
}
SwipeView { SwipeView {
id: view id: view
anchors.top: parent.top Layout.fillWidth: true
anchors.right: parent.right Layout.fillHeight: true
anchors.bottom: parent.bottom
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
background: Rectangle { background: Rectangle {
color: Styling.theme.base100 color: Styling.theme.base100
radius: Styling.theme.radiusBox radius: Styling.theme.radiusBox
} }
Repeater { Repeater {
model: views.data model: views.data
delegate: ScrollView { delegate: ScrollView {
id: scrollView id: scrollView
required property ConfigurationView modelData required property ConfigurationView modelData
padding: 24 padding: 24
Loader { Loader {
anchors.fill: parent anchors.fill: parent
active: scrollView.modelData.view active: scrollView.modelData.view
sourceComponent: scrollView.modelData.view sourceComponent: scrollView.modelData.view
}
} }
} }
} }