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

make storybook a tabbed window

Browse source
This commit is contained in:
Benjamin Palko 2025-09-07 23:12:11 -04:00
parent 8aced615ce
commit 7cffff00be
6 changed files with 246 additions and 196 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/StyledTabBar.qml Normal file
View file

@ -0,0 +1,11 @@
import qs.config
import QtQuick
import QtQuick.Controls.Basic
TabBar {
id: control
background: Rectangle {
color: Styling.theme.base100
}
}

24
components/StyledTabButton.qml Normal file
View file

@ -0,0 +1,24 @@
import qs.config
import QtQuick
import QtQuick.Controls.Basic
TextArea {
id: control
font.pixelSize: Styling.typography.textSize.base
background: Rectangle {
id: rectangle
color: control.hovered ? Styling.theme.primary : Styling.theme.base200
Behavior on color {
ColorAnimation {
duration: Styling.animations.speed.normal
}
}
radius: Styling.theme.radiusField
}
HoverHandler {
cursorShape: Qt.PointingHandCursor
}
}

136
modules/storybook/Components.qml Normal file
View file

@ -0,0 +1,136 @@
import qs.components
import qs.config
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
GridLayout {
flow: GridLayout.TopToBottom
columns: 2
rows: 10
ColumnLayout {
StyledText {
text: "ToolTip"
font.pixelSize: 18
}
Button {
id: toolTipButton
text: "Hello world!"
StyledToolTip {
visible: toolTipButton.hovered
text: qsTr("Save the active project")
}
}
}
ColumnLayout {
StyledText {
text: "ProgressBar"
font.pixelSize: 18
}
StyledProgressBar {
id: progressBar
indeterminate: true
implicitHeight: 10
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "ListView"
font.pixelSize: 18
}
StyledWrapperRectangle {
border.color: Styling.theme.base100
border.width: 2
StyledListView {
implicitWidth: 200
implicitHeight: 100
model: 10
delegate: StyledText {
text: "Hello world!"
}
}
}
}
ColumnLayout {
StyledText {
text: "Mpris Player Selector"
font.pixelSize: 18
}
MprisPlayerSelector {}
}
ColumnLayout {
StyledText {
text: "Mpris Controller"
font.pixelSize: 18
}
MprisController {
player: Mpris.active ?? null
}
}
ColumnLayout {
StyledText {
text: "Drawer"
font.pixelSize: 18
}
RowLayout {
Button {
text: "Top"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.TopEdge;
drawer.open();
}
}
Button {
text: "Left"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.LeftEdge;
drawer.open();
}
}
Button {
text: "Right"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.RightEdge;
drawer.open();
}
}
Button {
text: "Bottom"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.BottomEdge;
drawer.open();
}
}
}
}
StyledDrawer {
id: drawer
edge: Qt.TopEdge
width: 400
height: 200
Button {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: "Close"
onClicked: drawer.close()
}
}
}

33
modules/storybook/Fields.qml Normal file
View file

@ -0,0 +1,33 @@
import qs.components
import qs.config
import QtQuick
import QtQuick.Layouts
GridLayout {
flow: GridLayout.TopToBottom
columns: 2
rows: 10
ColumnLayout {
StyledText {
text: "Icon Button"
font.pixelSize: 18
}
StyledIconButton {
text: Styling.lucide.icons.square
}
}
ColumnLayout {
StyledText {
text: "Slider"
font.pixelSize: 18
}
StyledSlider {
id: slider
from: 0
to: 100
value: 50
}
}
}

21
modules/storybook/Selectors.qml Normal file
View file

@ -0,0 +1,21 @@
import qs.components
import qs.config
import QtQuick
import QtQuick.Layouts
GridLayout {
flow: GridLayout.TopToBottom
columns: 2
rows: 10
ColumnLayout {
StyledText {
text: "Switch"
font.pixelSize: 18
}
StyledSwitch {
text: "Enable"
}
}
}

217
modules/storybook/Storybook.qml
View file

@ -34,210 +34,35 @@ StyledPanelWindow {
margin: 48 margin: 48
GridLayout { ColumnLayout {
id: grid spacing: 0
flow: GridLayout.TopToBottom StyledTabBar {
columns: 2 id: tabs
rows: 10 Layout.fillWidth: true
TabButton {
StyledText { text: "Fields"
Layout.columnSpan: grid.columns
Layout.alignment: Qt.AlignHCenter
text: "Components"
font.pixelSize: 24
font.bold: true
font.underline: true
bottomPadding: 24
}
ColumnLayout {
StyledText {
text: "Icon Button"
font.pixelSize: 18
} }
StyledIconButton { TabButton {
text: Styling.lucide.icons.square text: "Selectors"
}
TabButton {
text: "Components"
} }
} }
ColumnLayout { StackLayout {
StyledText { currentIndex: tabs.currentIndex
text: "Theme Selector" Components {
font.pixelSize: 18 visible: false
} }
RowLayout { Fields {
Repeater { visible: false
model: Theme.themes }
delegate: StyledButton { Selectors {
required property var modelData visible: false
text: modelData
onClicked: Theme.currentTheme = modelData
}
}
} }
} }
ColumnLayout {
StyledText {
text: "Switch"
font.pixelSize: 18
}
StyledSwitch {
text: "Enable"
}
}
ColumnLayout {
StyledText {
text: "ToolTip"
font.pixelSize: 18
}
Button {
id: toolTipButton
text: "Hello world!"
StyledToolTip {
visible: toolTipButton.hovered
text: qsTr("Save the active project")
}
}
}
ColumnLayout {
StyledText {
text: "Slider"
font.pixelSize: 18
}
StyledSlider {
id: slider
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "ProgressBar"
font.pixelSize: 18
}
StyledProgressBar {
id: progressBar
indeterminate: true
implicitHeight: 10
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "ListView"
font.pixelSize: 18
}
StyledWrapperRectangle {
border.color: Styling.theme.base100
border.width: 2
StyledListView {
implicitWidth: 200
implicitHeight: 100
model: 10
delegate: StyledText {
text: "Hello world!"
}
}
}
}
ColumnLayout {
StyledText {
text: "Mpris Player Selector"
font.pixelSize: 18
}
MprisPlayerSelector {}
}
ColumnLayout {
StyledText {
text: "Mpris Controller"
font.pixelSize: 18
}
MprisController {
player: Mpris.active ?? null
}
}
ColumnLayout {
StyledText {
text: "Popup"
font.pixelSize: 18
}
Button {
id: fileButton
text: "File"
onPressed: menu.visible ? menu.close() : menu.open()
}
}
ColumnLayout {
StyledText {
text: "Drawer"
font.pixelSize: 18
}
RowLayout {
Button {
text: "Top"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.TopEdge;
drawer.open();
}
}
Button {
text: "Left"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.LeftEdge;
drawer.open();
}
}
Button {
text: "Right"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.RightEdge;
drawer.open();
}
}
Button {
text: "Bottom"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.BottomEdge;
drawer.open();
}
}
}
}
}
}
StyledDrawer {
id: drawer
edge: Qt.TopEdge
width: 400
height: 200
Button {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: "Close"
onClicked: drawer.close()
} }
} }
} }