import QtQuick 2.6
import QtQuick.Window 2.2
import QtMultimedia 5.9
import QtWebEngine 1.1
import QtWebView 1.1

Window {
    id: window

    visible: true
    title: "Window"

    minimumWidth: 720
    minimumHeight: 480
    Column {
        Repeater {
            model: [
                "<l3dx> GrecKo: to be more specific I want to set the width of the Text to be some % of parent.width so that elide will truncate the text for me if it's too big. But I don't want the width to be that wide unless it is necessary. The reason for this is that I want to show a \"badge\" next to the text in some cases, and I want the badge to be placed close to the text",
                "use contentWidth to position the badge"
            ]
            delegate: Row {
                spacing: 20
                Item { //textWrapper
                    anchors.verticalCenter: parent.verticalCenter
                    width: text.contentWidth
                    height: text.contentHeight
                    Text {
                        id: text
                        width: window.width * 0.5
                        elide: Text.ElideRight
                        text: modelData
                    }
                }
                Rectangle { // badge
                    anchors.verticalCenter: parent.verticalCenter
                    width: 30
                    height: width
                    radius: width / 2
                    color: "orange"
                    Text {
                        anchors.centerIn: parent
                        text: index
                        color: "white"
                    }
                }
            }
        }
    }
}