summaryrefslogtreecommitdiff
path: root/components/controls
diff options
context:
space:
mode:
Diffstat (limited to 'components/controls')
-rw-r--r--components/controls/CollapsibleSection.qml85
-rw-r--r--components/controls/SpinBoxRow.qml51
-rw-r--r--components/controls/SwitchRow.qml47
-rw-r--r--components/controls/ToggleButton.qml82
4 files changed, 265 insertions, 0 deletions
diff --git a/components/controls/CollapsibleSection.qml b/components/controls/CollapsibleSection.qml
new file mode 100644
index 0000000..945386c
--- /dev/null
+++ b/components/controls/CollapsibleSection.qml
@@ -0,0 +1,85 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+ColumnLayout {
+ id: root
+
+ required property string title
+ property string description: ""
+ property bool expanded: false
+
+ signal toggleRequested
+
+ spacing: Appearance.spacing.small / 2
+ Layout.fillWidth: true
+
+ Item {
+ id: sectionHeaderItem
+ Layout.fillWidth: true
+ Layout.preferredHeight: sectionHeader.implicitHeight
+
+ ColumnLayout {
+ id: sectionHeader
+ anchors.left: parent.left
+ anchors.right: parent.right
+ spacing: Appearance.spacing.small
+
+ RowLayout {
+ Layout.fillWidth: true
+ spacing: Appearance.spacing.small
+
+ StyledText {
+ Layout.topMargin: Appearance.spacing.large
+ text: root.title
+ font.pointSize: Appearance.font.size.larger
+ font.weight: 500
+ }
+
+ Item {
+ Layout.fillWidth: true
+ }
+
+ MaterialIcon {
+ text: "expand_more"
+ rotation: root.expanded ? 180 : 0
+ color: Colours.palette.m3onSurface
+ Behavior on rotation {
+ Anim {}
+ }
+ }
+ }
+
+ StateLayer {
+ anchors.fill: parent
+ anchors.leftMargin: -Appearance.padding.normal
+ anchors.rightMargin: -Appearance.padding.normal
+ function onClicked(): void {
+ root.toggleRequested();
+ root.expanded = !root.expanded;
+ }
+ }
+
+ StyledText {
+ visible: root.expanded && root.description !== ""
+ text: root.description
+ color: Colours.palette.m3outline
+ Layout.fillWidth: true
+ }
+ }
+ }
+
+ default property alias content: contentColumn.data
+
+ ColumnLayout {
+ id: contentColumn
+ Layout.fillWidth: true
+ visible: root.expanded
+ spacing: Appearance.spacing.small / 2
+ }
+}
+
diff --git a/components/controls/SpinBoxRow.qml b/components/controls/SpinBoxRow.qml
new file mode 100644
index 0000000..a4441c5
--- /dev/null
+++ b/components/controls/SpinBoxRow.qml
@@ -0,0 +1,51 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+ id: root
+
+ required property string label
+ required property real value
+ required property real min
+ required property real max
+ property var onValueModified: function(value) {}
+
+ Layout.fillWidth: true
+ implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+ radius: Appearance.rounding.normal
+ color: Colours.tPalette.m3surfaceContainer
+
+ Behavior on implicitHeight {
+ Anim {}
+ }
+
+ RowLayout {
+ id: row
+
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: Appearance.padding.large
+ spacing: Appearance.spacing.normal
+
+ StyledText {
+ Layout.fillWidth: true
+ text: root.label
+ }
+
+ CustomSpinBox {
+ min: root.min
+ max: root.max
+ value: root.value
+ onValueModified: value => {
+ root.onValueModified(value);
+ }
+ }
+ }
+}
+
diff --git a/components/controls/SwitchRow.qml b/components/controls/SwitchRow.qml
new file mode 100644
index 0000000..a486ee2
--- /dev/null
+++ b/components/controls/SwitchRow.qml
@@ -0,0 +1,47 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+ id: root
+
+ required property string label
+ required property bool checked
+ property var onToggled: function(checked) {}
+
+ Layout.fillWidth: true
+ implicitHeight: row.implicitHeight + Appearance.padding.large * 2
+ radius: Appearance.rounding.normal
+ color: Colours.tPalette.m3surfaceContainer
+
+ Behavior on implicitHeight {
+ Anim {}
+ }
+
+ RowLayout {
+ id: row
+
+ anchors.left: parent.left
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: Appearance.padding.large
+ spacing: Appearance.spacing.normal
+
+ StyledText {
+ Layout.fillWidth: true
+ text: root.label
+ }
+
+ StyledSwitch {
+ checked: root.checked
+ onToggled: {
+ root.onToggled(checked);
+ }
+ }
+ }
+}
+
diff --git a/components/controls/ToggleButton.qml b/components/controls/ToggleButton.qml
new file mode 100644
index 0000000..9d8e094
--- /dev/null
+++ b/components/controls/ToggleButton.qml
@@ -0,0 +1,82 @@
+import ".."
+import qs.components
+import qs.components.effects
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+StyledRect {
+ id: root
+
+ required property bool toggled
+ property string icon
+ property string label
+ property string accent: "Secondary"
+
+ signal clicked
+
+ Layout.preferredWidth: implicitWidth + (toggleStateLayer.pressed ? Appearance.padding.normal * 2 : toggled ? Appearance.padding.small * 2 : 0)
+ implicitWidth: toggleBtnInner.implicitWidth + Appearance.padding.large * 2
+ implicitHeight: toggleBtnIcon.implicitHeight + Appearance.padding.normal * 2
+
+ radius: toggled || toggleStateLayer.pressed ? Appearance.rounding.small : Math.min(width, height) / 2 * Math.min(1, Appearance.rounding.scale)
+ color: toggled ? Colours.palette[`m3${accent.toLowerCase()}`] : Colours.palette[`m3${accent.toLowerCase()}Container`]
+
+ StateLayer {
+ id: toggleStateLayer
+
+ color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+
+ function onClicked(): void {
+ root.clicked();
+ }
+ }
+
+ RowLayout {
+ id: toggleBtnInner
+
+ anchors.centerIn: parent
+ spacing: Appearance.spacing.normal
+
+ MaterialIcon {
+ id: toggleBtnIcon
+
+ visible: !!text
+ fill: root.toggled ? 1 : 0
+ text: root.icon
+ color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+ font.pointSize: Appearance.font.size.large
+
+ Behavior on fill {
+ Anim {}
+ }
+ }
+
+ Loader {
+ asynchronous: true
+ active: !!root.label
+ visible: active
+
+ sourceComponent: StyledText {
+ text: root.label
+ color: root.toggled ? Colours.palette[`m3on${root.accent}`] : Colours.palette[`m3on${root.accent}Container`]
+ }
+ }
+ }
+
+ Behavior on radius {
+ Anim {
+ duration: Appearance.anim.durations.expressiveFastSpatial
+ easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+ }
+ }
+
+ Behavior on Layout.preferredWidth {
+ Anim {
+ duration: Appearance.anim.durations.expressiveFastSpatial
+ easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+ }
+ }
+}
+
generated by cgit v1.2.3-freya (git 2.51.1) at 2026-01-20 20:24:57 +0000