chore: button group animation support

button group ( ButtonBox/ToolButton)
linuxdeepin · Jul 25, 2024 · 69f192a · 69f192a
1 parent f3468d6
commit 69f192a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/qt6/src/qml/ButtonBox.qml b/qt6/src/qml/ButtonBox.qml
@@ -6,6 +6,7 @@ import QtQuick 2.11
 import QtQuick.Layouts 1.11
 import org.deepin.dtk 1.0 as D
 import org.deepin.dtk.style 1.0 as DS
+import org.deepin.dtk.private 1.0 as P
 
 Control {
     id: control
@@ -31,4 +32,25 @@ Control {
         outsideBorderColor: null
         color2: color1
     }
+
+    ParallelAnimation {
+        running:  btnGroup.checkedButton.x !== backgroundPanel.x
+        NumberAnimation { target: backgroundPanel; property: "x"; to: btnGroup.checkedButton.x; duration: 200 }
+        NumberAnimation { target: backgroundPanel; property: "y"; to: btnGroup.checkedButton.y; duration: 200 }
+    }
+
+    P.ButtonPanel {
+        id: backgroundPanel
+        visible: btnGroup.checkedButton
+        implicitWidth: btnGroup.checkedButton.width
+        implicitHeight: btnGroup.checkedButton.height
+        button: control
+        outsideBorderColor: null
+        color1: D.Palette {
+            normal {
+                common: Qt.rgba(0, 0, 0, 0.2)
+            }
+        }
+        color2: color1
+    }
 }
diff --git a/qt6/src/qml/ToolButton.qml b/qt6/src/qml/ToolButton.qml
@@ -10,7 +10,7 @@ import org.deepin.dtk.private 1.0 as P
 
 T.ToolButton {
     id: control
-    property D.Palette textColor: checked ? DS.Style.checkedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
+    property D.Palette textColor: checked ? DS.Style.highlightedButton.text : (highlighted ? DS.Style.highlightedButton.text : DS.Style.button.text)
 
     implicitWidth: DS.Style.control.implicitWidth(control)
     implicitHeight: DS.Style.control.implicitHeight(control)
@@ -66,10 +66,40 @@ T.ToolButton {
         }
     }
 
+    states: [
+        State {
+            name: "hovered"
+            when: control.hovered && !control.checked
+            PropertyChanges {
+                target: contentItem
+                scale : 1.2
+            }
+        },
+        State {
+            name: "checked"
+            when: control.checked
+            PropertyChanges {
+                target: contentItem
+                scale : 1.0
+            }
+        }
+    ]
+
+    transitions: Transition {
+        NumberAnimation { properties: "scale"; easing.type: Easing.InOutQuad }
+    }
+
     background: P.ButtonPanel {
+        visible: control.state === "hovered"
         implicitWidth: DS.Style.toolButton.width
         implicitHeight: DS.Style.toolButton.height
         button: control
         outsideBorderColor: null
+        color1: D.Palette {
+            normal {
+                common: Qt.rgba(0, 0, 0, 0.1)
+            }
+        }
+        color2 : color1
     }
 }