diff --git a/app/qml/components/MMIconCheckBoxHorizontal.qml b/app/qml/components/MMIconCheckBoxHorizontal.qml index f40145619..368fb733c 100644 --- 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 index df711c409..672a47118 100644 --- 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 index 9c0733cb7..6b20522b4 100644 --- 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 } }