Take "delete" & "add" RoundButton out of a selection zone

[Yazid10]

I made a component named MultipleChoiceQuestion that creates dynamically instance of multiple choice question as you can see in the picture below :

I would love to take the round buttons "-" and "+" out of the selection zone, i.e. only the title, checkboxes and TextEdit elements should remain in the rectangle when I'm selecting it.
The rectangle border is blue when I'm clicking on the zone and grey when I'm clicking outside.

Here is my code :

import QtQuick
import QtQuick.Window
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQml 2.3


Rectangle {
    id: root


    property QtObject elementModel
    property bool selected: elementModel.selectedItem === root ? true : false

    ListModel {
        id: choiceModel
    }

    border.color: root.selected ? "blue" : "grey"
    radius: 5
    width: parent.width / 2
    height: column.height

    Column {
        id: column

        TextInput {
            id: title

            anchors.horizontalCenter: column.horizontalCenter
            font.pixelSize: 20
            text: "Title..."
        }


        Repeater {
            model: choiceModel.count

            Row {
                id: row

                RoundButton {
                    x: 100
                    width: 30
                    height: 30
                    anchors.verticalCenter: row.verticalCenter

                    text: "-"
                    visible: root.selected

                    onClicked:
                    {
                        choiceModel.remove(index,1)
                    }
                }

                CheckBox {
                    id: checkbox

                    anchors.verticalCenter: row.verticalCenter

                    checked: choiceModel.get(index).checked

                    onCheckedChanged:
                    {
                        choiceModel.get(index).checked = checked
                    }
                }

                TextEdit {
                    anchors.verticalCenter: checkbox.verticalCenter
                    verticalAlignment: TextEdit.AlignVCenter

                    width: root.width - 100

                    text: choiceModel.get(index).text

                    onTextChanged:
                    {
                        choiceModel.get(index).text = text
                    }

                    wrapMode: TextEdit.Wrap

                }

                Item {
                    id: space
                    width: 20
                    height: checkbox.height
                }
            }
        }

        RoundButton {
            width: 30
            height: 30
            text: "+"
            visible: root.selected

            onClicked:
            {
                choiceModel.append({ text: "New choice", checked: false })
            }
        }
    }

    MouseArea {
        id: mouseArea

        anchors.fill: root

        enabled: !root.selected

        onClicked: {
            if (!root.selected)
            {
                elementModel.selectedItem = root
            }
        }
    }

    Component.onCompleted: {
        choiceModel.append({ text: "Choice 1", checked: false })
        choiceModel.append({ text: "Choice 2", checked: false })
        choiceModel.append({ text: "Choice 3", checked: false })
    }
}

[sierdzio]

@Yazid10 said in Take "delete" & "add" RoundButton out of a selection zone:

visible: root.selected

Just negate the argument:

visible: !root.selected

[Yazid10]

@sierdzio this will make them invisible when I create an instance of the component.

I want something like this :

I tried adding a child rectangle while making the parent rectangle transparent but that didn't work because of the column and the repeater

[sierdzio]

Oh, I see. This makes it somewhat harder, indeed.

One solution which comes to my mind (but is rather ugly): take these buttons out of Row so that their positioning is not automatic, and assign them negative x coordinate. This will push them to the left.

Another solution would be to make the blue border Rectangle independent. So: root rect should have no border (it can even be an Item since it will be invisible), but it should have another Rectangle as a child (but not under Repeater!), with border.