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