From 41fe72522b853e932df2dba89ca8aaa8cb7b561e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 27 Aug 2025 09:59:49 -0400 Subject: [PATCH 1/3] styled switch --- components/StyledSwitch.qml | 38 +++++++++++++++++++++++++++++++++ modules/storybook/Storybook.qml | 1 + 2 files changed, 39 insertions(+) create mode 100644 components/StyledSwitch.qml diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml new file mode 100644 index 0000000..e83fb24 --- /dev/null +++ b/components/StyledSwitch.qml @@ -0,0 +1,38 @@ +import qs.config +import QtQuick +import QtQuick.Controls + +Switch { + id: control + indicator: Item { + implicitWidth: 48 + implicitHeight: 26 + Rectangle { + implicitWidth: parent.width + implicitHeight: parent.height - 4 + x: control.leftPadding + y: parent.height / 2 - height / 2 + radius: 8 + color: control.checked ? Theme.palette.primary : Theme.palette.base100 + Behavior on color { + ColorAnimation { + duration: 150 + } + } + } + + Rectangle { + x: control.checked ? parent.width - 3 * width / 4 : width / 4 + y: parent.height / 2 - height / 2 + Behavior on x { + NumberAnimation { + duration: 150 + } + } + width: 26 + height: 26 + radius: 8 + color: Theme.palette.basecontent + } + } +} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index d0d91cb..a7df0ee 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -41,6 +41,7 @@ StyledWindow { } ColumnLayout { + StyledSwitch {} Button { id: toolTipButton text: "Hello world!" From a3ef488434bf399ef93d065c1c25b4216bfc60e6 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 27 Aug 2025 11:16:07 -0400 Subject: [PATCH 2/3] styled drawer --- components/StyledDrawer.qml | 26 ++++++++++ modules/storybook/Storybook.qml | 90 ++++++++++++++++++++++++++++++--- 2 files changed, 109 insertions(+), 7 deletions(-) create mode 100644 components/StyledDrawer.qml diff --git a/components/StyledDrawer.qml b/components/StyledDrawer.qml new file mode 100644 index 0000000..aae1b15 --- /dev/null +++ b/components/StyledDrawer.qml @@ -0,0 +1,26 @@ +import qs.config +import QtQuick +import QtQuick.Controls + +Drawer { + id: control + dim: false + background: Rectangle { + Component.onCompleted: { + if (control.edge == Qt.TopEdge) { + bottomLeftRadius = 8; + bottomRightRadius = 8; + } else if (control.edge == Qt.LeftEdge) { + topRightRadius = 8; + bottomRightRadius = 8; + } else if (control.edge == Qt.RightEdge) { + topLeftRadius = 8; + bottomLeftRadius = 8; + } else if (control.edge == Qt.BottomEdge) { + topLeftRadius = 8; + topRightRadius = 8; + } + } + color: Theme.palette.base200 + } +} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index a7df0ee..08f9538 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -26,6 +26,8 @@ StyledWindow { id: rect color: Theme.palette.base300 + implicitWidth: 800 + implicitHeight: 1200 leftMargin: 48 rightMargin: 48 topMargin: 24 @@ -41,15 +43,89 @@ StyledWindow { } ColumnLayout { - StyledSwitch {} - Button { - id: toolTipButton - text: "Hello world!" - StyledToolTip { - visible: toolTipButton.hovered - text: qsTr("Save the active project") + + spacing: 12 + + ColumnLayout { + StyledText { + text: "Switch" + font.pixelSize: 18 + } + StyledSwitch {} + } + + 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: "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() + } + } } From 01f4ecf90f47bb0c4d3c3a9690ee04c0c6f3b7b8 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Wed, 27 Aug 2025 11:34:56 -0400 Subject: [PATCH 3/3] styled slider --- components/StyledSlider.qml | 26 ++++++++++++++++++++++++++ modules/storybook/Storybook.qml | 13 +++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 components/StyledSlider.qml diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml new file mode 100644 index 0000000..343cc6e --- /dev/null +++ b/components/StyledSlider.qml @@ -0,0 +1,26 @@ +import qs.config +import QtQuick +import QtQuick.Controls + +Slider { + id: control + + background: Rectangle { + x: control.leftPadding + y: control.topPadding + control.availableHeight / 2 - height / 2 + implicitWidth: 200 + implicitHeight: 24 + width: control.availableWidth + height: implicitHeight + radius: 8 + color: Theme.palette.base100 + + Rectangle { + width: control.visualPosition * parent.width + height: parent.height + color: Theme.palette.primary + radius: 8 + } + } + handle: null +} diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index 08f9538..f2565dc 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -69,6 +69,19 @@ StyledWindow { } } + ColumnLayout { + StyledText { + text: "Slider" + font.pixelSize: 18 + } + StyledSlider { + id: slider + from: 0 + to: 100 + value: 50 + } + } + ColumnLayout { StyledText { text: "Drawer"