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 32167ef44e
8 changed files with 279 additions and 207 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components/StyledButton.qml
View file

@ -8,6 +8,7 @@ Button {
property alias radius: rectangle.radius
font.pixelSize: Styling.typography.textSize.base
font.family: Styling.typography.fontFamily
verticalPadding: 6
horizontalPadding: 8

1
components/StyledIconButton.qml
View file

@ -22,6 +22,7 @@ RoundButton {
id: icon
font: control.font
text: control.text
verticalAlignment: Text.AlignVCenter
color: control.color
Behavior on color {
ColorAnimation {

8
components/StyledTabBar.qml Normal file
View file

@ -0,0 +1,8 @@
import QtQuick
import QtQuick.Controls.Basic
TabBar {
id: control
background: Item {}
}

44
components/StyledTabButton.qml Normal file
View file

@ -0,0 +1,44 @@
import qs.config
import QtQuick
import QtQuick.Controls.Basic
TabButton {
id: control
contentItem: Text {
id: icon
font.pixelSize: Styling.typography.textSize.base
font.family: Styling.typography.fontFamily
text: control.text
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: control.hovered ? Styling.theme.primarycontent : Styling.theme.basecontent
Behavior on color {
ColorAnimation {
duration: Styling.animations.speed.normal
}
}
rotation: control.rotation
Behavior on rotation {
RotationAnimation {
duration: Styling.animations.speed.slow
easing.type: Easing.OutQuad
}
}
}
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()
}
}
}

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

@ -0,0 +1,34 @@
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: "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"
}
}
}

233
modules/storybook/Storybook.qml
View file

@ -1,22 +1,20 @@
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
import Quickshell.Widgets
StyledPanelWindow {
id: root
name: "storybook"
visible: Visibility.storybook
implicitWidth: rect.width
implicitHeight: rect.height
implicitWidth: 500
implicitHeight: 600
WlrLayershell.layer: WlrLayer.Top
WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
@ -29,215 +27,44 @@ StyledPanelWindow {
}
}
WrapperItem {
id: rect
ColumnLayout {
id: layout
margin: 48
anchors.fill: parent
spacing: 0
GridLayout {
id: grid
flow: GridLayout.TopToBottom
columns: 2
rows: 10
StyledText {
Layout.columnSpan: grid.columns
Layout.alignment: Qt.AlignHCenter
StyledTabBar {
id: tabs
Layout.fillWidth: true
StyledTabButton {
text: "Fields"
}
StyledTabButton {
text: "Selectors"
}
StyledTabButton {
text: "Components"
font.pixelSize: 24
font.bold: true
font.underline: true
bottomPadding: 24
}
ColumnLayout {
StyledText {
text: "Icon Button"
font.pixelSize: 18
}
StyledIconButton {
text: Styling.lucide.icons.square
}
}
ColumnLayout {
StyledText {
text: "Theme Selector"
font.pixelSize: 18
}
RowLayout {
Repeater {
model: Theme.themes
delegate: StyledButton {
required property var modelData
text: modelData
onClicked: Theme.currentTheme = modelData
}
}
}
}
StackLayout {
currentIndex: tabs.currentIndex
ColumnLayout {
StyledText {
text: "Switch"
font.pixelSize: 18
ScrollView {
Layout.maximumHeight: 400
padding: 36
Fields {}
}
StyledSwitch {
text: "Enable"
ScrollView {
Layout.maximumHeight: 400
padding: 36
Selectors {}
}
ScrollView {
Layout.maximumHeight: 400
padding: 36
Components {}
}
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()
}
}
}