103 lines
2.4 KiB
QML
103 lines
2.4 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import ZShell.Config
|
|
import qs.Components
|
|
import qs.Services
|
|
|
|
DialogRowButton {
|
|
id: root
|
|
|
|
required property var model
|
|
property var selectedItem
|
|
property var initialSelect
|
|
|
|
function keyFor(item: var): string {
|
|
return item.id;
|
|
}
|
|
|
|
function labelFor(item: var): string {
|
|
return item.label;
|
|
}
|
|
|
|
acceptAllowed: !!selectedItem
|
|
horizontalContentMargin: -Tokens.padding.extraSmall
|
|
separateContent: true
|
|
|
|
content: Component {
|
|
VerticalFadeListView {
|
|
bottomMargin: Tokens.padding.large
|
|
model: root.model
|
|
spacing: 0
|
|
topMargin: Tokens.padding.large
|
|
|
|
delegate: CustomRect {
|
|
id: item
|
|
|
|
required property var modelData
|
|
readonly property bool selected: root.selectedItem === root.keyFor(modelData)
|
|
|
|
anchors.left: ListView.view.contentItem.left
|
|
anchors.margins: 1 // Gets cut off for some reason without this
|
|
anchors.right: ListView.view.contentItem.right
|
|
color: Qt.alpha(Colors.palette.m3tertiaryContainer, selected ? 1 : 0)
|
|
implicitHeight: label.implicitHeight + Tokens.padding.small * 2
|
|
radius: stateLayer.pressed ? Tokens.rounding.extraSmall : selected ? Tokens.rounding.largeIncreased : Tokens.rounding.medium
|
|
|
|
Behavior on radius {
|
|
Anim {
|
|
type: Anim.SlowEffects
|
|
}
|
|
}
|
|
|
|
StateLayer {
|
|
id: stateLayer
|
|
|
|
onClicked: root.selectedItem = root.keyFor(item.modelData)
|
|
}
|
|
|
|
CustomText {
|
|
id: label
|
|
|
|
anchors.left: parent.left
|
|
anchors.margins: Tokens.padding.large
|
|
anchors.right: item.selected ? checkIcon.left : parent.right
|
|
anchors.rightMargin: item.selected ? Tokens.spacing.medium : anchors.margins
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: item.selected ? Colors.palette.m3onTertiaryContainer : Colors.palette.m3onSurface
|
|
elide: Text.ElideRight
|
|
font.pointSize: Tokens.font.size.smaller
|
|
text: root.labelFor(item.modelData)
|
|
}
|
|
|
|
MaterialIcon {
|
|
id: checkIcon
|
|
|
|
anchors.margins: Tokens.padding.large
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
color: Colors.palette.m3onTertiaryContainer
|
|
font.pointSize: Tokens.font.size.normal
|
|
opacity: item.selected ? 1 : 0
|
|
text: "check"
|
|
|
|
Behavior on opacity {
|
|
Anim {
|
|
type: Anim.SlowEffects
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
onOpenChanged: {
|
|
if (open) {
|
|
if (!initialSelect)
|
|
selectedItem = null;
|
|
else
|
|
selectedItem = initialSelect;
|
|
}
|
|
}
|
|
}
|