diff --git a/res/css/_components.scss b/res/css/_components.scss index 4891fd90c0..7e1a280dd3 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss new file mode 100644 index 0000000000..6dcc4d75b9 --- /dev/null +++ b/res/css/views/emojipicker/_EmojiPicker.scss @@ -0,0 +1,221 @@ +/* +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. +*/ + +.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_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::before { + background-color: $primary-fg-color; + content: ''; + display: inline-block; + mask-size: 100%; + mask-repeat: no-repeat; + width: 100%; + height: 100%; +} + +.mx_EmojiPicker_anchor:disabled::before { + background-color: $focus-bg-color; +} + +.mx_EmojiPicker_anchor_activity::before { mask-image: url('$(res)/img/emojipicker/activity.svg') } +.mx_EmojiPicker_anchor_custom::before { mask-image: url('$(res)/img/emojipicker/custom.svg') } +.mx_EmojiPicker_anchor_flags::before { mask-image: url('$(res)/img/emojipicker/flags.svg') } +.mx_EmojiPicker_anchor_foods::before { mask-image: url('$(res)/img/emojipicker/foods.svg') } +.mx_EmojiPicker_anchor_nature::before { mask-image: url('$(res)/img/emojipicker/nature.svg') } +.mx_EmojiPicker_anchor_objects::before { mask-image: url('$(res)/img/emojipicker/objects.svg') } +.mx_EmojiPicker_anchor_people::before { mask-image: url('$(res)/img/emojipicker/people.svg') } +.mx_EmojiPicker_anchor_places::before { mask-image: url('$(res)/img/emojipicker/places.svg') } +.mx_EmojiPicker_anchor_recent::before { mask-image: url('$(res)/img/emojipicker/recent.svg') } +.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg') } + +.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_search_icon::after { + mask: url('$(res)/img/emojipicker/search.svg') no-repeat; + mask-size: 100%; + background-color: $primary-fg-color; + content: ''; + display: inline-block; + width: 100%; + height: 100%; +} + +.mx_EmojiPicker_search_clear::after { + mask-image: url('$(res)/img/emojipicker/delete.svg'); +} + +.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_wrapper { + display: inline-block; + list-style: none; + width: 38px; + cursor: pointer; +} + +.mx_EmojiPicker_item { + display: inline-block; + font-size: 20px; + padding: 5px; + width: 100%; + height: 100%; + box-sizing: border-box; + text-align: center; + border-radius: 4px; + + &:hover { + background-color: $focus-bg-color; + } +} + +.mx_EmojiPicker_item_selected { + color: rgba(0, 0, 0, .5); + border: 1px solid $input-valid-border-color; + padding: 4px; +} + +.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; +} diff --git a/res/css/views/messages/_ReactionQuickTooltip.scss b/res/css/views/messages/_ReactionQuickTooltip.scss deleted file mode 100644 index 7b1611483b..0000000000 --- a/res/css/views/messages/_ReactionQuickTooltip.scss +++ /dev/null @@ -1,29 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -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_ReactionsQuickTooltip_buttons { - display: grid; - grid-template-columns: repeat(4, auto); -} - -.mx_ReactionsQuickTooltip_label { - text-align: center; -} - -.mx_ReactionsQuickTooltip_shortcode { - padding-left: 6px; - opacity: 0.7; -} diff --git a/res/css/views/messages/_ReactionTooltipButton.scss b/res/css/views/messages/_ReactionTooltipButton.scss deleted file mode 100644 index 59244ab63b..0000000000 --- a/res/css/views/messages/_ReactionTooltipButton.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -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_ReactionTooltipButton { - font-size: 16px; - padding: 6px; - user-select: none; - cursor: pointer; - transition: transform 0.25s; - - &:hover { - transform: scale(1.2); - } -} - -.mx_ReactionTooltipButton_selected { - opacity: 0.4; -} diff --git a/res/img/emojipicker/activity.svg b/res/img/emojipicker/activity.svg new file mode 100644 index 0000000000..d921667e7a --- /dev/null +++ b/res/img/emojipicker/activity.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/custom.svg b/res/img/emojipicker/custom.svg new file mode 100644 index 0000000000..814cd8ec13 --- /dev/null +++ b/res/img/emojipicker/custom.svg @@ -0,0 +1,34 @@ + + + + + + + + + diff --git a/res/img/emojipicker/delete.svg b/res/img/emojipicker/delete.svg new file mode 100644 index 0000000000..5f5d4e52eb --- /dev/null +++ b/res/img/emojipicker/delete.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/res/img/emojipicker/flags.svg b/res/img/emojipicker/flags.svg new file mode 100644 index 0000000000..bd0a935265 --- /dev/null +++ b/res/img/emojipicker/flags.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/foods.svg b/res/img/emojipicker/foods.svg new file mode 100644 index 0000000000..57a15976d8 --- /dev/null +++ b/res/img/emojipicker/foods.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/nature.svg b/res/img/emojipicker/nature.svg new file mode 100644 index 0000000000..a4778be927 --- /dev/null +++ b/res/img/emojipicker/nature.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/objects.svg b/res/img/emojipicker/objects.svg new file mode 100644 index 0000000000..e0d39f985a --- /dev/null +++ b/res/img/emojipicker/objects.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/people.svg b/res/img/emojipicker/people.svg new file mode 100644 index 0000000000..c2fdb579f6 --- /dev/null +++ b/res/img/emojipicker/people.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/places.svg b/res/img/emojipicker/places.svg new file mode 100644 index 0000000000..0947baaf04 --- /dev/null +++ b/res/img/emojipicker/places.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/recent.svg b/res/img/emojipicker/recent.svg new file mode 100644 index 0000000000..2fdcc65cd2 --- /dev/null +++ b/res/img/emojipicker/recent.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/search.svg b/res/img/emojipicker/search.svg new file mode 100644 index 0000000000..b5f660b3ac --- /dev/null +++ b/res/img/emojipicker/search.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/res/img/emojipicker/symbols.svg b/res/img/emojipicker/symbols.svg new file mode 100644 index 0000000000..a2b86d9ec8 --- /dev/null +++ b/res/img/emojipicker/symbols.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/src/components/views/emojipicker/Category.js b/src/components/views/emojipicker/Category.js new file mode 100644 index 0000000000..ba48c8842b --- /dev/null +++ b/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 ( +
+

