From 8a8aa5f2e2ce05592c947b0102c3fd84c04ae74a Mon Sep 17 00:00:00 2001
From: reionwong <reionwong@gmail.com>
Date: Wed, 16 Jun 2021 09:12:45 +0800
Subject: [PATCH] Update IconCheckBox

---
 src/qml/IconCheckBox.qml | 81 +++++++++++++++++++++++-----------------
 1 file changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/qml/IconCheckBox.qml b/src/qml/IconCheckBox.qml
index be418b6..a299469 100644
--- a/src/qml/IconCheckBox.qml
+++ b/src/qml/IconCheckBox.qml
@@ -31,7 +31,7 @@ Item {
     property alias text: label.text
     property bool checked: false
 
-    property var iconSize: 104
+    property var iconSize: 106
 
     signal clicked
 
@@ -43,59 +43,72 @@ Item {
     ColumnLayout {
         id: mainLayout
         anchors.fill: parent
-        spacing: FishUI.Units.smallSpacing
 
-        Image {
-            id: icon
+        Rectangle {
+            id: _box
             width: control.iconSize
             height: width
-            sourceSize: Qt.size(icon.width, icon.height)
-            opacity: 1
-
-            layer.enabled: true
-            layer.effect: OpacityMask {
-                maskSource: Item {
-                    width: icon.width
-                    height: icon.height
-
-                    Rectangle {
-                        anchors.fill: parent
-                        radius: FishUI.Theme.bigRadius
-                    }
-                }
-            }
+            color: "transparent"
+            border.width: 3
+            border.color: control.checked ? FishUI.Theme.highlightColor : "transparent"
 
-            Behavior on opacity {
-                NumberAnimation {
-                    duration: 100
+            Behavior on border.color {
+                ColorAnimation {
+                    duration: 125
                     easing.type: Easing.InOutCubic
                 }
             }
 
-            MouseArea {
+            radius: FishUI.Theme.bigRadius + control.iconSpacing
+            visible: true
+
+            Image {
+                id: icon
                 anchors.fill: parent
-                hoverEnabled: true
+                anchors.margins: FishUI.Units.smallSpacing
+                sourceSize: Qt.size(icon.width, icon.height)
+                opacity: 1
+
+                layer.enabled: true
+                layer.effect: OpacityMask {
+                    maskSource: Item {
+                        width: icon.width
+                        height: icon.height
+
+                        Rectangle {
+                            anchors.fill: parent
+                            radius: FishUI.Theme.bigRadius
+                        }
+                    }
+                }
 
-                onEntered: function() {
-                    icon.opacity = 0.8
+                Behavior on opacity {
+                    NumberAnimation {
+                        duration: 100
+                        easing.type: Easing.InOutCubic
+                    }
                 }
-                onExited: function() {
-                    icon.opacity = 1.0
+
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+
+                    onEntered: function() {
+                        icon.opacity = 0.8
+                    }
+                    onExited: function() {
+                        icon.opacity = 1.0
+                    }
                 }
             }
         }
 
         Label {
             id: label
+            color: control.checked ? FishUI.Theme.highlightColor : FishUI.Theme.textColor
             visible: label.text
             Layout.alignment: Qt.AlignHCenter
         }
-
-        RadioButton {
-            checkable: false
-            checked: control.checked
-            Layout.alignment: Qt.AlignHCenter
-        }
     }
 
     Behavior on scale {