tan
/
Spectral
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge user autocomplete and emoji autocomplete. #106

This commit is contained in:
Black Hat 2018-11-04 09:50:33 +08:00
parent 040b24e0d2
commit a865aaabb1
1 changed files with 47 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
imports/Spectral/Panel/RoomPanelInput.qml
View File

@ -18,10 +18,8 @@ Rectangle {
property string replyEventID property string replyEventID
property string replyContent property string replyContent
property bool isEmojiAutoCompleting property bool isAutoCompleting
property bool isUserAutoCompleting property var autoCompleteModel
property var userAutoCompleteModel
property var emojiAutoCompleteModel
property int autoCompleteBeginPosition property int autoCompleteBeginPosition
property int autoCompleteEndPosition property int autoCompleteEndPosition
@ -35,25 +33,23 @@ Rectangle {
Popup { Popup {
x: 0 x: 0
y: -height - 10 y: -height - 10
width: Math.min(userAutoCompleteListView.contentWidth, parent.width) width: Math.min(autoCompleteListView.contentWidth, parent.width)
height: 36 height: 36
padding: 0 padding: 0
Material.elevation: 2 Material.elevation: 2
id: userAutoComplete id: autoComplete
visible: isUserAutoCompleting && userAutoCompleteModel.length !== 0 visible: isAutoCompleting && autoCompleteModel.length !== 0
contentItem: ListView { contentItem: ListView {
id: userAutoCompleteListView id: autoCompleteListView
model: userAutoCompleteModel model: autoCompleteModel
clip: true clip: true
orientation: ListView.Horizontal orientation: ListView.Horizontal
highlightFollowsCurrentItem: true highlightFollowsCurrentItem: true
highlight: Rectangle { highlight: Rectangle {
@ -62,82 +58,42 @@ Rectangle {
} }
delegate: ItemDelegate { delegate: ItemDelegate {
property string displayName: modelData.displayName property string autoCompleteText: modelData.displayName || modelData.unicode
property bool isEmoji: modelData.unicode != null
height: parent.height height: parent.height
padding: 4 padding: 4
contentItem: Row { contentItem: Row {
spacing: 8 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 { ImageItem {
width: parent.height width: parent.height
height: parent.height height: parent.height
image: modelData.avatar visible: !isEmoji
image: spectralController.safeImage(modelData.avatar)
} }
Label { Label {
height: parent.height height: parent.height
text: modelData.displayName visible: !isEmoji
text: autoCompleteText
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
} }
text: modelData.displayName
onClicked: { onClicked: {
userAutoCompleteListView.currentIndex = index autoCompleteListView.currentIndex = index
inputField.replaceAutoComplete(displayName) inputField.replaceAutoComplete(autoCompleteText)
}
}
}
}
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)
} }
} }
} }
@ -250,37 +206,34 @@ Rectangle {
} }
Keys.onBacktabPressed: { Keys.onBacktabPressed: {
if (isUserAutoCompleting) { if (isAutoCompleting) {
if (userAutoCompleteListView.currentIndex == 0) userAutoCompleteListView.currentIndex = userAutoCompleteListView.count - 1 if (autoCompleteListView.currentIndex == 0) autoCompleteListView.currentIndex = autoCompleteListView.count - 1
else userAutoCompleteListView.currentIndex-- else autoCompleteListView.currentIndex--
}
if (isEmojiAutoCompleting) {
if (emojiAutoCompleteListView.currentIndex == 0) emojiAutoCompleteListView.currentIndex = emojiAutoCompleteListView.count - 1
else emojiAutoCompleteListView.currentIndex--
} }
} }
Keys.onTabPressed: { Keys.onTabPressed: {
if (isEmojiAutoCompleting) { if (isAutoCompleting) {
if (emojiAutoCompleteListView.currentIndex + 1 == emojiAutoCompleteListView.count) emojiAutoCompleteListView.currentIndex = 0 if (autoCompleteListView.currentIndex + 1 == autoCompleteListView.count) autoCompleteListView.currentIndex = 0
else emojiAutoCompleteListView.currentIndex++ else autoCompleteListView.currentIndex++
replaceAutoComplete(emojiAutoCompleteListView.currentItem.unicode)
} else { } else {
if (isUserAutoCompleting) { autoCompleteBeginPosition = text.substring(0, cursorPosition).lastIndexOf(" ") + 1
if (userAutoCompleteListView.currentIndex + 1 == userAutoCompleteListView.count) userAutoCompleteListView.currentIndex = 0 var autoCompletePrefix = text.substring(0, cursorPosition).split(" ").pop()
else userAutoCompleteListView.currentIndex++ if (!autoCompletePrefix) return
} else { if (autoCompletePrefix.startsWith(":")) {
autoCompleteBeginPosition = text.substring(0, cursorPosition).lastIndexOf(" ") + 1 autoCompleteBeginPosition = text.substring(0, cursorPosition).lastIndexOf(" ") + 1
var autoCompletePrefix = text.substring(0, cursorPosition).split(" ").pop() autoCompleteModel = emojiModel.filterModel(autoCompletePrefix)
if (!autoCompletePrefix) return if (autoCompleteModel.length === 0) return
userAutoCompleteModel = currentRoom.getUsers(autoCompletePrefix) isAutoCompleting = true
if (userAutoCompleteModel.length === 0) return autoCompleteEndPosition = cursorPosition
isUserAutoCompleting = true } else {
autoCompleteModel = currentRoom.getUsers(autoCompletePrefix)
if (autoCompleteModel.length === 0) return
isAutoCompleting = true
autoCompleteEndPosition = cursorPosition autoCompleteEndPosition = cursorPosition
} }
replaceAutoComplete(userAutoCompleteListView.currentItem.displayName)
} }
replaceAutoComplete(autoCompleteListView.currentItem.autoCompleteText)
} }
onTextChanged: { onTextChanged: {
@ -289,21 +242,8 @@ Rectangle {
currentRoom.cachedInput = text currentRoom.cachedInput = text
if (cursorPosition !== autoCompleteBeginPosition && cursorPosition !== autoCompleteEndPosition) { if (cursorPosition !== autoCompleteBeginPosition && cursorPosition !== autoCompleteEndPosition) {
isUserAutoCompleting = false isAutoCompleting = false
isEmojiAutoCompleting = false autoCompleteListView.currentIndex = 0
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
} }
} }