checkbox: remove a gap between rectangle and text, fix layout

This commit is contained in:
xiphon 2018-12-05 09:52:18 +00:00
parent 71a1ff6677
commit f72b4073ac

View file

@ -31,7 +31,7 @@ import QtQuick.Layouts 1.1
import "../components" as MoneroComponents import "../components" as MoneroComponents
RowLayout { Item {
id: checkBox id: checkBox
property alias text: label.text property alias text: label.text
property string checkedIcon: "../images/checkedIcon-black.png" property string checkedIcon: "../images/checkedIcon-black.png"
@ -42,6 +42,7 @@ RowLayout {
property alias fontColor: label.color property alias fontColor: label.color
signal clicked() signal clicked()
height: 25 * scaleRatio height: 25 * scaleRatio
width: checkBoxLayout.width
function toggle(){ function toggle(){
checkBox.checked = !checkBox.checked checkBox.checked = !checkBox.checked
@ -49,43 +50,31 @@ RowLayout {
} }
RowLayout { RowLayout {
Layout.fillWidth: true id: checkBoxLayout
Rectangle {
anchors.left: parent.left
width: 25 * scaleRatio
height: checkBox.height - 1
radius: 3
y: 0
color: "transparent"
border.color:
if(checkBox.checked){
return MoneroComponents.Style.inputBorderColorActive;
} else {
return MoneroComponents.Style.inputBorderColorInActive;
}
}
Rectangle { Item {
id: backgroundRect id: checkMark
anchors.left: parent.left height: checkBox.height
width: 25 * scaleRatio width: checkBox.height
height: checkBox.height - 1
y: 1 Rectangle {
color: "transparent" id: backgroundRect
anchors.fill: parent
radius: 3
color: "transparent"
border.color:
if(checkBox.checked){
return MoneroComponents.Style.inputBorderColorActive;
} else {
return MoneroComponents.Style.inputBorderColorInActive;
}
}
Image { Image {
anchors.centerIn: parent anchors.centerIn: parent
source: checkBox.checkedIcon source: checkBox.checkedIcon
visible: checkBox.checked visible: checkBox.checked
} }
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
toggle()
}
}
} }
Text { Text {
@ -94,16 +83,15 @@ RowLayout {
font.pixelSize: checkBox.fontSize font.pixelSize: checkBox.fontSize
color: MoneroComponents.Style.defaultFontColor color: MoneroComponents.Style.defaultFontColor
wrapMode: Text.Wrap wrapMode: Text.Wrap
Layout.fillWidth: true Layout.leftMargin: !isMobile ? 10 : 8
anchors.left: backgroundRect.right }
anchors.leftMargin: !isMobile ? 10 : 8 }
MouseArea {
anchors.fill: parent MouseArea {
cursorShape: Qt.PointingHandCursor anchors.fill: parent
onClicked: { cursorShape: Qt.PointingHandCursor
toggle() onClicked: {
} toggle()
}
} }
} }
} }