Make emoji picker follow theme

4 files changed, 225 insertions, 201 deletions

diff --git a/resources/qml/ChatPage.qml b/resources/qml/ChatPage.qml
index 3fa55b42..7f6758df 100644
--- a/resources/qml/ChatPage.qml
+++ b/resources/qml/ChatPage.qml
@@ -24,7 +24,6 @@ Rectangle {
             id: communityListC
 
             visible: Settings.groupView
-
             minimumWidth: communitiesList.avatarSize * 4 + Nheko.paddingMedium * 2
             collapsedWidth: communitiesList.avatarSize + 2 * Nheko.paddingMedium
             preferredWidth: Settings.communityListWidth >= minimumWidth ? Settings.communityListWidth : collapsedWidth
diff --git a/resources/qml/delegates/MessageDelegate.qml b/resources/qml/delegates/MessageDelegate.qml
index fe76ef88..1befcec3 100644
--- a/resources/qml/delegates/MessageDelegate.qml
+++ b/resources/qml/delegates/MessageDelegate.qml
@@ -154,6 +154,7 @@ Item {
             NoticeMessage {
                 text: qsTr("%1 changed the room avatar").arg(model.data.userName)
             }
+
         }
 
         DelegateChoice {
diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml
index c3d5d8ad..b5090529 100644
--- a/resources/qml/delegates/Reply.qml
+++ b/resources/qml/delegates/Reply.qml
@@ -59,8 +59,8 @@ Item {
 
         MessageDelegate {
             id: reply
-            enabled: false
 
+            enabled: false
             width: parent.width
             isReply: true
         }
diff --git a/resources/qml/emoji/EmojiPicker.qml b/resources/qml/emoji/EmojiPicker.qml
index efcdc2cf..6f10a230 100644
--- a/resources/qml/emoji/EmojiPicker.qml
+++ b/resources/qml/emoji/EmojiPicker.qml
@@ -35,244 +35,268 @@ Menu {
     modal: true
     focus: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-    height: columnView.implicitHeight + 4
-    width: columnView.implicitWidth
-
-    ColumnLayout {
-        id: columnView
-
-        spacing: 0
-        anchors.leftMargin: 3
-        anchors.rightMargin: 3
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.topMargin: 2
-
-        // Search field
-        TextField {
-            id: emojiSearch
-
-            //width: gridView.width - 6
-            Layout.topMargin: 3
-            Layout.preferredWidth: 7 * 52 + 20 - 6
-            placeholderText: qsTr("Search")
-            selectByMouse: true
-            rightPadding: clearSearch.width
-            onTextChanged: searchTimer.restart()
-            onVisibleChanged: {
-                if (visible)
-                    forceActiveFocus();
+    //height: columnView.implicitHeight + 4
+    //width: columnView.implicitWidth
+    width: 7 * 52 + 20
+
+    Rectangle {
+        color: Nheko.colors.window
+        height: columnView.implicitHeight + 4
+        width: 7 * 52 + 20
+
+        ColumnLayout {
+            id: columnView
+
+            spacing: 0
+            anchors.leftMargin: 3
+            anchors.rightMargin: 3
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.topMargin: 2
+
+            // Search field
+            TextField {
+                id: emojiSearch
+
+                Layout.topMargin: 3
+                Layout.preferredWidth: 7 * 52 + 20 - 6
+                palette: Nheko.colors
+                background: null
+                placeholderTextColor: Nheko.colors.buttonText
+                color: Nheko.colors.text
+                placeholderText: qsTr("Search")
+                selectByMouse: true
+                rightPadding: clearSearch.width
+                onTextChanged: searchTimer.restart()
+                onVisibleChanged: {
+                    if (visible)
+                        forceActiveFocus();
 
-            }
+                }
 
-            Timer {
-                id: searchTimer
+                Timer {
+                    id: searchTimer
 
-                interval: 350 // tweak as needed?
-                onTriggered: {
-                    emojiPopup.model.searchString = emojiSearch.text;
-                    emojiPopup.model.category = Emoji.Category.Search;
+                    interval: 350 // tweak as needed?
+                    onTriggered: {
+                        emojiPopup.model.searchString = emojiSearch.text;
+                        emojiPopup.model.category = Emoji.Category.Search;
+                    }
                 }
-            }
 
-            ToolButton {
-                id: clearSearch
+                ToolButton {
+                    id: clearSearch
 
-                visible: emojiSearch.text !== ''
-                icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
-                focusPolicy: Qt.NoFocus
-                onClicked: emojiSearch.clear()
+                    visible: emojiSearch.text !== ''
+                    icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
+                    focusPolicy: Qt.NoFocus
+                    onClicked: emojiSearch.clear()
+                    hoverEnabled: true
+                    background: null
 
-                anchors {
-                    verticalCenter: parent.verticalCenter
-                    right: parent.right
-                }
-                // clear the default hover effects.
+                    anchors {
+                        verticalCenter: parent.verticalCenter
+                        right: parent.right
+                    }
+                    // clear the default hover effects.
+
+                    Image {
+                        height: parent.height - 2 * Nheko.paddingSmall
+                        width: height
+                        source: "image://colorimage/:/icons/icons/ui/round-remove-button.png?" + (clearSearch.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
+
+                        anchors {
+                            verticalCenter: parent.verticalCenter
+                            right: parent.right
+                            margins: Nheko.paddingSmall
+                        }
+
+                    }
 
-                background: Item {
                 }
 
             }
 
-        }
+            // emoji grid
+            GridView {
+                id: gridView
 
-        // emoji grid
-        GridView {
-            id: gridView
-
-            Layout.preferredHeight: cellHeight * 5
-            Layout.preferredWidth: 7 * 52 + 20
-            Layout.leftMargin: 4
-            cellWidth: 52
-            cellHeight: 52
-            boundsBehavior: Flickable.StopAtBounds
-            clip: true
-            currentIndex: -1 // prevent sorting from stealing focus
-
-            // Individual emoji
-            delegate: AbstractButton {
-                width: 48
-                height: 48
-                hoverEnabled: true
-                ToolTip.text: model.shortName
-                ToolTip.visible: hovered
-                // TODO: maybe add favorites at some point?
-                onClicked: {
-                    console.debug("Picked " + model.unicode);
-                    emojiPopup.close();
-                    callback(model.unicode);
-                }
+                Layout.preferredHeight: cellHeight * 5
+                Layout.preferredWidth: 7 * 52 + 20
+                Layout.leftMargin: 4
+                cellWidth: 52
+                cellHeight: 52
+                boundsBehavior: Flickable.StopAtBounds
+                clip: true
+                currentIndex: -1 // prevent sorting from stealing focus
 
-                // give the emoji a little oomf
-                DropShadow {
-                    width: parent.width
-                    height: parent.height
-                    horizontalOffset: 3
-                    verticalOffset: 3
-                    radius: 8
-                    samples: 17
-                    color: "#80000000"
-                    source: parent.contentItem
-                }
+                // Individual emoji
+                delegate: AbstractButton {
+                    width: 48
+                    height: 48
+                    hoverEnabled: true
+                    ToolTip.text: model.shortName
+                    ToolTip.visible: hovered
+                    // TODO: maybe add favorites at some point?
+                    onClicked: {
+                        console.debug("Picked " + model.unicode);
+                        emojiPopup.close();
+                        callback(model.unicode);
+                    }
+
+                    // give the emoji a little oomf
+                    DropShadow {
+                        width: parent.width
+                        height: parent.height
+                        horizontalOffset: 3
+                        verticalOffset: 3
+                        radius: 8
+                        samples: 17
+                        color: "#80000000"
+                        source: parent.contentItem
+                    }
+
+                    contentItem: Text {
+                        horizontalAlignment: Text.AlignHCenter
+                        verticalAlignment: Text.AlignVCenter
+                        font.family: Settings.emojiFont
+                        font.pixelSize: 36
+                        text: model.unicode
+                        color: Nheko.colors.text
+                    }
+
+                    background: Rectangle {
+                        anchors.fill: parent
+                        color: hovered ? Nheko.colors.highlight : 'transparent'
+                        radius: 5
+                    }
 
-                contentItem: Text {
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    font.family: Settings.emojiFont
-                    font.pixelSize: 36
-                    text: model.unicode
                 }
 
-                background: Rectangle {
-                    anchors.fill: parent
-                    color: hovered ? Nheko.colors.highlight : 'transparent'
-                    radius: 5
+                ScrollBar.vertical: ScrollBar {
+                    id: emojiScroll
                 }
 
             }
 
-            ScrollBar.vertical: ScrollBar {
-                id: emojiScroll
+            // Separator
+            Rectangle {
+                visible: emojiSearch.text === ''
+                Layout.fillWidth: true
+                Layout.preferredHeight: 1
+                color: emojiPopup.Nheko.theme.separator
             }
 
-        }
+            // Category picker row
+            RowLayout {
+                visible: emojiSearch.text === ''
+                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 {
+                            image: ":/icons/icons/emoji-categories/people.png"
+                            category: Emoji.Category.People
+                        }
 
-        // Separator
-        Rectangle {
-            visible: emojiSearch.text === ''
-            Layout.fillWidth: true
-            Layout.preferredHeight: 1
-            color: emojiPopup.Nheko.colors.alternateBase
-        }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/nature.png"
+                            category: Emoji.Category.Nature
+                        }
 
-        // Category picker row
-        RowLayout {
-            visible: emojiSearch.text === ''
-            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 {
-                        image: ":/icons/icons/emoji-categories/people.png"
-                        category: Emoji.Category.People
-                    }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/foods.png"
+                            category: Emoji.Category.Food
+                        }
 
-                    ListElement {
-                        image: ":/icons/icons/emoji-categories/nature.png"
-                        category: Emoji.Category.Nature
-                    }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/activity.png"
+                            category: Emoji.Category.Activity
+                        }
 
-                    ListElement {
-                        image: ":/icons/icons/emoji-categories/foods.png"
-                        category: Emoji.Category.Food
-                    }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/travel.png"
+                            category: Emoji.Category.Travel
+                        }
 
-                    ListElement {
-                        image: ":/icons/icons/emoji-categories/activity.png"
-                        category: Emoji.Category.Activity
-                    }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/objects.png"
+                            category: Emoji.Category.Objects
+                        }
 
-                    ListElement {
-                        image: ":/icons/icons/emoji-categories/travel.png"
-                        category: Emoji.Category.Travel
-                    }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/symbols.png"
+                            category: Emoji.Category.Symbols
+                        }
 
-                    ListElement {
-                        image: ":/icons/icons/emoji-categories/objects.png"
-                        category: Emoji.Category.Objects
-                    }
+                        ListElement {
+                            image: ":/icons/icons/emoji-categories/flags.png"
+                            category: Emoji.Category.Flags
+                        }
 
-                    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 {
+                        Layout.preferredWidth: 36
+                        Layout.preferredHeight: 36
+                        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');
+                            }
+                        }
+                        ToolTip.visible: hovered
+                        onClicked: {
+                            //emojiPopup.model.category = model.category;
+                            gridView.positionViewAtIndex(emojiPopup.model.sourceModel.categoryToIndex(model.category), GridView.Beginning);
+                        }
 
-                }
+                        MouseArea {
+                            id: mouseArea
 
-                delegate: AbstractButton {
-                    Layout.preferredWidth: 36
-                    Layout.preferredHeight: 36
-                    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');
+                            anchors.fill: parent
+                            onPressed: mouse.accepted = false
+                            cursorShape: Qt.PointingHandCursor
                         }
-                    }
-                    ToolTip.visible: hovered
-                    onClicked: {
-                        //emojiPopup.model.category = model.category;
-                        gridView.positionViewAtIndex(emojiPopup.model.sourceModel.categoryToIndex(model.category), GridView.Beginning);
-                    }
-
-                    MouseArea {
-                        id: mouseArea
 
-                        anchors.fill: parent
-                        onPressed: mouse.accepted = false
-                        cursorShape: Qt.PointingHandCursor
-                    }
+                        contentItem: Image {
+                            horizontalAlignment: Image.AlignHCenter
+                            verticalAlignment: Image.AlignVCenter
+                            fillMode: Image.Pad
+                            sourceSize.width: 32
+                            sourceSize.height: 32
+                            source: "image://colorimage/" + model.image + "?" + (hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
+                        }
 
-                    contentItem: Image {
-                        horizontalAlignment: Image.AlignHCenter
-                        verticalAlignment: Image.AlignVCenter
-                        fillMode: Image.Pad
-                        sourceSize.width: 32
-                        sourceSize.height: 32
-                        source: "image://colorimage/" + model.image + "?" + (hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
-                    }
+                        background: Rectangle {
+                            anchors.fill: parent
+                            color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : 'transparent'
+                            radius: 5
+                            border.color: emojiPopup.model.category === model.category ? Nheko.colors.highlight : 'transparent'
+                        }
 
-                    background: Rectangle {
-                        anchors.fill: parent
-                        color: emojiPopup.model.category === model.category ? Qt.hsla(highlightHue, highlightSat, highlightLight, 0.2) : 'transparent'
-                        radius: 5
-                        border.color: emojiPopup.model.category === model.category ? Nheko.colors.highlight : 'transparent'
                     }
 
                 }