make storybook a tabbed window
This commit is contained in:
Benjamin Palko
parent
8aced615ce
commit
7cffff00be
6 changed files with 246 additions and 196 deletions
11
components/StyledTabBar.qml
Normal file
11
components/StyledTabBar.qml
Normal 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
24
components/StyledTabButton.qml
Normal 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
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
33
modules/storybook/Fields.qml
Normal file
33
modules/storybook/Fields.qml
Normal 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
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,210 +34,35 @@ StyledPanelWindow {
|
|||
|
||||
margin: 48
|
||||
|
||||
GridLayout {
|
||||
id: grid
|
||||
ColumnLayout {
|
||||
spacing: 0
|
||||
|
||||
flow: GridLayout.TopToBottom
|
||||
columns: 2
|
||||
rows: 10
|
||||
|
||||
StyledText {
|
||||
Layout.columnSpan: grid.columns
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
StyledTabBar {
|
||||
id: tabs
|
||||
Layout.fillWidth: true
|
||||
TabButton {
|
||||
text: "Fields"
|
||||
}
|
||||
TabButton {
|
||||
text: "Selectors"
|
||||
}
|
||||
TabButton {
|
||||
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
|
||||
StackLayout {
|
||||
currentIndex: tabs.currentIndex
|
||||
Components {
|
||||
visible: false
|
||||
}
|
||||
RowLayout {
|
||||
Repeater {
|
||||
model: Theme.themes
|
||||
delegate: StyledButton {
|
||||
required property var modelData
|
||||
text: modelData
|
||||
onClicked: Theme.currentTheme = modelData
|
||||
Fields {
|
||||
visible: false
|
||||
}
|
||||
Selectors {
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue