status-desktop/storybook/pages/StatusButtonPage.qml

305 lines
12 KiB
QML
Raw Permalink Normal View History

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import Storybook 1.0
SplitView {
Logs { id: logs }
QtObject {
id: d
readonly property var sizesModel: [StatusBaseButton.Size.Tiny, StatusBaseButton.Size.Small, StatusBaseButton.Size.Large]
readonly property string effectiveEmoji: ctrlEmojiEnabled.checked ? ctrlEmoji.text : ""
readonly property int effectiveTextPosition: ctrlTextPosLeft.checked ? StatusBaseButton.TextPosition.Left
: StatusBaseButton.TextPosition.Right
}
SplitView {
orientation: Qt.Horizontal
SplitView.fillWidth: true
Pane {
SplitView.fillWidth: true
SplitView.fillHeight: true
GridLayout {
anchors.centerIn: parent
rowSpacing: 10
columnSpacing: 10
columns: 4
Label { text: "" }
Label { text: "Tiny" }
Label { text: "Small" }
Label { text: "Large" }
Label {
text: "StatusButton"
Layout.columnSpan: 4
font.bold: true
}
Label { text: "Text only:" }
Repeater {
model: d.sizesModel
delegate: StatusButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
size: modelData
text: ctrlText.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
textFillWidth: ctrlFillWidth.checked
}
}
Label { text: "Icon only:" }
Repeater {
model: d.sizesModel
delegate: StatusButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
size: modelData
icon.name: ctrlIconName.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
textFillWidth: ctrlFillWidth.checked
}
}
Label { text: "Text + icon:" }
Repeater {
model: d.sizesModel
delegate: StatusButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
size: modelData
text: ctrlText.text
icon.name: ctrlIconName.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
textFillWidth: ctrlFillWidth.checked
}
}
Label { text: "Round icon:" }
Repeater {
model: d.sizesModel
delegate: StatusButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
Layout.preferredHeight: width
size: modelData
icon.name: ctrlIconName.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
isRoundIcon: true
radius: height/2
textFillWidth: ctrlFillWidth.checked
}
}
Label {
text: "StatusFlatButton"
Layout.columnSpan: 4
font.bold: true
}
Label { text: "Text only:" }
Repeater {
model: d.sizesModel
delegate: StatusFlatButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
size: modelData
text: ctrlText.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
textFillWidth: ctrlFillWidth.checked
}
}
Label { text: "Icon only:" }
Repeater {
model: d.sizesModel
delegate: StatusFlatButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
size: modelData
icon.name: ctrlIconName.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
textFillWidth: ctrlFillWidth.checked
}
}
Label { text: "Text + icon:" }
Repeater {
model: d.sizesModel
delegate: StatusFlatButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
size: modelData
text: ctrlText.text
icon.name: ctrlIconName.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
textFillWidth: ctrlFillWidth.checked
}
}
Label { text: "Round icon:" }
Repeater {
model: d.sizesModel
delegate: StatusFlatButton {
Layout.preferredWidth: ctrlWidth.value || implicitWidth
Layout.preferredHeight: width
size: modelData
icon.name: ctrlIconName.text
asset.emoji: d.effectiveEmoji
tooltip.text: ctrlTooltip.text
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
enabled: ctrlEnabled.checked
interactive: ctrlInteractive.checked
isRoundIcon: true
radius: height/2
textFillWidth: ctrlFillWidth.checked
}
}
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumWidth: 300
SplitView.preferredWidth: 400
logsView.logText: logs.logText
ColumnLayout {
width: parent.width
RowLayout {
Label { text: "Text:" }
TextField {
id: ctrlText
placeholderText: "Button text"
text: "Foobar"
}
// enum StatusBaseButton.TextPosition.xxx
RadioButton {
id: ctrlTextPosLeft
text: "left"
}
RadioButton {
id: ctrlTextPosRight
text: "right"
checked: true
}
}
RowLayout {
Label { text: "Icon name:" }
TextField {
id: ctrlIconName
placeholderText: "Icon name"
text: "gif"
}
}
RowLayout {
Label { text: "Emoji:" }
TextField {
id: ctrlEmoji
text: "💩"
}
CheckBox {
id: ctrlEmojiEnabled
text: "enabled"
}
}
RowLayout {
Label { text: "Tooltip:" }
TextField {
id: ctrlTooltip
placeholderText: "Tooltip"
text: "Sample tooltip"
}
}
RowLayout {
Label { text: "Type:" }
ComboBox {
id: ctrlType
model: ["Normal", "Danger", "Primary", "Warning", "Success"] // enum StatusBaseButton.Type.xxx
}
}
RowLayout {
Label { text: "Width:" }
SpinBox {
id: ctrlWidth
from: 0
to: 280
value: 0 // 0 == implicitWidth
stepSize: 10
textFromValue: function(value, locale) { return value === 0 ? "Implicit" : value }
}
CheckBox {
id: ctrlFillWidth
text: "Fill width"
}
}
Switch {
id: ctrlLoading
text: "Loading"
}
Switch {
id: ctrlInteractive
text: "Interactive"
checked: true
}
Switch {
id: ctrlEnabled
text: "Enabled"
checked: true
}
}
}
}
}
// category: Controls
// https://www.figma.com/file/MtAO3a7HnEH5xjCDVNilS7/%F0%9F%8E%A8-Design-System-%E2%8E%9C-Desktop?type=design&node-id=1-12&t=UHegCbqAa5K7qUKd-0