matrixion/resources/qml/Completer.qml
2023-06-08 22:32:07 +02:00

336 lines
11 KiB
QML

// SPDX-FileCopyrightText: Nheko Contributors
//
// SPDX-License-Identifier: GPL-3.0-or-later
import "./ui"
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import im.nheko 1.0
Control {
id: popup
property alias currentIndex: listView.currentIndex
property string roomId
property string completerName
property var completer
property bool bottomToTop: true
property bool fullWidth: false
property bool centerRowContent: true
property int avatarHeight: 24
property int avatarWidth: 24
property int rowMargin: 0
property int rowSpacing: Nheko.paddingSmall
property alias count: listView.count
signal completionClicked(string completion)
signal completionSelected(string id)
function up() {
if (bottomToTop)
down_();
else
up_();
}
function down() {
if (bottomToTop)
up_();
else
down_();
}
function up_() {
currentIndex = currentIndex - 1;
if (currentIndex == -2)
currentIndex = listView.count - 1;
}
function down_() {
currentIndex = currentIndex + 1;
if (currentIndex >= listView.count)
currentIndex = -1;
}
function currentCompletion() {
if (currentIndex > -1 && currentIndex < listView.count)
return completer.completionAt(currentIndex);
else
return null;
}
function finishCompletion() {
if (popup.completerName == "room")
popup.completionSelected(listView.itemAtIndex(currentIndex).modelData.roomid);
else if (popup.completerName == "user")
popup.completionSelected(listView.itemAtIndex(currentIndex).modelData.userid);
}
function changeCompleter() {
if (completerName) {
completer = TimelineManager.completerFor(completerName, completerName == "room" ? "" : (popup.roomId != "" ? popup.roomId : room.roomId));
completer.setSearchString("");
} else {
completer = undefined;
}
currentIndex = -1
}
onCompleterNameChanged: changeCompleter()
onRoomIdChanged: changeCompleter()
bottomPadding: 1
leftPadding: 1
topPadding: 1
rightPadding: 1
contentItem: ListView {
id: listView
// If we have fewer than 7 items, just use the list view's content height.
// Otherwise, we want to show 7 items. Each item consists of row spacing between rows, row margins
// on each side of a row, 1px of padding above the first item and below the last item, and nominally
// some kind of content height. avatarHeight is used for just about every delegate, so we're using
// that until we find something better. Put is all together and you have the formula below!
implicitHeight: Math.min(contentHeight, 6*rowSpacing + 7*(popup.avatarHeight + 2*rowMargin))
clip: true
ScrollHelper {
flickable: parent
anchors.fill: parent
enabled: !Settings.mobileMode
}
Timer {
id: deadTimer
interval: 50
}
onContentYChanged: deadTimer.restart()
// Broken, see https://bugreports.qt.io/browse/QTBUG-102811
//reuseItems: true
implicitWidth: listView.contentItem.childrenRect.width
model: completer
verticalLayoutDirection: popup.bottomToTop ? ListView.BottomToTop : ListView.TopToBottom
spacing: rowSpacing
pixelAligned: true
highlightFollowsCurrentItem: true
displayMarginBeginning: height / 2
displayMarginEnd: height / 2
delegate: Rectangle {
property variant modelData: model
ListView.delayRemove: true
color: model.index == popup.currentIndex ? palette.highlight : palette.base
height: (chooser.child?.implicitHeight ?? 0) + 2 * popup.rowMargin
implicitWidth: fullWidth ? ListView.view.width : chooser.child.implicitWidth + 4
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onPositionChanged: if (!listView.moving && !deadTimer.running) popup.currentIndex = model.index
onClicked: {
popup.completionClicked(completer.completionAt(model.index));
if (popup.completerName == "room")
popup.completionSelected(model.roomid);
else if (popup.completerName == "user")
popup.completionSelected(model.userid);
}
}
Ripple {
color: Qt.rgba(palette.base.r, palette.base.g, palette.base.b, 0.5)
}
DelegateChooser {
id: chooser
roleValue: popup.completerName
anchors.fill: parent
anchors.margins: popup.rowMargin
enabled: false
DelegateChoice {
roleValue: "user"
RowLayout {
id: del
anchors.centerIn: centerRowContent ? parent : undefined
spacing: rowSpacing
Avatar {
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.displayName
userid: model.userid
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
enabled: false
}
Label {
text: model.displayName
color: model.index == popup.currentIndex ? palette.highlightedText : palette.text
}
Label {
text: "(" + model.userid + ")"
color: model.index == popup.currentIndex ? palette.highlightedText : palette.buttonText
}
}
}
DelegateChoice {
roleValue: "emoji"
RowLayout {
id: del
anchors.centerIn: parent
spacing: rowSpacing
Label {
visible: !!model.unicode
text: model.unicode
color: model.index == popup.currentIndex ? palette.highlightedText : palette.text
font: Settings.emojiFont
}
Avatar {
visible: !model.unicode
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.shortcode
//userid: model.shortcode
url: (model.url ? model.url : "").replace("mxc://", "image://MxcImage/")
enabled: false
crop: false
}
Label {
Layout.leftMargin: Nheko.paddingSmall
Layout.rightMargin: Nheko.paddingSmall
text: model.shortcode
color: model.index == popup.currentIndex ? palette.highlightedText : palette.text
}
Label {
text: "(" + model.packname + ")"
color: model.index == popup.currentIndex ? palette.highlightedText : palette.buttonText
}
}
}
DelegateChoice {
roleValue: "command"
RowLayout {
id: del
anchors.centerIn: parent
spacing: rowSpacing
Label {
text: model.name
color: model.index == popup.currentIndex ? palette.highlightedText : palette.text
font.bold: true
}
Label {
text: model.description
color: model.index == popup.currentIndex ? palette.highlightedText : palette.buttonText
}
}
}
DelegateChoice {
roleValue: "room"
RowLayout {
id: del
anchors.centerIn: centerRowContent ? parent : undefined
spacing: rowSpacing
Avatar {
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.roomName
roomid: model.roomid
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
enabled: false
}
Label {
text: model.roomName
font.pixelSize: popup.avatarHeight * 0.5
color: model.index == popup.currentIndex ? palette.highlightedText : palette.text
font.italic: model.isTombstoned
textFormat: Text.RichText
}
}
}
DelegateChoice {
roleValue: "roomAliases"
RowLayout {
id: del
anchors.centerIn: parent
spacing: rowSpacing
Avatar {
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.roomName
roomid: model.roomid
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
enabled: false
}
Label {
text: model.roomName
color: model.index == popup.currentIndex ? palette.highlightedText : palette.text
font.italic: model.isTombstoned
textFormat: Text.RichText
}
Label {
text: "(" + model.roomAlias + ")"
color: model.index == popup.currentIndex ? palette.highlightedText : palette.buttonText
textFormat: Text.RichText
}
}
}
}
}
}
background: Rectangle {
color: palette.base
border.color: palette.mid
}
}