Merge pull request #2956 from MerginMaps/onboarding_misc

Updated MMIconCheckBoxHorizontal.qml and MMIconCheckBoxVertical.qml
MerginMaps · Dec 11, 2023 · cb9a0cf · cb9a0cf · inputapp-bot · Dec 11, 2023
2 parents 4fff19d + 77215d9
commit cb9a0cf
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 30 deletions.
diff --git a/app/qml/components/MMIconCheckBoxHorizontal.qml b/app/qml/components/MMIconCheckBoxHorizontal.qml
@@ -18,13 +18,13 @@ CheckBox {
   required property var sourceIcon
   property bool small: false
 
-  width: (control.small ? 90 : 220) * __dp
-  height: (control.small ? 30 : 50) * __dp
+  height: (control.small ? 50 : 80) * __dp
 
   indicator: Rectangle {
     id: iconBgRectangle
     width: (control.small ? 24 : 40) * __dp
     height: (control.small ? 24 : 40) * __dp
+    x: 20 * __dp
     y: control.height / 2 - height / 2
     radius: width / 2
     color: control.checked ? __style.whiteColor : __style.lightGreenColor
@@ -44,11 +44,12 @@ CheckBox {
     font: __style.t3
     color: control.checked ? __style.whiteColor : __style.nightColor
     verticalAlignment: Text.AlignVCenter
-    leftPadding: control.indicator.width
+    leftPadding: control.indicator.width + 30 * __dp
+    rightPadding: 20 * __dp
   }
 
   background: Rectangle {
-    radius: 12 * __dp
+    radius: __style.inputRadius
     color: control.checked ? __style.forestColor: __style.whiteColor
   }
 }
diff --git a/app/qml/components/MMIconCheckBoxVertical.qml b/app/qml/components/MMIconCheckBoxVertical.qml
@@ -18,36 +18,56 @@ CheckBox {
   required property var sourceIcon
   required property var bgColorIcon
 
-  width: (control.small ? 90 : 220) * __dp
-  height: (control.small ? 30 : 50) * __dp
-
-  indicator: Rectangle {
-    id: iconBgRectangle
-    width: (control.small ? 24 : 40) * __dp
-    height: (control.small ? 24 : 40) * __dp
-    y: control.height / 2 - height / 2
-    radius: width / 2
-    color: control.bgColorIcon
-
-    MMIcon {
-      id: icon
-      width: (control.small ? 16 : 24) * __dp
-      height: (control.small ? 16 : 24) * __dp
-      anchors.centerIn: parent
-      source: control.sourceIcon
+  width: 170 * __dp
+  height: 158 * __dp
+
+  indicator: Item {}
+
+  contentItem: Column {
+    padding: 20 * __dp
+    spacing: 10 * __dp
+
+    Item {
+      width: parent.width
+      height: 50 * __dp
+      anchors.horizontalCenter: parent.horizontalCenter
+
+      Rectangle {
+        id: iconBgRectangle
+
+        width: 50 * __dp
+        height: width
+        radius: width / 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: control.bgColorIcon
+
+        MMIcon {
+          id: icon
+
+          width: (control.small ? 16 : 24) * __dp
+          height: (control.small ? 16 : 24) * __dp
+          anchors.centerIn: parent
+          source: control.sourceIcon
+        }
+      }
     }
-  }
+    Text {
+      width: parent.width - 2 * parent.padding
+      height: control.height - 2 * parent.padding - parent.spacing - iconBgRectangle.height
+      anchors.horizontalCenter: parent.horizontalCenter
 
-  contentItem: Text {
-    text: control.text
-    font: __style.t3
-    color: control.checked ? __style.whiteColor : __style.nightColor
-    verticalAlignment: Text.AlignVCenter
-    leftPadding: control.indicator.width
+      text: control.text
+      font: __style.t3
+      color: control.checked ? __style.whiteColor : __style.nightColor
+      verticalAlignment: Text.AlignVCenter
+      horizontalAlignment: Text.AlignHCenter
+      wrapMode: Text.WordWrap
+      lineHeight: 1.5
+    }
   }
 
   background: Rectangle {
-    radius: 12 * __dp
+    radius: __style.inputRadius
     color: control.checked ? __style.forestColor: __style.whiteColor
   }
 }
diff --git a/gallery/qml/pages/ChecksPage.qml b/gallery/qml/pages/ChecksPage.qml
@@ -122,7 +122,7 @@ Column {
       MMIconCheckBoxVertical {
         checked: true
         sourceIcon: __style.tractorIcon
-        text: "Agriculture"
+        text: "Agriculture Long text"
         bgColorIcon: __style.sunColor
       }
     }