status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/storybook/pages/StatusButtonPage.qml

315 lines
12 KiB
QML
Raw Normal View History

chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
isRoundIcon: true
textFillWidth: ctrlFillWidth.checked
}
}
Label {
feat[StatusButton] missing green/success state - implemented the missing `StatusBaseButton.Type.Success` state and colors for both `StatusButton` and `StatusFlatButton` - use a `switch` instead of a waterfall of ternaries - adjust storybook for the new case Fixed #13622
2024-02-19 13:32:58 +00:00
text: "StatusFlatButton"
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
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
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
tooltip.text: ctrlTooltip.text
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
textPosition: d.effectiveTextPosition
type: ctrlType.currentIndex
loading: ctrlLoading.checked
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
loadingWithText: ctrlLoadingWithText.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
enabled: ctrlEnabled.checked
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
interactive: ctrlInteractive.checked
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
isRoundIcon: true
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"
}
}
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
RowLayout {
Label { text: "Tooltip:" }
TextField {
id: ctrlTooltip
placeholderText: "Tooltip"
text: "Sample tooltip"
}
}
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
RowLayout {
Label { text: "Type:" }
ComboBox {
id: ctrlType
feat[StatusButton] missing green/success state - implemented the missing `StatusBaseButton.Type.Success` state and colors for both `StatusButton` and `StatusFlatButton` - use a `switch` instead of a waterfall of ternaries - adjust storybook for the new case Fixed #13622
2024-02-19 13:32:58 +00:00
model: ["Normal", "Danger", "Primary", "Warning", "Success"] // enum StatusBaseButton.Type.xxx
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
}
}
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"
}
feat(StatusButton) Add support to show text when button is loading - add a secondary "loading" state (`loadingWithText`), that is show the loading indicator next to the text - simplify the StatusBaseButton layout (esp. handling the overall opacity/visibility) - add a QML test suite; the code was becoming too complex and adding a simple boolean prop was getting "dangerous" - port the SwapModal to use the new `loadingWithText` property Fixes #15313
2024-08-19 09:00:35 +00:00
Switch {
id: ctrlLoadingWithText
text: "Loading with text"
}
fix(StatusBaseButton): adapt to handle actions when it is disabled - add an `interactive` property as a drop-in replacement for `enabled`; the UI looks "disabled" but can still display e.g. a tooltip or some loading animation - add the ability to display a tooltip - remove DisabledTooltipButton and replace it with a regular `Status(Flat)Button`, using the above new features - update storybook with the new `interactive` switch Fixes #10185
2024-03-12 15:44:27 +00:00
Switch {
id: ctrlInteractive
text: "Interactive"
checked: true
}
chore: Update StatusBaseButton content item layout - introduce StatusButton storybook page with controls to play around with the its options and variants - StatusBaseButton: make the content item horizontally centered by default - StatusBaseButton: remove `textAlignment` and fix `textFillWidth` for the intended usage - fixup usage of the 2 above options which were introduced merely as a workaround, mostly in wallet + corresponding storybook pages Fixes #10903
2023-06-18 12:47:24 +00:00
Switch {
id: ctrlEnabled
text: "Enabled"
checked: true
}
}
}
}
}
Storybook: `PagesModel.qml` removed, adding new pages simplified Closes: #11716
2023-07-31 12:21:14 +00:00
// category: Controls
chore(Storybook): Figma links moved from figma.json to pages Closes: #12229
2023-10-03 11:56:30 +00:00
// 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