feat: CheckDelegate animation

listview check animation(dci)
kegechen · Aug 5, 2024 · 6f702a2 · 6f702a2
1 parent 3ac175c
commit 6f702a2
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/qt6/src/qml/CheckDelegate.qml b/qt6/src/qml/CheckDelegate.qml
@@ -12,6 +12,8 @@ T.CheckDelegate {
     id: control
     property Component content
     property D.Palette backgroundColor: DS.Style.itemDelegate.checkBackgroundColor
+    property string indicatorIcon: control.checkState === Qt.Unchecked ? "item_unchecked" : "item_checked"
+    property bool indicatorVisible: control.checked
 
     implicitWidth: DS.Style.control.implicitWidth(control)
     implicitHeight: DS.Style.control.implicitHeight(control)
@@ -26,15 +28,22 @@ T.CheckDelegate {
     indicator: Loader {
         x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
         y: control.topPadding + (control.availableHeight - height) / 2
-        active: control.checked
+        active: indicatorVisible
 
         sourceComponent: D.DciIcon {
             palette: control.D.DTK.makeIconPalette(control.palette)
             mode: control.D.ColorSelector.controlState
             theme: control.D.ColorSelector.controlTheme
-            name: "menu_select"
+            name: indicatorIcon
             sourceSize: Qt.size(DS.Style.itemDelegate.checkIndicatorIconSize, DS.Style.itemDelegate.checkIndicatorIconSize)
             fallbackToQIcon: false
+            onNameChanged: {
+                play(D.DTK.NormalState);
+            }
+            Component.onCompleted: {
+                if (indicatorVisible)
+                    play(D.DTK.NormalState);
+            }
         }
     }
 
@@ -58,12 +67,12 @@ T.CheckDelegate {
         }
     }
 
-    background: Item {
+    background: Control {
         implicitWidth: DS.Style.itemDelegate.width
         implicitHeight: DS.Style.itemDelegate.height
         Rectangle {
             anchors.fill: parent
-            visible: !checked
+            visible: !checked && !control.ListView.view
             color: control.D.ColorSelector.backgroundColor
             radius: DS.Style.control.radius
         }
@@ -74,4 +83,12 @@ T.CheckDelegate {
             radius: DS.Style.control.radius
         }
     }
+
+    onHoveredChanged: {
+        if (checked || !ListView.view)
+            return
+
+        if (ListView.view)
+            ListView.view.setHoverItem(control.hovered ? control : null)
+    }
 }
diff --git a/src/dtkdeclarative_assets.qrc b/src/dtkdeclarative_assets.qrc
@@ -89,6 +89,8 @@
         <file alias="built-in-icons/list_delete.dci">icons/bloom/list_delete.dci</file>
         <file alias="built-in-icons/menu_arrow.dci">icons/bloom/menu_arrow.dci</file>
         <file alias="built-in-icons/menu_select.dci">icons/bloom/menu_select.dci</file>
+        <file alias="built-in-icons/item_checked.dci">icons/bloom/item_checked.dci</file>
+        <file alias="built-in-icons/item_unchecked.dci">icons/bloom/item_unchecked.dci</file>
         <file alias="built-in-icons/window_sidebar.dci">icons/bloom/window_sidebar.dci</file>
         <file alias="built-in-icons/action_add.dci">icons/bloom/action_add.dci</file>
         <file alias="built-in-icons/radio_checked.dci">icons/bloom/radio_checked.dci</file>

diff --git a/src/icons/bloom/item_checked.dci b/src/icons/bloom/item_checked.dci
diff --git a/src/icons/bloom/item_unchecked.dci b/src/icons/bloom/item_unchecked.dci