From 9499eace9b15d8d5502493ebf10994e729a117fb47e705206f0d9f19b6ae50f0 Mon Sep 17 00:00:00 2001 From: Daniel Stoppek Date: Fri, 21 Mar 2025 13:27:54 +0100 Subject: [PATCH] combobox --- TeroStyle/ComboBox.qml | 302 ++++++++++++++++++++++++++++------------- 1 file changed, 208 insertions(+), 94 deletions(-) diff --git a/TeroStyle/ComboBox.qml b/TeroStyle/ComboBox.qml index 46e5189..78c3840 100644 --- a/TeroStyle/ComboBox.qml +++ b/TeroStyle/ComboBox.qml @@ -1,59 +1,22 @@ +pragma ComponentBehavior: Bound + import QtQuick -import QtQuick.Templates as T -import QtQuick.Controls import QtQuick.Controls.impl +import QtQuick.Controls +import QtQuick.Templates as T T.ComboBox { id: control - font: Typography.body + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + 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 { required property var model required property int index @@ -62,71 +25,222 @@ T.ComboBox { text: model[control.textRole] // palette.text: control.palette.text // 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 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 + indicator: ColorImage { + x: control.mirrored ? control.padding : control.width - width - control.padding + y: control.topPadding + (control.availableHeight - height) / 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() - } - } + source: "qrc:/images/ChevronDown.svg" + opacity: enabled ? 1 : 0.3 } - 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 + + contentItem: T.TextField { + // leftPadding: !control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1 + // rightPadding: control.mirrored ? 12 : control.editable && activeFocus ? 3 : 1 + // topPadding: 6 - control.padding + // bottomPadding: 6 - control.padding + 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 { + visible: control.enabled && control.editable && !control.flat + border.width: parent && parent.activeFocus ? 2 : 1 border.color: Colors.interactive - color: Colors.mantle 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 { clip: true - currentIndex: control.highlightedIndex implicitHeight: contentHeight - model: control.popup.visible ? control.delegateModel : null + model: control.delegateModel + currentIndex: control.highlightedIndex + highlightMoveDuration: 0 - T.ScrollBar.vertical: ScrollBar { - } - highlight: Rectangle { - color: Colors.primary - opacity: Colors.highlightOpacity + Rectangle { + z: 10 + width: parent.width + height: parent.height + color: "transparent" + border.color: control.palette.mid } + + T.ScrollIndicator.vertical: ScrollIndicator { } } - } - Component.onCompleted: - { - console.log(control.implicitContentHeight) + + background: Rectangle { + color: control.palette.window + } + } } + + +// 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) +// } +// }