matrixion/resources/qml/emoji/EmojiPicker.qml

177 lines
5.4 KiB
QML
Raw Normal View History

import QtQuick 2.9
import QtQuick.Controls 2.9
import QtQuick.Layouts 1.3
import im.nheko 1.0
import im.nheko.EmojiModel 1.0
import "../"
Popup {
property var colors
property alias model: gridView.model
property var textArea
property string emojiCategory: "people"
id: emojiPopup
margins: 0
modal: true
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
ColumnLayout {
anchors.fill: parent
// Search field
TextField {
id: emojiSearch
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: parent.width - 4
visible: emojiPopup.model.category === Emoji.Category.Search
placeholderText: qsTr("Search")
selectByMouse: true
rightPadding: clearSearch.width
Timer {
id: searchTimer
interval: 350 // tweak as needed?
onTriggered: emojiPopup.model.filter = emojiSearch.text
}
ToolButton {
id: clearSearch
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
}
// clear the default hover effects.
background: Item {}
visible: emojiSearch.text !== ''
icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? colors.highlight : colors.buttonText)
focusPolicy: Qt.NoFocus
onClicked: emojiSearch.clear()
}
onTextChanged: searchTimer.restart()
onVisibleChanged: if (visible) forceActiveFocus()
}
// emoji grid
GridView {
id: gridView
Layout.fillWidth: true
Layout.fillHeight: true
cellWidth: 52
cellHeight: 52
boundsBehavior: Flickable.DragOverBounds
clip: true
// Individual emoji
delegate: AbstractButton {
width: 48
height: 48
contentItem: Text {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: 36
text: model.unicode
}
background: Rectangle {
anchors.fill: parent
color: hovered ? colors.highlight : 'transparent'
radius: 5
}
hoverEnabled: true
ToolTip.text: model.shortName
ToolTip.visible: hovered
// TODO: emit a signal and maybe add favorites at some point?
//onClicked: textArea.insert(textArea.cursorPosition, modelData.unicode)
}
ScrollBar.vertical: ScrollBar {}
}
// Separator
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 2
color: emojiPopup.colors.highlight
}
// Category picker row
Row {
Repeater {
model: ListModel {
// TODO: Would like to get 'simple' icons for the categories
ListElement { label: "😏"; category: Emoji.Category.People }
ListElement { label: "🌲"; category: Emoji.Category.Nature }
ListElement { label: "🍛"; category: Emoji.Category.Food }
ListElement { label: "🚁"; category: Emoji.Category.Activity }
ListElement { label: "🚅"; category: Emoji.Category.Travel }
ListElement { label: "💡"; category: Emoji.Category.Objects }
ListElement { label: "🔣"; category: Emoji.Category.Symbols }
ListElement { label: "🏁"; category: Emoji.Category.Flags }
ListElement { label: "🔍"; category: Emoji.Category.Search }
}
delegate: AbstractButton {
width: 40
height: 40
contentItem: Text {
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pointSize: 30
text: model.label
}
background: Rectangle {
anchors.fill: parent
color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
radius: 5
}
hoverEnabled: true
ToolTip.text: {
switch (model.category) {
case Emoji.Category.People:
return qsTr('People');
case Emoji.Category.Nature:
return qsTr('Nature');
case Emoji.Category.Food:
return qsTr('Food');
case Emoji.Category.Activity:
return qsTr('Activity');
case Emoji.Category.Travel:
return qsTr('Travel');
case Emoji.Category.Objects:
return qsTr('Objects');
case Emoji.Category.Symbols:
return qsTr('Symbols');
case Emoji.Category.Flags:
return qsTr('Flags');
case Emoji.Category.Search:
return qsTr('Search');
}
}
ToolTip.visible: hovered
onClicked: emojiPopup.model.category = model.category
}
}
}
}
}