Add full emoji picker for reactions

res/css/_components.scss

@@ -108,6 +108,7 @@
 @import "./views/elements/_Tooltip.scss";
 @import "./views/elements/_TooltipButton.scss";
 @import "./views/elements/_Validation.scss";
+@import "./views/emojipicker/_EmojiPicker.scss";
 @import "./views/globals/_MatrixToolbar.scss";
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
@@ -122,8 +123,6 @@
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
-@import "./views/messages/_ReactionQuickTooltip.scss";
-@import "./views/messages/_ReactionTooltipButton.scss";
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
 @import "./views/messages/_ReactionsRowButtonTooltip.scss";

res/css/views/emojipicker/_EmojiPicker.scss

@@ -0,0 +1,187 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EmojiPicker {
+    width: 340px;
+    height: 450px;
+
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_EmojiPicker_body {
+    flex: 1;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.mx_EmojiPicker_header {
+    padding: 4px 8px 0;
+    border-bottom: 1px solid $message-action-bar-border-color;
+}
+
+.mx_EmojiPicker button > svg {
+    width: 100%;
+    height: 100%;
+    fill: $primary-fg-color;
+}
+
+.mx_EmojiPicker button:disabled > svg {
+    fill: $focus-bg-color;
+}
+
+.mx_EmojiPicker_anchor {
+    border: none;
+    padding: 8px 8px 6px;
+    border-bottom: 2px solid transparent;
+    background-color: transparent;
+    border-radius: 4px 4px 0 0;
+
+    width: 36px;
+    height: 38px;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+
+    &:not(:disabled):hover {
+        background-color: $focus-bg-color;
+        border-bottom: 2px solid $button-bg-color;
+    }
+}
+
+.mx_EmojiPicker_anchor_visible {
+    border-bottom: 2px solid $button-bg-color;
+}
+
+.mx_EmojiPicker_search {
+    margin: 8px;
+    border-radius: 4px;
+    border: 1px solid $input-border-color;
+    background-color: $primary-bg-color;
+    display: flex;
+
+    input {
+        flex: 1;
+        border: none;
+        padding: 8px 12px;
+        border-radius: 4px 0;
+    }
+
+    button {
+        border: none;
+        background-color: inherit;
+        margin: 0;
+        padding: 8px;
+        align-self: center;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+.mx_EmojiPicker_search_clear {
+    cursor: pointer;
+}
+
+.mx_EmojiPicker_category {
+    padding: 0 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mx_EmojiPicker_category_label {
+    width: 304px;
+}
+
+.mx_EmojiPicker_list {
+    width: 304px;
+    padding: 0;
+    margin: 0;
+}
+
+.mx_EmojiPicker_item {
+    list-style: none;
+    display: inline-block;
+    font-size: 20px;
+    margin: 1px;
+    padding: 4px 0;
+    width: 36px;
+    box-sizing: border-box;
+    text-align: center;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+        background-color: $focus-bg-color;
+    }
+}
+
+.mx_EmojiPicker_item_selected {
+    color: rgba(0, 0, 0, .5);
+    border: 1px solid $input-valid-border-color;
+    margin: 0;
+}
+
+.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.mx_EmojiPicker_footer {
+    border-top: 1px solid $message-action-bar-border-color;
+    height: 72px;
+
+    display: flex;
+    align-items: center;
+}
+
+.mx_EmojiPicker_preview_emoji {
+    font-size: 32px;
+    padding: 8px 16px;
+}
+
+.mx_EmojiPicker_preview_text {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_EmojiPicker_name {
+    text-transform: capitalize;
+}
+
+.mx_EmojiPicker_shortcode {
+    color: $light-fg-color;
+    font-size: 14px;
+
+    &::before, &::after {
+        content: ":";
+    }
+}
+
+.mx_EmojiPicker_quick {
+    flex-direction: column;
+    align-items: start;
+    justify-content: space-around;
+}
+
+.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
+    margin-right: 4px;
+}

src/components/views/emojipicker/Category.js

@@ -0,0 +1,54 @@
+/*
+Copyright 2019 Tulir Asokan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import sdk from '../../../index';
+
+class Category extends React.PureComponent {
+    static propTypes = {
+        emojis: PropTypes.arrayOf(PropTypes.object).isRequired,
+        name: PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        onMouseEnter: PropTypes.func.isRequired,
+        onMouseLeave: PropTypes.func.isRequired,
+        onClick: PropTypes.func.isRequired,
+        selectedEmojis: PropTypes.instanceOf(Set),
+    };
+
+    render() {
+        const { onClick, onMouseEnter, onMouseLeave, emojis, name, selectedEmojis } = this.props;
+        if (!emojis || emojis.length === 0) {
+            return null;
+        }
+
+        const Emoji = sdk.getComponent("emojipicker.Emoji");
+        return (
+            <section className="mx_EmojiPicker_category" data-category-id={this.props.id}>
+                <h2 className="mx_EmojiPicker_category_label">
+                    {name}
+                </h2>
+                <ul className="mx_EmojiPicker_list">
+                    {emojis.map(emoji => <Emoji key={emoji.hexcode} emoji={emoji} selectedEmojis={selectedEmojis}
+                        onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />)}
+                </ul>
+            </section>
+        );
+    }
+}
+
+export default Category;

src/components/views/emojipicker/Emoji.js

@@ -0,0 +1,43 @@
+/*
+Copyright 2019 Tulir Asokan
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Emoji extends React.PureComponent {
+    static propTypes = {
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        emoji: PropTypes.object.isRequired,
+        selectedEmojis: PropTypes.instanceOf(Set),
+    };
+
+    render() {
+        const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
+        const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);
+        return (
+            <li onClick={() => onClick(emoji)}
+                onMouseEnter={() => onMouseEnter(emoji)}
+                onMouseLeave={() => onMouseLeave(emoji)}
+                className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
+                {emoji.unicode}
+            </li>
+        );
+    }
+}
+
+export default Emoji;