Files
whisper_voice/src/ui/qml/ModernComboBox.qml

131 lines
4.0 KiB
QML

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
ComboBox {
id: control
// Custom properties
property color accentColor: SettingsStyle.accent
property color bgColor: "#1a1a20"
property color popupColor: "#252530"
Accessible.role: Accessible.ComboBox
Accessible.name: control.displayText
delegate: ItemDelegate {
id: delegate
width: control.width
height: 40
padding: 0
contentItem: RowLayout {
spacing: 8
width: parent.width
anchors.leftMargin: 10
anchors.rightMargin: 10
Text {
text: control.textRole ? (modelData[control.textRole] || modelData) : modelData
color: highlighted ? control.accentColor : "#ffffff"
font.family: "JetBrains Mono"
font.pixelSize: 14
elide: Text.ElideRight
Layout.fillWidth: true
verticalAlignment: Text.AlignVCenter
scale: highlighted ? 1.05 : 1.0
Behavior on scale { NumberAnimation { duration: 100 } }
}
// Indicator for "Downloaded" or "Active"
Rectangle {
width: 6; height: 6; radius: 3
color: control.accentColor
visible: ui.isModelDownloaded(modelData)
Layout.alignment: Qt.AlignVCenter
}
}
background: Rectangle {
color: highlighted ? Qt.rgba(control.accentColor.r, control.accentColor.g, control.accentColor.b, 0.1) : "transparent"
radius: 4
Behavior on color { ColorAnimation { duration: 100 } }
}
}
indicator: Canvas {
x: control.width - width - control.rightPadding
y: control.topPadding + (control.availableHeight - height) / 2
width: 12
height: 8
contextType: "2d"
Connections {
target: control
function onPressedChanged() { control.indicator.requestPaint() }
}
onPaint: {
context.reset();
context.moveTo(0, 0);
context.lineTo(width, 0);
context.lineTo(width / 2, height);
context.closePath();
context.fillStyle = control.pressed ? control.accentColor : "#ABABAB";
context.fill();
}
}
contentItem: Text {
leftPadding: 10
rightPadding: control.indicator.width + control.spacing
text: control.displayText
font.family: "JetBrains Mono"
font.pixelSize: 14
color: control.pressed ? control.accentColor : "#ffffff"
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 140
implicitHeight: 40
color: control.bgColor
border.color: control.pressed || control.activeFocus ? control.accentColor : SettingsStyle.borderSubtle
border.width: control.activeFocus ? SettingsStyle.focusRingWidth : 1
radius: 6
// Glow effect on focus (Simplified to just border for stability)
Behavior on border.color { ColorAnimation { duration: 150 } }
}
popup: Popup {
y: control.height - 1
width: control.width
implicitHeight: Math.min(contentItem.implicitHeight, 300)
padding: 5
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator { }
}
background: Rectangle {
color: control.popupColor
border.color: SettingsStyle.borderSubtle
border.width: 1
radius: 6
}
enter: Transition {
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 100 }
NumberAnimation { property: "scale"; from: 0.95; to: 1.0; duration: 100 }
}
}
}