Merge pull request #2160 from KomodoPlatform/tweak_checkbox

Change checkbox style
KomodoPlatform · Dec 7, 2022 · ce7eb8b · ce7eb8b
2 parents 31fea8d + 969dbf2
commit ce7eb8b
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 17 deletions.
diff --git a/assets/themes/Binance - Dark/colors.json b/assets/themes/Binance - Dark/colors.json
@@ -28,6 +28,7 @@
   "gradientButtonTextHoveredColor": "#000000FF",
   "gradientButtonTextPressedColor": "#000000FF",
 
+  "checkBoxTickColor": "#FFFFFFFF",
   "checkBoxGradientStartColor": "#cb9800FF",
   "checkBoxGradientEndColor": "#EBB514FF",
 

diff --git a/assets/themes/Default - Dark/colors.json b/assets/themes/Default - Dark/colors.json
@@ -31,8 +31,9 @@
     "gradientButtonTextHoveredColor": "#FFFFFFFF",
     "gradientButtonTextPressedColor": "#FFFFFFFF",
 
-    "checkBoxGradientStartColor": "#8892EBFF",
-    "checkBoxGradientEndColor": "#9DD4F3FF",
+    "checkBoxTickColor": "#FFFFFFFF",
+    "checkBoxGradientStartColor": "#6673E3FF",
+    "checkBoxGradientEndColor": "#5EBBF0FF",
 
     "switchGradientStartColor": "#1D80B0FF",
     "switchGradientEndColor": "#5B69E6FF",

diff --git a/assets/themes/Default - Light/colors.json b/assets/themes/Default - Light/colors.json
@@ -28,6 +28,7 @@
     "gradientButtonTextHoveredColor": "#FFFFFFFF",
     "gradientButtonTextPressedColor": "#FFFFFFFF",
 
+    "checkBoxTickColor": "#456078FF",
     "checkBoxGradientStartColor": "#8892EBFF",
     "checkBoxGradientEndColor": "#9DD4F3FF",
 

diff --git a/atomic_defi_design/Dex/Addressbook/AddAddressForm.qml b/atomic_defi_design/Dex/Addressbook/AddAddressForm.qml
@@ -118,16 +118,22 @@ Dex.Rectangle
                 showAssetStandards: useStandardsCheckBox.checked
             }
 
-            Dex.DefaultCheckBox
-            {
-                id: useStandardsCheckBox
-                Layout.preferredWidth: 150
-                Layout.fillHeight: true
-                Layout.leftMargin: 4
-                boxWidth: 22
-                boxHeight: 22
-                text: qsTr("Use standard network address")
-                font: Dex.DexTypo.caption
+            RowLayout {
+                id: rowLayout
+                spacing: 4
+                Dex.DefaultCheckBox
+                {
+                    id: useStandardsCheckBox
+                    Layout.preferredWidth: 30
+                    Layout.fillHeight: true
+                    Layout.leftMargin: 4
+                }
+                Dex.DefaultText {
+                    Layout.minimumWidth: 120
+                    Layout.maximumWidth: 120
+                    text: qsTr("Use standard network address")
+                    font: Dex.DexTypo.caption
+                }
             }
         }
 

diff --git a/atomic_defi_design/Dex/Components/DexCheckBox.qml b/atomic_defi_design/Dex/Components/DexCheckBox.qml
@@ -26,9 +26,9 @@ CheckBox
         id: _indicator
         anchors.verticalCenter: control.verticalCenter
 
-        implicitWidth: 26
-        implicitHeight: 26
-        radius: 20
+        implicitWidth: 20
+        implicitHeight: 20
+        radius: 4
 
         gradient: Gradient
         {
@@ -37,6 +37,23 @@ CheckBox
             GradientStop { position: 0.6; color: Dex.CurrentTheme.checkBoxGradientEndColor }
         }
 