+ {name} +

+
    + {emojis.map(emoji => )} +
+
+ ); + } +} + +export default Category; diff --git a/src/components/views/emojipicker/Emoji.js b/src/components/views/emojipicker/Emoji.js new file mode 100644 index 0000000000..75f23c5761 --- /dev/null +++ b/src/components/views/emojipicker/Emoji.js @@ -0,0 +1,45 @@ +/* +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 ( +
  • onClick(emoji)} + onMouseEnter={() => onMouseEnter(emoji)} + onMouseLeave={() => onMouseLeave(emoji)} + className="mx_EmojiPicker_item_wrapper"> +
    + {emoji.unicode} +
    +
    • + ); + } +} + +export default Emoji; diff --git a/src/components/views/emojipicker/EmojiPicker.js b/src/components/views/emojipicker/EmojiPicker.js new file mode 100644 index 0000000000..6bf79d2623 --- /dev/null +++ b/src/components/views/emojipicker/EmojiPicker.js @@ -0,0 +1,239 @@ +/* +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 EMOJIBASE from 'emojibase-data/en/compact.json'; + +import sdk from '../../../index'; +import { _t } from '../../../languageHandler'; + +import * as recent from './recent'; + +const EMOJIBASE_CATEGORY_IDS = [ + "people", // smileys + "people", // actually people + "control", // modifiers and such, not displayed in picker + "nature", + "foods", + "places", + "activity", + "objects", + "symbols", + "flags", +]; + +const DATA_BY_CATEGORY = { + "people": [], + "nature": [], + "foods": [], + "places": [], + "activity": [], + "objects": [], + "symbols": [], + "flags": [], +}; +const DATA_BY_EMOJI = {}; + +EMOJIBASE.forEach(emoji => { + DATA_BY_EMOJI[emoji.unicode] = emoji; + const categoryId = EMOJIBASE_CATEGORY_IDS[emoji.group]; + if (DATA_BY_CATEGORY.hasOwnProperty(categoryId)) { + DATA_BY_CATEGORY[categoryId].push(emoji); + } + // This is used as the string to match the query against when filtering emojis. + emoji.filterString = `${emoji.annotation}\n${emoji.shortcodes.join('\n')}}\n${emoji.emoticon || ''}`; +}); + +class EmojiPicker extends React.Component { + static propTypes = { + onChoose: PropTypes.func.isRequired, + selectedEmojis: PropTypes.instanceOf(Set), + showQuickReactions: PropTypes.bool, + }; + + constructor(props) { + super(props); + + this.state = { + filter: "", + previewEmoji: null, + }; + + this.recentlyUsed = recent.get().map(unicode => DATA_BY_EMOJI[unicode]); + this.memoizedDataByCategory = { + recent: this.recentlyUsed, + ...DATA_BY_CATEGORY, + }; + + this.categories = [{ + id: "recent", + name: _t("Frequently Used"), + enabled: this.recentlyUsed.length > 0, + visible: this.recentlyUsed.length > 0, + ref: React.createRef(), + }, { + id: "people", + name: _t("Smileys & People"), + enabled: true, + visible: true, + ref: React.createRef(), + }, { + id: "nature", + name: _t("Animals & Nature"), + enabled: true, + visible: false, + ref: React.createRef(), + }, { + id: "foods", + name: _t("Food & Drink"), + enabled: true, + visible: false, + ref: React.createRef(), + }, { + id: "activity", + name: _t("Activities"), + enabled: true, + visible: false, + ref: React.createRef(), + }, { + id: "places", + name: _t("Travel & Places"), + enabled: true, + visible: false, + ref: React.createRef(), + }, { + id: "objects", + name: _t("Objects"), + enabled: true, + visible: false, + ref: React.createRef(), + }, { + id: "symbols", + name: _t("Symbols"), + enabled: true, + visible: false, + ref: React.createRef(), + }, { + id: "flags", + name: _t("Flags"), + enabled: true, + visible: false, + ref: React.createRef(), + }]; + + this.bodyRef = React.createRef(); + + this.onChangeFilter = this.onChangeFilter.bind(this); + this.onHoverEmoji = this.onHoverEmoji.bind(this); + this.onHoverEmojiEnd = this.onHoverEmojiEnd.bind(this); + this.onClickEmoji = this.onClickEmoji.bind(this); + this.scrollToCategory = this.scrollToCategory.bind(this); + this.updateVisibility = this.updateVisibility.bind(this); + } + + updateVisibility() { + const rect = this.bodyRef.current.getBoundingClientRect(); + for (const cat of this.categories) { + const elem = this.bodyRef.current.querySelector(`[data-category-id="${cat.id}"]`); + if (!elem) { + cat.visible = false; + cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible"); + continue; + } + const elemRect = elem.getBoundingClientRect(); + const y = elemRect.y - rect.y; + const yEnd = elemRect.y + elemRect.height - rect.y; + cat.visible = y < rect.height && yEnd > 0; + // We update this here instead of through React to avoid re-render on scroll. + if (cat.visible) { + cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible"); + } else { + cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible"); + } + } + } + + scrollToCategory(category) { + this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView(); + } + + onChangeFilter(filter) { + for (const cat of this.categories) { + let emojis; + // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset. + if (filter.includes(this.state.filter)) { + emojis = this.memoizedDataByCategory[cat.id]; + } else { + emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id]; + } + emojis = emojis.filter(emoji => emoji.filterString.includes(filter)); + this.memoizedDataByCategory[cat.id] = emojis; + cat.enabled = emojis.length > 0; + // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so... + cat.ref.current.disabled = !cat.enabled; + } + this.setState({ filter }); + // Header underlines need to be updated, but updating requires knowing + // where the categories are, so we wait for a tick. + setTimeout(this.updateVisibility, 0); + } + + onHoverEmoji(emoji) { + this.setState({ + previewEmoji: emoji, + }); + } + + onHoverEmojiEnd(emoji) { + this.setState({ + previewEmoji: null, + }); + } + + onClickEmoji(emoji) { + if (this.props.onChoose(emoji.unicode) !== false) { + recent.add(emoji.unicode); + } + } + + render() { + const Header = sdk.getComponent("emojipicker.Header"); + const Search = sdk.getComponent("emojipicker.Search"); + const Category = sdk.getComponent("emojipicker.Category"); + const Preview = sdk.getComponent("emojipicker.Preview"); + const QuickReactions = sdk.getComponent("emojipicker.QuickReactions"); + return ( +
    +
    + +
    + {this.categories.map(category => ( + + ))} +
    + {this.state.previewEmoji || !this.props.showQuickReactions + ? + : } +
    + ); + } +} + +export default EmojiPicker; diff --git a/src/components/views/emojipicker/Header.js b/src/components/views/emojipicker/Header.js new file mode 100644 index 0000000000..b98e90e9b1 --- /dev/null +++ b/src/components/views/emojipicker/Header.js @@ -0,0 +1,41 @@ +/* +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 Header extends React.PureComponent { + static propTypes = { + categories: PropTypes.arrayOf(PropTypes.object).isRequired, + onAnchorClick: PropTypes.func.isRequired, + refs: PropTypes.object, + }; + + render() { + return ( + + ); + } +} + +export default Header; diff --git a/src/components/views/emojipicker/Preview.js b/src/components/views/emojipicker/Preview.js new file mode 100644 index 0000000000..618b9473c7 --- /dev/null +++ b/src/components/views/emojipicker/Preview.js @@ -0,0 +1,49 @@ +/* +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 Preview extends React.PureComponent { + static propTypes = { + emoji: PropTypes.object, + }; + + render() { + const { + unicode = "", + annotation = "", + shortcodes: [shortcode = ""] + } = this.props.emoji || {}; + return ( +
    +
    + {unicode} +
    +
    +
    + {annotation} +
    +
    + {shortcode} +
    +
    +
    + ) + } +} + +export default Preview; diff --git a/src/components/views/emojipicker/QuickReactions.js b/src/components/views/emojipicker/QuickReactions.js new file mode 100644 index 0000000000..820865dc88 --- /dev/null +++ b/src/components/views/emojipicker/QuickReactions.js @@ -0,0 +1,84 @@ +/* +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 EMOJIBASE from 'emojibase-data/en/compact.json'; + +import sdk from '../../../index'; +import { _t } from '../../../languageHandler'; + +const QUICK_REACTIONS = ["👍️", "👎️", "😄", "🎉", "😕", "❤️", "🚀", "👀"]; +EMOJIBASE.forEach(emoji => { + const index = QUICK_REACTIONS.indexOf(emoji.unicode); + if (index !== -1) { + QUICK_REACTIONS[index] = emoji; + } +}); + +class QuickReactions extends React.Component { + static propTypes = { + onClick: PropTypes.func.isRequired, + selectedEmojis: PropTypes.instanceOf(Set), + }; + + constructor(props) { + super(props); + this.state = { + hover: null, + }; + this.onMouseEnter = this.onMouseEnter.bind(this); + this.onMouseLeave = this.onMouseLeave.bind(this); + } + + onMouseEnter(emoji) { + this.setState({ + hover: emoji, + }); + } + + onMouseLeave() { + this.setState({ + hover: null, + }); + } + + render() { + const Emoji = sdk.getComponent("emojipicker.Emoji"); + + return ( +
    +

    + {!this.state.hover + ? _t("Quick Reactions") + : + {this.state.hover.annotation} + {this.state.hover.shortcodes[0]} + + } +

    +
      + {QUICK_REACTIONS.map(emoji => )} +
    +
    + ) + } +} + +export default QuickReactions; diff --git a/src/components/views/emojipicker/ReactionPicker.js b/src/components/views/emojipicker/ReactionPicker.js new file mode 100644 index 0000000000..d027ae6fd3 --- /dev/null +++ b/src/components/views/emojipicker/ReactionPicker.js @@ -0,0 +1,120 @@ +/* +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 EmojiPicker from "./EmojiPicker"; +import MatrixClientPeg from "../../../MatrixClientPeg"; + +class ReactionPicker extends React.Component { + static propTypes = { + mxEvent: PropTypes.object.isRequired, + onFinished: PropTypes.func.isRequired, + closeMenu: PropTypes.func.isRequired, + reactions: PropTypes.object.isRequired, + }; + + constructor(props) { + super(props); + + this.state = { + selectedEmojis: new Set(Object.keys(this.getReactions())), + }; + this.onChoose = this.onChoose.bind(this); + this.onReactionsChange = this.onReactionsChange.bind(this); + this.addListeners(); + } + + componentDidUpdate(prevProps) { + if (prevProps.reactions !== this.props.reactions) { + this.addListeners(); + this.onReactionsChange(); + } + } + + addListeners() { + if (this.props.reactions) { + this.props.reactions.on("Relations.add", this.onReactionsChange); + this.props.reactions.on("Relations.remove", this.onReactionsChange); + this.props.reactions.on("Relations.redaction", this.onReactionsChange); + } + } + + componentWillUnmount() { + if (this.props.reactions) { + this.props.reactions.removeListener( + "Relations.add", + this.onReactionsChange, + ); + this.props.reactions.removeListener( + "Relations.remove", + this.onReactionsChange, + ); + this.props.reactions.removeListener( + "Relations.redaction", + this.onReactionsChange, + ); + } + } + + getReactions() { + if (!this.props.reactions) { + return {}; + } + const userId = MatrixClientPeg.get().getUserId(); + const myAnnotations = this.props.reactions.getAnnotationsBySender()[userId] || []; + return Object.fromEntries([...myAnnotations] + .filter(event => !event.isRedacted()) + .map(event => [event.getRelation().key, event.getId()])); + }; + + onReactionsChange() { + this.setState({ + selectedEmojis: new Set(Object.keys(this.getReactions())) + }); + } + + onChoose(reaction) { + this.componentWillUnmount(); + this.props.closeMenu(); + this.props.onFinished(); + const myReactions = this.getReactions(); + if (myReactions.hasOwnProperty(reaction)) { + MatrixClientPeg.get().redactEvent( + this.props.mxEvent.getRoomId(), + myReactions[reaction], + ); + // Tell the emoji picker not to bump this in the more frequently used list. + return false; + } else { + MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), "m.reaction", { + "m.relates_to": { + "rel_type": "m.annotation", + "event_id": this.props.mxEvent.getId(), + "key": reaction, + }, + }); + return true; + } + } + + render() { + return + } +} + +export default ReactionPicker diff --git a/src/components/views/emojipicker/Search.js b/src/components/views/emojipicker/Search.js new file mode 100644 index 0000000000..8646559fed --- /dev/null +++ b/src/components/views/emojipicker/Search.js @@ -0,0 +1,50 @@ +/* +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 { _t } from '../../../languageHandler'; + +class Search extends React.PureComponent { + static propTypes = { + query: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + }; + + constructor(props) { + super(props); + this.inputRef = React.createRef(); + } + + componentDidMount() { + // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a setTimeout + setTimeout(() => this.inputRef.current.focus(), 0); + } + + render() { + return ( +
    + this.props.onChange(ev.target.value)} ref={this.inputRef} /> +
    + ); + } +} + +export default Search; diff --git a/src/components/views/emojipicker/recent.js b/src/components/views/emojipicker/recent.js new file mode 100644 index 0000000000..1d2106fbfb --- /dev/null +++ b/src/components/views/emojipicker/recent.js @@ -0,0 +1,35 @@ +/* +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. +*/ + +const REACTION_COUNT = JSON.parse(window.localStorage.mx_reaction_count || '{}'); +let sorted = null; + +export function add(emoji) { + const [count] = REACTION_COUNT[emoji] || [0]; + REACTION_COUNT[emoji] = [count + 1, Date.now()]; + window.localStorage.mx_reaction_count = JSON.stringify(REACTION_COUNT); + sorted = null; +} + +export function get(limit = 24) { + if (sorted === null) { + sorted = Object.entries(REACTION_COUNT) + .sort(([, [count1, date1]], [, [count2, date2]]) => + count2 === count1 ? date2 - date1 : count2 - count1) + .map(([emoji, count]) => emoji); + } + return sorted.slice(0, limit); +} diff --git a/src/components/views/messages/MessageActionBar.js b/src/components/views/messages/MessageActionBar.js index 2b43c5fe2a..df1bc9a294 100644 --- a/src/components/views/messages/MessageActionBar.js +++ b/src/components/views/messages/MessageActionBar.js @@ -25,6 +25,7 @@ import Modal from '../../../Modal'; import { createMenu } from '../../structures/ContextualMenu'; import { isContentActionable, canEditContent } from '../../../utils/EventUtils'; import {RoomContext} from "../../structures/RoomView"; +import MatrixClientPeg from '../../../MatrixClientPeg'; export default class MessageActionBar extends React.PureComponent { static propTypes = { @@ -84,31 +85,9 @@ export default class MessageActionBar extends React.PureComponent { }); }; - onOptionsClick = (ev) => { - const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu'); + getMenuOptions = (ev) => { + const menuOptions = {}; const buttonRect = ev.target.getBoundingClientRect(); - - const { getTile, getReplyThread } = this.props; - const tile = getTile && getTile(); - const replyThread = getReplyThread && getReplyThread(); - - let e2eInfoCallback = null; - if (this.props.mxEvent.isEncrypted()) { - e2eInfoCallback = () => this.onCryptoClick(); - } - - const menuOptions = { - mxEvent: this.props.mxEvent, - chevronFace: "none", - permalinkCreator: this.props.permalinkCreator, - eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined, - collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined, - e2eInfoCallback: e2eInfoCallback, - onFinished: () => { - this.onFocusChange(false); - }, - }; - // The window X and Y offsets are to adjust position when zoomed in to page const buttonRight = buttonRect.right + window.pageXOffset; const buttonBottom = buttonRect.bottom + window.pageYOffset; @@ -122,23 +101,55 @@ export default class MessageActionBar extends React.PureComponent { } else { menuOptions.bottom = window.innerHeight - buttonTop; } + return menuOptions; + }; + + onReactClick = (ev) => { + const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker'); + + const menuOptions = { + ...this.getMenuOptions(ev), + mxEvent: this.props.mxEvent, + reactions: this.props.reactions, + chevronFace: "none", + onFinished: () => this.onFocusChange(false), + }; + + createMenu(ReactionPicker, menuOptions); + + this.onFocusChange(true); + }; + + onOptionsClick = (ev) => { + const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu'); + + const { getTile, getReplyThread } = this.props; + const tile = getTile && getTile(); + const replyThread = getReplyThread && getReplyThread(); + + let e2eInfoCallback = null; + if (this.props.mxEvent.isEncrypted()) { + e2eInfoCallback = () => this.onCryptoClick(); + } + + const menuOptions = { + ...this.getMenuOptions(ev), + mxEvent: this.props.mxEvent, + chevronFace: "none", + permalinkCreator: this.props.permalinkCreator, + eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined, + collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined, + e2eInfoCallback: e2eInfoCallback, + onFinished: () => { + this.onFocusChange(false); + }, + }; createMenu(MessageContextMenu, menuOptions); this.onFocusChange(true); }; - renderReactButton() { - const ReactMessageAction = sdk.getComponent('messages.ReactMessageAction'); - const { mxEvent, reactions } = this.props; - - return ; - } - render() { const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); @@ -148,7 +159,11 @@ export default class MessageActionBar extends React.PureComponent { if (isContentActionable(this.props.mxEvent)) { if (this.context.room.canReact) { - reactButton = this.renderReactButton(); + reactButton = ; } if (this.context.room.canReply) { replyButton = { - if (!this.props.onFocusChange) { - return; - } - this.props.onFocusChange(focused); - } - - componentDidUpdate(prevProps) { - if (prevProps.reactions !== this.props.reactions) { - this.props.reactions.on("Relations.add", this.onReactionsChange); - this.props.reactions.on("Relations.remove", this.onReactionsChange); - this.props.reactions.on("Relations.redaction", this.onReactionsChange); - this.onReactionsChange(); - } - } - - componentWillUnmount() { - if (this.props.reactions) { - this.props.reactions.removeListener( - "Relations.add", - this.onReactionsChange, - ); - this.props.reactions.removeListener( - "Relations.remove", - this.onReactionsChange, - ); - this.props.reactions.removeListener( - "Relations.redaction", - this.onReactionsChange, - ); - } - } - - onReactionsChange = () => { - // Force a re-render of the tooltip because a change in the reactions - // set means the event tile's layout may have changed and possibly - // altered the location where the tooltip should be shown. - this.forceUpdate(); - } - - render() { - const ReactionsQuickTooltip = sdk.getComponent('messages.ReactionsQuickTooltip'); - const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip'); - const { mxEvent, reactions } = this.props; - - const content = ; - - return - - ; - } -} diff --git a/src/components/views/messages/ReactionTooltipButton.js b/src/components/views/messages/ReactionTooltipButton.js deleted file mode 100644 index e09b9ade69..0000000000 --- a/src/components/views/messages/ReactionTooltipButton.js +++ /dev/null @@ -1,68 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -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 classNames from 'classnames'; - -import MatrixClientPeg from '../../../MatrixClientPeg'; - -export default class ReactionTooltipButton extends React.PureComponent { - static propTypes = { - mxEvent: PropTypes.object.isRequired, - // The reaction content / key / emoji - content: PropTypes.string.isRequired, - title: PropTypes.string, - // A possible Matrix event if the current user has voted for this type - myReactionEvent: PropTypes.object, - }; - - onClick = (ev) => { - const { mxEvent, myReactionEvent, content } = this.props; - if (myReactionEvent) { - MatrixClientPeg.get().redactEvent( - mxEvent.getRoomId(), - myReactionEvent.getId(), - ); - } else { - MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", { - "m.relates_to": { - "rel_type": "m.annotation", - "event_id": mxEvent.getId(), - "key": content, - }, - }); - } - } - - render() { - const { content, myReactionEvent } = this.props; - - const classes = classNames({ - mx_ReactionTooltipButton: true, - mx_ReactionTooltipButton_selected: !!myReactionEvent, - }); - - return - {content} - ; - } -} diff --git a/src/components/views/messages/ReactionsQuickTooltip.js b/src/components/views/messages/ReactionsQuickTooltip.js deleted file mode 100644 index 0505bbd2df..0000000000 --- a/src/components/views/messages/ReactionsQuickTooltip.js +++ /dev/null @@ -1,195 +0,0 @@ -/* -Copyright 2019 The Matrix.org Foundation C.I.C. - -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 { _t } from '../../../languageHandler'; -import sdk from '../../../index'; -import MatrixClientPeg from '../../../MatrixClientPeg'; -import { unicodeToShortcode } from '../../../HtmlUtils'; - -export default class ReactionsQuickTooltip extends React.PureComponent { - static propTypes = { - mxEvent: PropTypes.object.isRequired, - // The Relations model from the JS SDK for reactions to `mxEvent` - reactions: PropTypes.object, - }; - - constructor(props) { - super(props); - - if (props.reactions) { - props.reactions.on("Relations.add", this.onReactionsChange); - props.reactions.on("Relations.remove", this.onReactionsChange); - props.reactions.on("Relations.redaction", this.onReactionsChange); - } - - this.state = { - hoveredItem: null, - myReactions: this.getMyReactions(), - }; - } - - componentDidUpdate(prevProps) { - if (prevProps.reactions !== this.props.reactions) { - this.props.reactions.on("Relations.add", this.onReactionsChange); - this.props.reactions.on("Relations.remove", this.onReactionsChange); - this.props.reactions.on("Relations.redaction", this.onReactionsChange); - this.onReactionsChange(); - } - } - - componentWillUnmount() { - if (this.props.reactions) { - this.props.reactions.removeListener( - "Relations.add", - this.onReactionsChange, - ); - this.props.reactions.removeListener( - "Relations.remove", - this.onReactionsChange, - ); - this.props.reactions.removeListener( - "Relations.redaction", - this.onReactionsChange, - ); - } - } - - onReactionsChange = () => { - this.setState({ - myReactions: this.getMyReactions(), - }); - } - - getMyReactions() { - const reactions = this.props.reactions; - if (!reactions) { - return null; - } - const userId = MatrixClientPeg.get().getUserId(); - const myReactions = reactions.getAnnotationsBySender()[userId]; - if (!myReactions) { - return null; - } - return [...myReactions.values()]; - } - - onMouseOver = (ev) => { - const { key } = ev.target.dataset; - const item = this.items.find(({ content }) => content === key); - this.setState({ - hoveredItem: item, - }); - } - - onMouseOut = (ev) => { - this.setState({ - hoveredItem: null, - }); - } - - get items() { - return [ - { - content: "👍", - title: _t("Agree"), - }, - { - content: "👎", - title: _t("Disagree"), - }, - { - content: "😄", - title: _t("Happy"), - }, - { - content: "🎉", - title: _t("Party Popper"), - }, - { - content: "😕", - title: _t("Confused"), - }, - { - content: "❤️", - title: _t("Heart"), - }, - { - content: "🚀", - title: _t("Rocket"), - }, - { - content: "👀", - title: _t("Eyes"), - }, - ]; - } - - render() { - const { mxEvent } = this.props; - const { myReactions, hoveredItem } = this.state; - const ReactionTooltipButton = sdk.getComponent('messages.ReactionTooltipButton'); - - const buttons = this.items.map(({ content, title }) => { - const myReactionEvent = myReactions && myReactions.find(mxEvent => { - if (mxEvent.isRedacted()) { - return false; - } - return mxEvent.getRelation().key === content; - }); - - return ; - }); - - let label = " "; // non-breaking space to keep layout the same when empty - if (hoveredItem) { - const { content, title } = hoveredItem; - - let shortcodeLabel; - const shortcode = unicodeToShortcode(content); - if (shortcode) { - shortcodeLabel = - {shortcode} - ; - } - - label =
    - - {title} - - {shortcodeLabel} -
    ; - } - - return
    -
    - {buttons} -
    - {label} -
    ; - } -} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index d74e884524..e4be78e2da 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1836,5 +1836,17 @@ "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.", "Failed to set direct chat tag": "Failed to set direct chat tag", "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room", - "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room" + "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room", + "Quick Reactions": "Quick Reactions", + "Frequently Used": "Frequently Used", + "Smileys & People": "Smileys & People", + "Animals & Nature": "Animals & Nature", + "Food & Drink": "Food & Drink", + "Activities": "Activities", + "Travel & Places": "Travel & Places", + "Objects": "Objects", + "Symbols": "Symbols", + "Flags": "Flags", + "React": "React", + "Cancel search": "Cancel search" }