Fix forward completer

This commit is contained in:
Nicolas Werner 2022-02-21 04:06:49 +01:00
parent 1c8a5c645d
commit 609cd82dc0
No known key found for this signature in database
GPG key ID: C8D75E610773F2D9
4 changed files with 116 additions and 113 deletions

View file

@ -9,7 +9,7 @@ import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15 import QtQuick.Layouts 1.15
import im.nheko 1.0 import im.nheko 1.0
Popup { Control {
id: popup id: popup
property alias currentIndex: listView.currentIndex property alias currentIndex: listView.currentIndex
@ -75,19 +75,23 @@ Popup {
} else { } else {
completer = undefined; completer = undefined;
} }
currentIndex = -1
} }
padding: 1 padding: 0
onAboutToShow: currentIndex = -1 leftInset: 1
bottomInset: 1
topInset: 1
rightInset: 1
contentItem: ListView {
id: listView
// If we have fewer than 7 items, just use the list view's content height. // 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 // 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 // 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 // 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! // that until we find something better. Put is all together and you have the formula below!
height: Math.min(listView.contentHeight + 2, 6*rowSpacing + 7*(popup.avatarHeight + 2*rowMargin) + 2) implicitHeight: Math.min(contentHeight, 6*rowSpacing + 7*(popup.avatarHeight + 2*rowMargin))
ListView {
id: listView
clip: true clip: true
ScrollHelper { ScrollHelper {
flickable: parent flickable: parent
@ -103,8 +107,8 @@ Popup {
onContentYChanged: deadTimer.restart() onContentYChanged: deadTimer.restart()
reuseItems: true reuseItems: true
anchors.fill: parent //anchors.fill: parent
implicitWidth: fullWidth ? parent.width : contentItem.childrenRect.width implicitWidth: listView.contentItem.childrenRect.width
model: completer model: completer
verticalLayoutDirection: popup.bottomToTop ? ListView.BottomToTop : ListView.TopToBottom verticalLayoutDirection: popup.bottomToTop ? ListView.BottomToTop : ListView.TopToBottom
spacing: rowSpacing spacing: rowSpacing
@ -116,7 +120,7 @@ Popup {
color: model.index == popup.currentIndex ? Nheko.colors.highlight : Nheko.colors.base color: model.index == popup.currentIndex ? Nheko.colors.highlight : Nheko.colors.base
height: chooser.child.implicitHeight + 2 * popup.rowMargin height: chooser.child.implicitHeight + 2 * popup.rowMargin
implicitWidth: fullWidth ? popup.contentWidth : chooser.child.implicitWidth + 4 implicitWidth: fullWidth ? popup.implicitContentWidth : chooser.child.implicitWidth + 4
MouseArea { MouseArea {
id: mouseArea id: mouseArea
@ -303,30 +307,9 @@ Popup {
} }
enter: Transition {
NumberAnimation {
property: "opacity"
from: 0
to: 1
duration: 100
}
}
exit: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: 100
}
}
background: Rectangle { background: Rectangle {
color: Nheko.colors.base color: Nheko.colors.base
implicitHeight: popup.contentHeight
implicitWidth: popup.contentWidth
border.color: Nheko.colors.mid border.color: Nheko.colors.mid
} }

View file

@ -18,21 +18,16 @@ Popup {
} }
x: Math.round(parent.width / 2 - width / 2) x: Math.round(parent.width / 2 - width / 2)
y: Math.round(parent.height / 2 - height / 2) y: Math.round(parent.height / 4)
modal: true modal: true
palette: Nheko.colors palette: Nheko.colors
parent: Overlay.overlay parent: Overlay.overlay
width: implicitWidth >= (timelineRoot.width * 0.8) ? implicitWidth : (timelineRoot.width * 0.8) width: timelineRoot.width * 0.8
height: implicitHeight + completerPopup.height + padding * 2
leftPadding: 10 leftPadding: 10
rightPadding: 10 rightPadding: 10
onOpened: { onOpened: {
completerPopup.open();
roomTextInput.forceActiveFocus(); roomTextInput.forceActiveFocus();
} }
onClosed: {
completerPopup.close();
}
Column { Column {
id: forwardColumn id: forwardColumn
@ -54,6 +49,8 @@ Popup {
property var modelData: room ? room.getDump(mid, "") : { property var modelData: room ? room.getDump(mid, "") : {
} }
width: parent.width
userColor: TimelineManager.userColor(modelData.userId, Nheko.colors.window) userColor: TimelineManager.userColor(modelData.userId, Nheko.colors.window)
blurhash: modelData.blurhash ?? "" blurhash: modelData.blurhash ?? ""
body: modelData.body ?? "" body: modelData.body ?? ""
@ -81,10 +78,10 @@ Popup {
completerPopup.completer.searchString = text; completerPopup.completer.searchString = text;
} }
Keys.onPressed: { Keys.onPressed: {
if ((event.key == Qt.Key_Up || event.key == Qt.Key_Backtab) && completerPopup.opened) { if (event.key == Qt.Key_Up || event.key == Qt.Key_Backtab) {
event.accepted = true; event.accepted = true;
completerPopup.up(); completerPopup.up();
} else if ((event.key == Qt.Key_Down || event.key == Qt.Key_Tab) && completerPopup.opened) { } else if (event.key == Qt.Key_Down || event.key == Qt.Key_Tab) {
event.accepted = true; event.accepted = true;
if (event.key == Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier)) if (event.key == Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))
completerPopup.up(); completerPopup.up();
@ -97,12 +94,9 @@ Popup {
} }
} }
}
Completer { Completer {
id: completerPopup id: completerPopup
y: titleLabel.height + replyPreview.height + roomTextInput.height + roomTextInput.bottomPadding + forwardColumn.spacing * 3
width: forwardMessagePopup.width - forwardMessagePopup.leftPadding * 2 width: forwardMessagePopup.width - forwardMessagePopup.leftPadding * 2
completerName: "room" completerName: "room"
fullWidth: true fullWidth: true
@ -110,7 +104,8 @@ Popup {
avatarHeight: 24 avatarHeight: 24
avatarWidth: 24 avatarWidth: 24
bottomToTop: false bottomToTop: false
closePolicy: Popup.NoAutoClose }
} }
Connections { Connections {

View file

@ -110,9 +110,9 @@ Rectangle {
function openCompleter(pos, type) { function openCompleter(pos, type) {
if (popup.opened) return; if (popup.opened) return;
completerTriggeredAt = pos; completerTriggeredAt = pos;
popup.completerName = type; completer.completerName = type;
popup.open(); popup.open();
popup.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition)); completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition));
} }
function positionCursorAtEnd() { function positionCursorAtEnd() {
@ -149,7 +149,7 @@ Rectangle {
popup.close(); popup.close();
if (popup.opened) if (popup.opened)
popup.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition)); completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition));
} }
onSelectionStartChanged: room.input.updateState(selectionStart, selectionEnd, cursorPosition, text) onSelectionStartChanged: room.input.updateState(selectionStart, selectionEnd, cursorPosition, text)
@ -183,16 +183,16 @@ Rectangle {
} else if (event.text == "~") { } else if (event.text == "~") {
messageInput.openCompleter(selectionStart, "customEmoji"); messageInput.openCompleter(selectionStart, "customEmoji");
} else if (event.key == Qt.Key_Escape && popup.opened) { } else if (event.key == Qt.Key_Escape && popup.opened) {
popup.completerName = ""; completer.completerName = "";
popup.close(); popup.close();
event.accepted = true; event.accepted = true;
} else if (event.matches(StandardKey.SelectAll) && popup.opened) { } else if (event.matches(StandardKey.SelectAll) && popup.opened) {
popup.completerName = ""; completer.completerName = "";
popup.close(); popup.close();
} else if (event.matches(StandardKey.InsertParagraphSeparator)) { } else if (event.matches(StandardKey.InsertParagraphSeparator)) {
if (popup.opened) { if (popup.opened) {
var currentCompletion = popup.currentCompletion(); var currentCompletion = completer.currentCompletion();
popup.completerName = ""; completer.completerName = "";
popup.close(); popup.close();
if (currentCompletion) { if (currentCompletion) {
messageInput.insertCompletion(currentCompletion); messageInput.insertCompletion(currentCompletion);
@ -206,9 +206,9 @@ Rectangle {
event.accepted = true; event.accepted = true;
if (popup.opened) { if (popup.opened) {
if (event.modifiers & Qt.ShiftModifier) if (event.modifiers & Qt.ShiftModifier)
popup.down(); completer.down();
else else
popup.up(); completer.up();
} else { } else {
var pos = cursorPosition - 1; var pos = cursorPosition - 1;
while (pos > -1) { while (pos > -1) {
@ -234,10 +234,10 @@ Rectangle {
} }
} else if (event.key == Qt.Key_Up && popup.opened) { } else if (event.key == Qt.Key_Up && popup.opened) {
event.accepted = true; event.accepted = true;
popup.up(); completer.up();
} else if ((event.key == Qt.Key_Down || event.key == Qt.Key_Backtab) && popup.opened) { } else if ((event.key == Qt.Key_Down || event.key == Qt.Key_Backtab) && popup.opened) {
event.accepted = true; event.accepted = true;
popup.down(); completer.down();
} else if (event.key == Qt.Key_Up && event.modifiers == Qt.NoModifier) { } else if (event.key == Qt.Key_Up && event.modifiers == Qt.NoModifier) {
if (cursorPosition == 0) { if (cursorPosition == 0) {
event.accepted = true; event.accepted = true;
@ -283,7 +283,7 @@ Rectangle {
if (room) if (room)
messageInput.append(room.input.text); messageInput.append(room.input.text);
popup.completerName = ""; completer.completerName = "";
messageInput.forceActiveFocus(); messageInput.forceActiveFocus();
} }
@ -295,14 +295,40 @@ Rectangle {
messageInput.insertCompletion(completion); messageInput.insertCompletion(completion);
} }
target: popup target: completer
} }
Completer { Popup {
id: popup id: popup
x: messageInput.positionToRectangle(messageInput.completerTriggeredAt).x x: messageInput.positionToRectangle(messageInput.completerTriggeredAt).x
y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height
padding: 0
background: null
Completer {
anchors.fill: parent
id: completer
}
enter: Transition {
NumberAnimation {
property: "opacity"
from: 0
to: 1
duration: 100
}
}
exit: Transition {
NumberAnimation {
property: "opacity"
from: 1
to: 0
duration: 100
}
}
} }
Connections { Connections {

View file

@ -3,8 +3,9 @@
// //
// SPDX-License-Identifier: GPL-3.0-or-later // SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick 2.9 import QtQuick 2.15
import QtQuick.Controls 2.3 import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import im.nheko 1.0 import im.nheko 1.0
Popup { Popup {
@ -14,34 +15,34 @@ Popup {
background: null background: null
width: Math.min(Math.max(Math.round(parent.width / 2),450),parent.width) // limiting width to parent.width/2 can be a bit narrow width: Math.min(Math.max(Math.round(parent.width / 2),450),parent.width) // limiting width to parent.width/2 can be a bit narrow
x: Math.round(parent.width / 2 - width / 2) x: Math.round(parent.width / 2 - contentWidth / 2)
y: Math.round(parent.height / 4 - height / 2) y: Math.round(parent.height / 4)
modal: true modal: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
parent: Overlay.overlay parent: Overlay.overlay
palette: Nheko.colors palette: Nheko.colors
onOpened: { onOpened: {
completerPopup.open();
roomTextInput.forceActiveFocus(); roomTextInput.forceActiveFocus();
} }
onClosed: {
completerPopup.close(); Column{
} anchors.fill: parent
spacing: 1
MatrixTextField { MatrixTextField {
id: roomTextInput id: roomTextInput
anchors.fill: parent width: parent.width
font.pixelSize: Math.ceil(quickSwitcher.textHeight * 0.6) font.pixelSize: Math.ceil(quickSwitcher.textHeight * 0.6)
color: Nheko.colors.text color: Nheko.colors.text
onTextEdited: { onTextEdited: {
completerPopup.completer.searchString = text; completerPopup.completer.searchString = text;
} }
Keys.onPressed: { Keys.onPressed: {
if ((event.key == Qt.Key_Up || event.key == Qt.Key_Backtab) && completerPopup.opened) { if (event.key == Qt.Key_Up || event.key == Qt.Key_Backtab) {
event.accepted = true; event.accepted = true;
completerPopup.up(); completerPopup.up();
} else if ((event.key == Qt.Key_Down || event.key == Qt.Key_Tab) && completerPopup.opened) { } else if (event.key == Qt.Key_Down || event.key == Qt.Key_Tab) {
event.accepted = true; event.accepted = true;
if (event.key == Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier)) if (event.key == Qt.Key_Tab && (event.modifiers & Qt.ShiftModifier))
completerPopup.up(); completerPopup.up();
@ -57,9 +58,7 @@ Popup {
Completer { Completer {
id: completerPopup id: completerPopup
x: roomTextInput.x visible: roomTextInput.text.length > 0
y: roomTextInput.y + quickSwitcher.textHeight
visible: roomTextInput.length > 0
width: parent.width width: parent.width
completerName: "room" completerName: "room"
bottomToTop: false bottomToTop: false
@ -69,7 +68,7 @@ Popup {
centerRowContent: false centerRowContent: false
rowMargin: Math.round(quickSwitcher.textMargin / 2) rowMargin: Math.round(quickSwitcher.textMargin / 2)
rowSpacing: quickSwitcher.textMargin rowSpacing: quickSwitcher.textMargin
closePolicy: Popup.NoAutoClose }
} }
Connections { Connections {