overte-JulianGro/scripts/developer/utilities/lib/prop/PropEnum.qml

//
//  PropEnum.qml
//
//  Created by Sam Gateau on 3/2/2019
//  Copyright 2019 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
//

import QtQuick 2.7
import QtQuick.Controls 2.2

PropItem {
    Global { id: global }
    id: root

    property alias valueVar : valueCombo.currentIndex
    property alias enums : valueCombo.model

    ComboBox {
        id: valueCombo

        flat: true

        anchors.left: root.splitter.right
        anchors.right: parent.right 
        anchors.verticalCenter: root.verticalCenter
        height: global.slimHeight

        currentIndex: root.valueVarGetter()
        onCurrentIndexChanged: { root.valueVarSetter(currentIndex); }

        delegate: ItemDelegate {
            width: valueCombo.width
            height: valueCombo.height
            contentItem: PropText {
                text: modelData
                horizontalAlignment: global.valueTextAlign
            }
            background: Rectangle {
                color:highlighted?global.colorBackHighlight:global.color;
            }
            highlighted: valueCombo.highlightedIndex === index
        }

        indicator: Canvas {
            id: canvas
            x: valueCombo.width - width - valueCombo.rightPadding
            y: valueCombo.topPadding + (valueCombo.availableHeight - height) / 2
            width: 12
            height: 8
            contextType: "2d"

            Connections {
                target: valueCombo
                onPressedChanged: canvas.requestPaint()
            }

            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = (valueCombo.pressed) ? global.colorBorderHighight : global.colorBorderLight;
                context.fill();
            }
        }

        contentItem: PropText {
            leftPadding: 0
            rightPadding: valueCombo.indicator.width + valueCombo.spacing

            text: valueCombo.displayText
            horizontalAlignment: global.valueTextAlign
        }

        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            color: global.color
            border.color: valueCombo.popup.visible ? global.colorBorderHighight : global.colorBorderLight
            border.width: global.valueBorderWidth
            radius: global.valueBorderRadius
        }

        popup: Popup {
            y: valueCombo.height - 1
            width: valueCombo.width
            implicitHeight: contentItem.implicitHeight + 2
            padding: 1

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: valueCombo.popup.visible ? valueCombo.delegateModel : null
                currentIndex: valueCombo.highlightedIndex

                ScrollIndicator.vertical: ScrollIndicator { }
            }

            background: Rectangle {
                color: global.color
                border.color: global.colorBorderHighight
                radius: global.valueBorderRadius
            }
        }
    }    
}