style: improve button, add style tester

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1728888510,
-        "narHash": "sha256-nsNdSldaAyu6PE3YUA+YQLqUDJh+gRbBooMMekZJwvI=",
+        "lastModified": 1736012469,
+        "narHash": "sha256-/qlNWm/IEVVH7GfgAIyP6EsVZI6zjAx1cV5zNyrs+rI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "a3c0b3b21515f74fd2665903d4ce6bc4dc81c77c",
+        "rev": "8f3e1f807051e32d8c95cd12b9b421623850a34d",
         "type": "github"
       },
       "original": {

src/style/Button.qml

@@ -1,15 +1,25 @@
 import QtQuick
 import QtQuick.Controls.Basic as T
+import org.hyprland.style.impl
 
 T.Button {
-  id: control
+    id: control
 
-  background: Rectangle {
-    implicitWidth: 50
-    implicitHeight: 30
-    color: control.down ? Qt.tint(control.palette.button, Qt.alpha(control.palette.highlight, 0.4)) : control.palette.button
-    radius: 10
-    border.color: control.hovered ? control.palette.highlight : control.palette.light
-    border.width: 1
-  }
+    background: Rectangle {
+        implicitWidth: 50
+        implicitHeight: 30
+
+        radius: HyprlandStyle.radius
+        border.width: HyprlandStyle.borderWidth
+
+        MotionBehavior on color { ColorAnimation { duration: 50 } }
+        color: control.down || control.checked
+               ? Qt.tint(control.palette.button, Qt.alpha(control.palette.highlight, 0.4))
+               : control.flat ? "transparent" : control.palette.button
+
+        MotionBehavior on border.color { ColorAnimation { duration: 50 } }
+        border.color: control.hovered || control.highlighted || control.down || control.checked
+                      ? control.palette.highlight
+                      : control.flat ? "transparent" : control.palette.light
+    }
 }

src/style/CMakeLists.txt

@@ -1,9 +1,15 @@
-qt_add_qml_module(hyprland-quick-style
+add_subdirectory(impl)
+
+qt_add_qml_module(hyprland-quick-style SHARED
     URI org.hyprland.style
     VERSION 0.1
-    IMPORTS QtQuick.Controls.Basic
+    IMPORTS
+        org.hyprland.style.impl
+        QtQuick.Controls.Basic
     QML_FILES
         Button.qml
 )
 
 install_qml_module(hyprland-quick-style)
+
+add_subdirectory(test)

src/style/impl/CMakeLists.txt

@@ -0,0 +1,11 @@
+set_source_files_properties(HyprlandStyle.qml PROPERTIES QT_QML_SINGLETON_TYPE TRUE)
+
+qt_add_qml_module(hyprland-quick-style-impl SHARED
+    URI org.hyprland.style.impl
+    VERSION 0.1
+    QML_FILES
+        HyprlandStyle.qml
+        MotionBehavior.qml
+)
+
+install_qml_module(hyprland-quick-style-impl)

src/style/impl/HyprlandStyle.qml

@@ -0,0 +1,8 @@
+pragma Singleton
+import QtQuick
+
+QtObject {
+    property real radius: 8
+    property real borderWidth: 1
+    property bool reduceMotion: false
+}

src/style/impl/MotionBehavior.qml

@@ -0,0 +1,5 @@
+import QtQuick
+
+Behavior {
+    enabled: !HyprlandStyle.reduceMotion
+}

src/style/test/CMakeLists.txt

@@ -0,0 +1,14 @@
+qt_add_executable(style-test main.cpp)
+
+qt_add_qml_module(style-test
+    URI org.hyprland.style.test
+    IMPORTS
+        org.hyprland.style
+    QML_FILES
+        main.qml
+)
+
+target_link_libraries(style-test PRIVATE
+    Qt::Quick Qt::QuickControls2
+    hyprland-quick-style
+)

src/style/test/main.cpp

@@ -0,0 +1,17 @@
+#include <qcoreapplication.h>
+#include <qguiapplication.h>
+#include <qqmlapplicationengine.h>
+#include <qquickstyle.h>
+
+int main(int argc, char** argv) {
+    auto app = QGuiApplication(argc, argv);
+
+    QGuiApplication::setApplicationName("Hyprland style gallery");
+    QQuickStyle::setStyle("org.hyprland.style");
+
+    QQmlApplicationEngine engine;
+    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed, &app, []() { QCoreApplication::exit(-1); }, Qt::QueuedConnection);
+    engine.load("qrc:/qt/qml/org/hyprland/style/test/main.qml");
+
+    return QGuiApplication::exec();
+}

src/style/test/main.qml

@@ -0,0 +1,84 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Layouts
+import QtQuick.Controls
+import org.hyprland.style.impl
+
+ApplicationWindow {
+    visible: true
+
+    ScrollView {
+        anchors.fill: parent
+        ColumnLayout {
+            RowLayout {
+                component SettingSlider: ColumnLayout {
+                    property alias text: label.text
+                    property alias from: slider.from
+                    property alias to: slider.to
+                    property alias value: slider.value
+
+                    Label {
+                        id: label
+                        Layout.alignment: Qt.AlignHCenter
+                    }
+
+                    Slider {
+                        id: slider
+                        implicitWidth: 100
+                    }
+                }
+
+                SettingSlider {
+                    text: "Radius"
+                    from: 0
+                    to: 30
+
+                    Component.onCompleted: {
+                        this.value = HyprlandStyle.radius
+                        HyprlandStyle.radius = Qt.binding(() => this.value)
+                    }
+                }
+
+                SettingSlider {
+                    text: "Border width"
+                    from: 0
+                    to: 5
+
+                    Component.onCompleted: {
+                        this.value = HyprlandStyle.borderWidth
+                        HyprlandStyle.borderWidth = Qt.binding(() => this.value)
+                    }
+                }
+
+                CheckBox {
+                    text: "Reduce motion"
+
+                    Component.onCompleted: {
+                        this.checkState = HyprlandStyle.reduceMotion ? Qt.Checked : Qt.Unchecked
+                        HyprlandStyle.reduceMotion = Qt.binding(() => this.checkState == Qt.Checked);
+                    }
+                }
+            }
+
+            RowLayout {
+                ColumnLayout {
+                    Layout.maximumWidth: 200
+                    Label { text: "Button" }
+
+                    component TestButton: Button { Layout.fillWidth: true }
+
+                    TestButton { text: "Normal" }
+                    TestButton { text: "Flat"; flat: true; }
+                    TestButton { text: "Highlighted"; highlighted: true }
+                    TestButton { text: "Flat Highlighted"; flat: true; highlighted: true }
+                    TestButton { text: "Checked"; checked: true }
+                    TestButton { text: "Flat Checked"; flat: true; checked: true }
+                    TestButton { text: "Down"; down: true }
+                    TestButton { text: "Flat Down"; flat: true; down: true }
+                }
+
+                Item { Layout.fillWidth: true }
+            }
+        }
+    }
+}