From kde-commits Sat Jun 11 18:40:47 2016 From: Martin Klapetek Date: Sat, 11 Jun 2016 18:40:47 +0000 To: kde-commits Subject: [spacebar] app/package/contents/ui: [app] Split the emoji handling TextArea to separate file Message-Id: X-MARC-Message: https://marc.info/?l=kde-commits&m=146567045725872 Git commit e3ba17be9227d1a9e9ee674e62e8f4cd16fd35c3 by Martin Klapetek. Committed on 11/06/2016 at 18:38. Pushed by mklapetek into branch 'master'. [app] Split the emoji handling TextArea to separate file M +4 -35 app/package/contents/ui/ConversationPage.qml A +168 -0 app/package/contents/ui/EmojiTextArea.qml [License: LGPL= (v2+)] http://commits.kde.org/spacebar/e3ba17be9227d1a9e9ee674e62e8f4cd16fd35c3 diff --git a/app/package/contents/ui/ConversationPage.qml b/app/package/con= tents/ui/ConversationPage.qml index b5fa9b8..63d49ec 100644 --- a/app/package/contents/ui/ConversationPage.qml +++ b/app/package/contents/ui/ConversationPage.qml @@ -238,44 +238,13 @@ Kirigami.Page { = RowLayout { = - TextArea { - id: messageTextField + EmojiTextArea { + id: emojiTextArea Layout.fillWidth: true Layout.minimumHeight: sendButton.height - Layout.maximumHeight: lineCount * fontMetrics.lineSpac= ing + units.largeSpacing + Layout.maximumHeight: emojiTextArea.lineCount * emojiT= extArea.lineSpacing + units.largeSpacing = - verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff - horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff - wrapMode: TextEdit.WordWrap - - FontMetrics { - id: fontMetrics - font: messageTextField.font - } - - Keys.onReturnPressed: { - if (event.modifiers =3D=3D Qt.NoModifier) { - if (conversation.canSendMessages) { - view.model.sendNewMessage(text); - text =3D ""; - } else { - // TODO better text - showPassiveNotification(i18n("You need to = connect first"), 3000); - } - } else if (event.modifiers !=3D Qt.NoModifier) { - event.accepted =3D false; - } - } - - Connections { - target: conversationPage - onInsertEmoji: { - messageTextField.insert(messageTextField.curso= rPosition, emoji + " "); - } - onFocusTextInput: { - messageTextField.forceActiveFocus(); - } - } + emojisAutocompletionModel: emojisModel } = Button { diff --git a/app/package/contents/ui/EmojiTextArea.qml b/app/package/conten= ts/ui/EmojiTextArea.qml new file mode 100644 index 0000000..4a08c55 --- /dev/null +++ b/app/package/contents/ui/EmojiTextArea.qml @@ -0,0 +1,168 @@ +/** + * Copyright 2016 Martin Klapetek + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU Library General Public License as + * published by the Free Software Foundation; either version 2 or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details + * + * You should have received a copy of the GNU Library General Public + * License along with this program; if not, write to the + * Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.5 +import QtQuick.Controls 1.4 +import QtQuick.Layouts 1.1 +import org.kde.telepathy 0.1 +import org.kde.kirigami 1.0 as Kirigami +import org.kde.plasma.core 2.1 as PlasmaCore + +TextArea { + id: messageTextField + + verticalScrollBarPolicy: Qt.ScrollBarAlwaysOff + horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff + wrapMode: TextEdit.WordWrap + textFormat: TextEdit.RichText + + property int acc: -1 + property alias emojisAutocompletionModel: emojisAutocompletionFilter.s= ourceModel + property alias lineSpacing: fontMetrics.lineSpacing + + FontMetrics { + id: fontMetrics + font: messageTextField.font + } + + TextAreaEmojisHandler { + id: emojisHandler + textArea: messageTextField + } + + Rectangle { + id: autoSuggest + color: "white" + width: parent.width + height: Math.min(emojiAutocompletionView.count * 32, 32 * 9) + visible: false + y: -height - units.smallSpacing + clip: true + + function hide() { + emojisAutocompletionFilter.filterString =3D ""; + messageTextField.acc =3D -1; + autoSuggest.visible =3D false; + } + + ListView { + id: emojiAutocompletionView + anchors.fill: parent + model: PlasmaCore.SortFilterModel { + id: emojisAutocompletionFilter + filterRole: "emojiText" + sortRole: "emojiText" + } + + delegate: MouseArea { + width: parent.width - units.smallSpacing + height: 32 + x: units.smallSpacing + z: 250 + + onClicked: { + messageTextField.selectWord(); + messageTextField.remove(messageTextField.selectionStar= t, messageTextField.selectionEnd); + messageTextField.insert(messageTextField.cursorPositio= n, model.emojiText.substr(1) + " "); + autoSuggest.visible =3D false; + messageTextField.acc =3D -1; + emojisAutocompletionFilter.filterString =3D ""; + } + + PlasmaCore.IconItem { + id: emojiIcon + height: 24 + width: 24 + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + source: model.emojiFullPath + } + + Kirigami.Label { + anchors.left: emojiIcon.right + anchors.right: parent.right + anchors.verticalCenter: emojiIcon.verticalCenter + anchors.margins: units.largeSpacing + textFormat: Text.StyledText + text: model.emojiText ? model.emojiText.replace(emojis= AutocompletionFilter.filterString, + "" + emojisAutocomple= tionFilter.filterString + "") + : ""; + } + } + } + } + + Keys.onPressed: { + if (event.text =3D=3D ":") { + if (acc > 0) { + autoSuggest.hide(); + } else { + acc =3D 0; + } + return; + } + + if (acc =3D=3D -1) { + return; + } + + if (event.key =3D=3D Qt.Key_Space || event.key =3D=3D Qt.Key_Escap= e) { + autoSuggest.hide(); + } + + acc++; + + if (event.key =3D=3D Qt.Key_Backspace) { + emojisAutocompletionFilter.filterString =3D emojisAutocompleti= onFilter.filterString.slice(0, -1); + if (emojisAutocompletionFilter.filterString.length =3D=3D 0) { + autoSuggest.hide(); + } + } else { + emojisAutocompletionFilter.filterString =3D emojisAutocompleti= onFilter.filterString + event.text; + } + + if (acc >=3D 2) { + autoSuggest.visible =3D true; + } + } + + Keys.onReturnPressed: { + if (event.modifiers =3D=3D Qt.NoModifier) { + if (conversation.canSendMessages) { + view.model.sendNewMessage(emojisHandler.getText()); + text =3D ""; + } else { + // TODO better text + showPassiveNotification(i18n("You need to connect first"),= 3000); + } + } else if (event.modifiers !=3D Qt.NoModifier) { + event.accepted =3D false; + } + } + + Connections { + target: conversationPage + onInsertEmoji: { + messageTextField.insert(messageTextField.cursorPosition, emoji= + " "); + } + onFocusTextInput: { + messageTextField.forceActiveFocus(); + } + } +}