// SPDX-FileCopyrightText: 2021 Nheko Contributors // SPDX-FileCopyrightText: 2022 Nheko Contributors // SPDX-License-Identifier: GPL-3.0-or-later import "emoji" import "voip" import QtQuick 2.12 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.2 import QtQuick.Window 2.13 import im.nheko Rectangle { id: inputBar property bool showAllButtons: width > 450 || (messageInput.length == 0 && !messageInput.inputMethodComposing) Layout.fillWidth: true Layout.minimumHeight: 40 Layout.preferredHeight: row.implicitHeight color: timelineRoot.palette.window Component { id: placeCallDialog PlaceCall { } } Component { id: screenShareDialog ScreenShare { } } RowLayout { id: row anchors.fill: parent spacing: 0 visible: room ? room.permissions.canSend(MtxEvent.TextMessage) : false ImageButton { Layout.alignment: Qt.AlignBottom Layout.margins: 8 ToolTip.text: CallManager.isOnCall ? qsTr("Hang up") : qsTr("Place a call") ToolTip.visible: hovered height: 22 hoverEnabled: true image: CallManager.isOnCall ? ":/icons/icons/ui/end-call.svg" : ":/icons/icons/ui/place-call.svg" opacity: CallManager.haveCallInvite ? 0.3 : 1 visible: CallManager.callsSupported && showAllButtons width: 22 onClicked: { if (room) { if (CallManager.haveCallInvite) { return; } else if (CallManager.isOnCall) { CallManager.hangUp(); } else { var dialog = placeCallDialog.createObject(timelineRoot); dialog.open(); timelineRoot.destroyOnClose(dialog); } } } } ImageButton { Layout.alignment: Qt.AlignBottom Layout.margins: 8 ToolTip.text: qsTr("Send a file") ToolTip.visible: hovered height: 22 hoverEnabled: true image: ":/icons/icons/ui/attach.svg" visible: showAllButtons width: 22 onClicked: room.input.openFileSelection() Rectangle { anchors.fill: parent color: timelineRoot.palette.window visible: room && room.input.uploading NhekoBusyIndicator { anchors.fill: parent running: parent.visible } } } ScrollView { id: textInput Layout.alignment: Qt.AlignVCenter Layout.fillWidth: true Layout.maximumHeight: Window.height / 4 Layout.minimumHeight: fontMetrics.lineSpacing Layout.preferredHeight: contentHeight ScrollBar.horizontal.policy: ScrollBar.AlwaysOff contentWidth: availableWidth TextArea { id: messageInput property int completerTriggeredAt: 0 property string lastChar function insertCompletion(completion) { messageInput.remove(completerTriggeredAt, cursorPosition); messageInput.insert(cursorPosition, completion); } function openCompleter(pos, type) { if (popup.opened) return; completerTriggeredAt = pos; completer.completerName = type; popup.open(); completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition) + messageInput.preeditText); } function positionCursorAtEnd() { cursorPosition = messageInput.length; } function positionCursorAtStart() { cursorPosition = 0; } background: null bottomPadding: 8 color: timelineRoot.palette.text focus: true leftPadding: inputBar.showAllButtons ? 0 : 8 padding: 0 placeholderText: qsTr("Write a message...") placeholderTextColor: timelineRoot.palette.placeholderText selectByMouse: true topPadding: 8 verticalAlignment: TextEdit.AlignVCenter width: textInput.width wrapMode: TextEdit.Wrap Keys.onPressed: { if (event.matches(StandardKey.Paste)) { room.input.paste(false); event.accepted = true; } else if (event.key == Qt.Key_Space) { // close popup if user enters space after colon if (cursorPosition == completerTriggeredAt + 1) popup.close(); if (popup.opened && completer.count <= 0) popup.close(); } else if (event.modifiers == Qt.ControlModifier && event.key == Qt.Key_U) { messageInput.clear(); } else if (event.modifiers == Qt.ControlModifier && event.key == Qt.Key_P) { messageInput.text = room.input.previousText(); } else if (event.modifiers == Qt.ControlModifier && event.key == Qt.Key_N) { messageInput.text = room.input.nextText(); } else if (event.key == Qt.Key_Escape && popup.opened) { completer.completerName = ""; popup.close(); event.accepted = true; } else if (event.matches(StandardKey.SelectAll) && popup.opened) { completer.completerName = ""; popup.close(); } else if (event.matches(StandardKey.InsertLineSeparator)) { if (popup.opened) popup.close(); } else if (event.matches(StandardKey.InsertParagraphSeparator)) { if (popup.opened) { var currentCompletion = completer.currentCompletion(); completer.completerName = ""; popup.close(); if (currentCompletion) { messageInput.insertCompletion(currentCompletion); event.accepted = true; return; } } if (!Qt.inputMethod.visible) { room.input.send(); event.accepted = true; } } else if (event.key == Qt.Key_Tab && (event.modifiers == Qt.NoModifier || event.modifiers == Qt.ShiftModifier)) { event.accepted = true; if (popup.opened) { if (event.modifiers & Qt.ShiftModifier) completer.down(); else completer.up(); } else { var pos = cursorPosition - 1; while (pos > -1) { var t = messageInput.getText(pos, pos + 1); console.log('"' + t + '"'); if (t == '@') { messageInput.openCompleter(pos, "user"); return; } else if (t == ' ' || t == '\t') { messageInput.openCompleter(pos + 1, "user"); return; } else if (t == ':') { messageInput.openCompleter(pos, "emoji"); return; } else if (t == '~') { messageInput.openCompleter(pos, "customEmoji"); return; } pos = pos - 1; } // At start of input messageInput.openCompleter(0, "user"); } } else if (event.key == Qt.Key_Up && popup.opened) { event.accepted = true; completer.up(); } else if ((event.key == Qt.Key_Down || event.key == Qt.Key_Backtab) && popup.opened) { event.accepted = true; completer.down(); } else if (event.key == Qt.Key_Up && event.modifiers == Qt.NoModifier) { if (cursorPosition == 0) { event.accepted = true; var idx = room.edit ? room.idToIndex(room.edit) + 1 : 0; while (true) { var id = room.indexToId(idx); if (!id || room.getDump(id, "").isEditable) { room.edit = id; cursorPosition = 0; Qt.callLater(positionCursorAtEnd); break; } idx++; } } else if (positionAt(0, cursorRectangle.y) === 0) { event.accepted = true; positionCursorAtStart(); } } else if (event.key == Qt.Key_Down && event.modifiers == Qt.NoModifier) { if (cursorPosition == messageInput.length && room.edit) { event.accepted = true; var idx = room.idToIndex(room.edit) - 1; while (true) { var id = room.indexToId(idx); if (!id || room.getDump(id, "").isEditable) { room.edit = id; Qt.callLater(positionCursorAtStart); break; } idx--; } } else if (positionAt(width, cursorRectangle.y + 2) === messageInput.length) { event.accepted = true; positionCursorAtEnd(); } } } // Ensure that we get escape key press events first. Keys.onShortcutOverride: event.accepted = (popup.opened && (event.key === Qt.Key_Escape || event.key === Qt.Key_Tab || event.key === Qt.Key_Enter || event.key === Qt.Key_Space)) onCursorPositionChanged: { if (!room) return; room.input.updateState(selectionStart, selectionEnd, cursorPosition, text); if (popup.opened && cursorPosition <= completerTriggeredAt) popup.close(); if (popup.opened) completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition) + messageInput.preeditText); } onPreeditTextChanged: { if (popup.opened) completer.completer.setSearchString(messageInput.getText(completerTriggeredAt, cursorPosition) + messageInput.preeditText); } onSelectionEndChanged: room.input.updateState(selectionStart, selectionEnd, cursorPosition, text) onSelectionStartChanged: room.input.updateState(selectionStart, selectionEnd, cursorPosition, text) onTextChanged: { if (room) room.input.updateState(selectionStart, selectionEnd, cursorPosition, text); forceActiveFocus(); if (cursorPosition > 0) lastChar = text.charAt(cursorPosition - 1); else lastChar = ''; if (lastChar == '@') { messageInput.openCompleter(selectionStart - 1, "user"); } else if (lastChar == ':') { messageInput.openCompleter(selectionStart - 1, "emoji"); } else if (lastChar == '#') { messageInput.openCompleter(selectionStart - 1, "roomAliases"); } else if (lastChar == "~") { messageInput.openCompleter(selectionStart - 1, "customEmoji"); } } Connections { function onRoomChanged() { messageInput.clear(); if (room) messageInput.append(room.input.text); completer.completerName = ""; messageInput.forceActiveFocus(); } target: timelineView } Connections { function onCompletionClicked(completion) { messageInput.insertCompletion(completion); } target: completer } Popup { id: popup background: null padding: 0 x: messageInput.positionToRectangle(messageInput.completerTriggeredAt).x y: messageInput.positionToRectangle(messageInput.completerTriggeredAt).y - height enter: Transition { NumberAnimation { duration: 100 from: 0 property: "opacity" to: 1 } } exit: Transition { NumberAnimation { duration: 100 from: 1 property: "opacity" to: 0 } } Completer { id: completer anchors.fill: parent rowMargin: 2 rowSpacing: 0 } } Connections { function onInsertText(text) { messageInput.remove(messageInput.selectionStart, messageInput.selectionEnd); messageInput.insert(messageInput.cursorPosition, text); } function onTextChanged(newText) { messageInput.text = newText; messageInput.cursorPosition = newText.length; } ignoreUnknownSignals: true target: room ? room.input : null } Connections { function onEditChanged() { messageInput.forceActiveFocus(); } function onReplyChanged() { messageInput.forceActiveFocus(); } ignoreUnknownSignals: true target: room } Connections { function onFocusInput() { messageInput.forceActiveFocus(); } target: TimelineManager } MouseArea { acceptedButtons: Qt.MiddleButton // workaround for wrong cursor shape on some platforms anchors.fill: parent cursorShape: Qt.IBeamCursor onClicked: room.input.paste(true) } } } ImageButton { id: stickerButton Layout.alignment: Qt.AlignRight | Qt.AlignBottom Layout.margins: 8 ToolTip.text: qsTr("Stickers") ToolTip.visible: hovered height: 22 hoverEnabled: true image: ":/icons/icons/ui/sticky-note-solid.svg" visible: showAllButtons width: 22 onClicked: stickerPopup.visible ? stickerPopup.close() : stickerPopup.show(stickerButton, room.roomId, function (row) { room.input.sticker(stickerPopup.model.sourceModel, row); TimelineManager.focusMessageInput(); }) StickerPicker { id: stickerPopup colors: timelineRoot.palette } } ImageButton { id: emojiButton Layout.alignment: Qt.AlignRight | Qt.AlignBottom Layout.margins: 8 ToolTip.text: qsTr("Emoji") ToolTip.visible: hovered height: 22 hoverEnabled: true image: ":/icons/icons/ui/smile.svg" width: 22 onClicked: emojiPopup.visible ? emojiPopup.close() : emojiPopup.show(emojiButton, function (emoji) { messageInput.insert(messageInput.cursorPosition, emoji); TimelineManager.focusMessageInput(); }) } ImageButton { Layout.alignment: Qt.AlignRight | Qt.AlignBottom Layout.margins: 8 Layout.rightMargin: 8 ToolTip.text: qsTr("Send") ToolTip.visible: hovered height: 22 hoverEnabled: true image: ":/icons/icons/ui/send.svg" width: 22 onClicked: { room.input.send(); } } } Text { anchors.centerIn: parent color: timelineRoot.palette.text text: qsTr("You don't have permission to send messages in this room") visible: room ? (!room.permissions.canSend(MtxEvent.TextMessage)) : false } }