Emoji Picker.

imports/Spectral/Component/Emoji/EmojiPicker.qml

@@ -3,22 +3,82 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.2
 
+import Spectral.Component 2.0
+
 import Spectral 0.1
+import Spectral.Setting 0.1
 
-Popup {
+ColumnLayout {
-    property var emojiModel
-    property var textArea
     property string emojiCategory: "people"
+    property var textArea
+    property var emojiModel
 
-    ColumnLayout {
+    spacing: 0
-        anchors.fill: parent
+
+    ListView {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 48
+        Layout.leftMargin: 24
+        Layout.rightMargin: 24
+
+        boundsBehavior: Flickable.DragOverBounds
+
+        clip: true
+
+        orientation: ListView.Horizontal
+
+        model: ListModel {
+            ListElement { label: "😏"; category: "people" }
+            ListElement { label: "🌲"; category: "nature" }
+            ListElement { label: "🍛"; category: "food"}
+            ListElement { label: "🚁"; category: "activity" }
+            ListElement { label: "🚅"; category: "travel" }
+            ListElement { label: "💡"; category: "objects" }
+            ListElement { label: "🔣"; category: "symbols" }
+            ListElement { label: "🏁"; category: "flags" }
+        }
+
+        delegate: ItemDelegate {
+            width: 64
+            height: 48
+
+            contentItem: Text {
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                font.pointSize: 24
+                font.family: "Emoji"
+                text: label
+            }
+
+            Rectangle {
+                anchors.bottom: parent.bottom
+
+                width: parent.width
+                height: 2
+
+                visible: emojiCategory === category
+
+                color: Material.accent
+            }
+
+            onClicked: emojiCategory = category
+        }
+    }
+
+    Rectangle {
+        Layout.fillWidth: true
+        Layout.preferredHeight: 1
+
+        color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
+    }
 
     GridView {
         Layout.fillWidth: true
-            Layout.fillHeight: true
+        Layout.preferredHeight: 180
 
-            cellWidth: 36
+        cellWidth: 48
-            cellHeight: 36
+        cellHeight: 48
 
         boundsBehavior: Flickable.DragOverBounds
 
@@ -27,8 +87,8 @@ Popup {
         model: emojiModel.model[emojiCategory]
 
         delegate: ItemDelegate {
-                width: 36
+            width: 48
-                height: 36
+            height: 48
 
             contentItem: Text {
                 horizontalAlignment: Text.AlignHCenter
@@ -44,43 +104,4 @@ Popup {
 
         ScrollBar.vertical: ScrollBar {}
     }
-
-        Rectangle {
-            Layout.fillWidth: true
-            Layout.preferredHeight: 2
-
-            color: Material.accent
-        }
-
-        Row {
-            Repeater {
-                model: ListModel {
-                    ListElement { label: "😏"; category: "people" }
-                    ListElement { label: "🌲"; category: "nature" }
-                    ListElement { label: "🍛"; category: "food"}
-                    ListElement { label: "🚁"; category: "activity" }
-                    ListElement { label: "🚅"; category: "travel" }
-                    ListElement { label: "💡"; category: "objects" }
-                    ListElement { label: "🔣"; category: "symbols" }
-                    ListElement { label: "🏁"; category: "flags" }
-                }
-
-                delegate: ItemDelegate {
-                    width: 36
-                    height: 36
-
-                    contentItem: Text {
-                        horizontalAlignment: Text.AlignHCenter
-                        verticalAlignment: Text.AlignVCenter
-
-                        font.pointSize: 20
-                        font.family: "Emoji"
-                        text: label
-                    }
-
-                    onClicked: emojiCategory = category
-                }
-            }
-        }
-    }
 }

imports/Spectral/Panel/RoomListPanel.qml

@@ -151,6 +151,8 @@ Rectangle {
                     Layout.fillWidth: true
                     Layout.fillHeight: true
 
+                    clip: true
+
                     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
                     ColumnLayout {

imports/Spectral/Panel/RoomPanelInput.qml

@@ -23,6 +23,8 @@ Control {
     property int autoCompleteBeginPosition
     property int autoCompleteEndPosition
 
+    id: root
+
     padding: 0
 
     background: Rectangle {
@@ -105,11 +107,38 @@ Control {
         }
     }
 
-    contentItem: RowLayout {
+    contentItem: Column {
+        spacing: 0
+
+        add: Transition {
+            NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 250 }
+        }
+
+        EmojiPicker {
+            width: parent.width
+
+            id: emojiPicker
+
+            visible: false
+
+            textArea: inputField
+            emojiModel: EmojiModel { id: emojiModel }
+
+            Rectangle {
+                Layout.fillWidth: true
+                Layout.preferredHeight: 1
+
+                color: MSettings.darkTheme ? "#424242" : "#e7ebeb"
+            }
+        }
+
+        RowLayout {
+            width: parent.width
+
             spacing: 0
 
             ToolButton {
-            Layout.alignment: Qt.AlignTop
+                Layout.alignment: Qt.AlignBottom
 
                 id: uploadButton
                 visible: !isReply
@@ -128,7 +157,10 @@ Control {
             }
 
             ToolButton {
+                Layout.alignment: Qt.AlignBottom
+
                 id: cancelReplyButton
+
                 visible: isReply
 
                 contentItem: MaterialIcon {
@@ -301,7 +333,7 @@ Control {
             }
 
             ToolButton {
-            Layout.alignment: Qt.AlignTop
+                Layout.alignment: Qt.AlignBottom
 
                 id: emojiButton
 
@@ -309,24 +341,7 @@ Control {
                     icon: "\ue24e"
                 }
 
-            onClicked: emojiPicker.visible ? emojiPicker.close() : emojiPicker.open()
+                onClicked: emojiPicker.visible = !emojiPicker.visible
-
-            EmojiPicker {
-                x: -width + parent.width
-                y: -height - 16
-
-                width: 360
-                height: 320
-
-                id: emojiPicker
-
-                emojiModel: EmojiModel {
-                    id: emojiModel
-                }
-
-                Material.elevation: 2
-
-                textArea: inputField
             }
         }
     }

qml/main.qml

@@ -28,8 +28,8 @@ ApplicationWindow {
     visible: true
     title: qsTr("Spectral")
 
-    Material.foreground: Material.theme == Material.Dark ? "#FFFFFF" : "#1D333E"
+    Material.foreground: MSettings.darkTheme ? "#FFFFFF" : "#1D333E"
-    Material.background: Material.theme == Material.Dark ? "#303030" : "#FFFFFF"
+    Material.background: MSettings.darkTheme ? "#303030" : "#FFFFFF"
 
     Platform.SystemTrayIcon {
         visible: MSettings.showTray