make storybook a tabbed window
This commit is contained in:
Benjamin Palko
parent
8aced615ce
commit
32167ef44e
8 changed files with 279 additions and 207 deletions
|
|
@ -8,6 +8,7 @@ Button {
|
||||||
property alias radius: rectangle.radius
|
property alias radius: rectangle.radius
|
||||||
|
|
||||||
font.pixelSize: Styling.typography.textSize.base
|
font.pixelSize: Styling.typography.textSize.base
|
||||||
|
font.family: Styling.typography.fontFamily
|
||||||
verticalPadding: 6
|
verticalPadding: 6
|
||||||
horizontalPadding: 8
|
horizontalPadding: 8
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,7 @@ RoundButton {
|
||||||
id: icon
|
id: icon
|
||||||
font: control.font
|
font: control.font
|
||||||
text: control.text
|
text: control.text
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
color: control.color
|
color: control.color
|
||||||
Behavior on color {
|
Behavior on color {
|
||||||
ColorAnimation {
|
ColorAnimation {
|
||||||
|
|
|
||||||
8
components/StyledTabBar.qml
Normal file
8
components/StyledTabBar.qml
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import QtQuick
|
||||||
|
import QtQuick.Controls.Basic
|
||||||
|
|
||||||
|
TabBar {
|
||||||
|
id: control
|
||||||
|
|
||||||
|
background: Item {}
|
||||||
|
}
|
||||||
44
components/StyledTabButton.qml
Normal file
44
components/StyledTabButton.qml
Normal 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
136
modules/storybook/Components.qml
Normal 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
34
modules/storybook/Fields.qml
Normal 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
21
modules/storybook/Selectors.qml
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
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 QtQuick.Layouts
|
||||||
import Quickshell.Hyprland
|
import Quickshell.Hyprland
|
||||||
import Quickshell.Wayland
|
import Quickshell.Wayland
|
||||||
import Quickshell.Widgets
|
|
||||||
|
|
||||||
StyledPanelWindow {
|
StyledPanelWindow {
|
||||||
id: root
|
id: root
|
||||||
name: "storybook"
|
name: "storybook"
|
||||||
|
|
||||||
visible: Visibility.storybook
|
visible: Visibility.storybook
|
||||||
implicitWidth: rect.width
|
implicitWidth: 500
|
||||||
implicitHeight: rect.height
|
implicitHeight: 600
|
||||||
|
|
||||||
WlrLayershell.layer: WlrLayer.Top
|
WlrLayershell.layer: WlrLayer.Top
|
||||||
WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
|
WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
|
||||||
|
|
@ -29,215 +27,44 @@ StyledPanelWindow {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
WrapperItem {
|
ColumnLayout {
|
||||||
id: rect
|
id: layout
|
||||||
|
|
||||||
margin: 48
|
anchors.fill: parent
|
||||||
|
spacing: 0
|
||||||
|
|
||||||
GridLayout {
|
StyledTabBar {
|
||||||
id: grid
|
id: tabs
|
||||||
|
Layout.fillWidth: true
|
||||||
flow: GridLayout.TopToBottom
|
StyledTabButton {
|
||||||
columns: 2
|
text: "Fields"
|
||||||
rows: 10
|
}
|
||||||
|
StyledTabButton {
|
||||||
StyledText {
|
text: "Selectors"
|
||||||
Layout.columnSpan: grid.columns
|
}
|
||||||
Layout.alignment: Qt.AlignHCenter
|
StyledTabButton {
|
||||||
text: "Components"
|
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 {
|
StackLayout {
|
||||||
StyledText {
|
currentIndex: tabs.currentIndex
|
||||||
text: "Theme Selector"
|
|
||||||
font.pixelSize: 18
|
|
||||||
}
|
|
||||||
RowLayout {
|
|
||||||
Repeater {
|
|
||||||
model: Theme.themes
|
|
||||||
delegate: StyledButton {
|
|
||||||
required property var modelData
|
|
||||||
text: modelData
|
|
||||||
onClicked: Theme.currentTheme = modelData
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ColumnLayout {
|
ScrollView {
|
||||||
StyledText {
|
Layout.maximumHeight: 400
|
||||||
text: "Switch"
|
padding: 36
|
||||||
font.pixelSize: 18
|
Fields {}
|
||||||
}
|
}
|
||||||
|
ScrollView {
|
||||||
StyledSwitch {
|
Layout.maximumHeight: 400
|
||||||
text: "Enable"
|
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()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue