matrixion/resources/qml/Completer.qml

311 lines
10 KiB
QML
Raw Normal View History

2021-03-05 02:35:15 +03:00
// SPDX-FileCopyrightText: 2021 Nheko Contributors
// SPDX-FileCopyrightText: 2022 Nheko Contributors
2021-03-14 04:45:20 +03:00
//
2021-03-05 02:35:15 +03:00
// SPDX-License-Identifier: GPL-3.0-or-later
2021-01-12 04:22:40 +03:00
import "./ui"
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
2020-11-20 03:22:36 +03:00
import im.nheko 1.0
2022-02-21 06:06:49 +03:00
Control {
2020-11-20 03:22:36 +03:00
id: popup
property alias currentIndex: listView.currentIndex
2020-11-20 03:22:36 +03:00
property string completerName
property var completer
2020-11-24 04:35:38 +03:00
property bool bottomToTop: true
property bool fullWidth: false
2021-02-24 11:08:01 +03:00
property bool centerRowContent: true
2021-02-23 19:06:21 +03:00
property int avatarHeight: 24
property int avatarWidth: 24
property int rowMargin: 0
property int rowSpacing: 5
property alias count: listView.count
2020-11-20 03:22:36 +03:00
2020-11-24 19:32:45 +03:00
signal completionClicked(string completion)
signal completionSelected(string id)
2020-11-24 19:32:45 +03:00
2020-11-20 03:22:36 +03:00
function up() {
2020-11-24 04:35:38 +03:00
if (bottomToTop)
down_();
else
up_();
}
function down() {
if (bottomToTop)
up_();
else
down_();
}
function up_() {
2020-11-20 03:22:36 +03:00
currentIndex = currentIndex - 1;
if (currentIndex == -2)
2020-11-24 04:35:38 +03:00
currentIndex = listView.count - 1;
2020-11-20 03:22:36 +03:00
}
2020-11-24 04:35:38 +03:00
function down_() {
2020-11-20 03:22:36 +03:00
currentIndex = currentIndex + 1;
2020-11-24 04:35:38 +03:00
if (currentIndex >= listView.count)
2020-11-20 03:22:36 +03:00
currentIndex = -1;
}
function currentCompletion() {
2020-11-24 04:35:38 +03:00
if (currentIndex > -1 && currentIndex < listView.count)
2020-11-20 03:22:36 +03:00
return completer.completionAt(currentIndex);
else
return null;
}
function finishCompletion() {
if (popup.completerName == "room")
popup.completionSelected(listView.itemAtIndex(currentIndex).modelData.roomid);
}
2020-11-20 03:22:36 +03:00
onCompleterNameChanged: {
2020-11-24 04:35:38 +03:00
if (completerName) {
2021-12-27 21:08:13 +03:00
completer = TimelineManager.completerFor(completerName, completerName == "room" ? "" : room.roomId);
2020-11-24 04:35:38 +03:00
completer.setSearchString("");
} else {
2020-11-20 04:38:08 +03:00
completer = undefined;
2020-11-24 04:35:38 +03:00
}
2022-02-21 06:06:49 +03:00
currentIndex = -1
2020-11-20 03:22:36 +03:00
}
2022-03-01 03:59:06 +03:00
bottomPadding: 1
leftPadding: 1
topPadding: 1
rightPadding: 1
2022-02-21 06:06:49 +03:00
contentItem: ListView {
2020-11-24 04:35:38 +03:00
id: listView
2020-11-20 03:22:36 +03:00
2022-02-21 06:06:49 +03:00
// 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
Timer {
id: deadTimer
interval: 50
}
onContentYChanged: deadTimer.restart()
reuseItems: true
2022-02-21 06:06:49 +03:00
implicitWidth: listView.contentItem.childrenRect.width
2020-11-24 04:35:38 +03:00
model: completer
verticalLayoutDirection: popup.bottomToTop ? ListView.BottomToTop : ListView.TopToBottom
spacing: rowSpacing
pixelAligned: true
highlightFollowsCurrentItem: true
2020-11-20 03:22:36 +03:00
2020-11-24 04:35:38 +03:00
delegate: Rectangle {
property variant modelData: model
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlight : timelineRoot.palette.base
height: chooser.child.implicitHeight + 2 * popup.rowMargin
2022-03-01 03:59:06 +03:00
implicitWidth: fullWidth ? ListView.view.width : chooser.child.implicitWidth + 4
2020-11-20 03:22:36 +03:00
2020-11-24 19:32:45 +03:00
MouseArea {
2021-01-12 04:22:40 +03:00
id: mouseArea
2020-11-24 19:32:45 +03:00
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);
}
}
Ripple {
2022-04-11 05:18:16 +03:00
color: Qt.rgba(timelineRoot.palette.base.r, timelineRoot.palette.base.g, timelineRoot.palette.base.b, 0.5)
2020-11-24 19:32:45 +03:00
}
2020-11-24 04:35:38 +03:00
DelegateChooser {
id: chooser
2020-11-20 03:22:36 +03:00
2020-11-24 04:35:38 +03:00
roleValue: popup.completerName
anchors.fill: parent
anchors.margins: popup.rowMargin
enabled: false
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
DelegateChoice {
roleValue: "user"
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
RowLayout {
id: del
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
anchors.centerIn: parent
spacing: rowSpacing
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
Avatar {
2021-02-23 19:06:21 +03:00
height: popup.avatarHeight
width: popup.avatarWidth
2020-11-24 04:35:38 +03:00
displayName: model.displayName
userid: model.userid
2020-11-24 04:35:38 +03:00
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
2021-01-12 04:02:39 +03:00
onClicked: popup.completionClicked(completer.completionAt(model.index))
2020-11-24 04:35:38 +03:00
}
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
Label {
text: model.displayName
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.text
2020-11-20 06:33:11 +03:00
}
2020-11-24 21:06:31 +03:00
Label {
text: "(" + model.userid + ")"
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.buttonText
2020-11-24 21:06:31 +03:00
}
2020-11-20 03:22:36 +03:00
}
2020-11-24 04:35:38 +03:00
}
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
DelegateChoice {
roleValue: "emoji"
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
RowLayout {
id: del
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
anchors.centerIn: parent
spacing: rowSpacing
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
Label {
text: model.unicode
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.text
2020-11-24 04:35:38 +03:00
font: Settings.emojiFont
}
2020-11-20 06:33:11 +03:00
2020-11-24 04:35:38 +03:00
Label {
text: model.shortName
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.text
2020-11-20 06:33:11 +03:00
}
2020-11-20 03:22:36 +03:00
}
}
DelegateChoice {
roleValue: "customEmoji"
RowLayout {
id: del
anchors.centerIn: parent
spacing: rowSpacing
Avatar {
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.shortcode
//userid: model.shortcode
url: model.url.replace("mxc://", "image://MxcImage/")
onClicked: popup.completionClicked(completer.completionAt(model.index))
crop: false
}
Label {
text: model.shortcode
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.text
}
Label {
text: "(" + model.packname + ")"
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.buttonText
}
}
}
DelegateChoice {
roleValue: "room"
RowLayout {
id: del
anchors.centerIn: centerRowContent ? parent : undefined
spacing: rowSpacing
Avatar {
2021-02-23 19:06:21 +03:00
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.roomName
roomid: model.roomid
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
onClicked: {
popup.completionClicked(completer.completionAt(model.index));
popup.completionSelected(model.roomid);
}
}
Label {
text: model.roomName
font.pixelSize: popup.avatarHeight * 0.5
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.text
2021-06-06 00:20:23 +03:00
textFormat: Text.RichText
}
}
}
DelegateChoice {
roleValue: "roomAliases"
RowLayout {
id: del
anchors.centerIn: parent
spacing: rowSpacing
Avatar {
2021-02-23 19:06:21 +03:00
height: popup.avatarHeight
width: popup.avatarWidth
displayName: model.roomName
roomid: model.roomid
url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
onClicked: popup.completionClicked(completer.completionAt(model.index))
}
Label {
text: model.roomName
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.text
2021-06-06 00:20:23 +03:00
textFormat: Text.RichText
}
Label {
text: "(" + model.roomAlias + ")"
2022-04-11 05:18:16 +03:00
color: model.index == popup.currentIndex ? timelineRoot.palette.highlightedText : timelineRoot.palette.buttonText
2021-06-06 00:20:23 +03:00
textFormat: Text.RichText
}
}
}
2020-11-20 03:22:36 +03:00
}
}
}
background: Rectangle {
2022-04-11 05:18:16 +03:00
color: timelineRoot.palette.base
border.color: timelineRoot.palette.mid
2020-11-20 03:22:36 +03:00
}
}