mirror of
https://github.com/status-im/status-desktop.git
synced 2025-02-02 01:38:00 +00:00
c9d415ecfa
- fix a bug where the Switch would start animating if it'd been checked on creation - add the same property `leftSide` to StatusSwitch (just like StatusCheckBox), and use `LayoutMirroring` to perform the visual inversion - fixup margins and padding, removing hardcoded values, according to latest Figma designs - make a difference between a disabled and inactive button by using opacity - provide smooth color transitions - add dedicated StoryBook pages
85 lines
2.1 KiB
QML
85 lines
2.1 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Controls 2.15
|
|
import QtQuick.Layouts 1.15
|
|
|
|
import StatusQ.Controls 0.1
|
|
|
|
import Storybook 1.0
|
|
|
|
SplitView {
|
|
id: root
|
|
|
|
orientation: Qt.Vertical
|
|
Logs { id: logs }
|
|
|
|
Item {
|
|
SplitView.fillWidth: true
|
|
SplitView.fillHeight: true
|
|
|
|
Rectangle {
|
|
width: switchControl.width
|
|
height: switchControl.height
|
|
anchors.centerIn: parent
|
|
color: "transparent"
|
|
border.width: 1
|
|
border.color: "pink"
|
|
|
|
StatusCheckBox {
|
|
id: switchControl
|
|
anchors.centerIn: parent
|
|
text: ctrlWithText.checked ? "Check me out" : ""
|
|
leftSide: !ctrlInverted.checked
|
|
changeCursor: ctrlCursor.checked
|
|
checked: true
|
|
enabled: ctrlEnabled.checked
|
|
tristate: ctrlTristate.checked
|
|
size: ctrlSmall.checked ? StatusCheckBox.Size.Small : StatusCheckBox.Size.Regular
|
|
onClicked: logs.logEvent("clicked()")
|
|
onToggled: logs.logEvent("toggled()")
|
|
}
|
|
}
|
|
}
|
|
|
|
LogsAndControlsPanel {
|
|
SplitView.minimumHeight: 320
|
|
SplitView.preferredHeight: 320
|
|
|
|
logsView.logText: logs.logText
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
|
|
Switch {
|
|
id: ctrlEnabled
|
|
text: "Enabled"
|
|
checked: true
|
|
}
|
|
Switch {
|
|
id: ctrlCursor
|
|
text: "Change cursor"
|
|
checked: true
|
|
}
|
|
Switch {
|
|
id: ctrlInverted
|
|
text: "Inverted"
|
|
}
|
|
Switch {
|
|
id: ctrlSmall
|
|
text: "Small size"
|
|
}
|
|
Switch {
|
|
id: ctrlTristate
|
|
text: "Tristate"
|
|
}
|
|
Switch {
|
|
id: ctrlWithText
|
|
text: "With text"
|
|
checked: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// category: Controls
|
|
// status: good
|