From a865aaabb1b07332aae23dd622c5ff1a7979bebd Mon Sep 17 00:00:00 2001 From: Black Hat Date: Sun, 4 Nov 2018 09:50:33 +0800 Subject: [PATCH] Merge user autocomplete and emoji autocomplete. #106 --- imports/Spectral/Panel/RoomPanelInput.qml | 154 +++++++--------------- 1 file changed, 47 insertions(+), 107 deletions(-) diff --git a/imports/Spectral/Panel/RoomPanelInput.qml b/imports/Spectral/Panel/RoomPanelInput.qml index 67facc5..23380dd 100644 --- a/imports/Spectral/Panel/RoomPanelInput.qml +++ b/imports/Spectral/Panel/RoomPanelInput.qml @@ -18,10 +18,8 @@ Rectangle { property string replyEventID property string replyContent - property bool isEmojiAutoCompleting - property bool isUserAutoCompleting - property var userAutoCompleteModel - property var emojiAutoCompleteModel + property bool isAutoCompleting + property var autoCompleteModel property int autoCompleteBeginPosition property int autoCompleteEndPosition @@ -35,25 +33,23 @@ Rectangle { Popup { x: 0 y: -height - 10 - width: Math.min(userAutoCompleteListView.contentWidth, parent.width) + width: Math.min(autoCompleteListView.contentWidth, parent.width) height: 36 padding: 0 Material.elevation: 2 - id: userAutoComplete + id: autoComplete - visible: isUserAutoCompleting && userAutoCompleteModel.length !== 0 + visible: isAutoCompleting && autoCompleteModel.length !== 0 contentItem: ListView { - id: userAutoCompleteListView + id: autoCompleteListView - model: userAutoCompleteModel + model: autoCompleteModel clip: true - orientation: ListView.Horizontal - highlightFollowsCurrentItem: true highlight: Rectangle { @@ -62,82 +58,42 @@ Rectangle { } delegate: ItemDelegate { - property string displayName: modelData.displayName + property string autoCompleteText: modelData.displayName || modelData.unicode + property bool isEmoji: modelData.unicode != null height: parent.height padding: 4 contentItem: Row { spacing: 8 + + Text { + width: parent.height + height: parent.height + visible: isEmoji + text: autoCompleteText + font.pointSize: 16 + font.family: "Emoji" + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } ImageItem { width: parent.height height: parent.height - image: modelData.avatar + visible: !isEmoji + image: spectralController.safeImage(modelData.avatar) } Label { height: parent.height - text: modelData.displayName + visible: !isEmoji + text: autoCompleteText verticalAlignment: Text.AlignVCenter } } - text: modelData.displayName - onClicked: { - userAutoCompleteListView.currentIndex = index - inputField.replaceAutoComplete(displayName) - } - } - } - } - - Popup { - x: 0 - y: -height - 10 - width: Math.min(emojiAutoCompleteListView.contentWidth, parent.width) - height: 36 - padding: 0 - - Material.elevation: 2 - - id: emojiAutoComplete - - visible: isEmojiAutoCompleting && emojiAutoCompleteModel.length !== 0 - - contentItem: ListView { - id: emojiAutoCompleteListView - - model: emojiAutoCompleteModel - - clip: true - - orientation: ListView.Horizontal - - highlightFollowsCurrentItem: true - - highlight: Rectangle { - color: Material.accent - opacity: 0.4 - } - - delegate: ItemDelegate { - property string unicode: modelData.unicode - - width: 36 - height: 36 - - contentItem: Text { - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - - font.pointSize: 20 - font.family: "Emoji" - text: modelData.unicode - } - - onClicked: { - emojiAutoCompleteListView.currentIndex = index - inputField.replaceAutoComplete(modelData.unicode) + autoCompleteListView.currentIndex = index + inputField.replaceAutoComplete(autoCompleteText) } } } @@ -250,37 +206,34 @@ Rectangle { } Keys.onBacktabPressed: { - if (isUserAutoCompleting) { - if (userAutoCompleteListView.currentIndex == 0) userAutoCompleteListView.currentIndex = userAutoCompleteListView.count - 1 - else userAutoCompleteListView.currentIndex-- - } - if (isEmojiAutoCompleting) { - if (emojiAutoCompleteListView.currentIndex == 0) emojiAutoCompleteListView.currentIndex = emojiAutoCompleteListView.count - 1 - else emojiAutoCompleteListView.currentIndex-- + if (isAutoCompleting) { + if (autoCompleteListView.currentIndex == 0) autoCompleteListView.currentIndex = autoCompleteListView.count - 1 + else autoCompleteListView.currentIndex-- } } Keys.onTabPressed: { - if (isEmojiAutoCompleting) { - if (emojiAutoCompleteListView.currentIndex + 1 == emojiAutoCompleteListView.count) emojiAutoCompleteListView.currentIndex = 0 - else emojiAutoCompleteListView.currentIndex++ - - replaceAutoComplete(emojiAutoCompleteListView.currentItem.unicode) + if (isAutoCompleting) { + if (autoCompleteListView.currentIndex + 1 == autoCompleteListView.count) autoCompleteListView.currentIndex = 0 + else autoCompleteListView.currentIndex++ } else { - if (isUserAutoCompleting) { - if (userAutoCompleteListView.currentIndex + 1 == userAutoCompleteListView.count) userAutoCompleteListView.currentIndex = 0 - else userAutoCompleteListView.currentIndex++ - } else { + autoCompleteBeginPosition = text.substring(0, cursorPosition).lastIndexOf(" ") + 1 + var autoCompletePrefix = text.substring(0, cursorPosition).split(" ").pop() + if (!autoCompletePrefix) return + if (autoCompletePrefix.startsWith(":")) { autoCompleteBeginPosition = text.substring(0, cursorPosition).lastIndexOf(" ") + 1 - var autoCompletePrefix = text.substring(0, cursorPosition).split(" ").pop() - if (!autoCompletePrefix) return - userAutoCompleteModel = currentRoom.getUsers(autoCompletePrefix) - if (userAutoCompleteModel.length === 0) return - isUserAutoCompleting = true + autoCompleteModel = emojiModel.filterModel(autoCompletePrefix) + if (autoCompleteModel.length === 0) return + isAutoCompleting = true + autoCompleteEndPosition = cursorPosition + } else { + autoCompleteModel = currentRoom.getUsers(autoCompletePrefix) + if (autoCompleteModel.length === 0) return + isAutoCompleting = true autoCompleteEndPosition = cursorPosition } - replaceAutoComplete(userAutoCompleteListView.currentItem.displayName) } + replaceAutoComplete(autoCompleteListView.currentItem.autoCompleteText) } onTextChanged: { @@ -289,21 +242,8 @@ Rectangle { currentRoom.cachedInput = text if (cursorPosition !== autoCompleteBeginPosition && cursorPosition !== autoCompleteEndPosition) { - isUserAutoCompleting = false - isEmojiAutoCompleting = false - userAutoCompleteListView.currentIndex = 0 - emojiAutoCompleteListView.currentIndex = 0 - } - - var autoCompletePrefix = text.substring(0, cursorPosition).split(" ").pop() - if (autoCompletePrefix.startsWith(":")) { - if (autoCompletePrefix.length < 3) return - autoCompleteBeginPosition = text.substring(0, cursorPosition).lastIndexOf(" ") + 1 - emojiAutoCompleteModel = emojiModel.filterModel(autoCompletePrefix) - if (emojiAutoCompleteModel.length === 0) return - console.log("Auto completing emoji.") - isEmojiAutoCompleting = true - autoCompleteEndPosition = cursorPosition + isAutoCompleting = false + autoCompleteListView.currentIndex = 0 } }