4 files changed, 208 insertions, 3 deletions
diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index de71fb69..afde7a2a 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -6,6 +6,7 @@ import QtQuick.Window 2.2
import im.nheko 1.0
import "./delegates"
+import "./emoji"
MouseArea {
anchors.left: parent.left
@@ -71,17 +72,16 @@ MouseArea {
Layout.preferredHeight: 16
width: 16
}
- ImageButton {
+ EmojiButton {
visible: timelineSettings.buttons
Layout.alignment: Qt.AlignRight | Qt.AlignTop
Layout.preferredHeight: 16
width: 16
id: reactButton
hoverEnabled: true
- image: ":/icons/icons/ui/smile.png"
ToolTip.visible: hovered
ToolTip.text: qsTr("React")
- onClicked: chat.model.reactAction(model.id)
+// onClicked: chat.model.reactAction(model.id)
}
ImageButton {
visible: timelineSettings.buttons
diff --git a/resources/qml/emoji/EmojiButton.qml b/resources/qml/emoji/EmojiButton.qml
new file mode 100644
index 00000000..51d5628c
--- /dev/null
+++ b/resources/qml/emoji/EmojiButton.qml
@@ -0,0 +1,27 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.1
+import im.nheko 1.0
+import im.nheko.EmojiModel 1.0
+
+import "../"
+
+ImageButton {
+ property var colors: currentActivePalette
+
+ image: ":/icons/icons/ui/smile.png"
+ id: emojiButton
+ onClicked: emojiPopup.open()
+
+ EmojiPicker {
+ id: emojiPopup
+ x: Math.round((emojiButton.width - width) / 2)
+ y: emojiButton.height
+ width: 7 * 52
+ height: 6 * 52
+ colors: emojiButton.colors
+ model: EmojiProxyModel {
+ category: Emoji.Category.People
+ sourceModel: EmojiModel {}
+ }
+ }
+}
\ No newline at end of file
diff --git a/resources/qml/emoji/EmojiPicker.qml b/resources/qml/emoji/EmojiPicker.qml
new file mode 100644
index 00000000..6d04edf8
--- /dev/null
+++ b/resources/qml/emoji/EmojiPicker.qml
@@ -0,0 +1,176 @@
+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
+ }
+ }
+ }
+ }
+}
diff --git a/resources/res.qrc b/resources/res.qrc
index 64a5b3cb..a48d0410 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -120,6 +120,8 @@
<file>qml/Reactions.qml</file>
<file>qml/ScrollHelper.qml</file>
<file>qml/TimelineRow.qml</file>
+ <file>qml/emoji/EmojiButton.qml</file>
+ <file>qml/emoji/EmojiPicker.qml</file>
<file>qml/delegates/MessageDelegate.qml</file>
<file>qml/delegates/TextMessage.qml</file>
<file>qml/delegates/NoticeMessage.qml</file>
|
