Add HComboBox base control
This commit is contained in:
		
							
								
								
									
										89
									
								
								src/gui/Base/HComboBox.qml
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										89
									
								
								src/gui/Base/HComboBox.qml
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,89 @@
 | 
			
		||||
import QtQuick 2.12
 | 
			
		||||
import QtQuick.Controls 2.12
 | 
			
		||||
 | 
			
		||||
ComboBox {
 | 
			
		||||
    id: root
 | 
			
		||||
 | 
			
		||||
    property bool error: false
 | 
			
		||||
    property bool bordered: true
 | 
			
		||||
    property color backgroundColor: theme.controls.textField.background
 | 
			
		||||
    property color borderColor: theme.controls.textField.border
 | 
			
		||||
    property color errorBorder: theme.controls.textField.errorBorder
 | 
			
		||||
    property color focusedBorderColor: theme.controls.textField.focusedBorder
 | 
			
		||||
    property color focusedBackgroundColor:
 | 
			
		||||
        theme.controls.textField.focusedBackground
 | 
			
		||||
 | 
			
		||||
    spacing: 0
 | 
			
		||||
 | 
			
		||||
    background: Rectangle {
 | 
			
		||||
        radius: theme.radius
 | 
			
		||||
        color: field.activeFocus ? focusedBackgroundColor : backgroundColor
 | 
			
		||||
 | 
			
		||||
        border.width: bordered ? theme.controls.textField.borderWidth : 0
 | 
			
		||||
        border.color: borderColor
 | 
			
		||||
 | 
			
		||||
        HBottomFocusLine {
 | 
			
		||||
            show: field.activeFocus
 | 
			
		||||
            borderHeight: theme.controls.textField.borderWidth
 | 
			
		||||
            color: error ? errorBorder : focusedBorderColor
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    contentItem: HTextField {
 | 
			
		||||
        id: field
 | 
			
		||||
        background: null
 | 
			
		||||
        text: root.displayText
 | 
			
		||||
        readOnly: ! root.editable
 | 
			
		||||
        rightPadding: root.indicator.width + theme.spacing
 | 
			
		||||
 | 
			
		||||
        TapHandler {
 | 
			
		||||
            enabled: field.readOnly
 | 
			
		||||
            onTapped:
 | 
			
		||||
                root.popup.visible ? root.popup.close() : root.popup.open()
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    indicator: HButton {
 | 
			
		||||
        x: root.width - root.rightPadding
 | 
			
		||||
        height: root.availableHeight
 | 
			
		||||
        backgroundColor: "transparent"
 | 
			
		||||
        icon.name: "combo-box-" + (root.popup.visible ? "close" : "open")
 | 
			
		||||
        iconItem.small: true
 | 
			
		||||
        onClicked: root.popup.visible ? root.popup.close() : root.popup.open()
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    popup: HMenu {
 | 
			
		||||
        id: menu
 | 
			
		||||
        y: root.height
 | 
			
		||||
        width: root.width
 | 
			
		||||
        modal: false
 | 
			
		||||
        onOpened: currentIndex = root.currentIndex
 | 
			
		||||
 | 
			
		||||
        enter: Transition {
 | 
			
		||||
            HNumberAnimation {
 | 
			
		||||
                property: "height"
 | 
			
		||||
                from: 0
 | 
			
		||||
                to: menu.implicitHeight
 | 
			
		||||
                easing.type: Easing.OutQuad
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        exit: Transition {
 | 
			
		||||
            HNumberAnimation {
 | 
			
		||||
                property: "height"
 | 
			
		||||
                to: 0
 | 
			
		||||
                easing.type: Easing.InQuad
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        Repeater {
 | 
			
		||||
            model: root.popup.visible ? root.model : null
 | 
			
		||||
            delegate: root.delegate
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    delegate: HMenuItem {
 | 
			
		||||
        text: modelData
 | 
			
		||||
        onTriggered: root.currentIndex = model.index
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
							
								
								
									
										3
									
								
								src/icons/thin/combo-box-close.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								src/icons/thin/combo-box-close.svg
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,3 @@
 | 
			
		||||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
 | 
			
		||||
    <path d="m0 16.67 2.829 2.83 9.175-9.339 9.167 9.339 2.829-2.83-11.996-12.17z"/>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 176 B  | 
							
								
								
									
										3
									
								
								src/icons/thin/combo-box-open.svg
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										3
									
								
								src/icons/thin/combo-box-open.svg
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,3 @@
 | 
			
		||||
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
 | 
			
		||||
    <path d="m0 7.33 2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/>
 | 
			
		||||
</svg>
 | 
			
		||||
| 
		 After Width: | Height: | Size: 175 B  | 
		Reference in New Issue
	
	Block a user