Add HComboBox base control
This commit is contained in:
parent
9967638694
commit
e0cb040fd1
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 |
Loading…
Reference in New Issue
Block a user