+        DefaultImage {
+            id: check_icon
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: parent.width - 6
+            height: parent.height - 6
+            source: General.image_path + "white_check.svg"
+            visible: control.checkState === Qt.Checked
+        }
+
+        DefaultColorOverlay
+        {
+            anchors.fill: check_icon
+            source: check_icon
+            color: Dex.CurrentTheme.checkBoxTickColor
+        }
+
         DefaultRectangle
         {
             visible: !control.checked

diff --git a/atomic_defi_design/Dex/Portfolio/Portfolio.qml b/atomic_defi_design/Dex/Portfolio/Portfolio.qml
@@ -245,8 +245,6 @@ Item {
                             id: hide_zero_balance_checkbox
 
                             spacing: 2
-                            boxWidth: 24
-                            boxHeight: 24
 
                             label.wrapMode: Label.NoWrap
                             label.font.pixelSize: 14

diff --git a/atomic_defi_design/Dex/Themes/CurrentTheme.qml b/atomic_defi_design/Dex/Themes/CurrentTheme.qml
@@ -118,6 +118,7 @@ ThemeData
         gradientButtonTextHoveredColor      = Dex.Color.argbStrFromRgbaStr(themeData.gradientButtonTextHoveredColor || defaultTheme.gradientButtonTextHoveredColor);
         gradientButtonTextPressedColor      = Dex.Color.argbStrFromRgbaStr(themeData.gradientButtonTextPressedColor || defaultTheme.gradientButtonTextPressedColor);
 
+        checkBoxTickColor                   = Dex.Color.argbStrFromRgbaStr(themeData.checkBoxTickColor || defaultTheme.checkBoxTickColor);
         checkBoxGradientStartColor          = Dex.Color.argbStrFromRgbaStr(themeData.checkBoxGradientStartColor || defaultTheme.checkBoxGradientStartColor);
         checkBoxGradientEndColor            = Dex.Color.argbStrFromRgbaStr(themeData.checkBoxGradientEndColor || defaultTheme.checkBoxGradientEndColor);
 
@@ -240,6 +241,7 @@ ThemeData
         console.info("Dex.Themes.CurrentTheme.printValues.gradientButtonTextHoveredColor : %1".arg(gradientButtonTextHoveredColor));
         console.info("Dex.Themes.CurrentTheme.printValues.gradientButtonTextPressedColor : %1".arg(gradientButtonTextPressedColor));
 
+        console.info("Dex.Themes.CurrentTheme.printValues.checkBoxTickColor : %1".arg(checkBoxTickColor));
         console.info("Dex.Themes.CurrentTheme.printValues.checkBoxGradientStartColor : %1".arg(checkBoxGradientStartColor));
         console.info("Dex.Themes.CurrentTheme.printValues.checkBoxGradientEndColor : %1".arg(checkBoxGradientEndColor));
 

diff --git a/atomic_defi_design/Dex/Themes/DefaultTheme.js b/atomic_defi_design/Dex/Themes/DefaultTheme.js
@@ -34,6 +34,7 @@ function getHardcoded()
         gradientButtonTextHoveredColor: "#FFFFFFFF",
         gradientButtonTextPressedColor: "#FFFFFFFF",
 
+        checkBoxTickColor: "#000000FF",
         checkBoxGradientStartColor: "#8892EBFF",
         checkBoxGradientEndColor: "#9DD4F3FF",
 

diff --git a/atomic_defi_design/Dex/Themes/ThemeData.qml b/atomic_defi_design/Dex/Themes/ThemeData.qml
@@ -33,6 +33,7 @@ QtObject
     property color  gradientButtonTextHoveredColor
     property color  gradientButtonTextPressedColor
 
+    property color  checkBoxTickColor
     property color  checkBoxGradientStartColor
     property color  checkBoxGradientEndColor
 

diff --git a/atomic_defi_design/assets/images/white_check.svg b/atomic_defi_design/assets/images/white_check.svg