ThemedComboBox.qml
2.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import QtQuick
import QtQuick.Controls.Basic
import "../" as App
ComboBox {
id: control
implicitHeight: App.Theme.controlHLg
font.family: App.Theme.fontFamily
font.pointSize: App.Theme.fontBase
leftPadding: 14
rightPadding: 32
contentItem: Text {
text: control.displayText
font: control.font
color: App.Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
radius: App.Theme.radiusMd
color: App.Theme.bgSurface
border.width: control.activeFocus ? 2 : 1
border.color: control.activeFocus
? App.Theme.accent
: (control.hovered ? App.Theme.borderStrong : App.Theme.borderDefault)
Behavior on border.color {
ColorAnimation { duration: 100 }
}
}
indicator: Canvas {
id: chevron
width: 12; height: 8
x: control.width - width - 14
y: control.topPadding + (control.availableHeight - height) / 2
contextType: "2d"
onPaint: {
var ctx = getContext("2d")
ctx.reset()
ctx.strokeStyle = App.Theme.textSecondary
ctx.lineWidth = 1.5
ctx.lineCap = "round"
ctx.lineJoin = "round"
ctx.beginPath()
ctx.moveTo(2, 2)
ctx.lineTo(width / 2, height - 2)
ctx.lineTo(width - 2, 2)
ctx.stroke()
}
}
popup: Popup {
y: control.height + 4
width: control.width
padding: 4
background: Rectangle {
color: App.Theme.bgElevated
radius: App.Theme.radiusMd
border.width: 1
border.color: App.Theme.borderDefault
}
contentItem: ListView {
clip: true
implicitHeight: Math.min(contentHeight, 240)
model: control.popup.visible ? control.delegateModel : null
currentIndex: control.highlightedIndex
ScrollBar.vertical: ScrollBar {}
}
}
delegate: ItemDelegate {
width: control.width
height: 32
font: control.font
contentItem: Text {
text: modelData
font: control.font
color: App.Theme.textPrimary
verticalAlignment: Text.AlignVCenter
leftPadding: 10
}
background: Rectangle {
radius: App.Theme.radiusSm
color: hovered ? App.Theme.accentSubtle : "transparent"
}
}
}