status-desktop/ui/imports/shared/status/StatusInputListPopup.qml

215 lines
6.7 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.12
import QtQuick.Dialogs 1.3
import QtQuick.Layouts 1.13
import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.controls 1.0
Popup {
property var modelList
property alias listView: listView
property var getImageSource
property var getImageComponent
property var getText: function () {}
property var getId: function () {}
signal clicked(int index, string id)
property int imageWidth: 22
property int imageHeight: 22
property string title
property bool showSearchBox: false
property var messageInput
function openPopup(listParam) {
modelList = listParam
popup.open()
}
onOpened: {
listView.currentIndex = 0
if (showSearchBox) {
searchBox.text = ""
searchBox.textField.forceActiveFocus()
}
}
id: popup
padding: Style.current.smallPadding
width: messageInput.width
height: {
let possibleHeight = listView.contentHeight + Style.current.smallPadding * 2
if (popupTitle.visible) {
possibleHeight += popupTitle.height + Style.current.smallPadding
}
if (searchBox.visible) {
possibleHeight += searchBox.height + Style.current.smallPadding
}
return Math.min(400, possibleHeight)
}
x: messageInput.x
y: -height
background: Rectangle {
id: bgRectangle
visible: !!popup.title || (!!popup.modelList && popup.modelList.length > 0)
color: Style.current.background
border.width: 0
radius: Style.current.radius
layer.enabled: true
layer.effect: DropShadow{
width: bgRectangle.width
height: bgRectangle.height
x: bgRectangle.x
y: bgRectangle.y + 10
visible: bgRectangle.visible
source: bgRectangle
horizontalOffset: 0
verticalOffset: 2
radius: 10
samples: 15
color: Style.current.dropShadow
}
}
StyledText {
id: popupTitle
visible: !!popup.title
height: visible ? implicitHeight : 0
text: popup.title
font.pixelSize: 17
anchors.top: parent.top
}
SearchBox {
id: searchBox
visible: showSearchBox
height: visible ? implicitHeight : 0
width: parent.width
anchors.top: popupTitle.bottom
anchors.topMargin: popupTitle.visible ? Style.current.smallPadding : 0
function goToNextAvailableIndex(up) {
do {
if (!up && listView.currentIndex === listView.count - 1) {
listView.currentIndex = 0
return
} else if (up && listView.currentIndex === 0) {
listView.currentIndex = listView.count - 1
return
}
if (up) {
listView.decrementCurrentIndex()
} else {
listView.incrementCurrentIndex()
}
} while (!listView.currentItem.visible)
}
Keys.onReleased: {
if (event.key === Qt.Key_Down) {
searchBox.goToNextAvailableIndex(false)
}
if (event.key === Qt.Key_Up) {
searchBox.goToNextAvailableIndex(true)
}
if (event.key === Qt.Key_Escape) {
return popup.close()
}
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
return popup.clicked(listView.currentIndex, popup.getId(listView.currentItem.myData))
}
if (!listView.currentItem.visible) {
goToNextAvailableIndex(false)
}
}
}
ListView {
id: listView
model: popup.modelList || []
keyNavigationEnabled: true
Layout.fillHeight: true
width: parent.width
anchors.top: searchBox.bottom
anchors.topMargin: searchBox.visible ? Style.current.smallPadding : 0
anchors.bottom: parent.bottom
clip: true
delegate: Rectangle {
property variant myData: typeof modelData === "undefined" ? model : modelData
property string myText: popup.getText(myData)
id: rectangle
visible: searchBox.text === "" || myText.includes(searchBox.text)
color: listView.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
border.width: 0
width: parent.width
height: visible ? 42 : 0
radius: Style.current.radius
Loader {
id: imageLoader
active: !!popup.getImageComponent || !!popup.getImageSource
width: popup.imageWidth
height: popup.imageHeight
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
sourceComponent: popup.getImageComponent ? customImageComponent : normalImageComponent
}
Component {
id: customImageComponent
Item {
id: imageComponentContainer
children: {
if (!popup.getImageComponent) {
return ""
}
return popup.getImageComponent(imageComponentContainer, myData)
}
}
}
Component {
id: normalImageComponent
SVGImage {
visible: !!source
width: popup.imageWidth
height: popup.imageHeight
source: {
if (!popup.getImageSource) {
return ""
}
return popup.getImageSource(myData)
}
}
}
StyledText {
text: rectangle.myText
color: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter
anchors.left: imageLoader.right
anchors.leftMargin: Style.current.smallPadding
font.pixelSize: 15
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
hoverEnabled: true
onEntered: {
listView.currentIndex = index
}
onClicked: {
popup.clicked(index, popup.getId(myData))
}
}
}
}
}