134 lines
3.8 KiB
QML
134 lines
3.8 KiB
QML
import QtQuick 2.12
|
|
import QtQuick.Controls 2.12
|
|
import QtQuick.Controls.impl 2.12
|
|
import QtGraphicalEffects 1.12
|
|
import "theme"
|
|
|
|
|
|
|
|
// Assumes data comes in a model like
|
|
// model: ListModel {
|
|
// ListElement { text: qsTr("locale-en"); value: "en" } }
|
|
ComboBox {
|
|
id: control
|
|
height: 30 * gcd.themeScale
|
|
|
|
// visible item
|
|
contentItem: ScalingLabel {
|
|
id: displayItem
|
|
leftPadding: 10 * gcd.themeScale
|
|
|
|
text: control.model.get(control.currentIndex)["text"]
|
|
font: control.font
|
|
color: Theme.mainTextColor
|
|
verticalAlignment: Text.AlignVCenter
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
background: Rectangle {
|
|
radius: control.height / 4
|
|
color: Theme.backgroundMainColor
|
|
border.color: Theme.backgroundMainColor
|
|
|
|
layer.enabled: true
|
|
layer.effect: DropShadow {
|
|
transparentBorder: true
|
|
horizontalOffset: 0
|
|
verticalOffset: 0
|
|
samples: 10
|
|
radius: 8
|
|
color: Theme.dropShadowColor
|
|
}
|
|
}
|
|
|
|
// activate arrow button
|
|
indicator: Rectangle {
|
|
height: control.height
|
|
width: control.height
|
|
anchors.right: control.right
|
|
radius: control.height / 4
|
|
color: Theme.backgroundPaneColor
|
|
border.color: Theme.backgroundPaneColor
|
|
|
|
layer.enabled: true
|
|
layer.effect: DropShadow {
|
|
transparentBorder: true
|
|
horizontalOffset: 0
|
|
verticalOffset: 0
|
|
samples: 10
|
|
radius: 8
|
|
color: Theme.dropShadowColor
|
|
}
|
|
|
|
Icon {
|
|
iconColor: Theme.toolbarIconColor
|
|
source: gcd.assetPath + "core/chevron_left-24px.webp"
|
|
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
width: parent.height * 0.75
|
|
height: parent.height * 0.75
|
|
rotationAngle: 270
|
|
|
|
onClicked: { popup.visible = true }
|
|
}
|
|
}
|
|
|
|
// items in the popup
|
|
delegate: ItemDelegate {
|
|
width: control.width
|
|
highlighted: control.highlightedIndex === index
|
|
height: ciText.height + (4 * gcd.themeScale)
|
|
|
|
contentItem:
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
color: control.highlightedIndex === index ? Theme.backgroundHilightElementColor : Theme.backgroundMainColor
|
|
ScalingLabel {
|
|
id: ciText
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.left:parent.left
|
|
anchors.leftMargin: 10 * gcd.themeScale
|
|
|
|
text: model["text"] //control.textRole ? (Array.isArray(control.model) ? modelData[control.textRole] : model[control.textRole]) : modelData
|
|
color: Theme.mainTextColor
|
|
font: control.font
|
|
elide: Text.ElideRight
|
|
verticalAlignment: Text.AlignVCenter
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
popup: Popup {
|
|
y: control.height - 1
|
|
width: control.width
|
|
implicitHeight: contentItem.implicitHeight + 2
|
|
padding: 1
|
|
|
|
contentItem: ListView {
|
|
clip: true
|
|
implicitHeight: contentHeight
|
|
model: control.popup.visible ? control.delegateModel : null
|
|
currentIndex: control.highlightedIndex
|
|
|
|
ScrollIndicator.vertical: ScrollIndicator { }
|
|
}
|
|
|
|
background: Rectangle {
|
|
radius: 2
|
|
border.color: Theme.backgroundMainColor
|
|
|
|
layer.enabled: true
|
|
layer.effect: DropShadow {
|
|
transparentBorder: true
|
|
horizontalOffset: 0
|
|
verticalOffset: 0
|
|
samples: 10
|
|
radius: 8
|
|
color: Theme.dropShadowColor
|
|
}
|
|
}
|
|
}
|
|
}
|