combobox
This commit is contained in:
@@ -1,59 +1,22 @@
|
|||||||
|
pragma ComponentBehavior: Bound
|
||||||
|
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Templates as T
|
|
||||||
import QtQuick.Controls
|
|
||||||
import QtQuick.Controls.impl
|
import QtQuick.Controls.impl
|
||||||
|
import QtQuick.Controls
|
||||||
|
import QtQuick.Templates as T
|
||||||
|
|
||||||
T.ComboBox {
|
T.ComboBox {
|
||||||
id: control
|
id: control
|
||||||
|
|
||||||
font: Typography.body
|
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
|
||||||
|
implicitContentWidth + leftPadding + rightPadding)
|
||||||
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||||
implicitContentHeight + topPadding + bottomPadding,
|
implicitContentHeight + topPadding + bottomPadding,
|
||||||
implicitIndicatorHeight + topPadding + bottomPadding)
|
implicitIndicatorHeight + topPadding + bottomPadding)
|
||||||
|
|
||||||
|
leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
|
||||||
|
rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
|
||||||
|
|
||||||
contentItem: T.TextField {
|
|
||||||
id: test
|
|
||||||
autoScroll: control.editable
|
|
||||||
color: Colors.foreground
|
|
||||||
enabled: control.editable
|
|
||||||
|
|
||||||
font: Typography.body
|
|
||||||
implicitHeight: Typography.body.pixelSize + topPadding + bottomPadding
|
|
||||||
inputMethodHints: control.inputMethodHints
|
|
||||||
padding: Dimensions.m
|
|
||||||
readOnly: control.down
|
|
||||||
selectByMouse: control.selectTextByMouse
|
|
||||||
text: control.editable ? control.editText : control.displayText
|
|
||||||
validator: control.validator
|
|
||||||
width: control.width - indicator.width
|
|
||||||
verticalAlignment: Text.AlignVCenter
|
|
||||||
}
|
|
||||||
background: Rectangle {
|
|
||||||
border.color: Colors.interactive
|
|
||||||
border.width: 1
|
|
||||||
color: Colors.mantle
|
|
||||||
// height: parent.height
|
|
||||||
radius: Dimensions.radius
|
|
||||||
width: parent.width
|
|
||||||
}
|
|
||||||
// delegate: MenuItem {
|
|
||||||
// id: menuItem
|
|
||||||
|
|
||||||
// required property int index
|
|
||||||
// required property var model
|
|
||||||
|
|
||||||
// highlighted: control.highlightedIndex === index
|
|
||||||
// hoverEnabled: control.hoverEnabled
|
|
||||||
// text: model[control.textRole]
|
|
||||||
// width: control.width
|
|
||||||
|
|
||||||
// background: Rectangle {
|
|
||||||
// color: menuItem.down || menuItem.highlighted ? Colors.primary : "transparent"
|
|
||||||
// height: menuItem.height
|
|
||||||
// width: menuItem.width
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
delegate: ItemDelegate {
|
delegate: ItemDelegate {
|
||||||
required property var model
|
required property var model
|
||||||
required property int index
|
required property int index
|
||||||
@@ -62,71 +25,222 @@ T.ComboBox {
|
|||||||
text: model[control.textRole]
|
text: model[control.textRole]
|
||||||
// palette.text: control.palette.text
|
// palette.text: control.palette.text
|
||||||
// palette.highlightedText: control.palette.highlightedText
|
// palette.highlightedText: control.palette.highlightedText
|
||||||
// font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
|
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
|
||||||
highlighted: control.highlightedIndex === index
|
highlighted: control.highlightedIndex === index
|
||||||
hoverEnabled: control.hoverEnabled
|
hoverEnabled: control.hoverEnabled
|
||||||
}
|
}
|
||||||
indicator: Rectangle {
|
|
||||||
id: indicator
|
|
||||||
|
|
||||||
border.color: Colors.interactive
|
indicator: ColorImage {
|
||||||
bottomRightRadius: Dimensions.radius
|
x: control.mirrored ? control.padding : control.width - width - control.padding
|
||||||
color: Colors.primary
|
y: control.topPadding + (control.availableHeight - height) / 2
|
||||||
height: control.height
|
|
||||||
topRightRadius: Dimensions.radius
|
|
||||||
width: 20 + Dimensions.s * 2
|
|
||||||
x: control.width - width
|
|
||||||
y: 0
|
|
||||||
z: 2
|
|
||||||
|
|
||||||
IconLabel {
|
source: "qrc:/images/ChevronDown.svg"
|
||||||
anchors.fill: parent
|
opacity: enabled ? 1 : 0.3
|
||||||
bottomPadding: Dimensions.s
|
|
||||||
icon.color: Colors.foreground
|
|
||||||
icon.source: "qrc:/images/ChevronDown.svg"
|
|
||||||
leftPadding: Dimensions.s
|
|
||||||
rightPadding: Dimensions.s
|
|
||||||
topPadding: Dimensions.s
|
|
||||||
}
|
|
||||||
MouseArea {
|
|
||||||
anchors.fill: parent
|
|
||||||
cursorShape: Qt.PointingHandCursor
|
|
||||||
|
|
||||||
onPressed: () => {
|
|
||||||
control.popup.visible = true;
|
|
||||||
control.popup.forceActiveFocus()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
popup: T.Popup {
|
|
||||||
bottomMargin: 6
|
contentItem: T.TextField {
|
||||||
height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
|
// leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
|
||||||
padding: 1
|
// rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1
|
||||||
topMargin: 6
|
// topPadding: 6 - control.padding
|
||||||
width: control.width
|
// bottomPadding: 6 - control.padding
|
||||||
y: control.height
|
implicitHeight: Typography.body.pixelSize + bottomPadding + topPadding
|
||||||
|
text: control.editable ? control.editText : control.displayText
|
||||||
|
padding: Dimensions.m
|
||||||
|
enabled: control.editable
|
||||||
|
autoScroll: control.editable
|
||||||
|
readOnly: control.down
|
||||||
|
inputMethodHints: control.inputMethodHints
|
||||||
|
validator: control.validator
|
||||||
|
selectByMouse: control.selectTextByMouse
|
||||||
|
|
||||||
|
color: Colors.foreground
|
||||||
|
// selectionColor: control.palette.highlight
|
||||||
|
// selectedTextColor: control.palette.highlightedText
|
||||||
|
verticalAlignment: Text.AlignVCenter
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
|
visible: control.enabled && control.editable && !control.flat
|
||||||
|
border.width: parent && parent.activeFocus ? 2 : 1
|
||||||
border.color: Colors.interactive
|
border.color: Colors.interactive
|
||||||
color: Colors.mantle
|
|
||||||
radius: Dimensions.radius
|
radius: Dimensions.radius
|
||||||
|
color: Colors.mantle
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
background: Rectangle {
|
||||||
|
implicitWidth: 140
|
||||||
|
implicitHeight: 40
|
||||||
|
radius: Dimensions.radius
|
||||||
|
color: Colors.mantle
|
||||||
|
border.color: Colors.interactive
|
||||||
|
border.width: 1
|
||||||
|
visible: !control.flat || control.down
|
||||||
|
}
|
||||||
|
|
||||||
|
popup: T.Popup {
|
||||||
|
y: control.height
|
||||||
|
width: control.width
|
||||||
|
height: Math.min(contentItem.implicitHeight, control.Window.height - topMargin - bottomMargin)
|
||||||
|
topMargin: 6
|
||||||
|
bottomMargin: 6
|
||||||
|
palette: control.palette
|
||||||
|
|
||||||
contentItem: ListView {
|
contentItem: ListView {
|
||||||
clip: true
|
clip: true
|
||||||
currentIndex: control.highlightedIndex
|
|
||||||
implicitHeight: contentHeight
|
implicitHeight: contentHeight
|
||||||
model: control.popup.visible ? control.delegateModel : null
|
model: control.delegateModel
|
||||||
|
currentIndex: control.highlightedIndex
|
||||||
|
highlightMoveDuration: 0
|
||||||
|
|
||||||
T.ScrollBar.vertical: ScrollBar {
|
Rectangle {
|
||||||
}
|
z: 10
|
||||||
highlight: Rectangle {
|
width: parent.width
|
||||||
color: Colors.primary
|
height: parent.height
|
||||||
opacity: Colors.highlightOpacity
|
color: "transparent"
|
||||||
|
border.color: control.palette.mid
|
||||||
}
|
}
|
||||||
|
|
||||||
|
T.ScrollIndicator.vertical: ScrollIndicator { }
|
||||||
}
|
}
|
||||||
}
|
|
||||||
Component.onCompleted:
|
background: Rectangle {
|
||||||
{
|
color: control.palette.window
|
||||||
console.log(control.implicitContentHeight)
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// import QtQuick
|
||||||
|
// import QtQuick.Templates as T
|
||||||
|
// import QtQuick.Controls
|
||||||
|
// import QtQuick.Controls.impl
|
||||||
|
|
||||||
|
// T.ComboBox {
|
||||||
|
// id: control
|
||||||
|
|
||||||
|
// font: Typography.body
|
||||||
|
// implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
|
||||||
|
// implicitContentHeight + topPadding + bottomPadding,
|
||||||
|
// implicitIndicatorHeight + topPadding + bottomPadding)
|
||||||
|
|
||||||
|
|
||||||
|
// contentItem: T.TextField {
|
||||||
|
// id: test
|
||||||
|
// autoScroll: control.editable
|
||||||
|
// color: Colors.foreground
|
||||||
|
// enabled: control.editable
|
||||||
|
|
||||||
|
// font: Typography.body
|
||||||
|
// implicitHeight: Typography.body.pixelSize + topPadding + bottomPadding
|
||||||
|
// inputMethodHints: control.inputMethodHints
|
||||||
|
// padding: Dimensions.m
|
||||||
|
// readOnly: control.down
|
||||||
|
// selectByMouse: control.selectTextByMouse
|
||||||
|
// text: control.editable ? control.editText : control.displayText
|
||||||
|
// validator: control.validator
|
||||||
|
// width: control.width - indicator.width
|
||||||
|
// verticalAlignment: Text.AlignVCenter
|
||||||
|
// }
|
||||||
|
// background: Rectangle {
|
||||||
|
// border.color: Colors.interactive
|
||||||
|
// border.width: 1
|
||||||
|
// color: Colors.mantle
|
||||||
|
// // height: parent.height
|
||||||
|
// radius: Dimensions.radius
|
||||||
|
// width: parent.width
|
||||||
|
// }
|
||||||
|
// // delegate: MenuItem {
|
||||||
|
// // id: menuItem
|
||||||
|
|
||||||
|
// // required property int index
|
||||||
|
// // required property var model
|
||||||
|
|
||||||
|
// // highlighted: control.highlightedIndex === index
|
||||||
|
// // hoverEnabled: control.hoverEnabled
|
||||||
|
// // text: model[control.textRole]
|
||||||
|
// // width: control.width
|
||||||
|
|
||||||
|
// // background: Rectangle {
|
||||||
|
// // color: menuItem.down || menuItem.highlighted ? Colors.primary : "transparent"
|
||||||
|
// // height: menuItem.height
|
||||||
|
// // width: menuItem.width
|
||||||
|
// // }
|
||||||
|
// // }
|
||||||
|
// delegate: ItemDelegate {
|
||||||
|
// required property var model
|
||||||
|
// required property int index
|
||||||
|
|
||||||
|
// width: ListView.view.width
|
||||||
|
// text: model[control.textRole]
|
||||||
|
// // palette.text: control.palette.text
|
||||||
|
// // palette.highlightedText: control.palette.highlightedText
|
||||||
|
// // font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
|
||||||
|
// highlighted: control.highlightedIndex === index
|
||||||
|
// hoverEnabled: control.hoverEnabled
|
||||||
|
// }
|
||||||
|
// indicator: Rectangle {
|
||||||
|
// id: indicator
|
||||||
|
|
||||||
|
// border.color: Colors.interactive
|
||||||
|
// bottomRightRadius: Dimensions.radius
|
||||||
|
// color: Colors.primary
|
||||||
|
// height: control.height
|
||||||
|
// topRightRadius: Dimensions.radius
|
||||||
|
// width: 20 + Dimensions.s * 2
|
||||||
|
// x: control.width - width
|
||||||
|
// y: 0
|
||||||
|
// z: 2
|
||||||
|
|
||||||
|
// IconLabel {
|
||||||
|
// anchors.fill: parent
|
||||||
|
// bottomPadding: Dimensions.s
|
||||||
|
// icon.color: Colors.foreground
|
||||||
|
// icon.source: "qrc:/images/ChevronDown.svg"
|
||||||
|
// leftPadding: Dimensions.s
|
||||||
|
// rightPadding: Dimensions.s
|
||||||
|
// topPadding: Dimensions.s
|
||||||
|
// }
|
||||||
|
// MouseArea {
|
||||||
|
// anchors.fill: parent
|
||||||
|
// cursorShape: Qt.PointingHandCursor
|
||||||
|
|
||||||
|
// onPressed: () => {
|
||||||
|
// control.popup.visible = true;
|
||||||
|
// control.popup.forceActiveFocus()
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// popup: T.Popup {
|
||||||
|
// bottomMargin: 6
|
||||||
|
// height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
|
||||||
|
// padding: 1
|
||||||
|
// topMargin: 6
|
||||||
|
// width: control.width
|
||||||
|
// y: control.height
|
||||||
|
|
||||||
|
// background: Rectangle {
|
||||||
|
// border.color: Colors.interactive
|
||||||
|
// color: Colors.mantle
|
||||||
|
// radius: Dimensions.radius
|
||||||
|
// }
|
||||||
|
// contentItem: ListView {
|
||||||
|
// clip: true
|
||||||
|
// currentIndex: control.highlightedIndex
|
||||||
|
// implicitHeight: contentHeight
|
||||||
|
// model: control.popup.visible ? control.delegateModel : null
|
||||||
|
|
||||||
|
// T.ScrollBar.vertical: ScrollBar {
|
||||||
|
// }
|
||||||
|
// highlight: Rectangle {
|
||||||
|
// color: Colors.primary
|
||||||
|
// opacity: Colors.highlightOpacity
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// Component.onCompleted:
|
||||||
|
// {
|
||||||
|
// console.log(control.implicitContentHeight)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|||||||
Reference in New Issue
Block a user