Update emoji picker and translations

4 files changed, 168 insertions, 76 deletions

diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml
index afde7a2a..214f2002 100644
--- a/resources/qml/TimelineRow.qml
+++ b/resources/qml/TimelineRow.qml
@@ -81,6 +81,7 @@ MouseArea {
 			hoverEnabled: true
 			ToolTip.visible: hovered
 			ToolTip.text: qsTr("React")
+			emojiPicker: emojiPopup
 //			onClicked: chat.model.reactAction(model.id)
 		}
 		ImageButton {
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 9a360726..edb25441 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -6,8 +6,10 @@ import QtQuick.Window 2.2
 import Qt.labs.settings 1.0
 
 import im.nheko 1.0
+import im.nheko.EmojiModel 1.0
 
 import "./delegates"
+import "./emoji"
 
 Page {
 	property var colors: currentActivePalette
@@ -34,6 +36,17 @@ Page {
 		property bool buttons: true
 	}
 
+    EmojiPicker {
+        id: emojiPopup
+        width: 7 * 52 + 20
+        height: 6 * 52 
+        colors: palette
+        model: EmojiProxyModel {
+            category: Emoji.Category.People
+            sourceModel: EmojiModel {}
+        }
+    }
+
 	Menu {
 		id: messageContextMenu
 		modal: true
diff --git a/resources/qml/emoji/EmojiButton.qml b/resources/qml/emoji/EmojiButton.qml
index 51d5628c..0940adfe 100644
--- a/resources/qml/emoji/EmojiButton.qml
+++ b/resources/qml/emoji/EmojiButton.qml
@@ -7,21 +7,10 @@ import "../"
 
 ImageButton {
     property var colors: currentActivePalette
+    property var emojiPicker
 
     image: ":/icons/icons/ui/smile.png"
     id: emojiButton
-    onClicked: emojiPopup.open()
+    onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.show(emojiButton)
 
-    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
index 6d04edf8..3a0eb365 100644
--- a/resources/qml/emoji/EmojiPicker.qml
+++ b/resources/qml/emoji/EmojiPicker.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.9
 import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.9
 
 import im.nheko 1.0
 import im.nheko.EmojiModel 1.0
@@ -8,6 +9,13 @@ import im.nheko.EmojiModel 1.0
 import "../"
 
 Popup {
+
+	function show(showAt) {
+        parent = showAt
+        x = Math.round((showAt.width - width) / 2)
+        y = showAt.height
+        open()
+	}
     property var colors
     property alias model: gridView.model
     property var textArea
@@ -16,54 +24,31 @@ Popup {
     id: emojiPopup
 
     margins: 0
+    bottomPadding: 1
+    leftPadding: 1
+    rightPadding: 1
 
     modal: true
     focus: true
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
 
     ColumnLayout {
+        id: columnView
         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()
-        }
+        spacing: 0
+        Layout.bottomMargin: 0
+        Layout.leftMargin: 3
+        Layout.rightMargin: 3
+        Layout.topMargin: 2
 
         // emoji grid
         GridView {
             id: gridView
 
+            Layout.preferredHeight: emojiPopup.height
             Layout.fillWidth: true
             Layout.fillHeight: true
+            Layout.leftMargin: 4
 
             cellWidth: 52
             cellHeight: 52
@@ -76,12 +61,12 @@ Popup {
             delegate: AbstractButton {
                 width: 48
                 height: 48
-
                 contentItem: Text {
                     horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
-
-                    font.pointSize: 36
+                    font.family: settings.emoji_font_family
+                    
+                    font.pixelSize: 36
                     text: model.unicode
                 }
 
@@ -94,53 +79,115 @@ Popup {
                 hoverEnabled: true
                 ToolTip.text: model.shortName
                 ToolTip.visible: hovered
+
+                    // give the emoji a little oomf
+                DropShadow {
+                    width: parent.width;
+                    height: parent.height;
+                    horizontalOffset: 3
+                    verticalOffset: 3
+                    radius: 8.0
+                    samples: 17
+                    color: "#80000000"
+                    source: parent.contentItem
+                }
                 // TODO: emit a signal and maybe add favorites at some point?
                 //onClicked: textArea.insert(textArea.cursorPosition, modelData.unicode)
             }
 
-            ScrollBar.vertical: ScrollBar {}
+            // Search field
+            header: TextField {
+                id: emojiSearch
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.rightMargin: emojiScroll.width + 4
+                placeholderText: qsTr("Search")
+                selectByMouse: true
+                rightPadding: clearSearch.width
+
+                Timer {
+                    id: searchTimer
+                    interval: 350 // tweak as needed?
+                    onTriggered: {
+                        emojiPopup.model.filter = emojiSearch.text
+                        emojiPopup.model.category = Emoji.Category.Search
+                    }
+                }
+
+                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()
+            }
+
+            ScrollBar.vertical: ScrollBar {
+                id: emojiScroll
+            }
         }
 
         // Separator
         Rectangle {
             Layout.fillWidth: true
-            Layout.preferredHeight: 2
+            Layout.preferredHeight: 1
 
-            color: emojiPopup.colors.highlight
+            color: emojiPopup.colors.dark
         }
 
         // Category picker row
-        Row {
+        RowLayout {
+            Layout.bottomMargin: 0
+            Layout.preferredHeight: 42
+            implicitHeight: 42
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            // Display the normal categories
             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 }
+                    ListElement { image: ":/icons/icons/emoji-categories/people.png"; category: Emoji.Category.People }
+                    ListElement { image: ":/icons/icons/emoji-categories/nature.png"; category: Emoji.Category.Nature }
+                    ListElement { image: ":/icons/icons/emoji-categories/foods.png"; category: Emoji.Category.Food }
+                    ListElement { image: ":/icons/icons/emoji-categories/activity.png"; category: Emoji.Category.Activity }
+                    ListElement { image: ":/icons/icons/emoji-categories/travel.png"; category: Emoji.Category.Travel }
+                    ListElement { image: ":/icons/icons/emoji-categories/objects.png"; category: Emoji.Category.Objects }
+                    ListElement { image: ":/icons/icons/emoji-categories/symbols.png"; category: Emoji.Category.Symbols }
+                    ListElement { image: ":/icons/icons/emoji-categories/flags.png"; category: Emoji.Category.Flags }
                 }
 
                 delegate: AbstractButton {
-                    width: 40
-                    height: 40
-
-                    contentItem: Text {
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
+                    Layout.preferredWidth: 36
+                    Layout.preferredHeight: 36
 
-                        font.pointSize: 30 
-                        text: model.label
+                    contentItem: Image {
+                        horizontalAlignment: Image.AlignHCenter
+                        verticalAlignment: Image.AlignVCenter
+                        fillMode: Image.Pad
+                        smooth: true
+                        sourceSize.width: 32
+                        sourceSize.height: 32
+                        source: "image://colorimage/" + model.image + "?" + (hovered ? colors.highlight : colors.buttonText)
                     }
 
                     background: Rectangle {
                         anchors.fill: parent
-                        color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
+                        property real highlightHue: colors.highlight.hslHue
+                        property real highlightSat: colors.highlight.hslSaturation
+                        property real highlightLight: colors.highlight.hslLightness
+
+                        color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.25)  : 'transparent'
                         radius: 5
+                        border.color: emojiPopup.model.category === model.category ? colors.highlight : 'transparent'
                     }
 
                     hoverEnabled: true
@@ -162,13 +209,55 @@ Popup {
 							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
+                    onClicked: {
+                        emojiPopup.model.category = model.category
+                    }
+                }
+            }
+
+            // Separator
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.preferredWidth: 1
+                implicitWidth: 1
+                height: parent.height
+
+                color: emojiPopup.colors.dark
+            }
+
+            // Search Button is special
+            AbstractButton {
+                id: searchBtn
+                hoverEnabled: true
+                Layout.alignment: Qt.AlignRight
+                Layout.bottomMargin: 0
+
+                ToolTip.text: qsTr("Search")
+                ToolTip.visible: hovered
+                onClicked: {
+                    // clear any filters
+                    emojiPopup.model.category = Emoji.Category.Search
+                    gridView.positionViewAtBeginning()
+                    emojiSearch.forceActiveFocus()
+                }
+                Layout.preferredWidth: 36
+                Layout.preferredHeight: 36
+                implicitWidth: 36
+                implicitHeight: 36
+
+                contentItem: Image {
+                    anchors.right: parent.right
+                    horizontalAlignment: Image.AlignHCenter
+                    verticalAlignment: Image.AlignVCenter
+                    fillMode: Image.Pad
+                    smooth: true
+                    sourceSize.width: 32
+                    sourceSize.height: 32
+                    source: "image://colorimage/:/icons/icons/ui/search.png?" + (parent.hovered ? colors.highlight : colors.buttonText)
                 }
             }
         }