diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index b0bf7854..348f1dcd 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -660,6 +660,16 @@ button.link { margin: 0; } +.menu .quick-reactions { + display: flex; + padding: 8px 32px 8px 8px; +} + +.menu .quick-reactions button { + padding: 2px 4px; + text-align: center; +} + .menu button { border-radius: 4px; display: block; diff --git a/src/platform/web/ui/session/room/timeline/BaseMessageView.js b/src/platform/web/ui/session/room/timeline/BaseMessageView.js index 8c98a3a2..c33eeae4 100644 --- a/src/platform/web/ui/session/room/timeline/BaseMessageView.js +++ b/src/platform/web/ui/session/room/timeline/BaseMessageView.js @@ -111,8 +111,7 @@ export class BaseMessageView extends TemplateView { createMenuOptions(vm) { const options = []; if (vm.canReact) { - options.push(Menu.option(vm.i18n`React with 👍`, () => vm.react("👍"))) - options.push(Menu.option(vm.i18n`React with 🙈`, () => vm.react("🙈"))) + options.push(new QuickReactionsMenuOption(vm)); } if (vm.canAbortSending) { options.push(Menu.option(vm.i18n`Cancel`, () => vm.abortSending())); @@ -124,3 +123,21 @@ export class BaseMessageView extends TemplateView { renderMessageBody() {} } + +class QuickReactionsMenuOption { + constructor(vm) { + this._vm = vm; + } + toDOM(t) { + const emojiButtons = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map(emoji => { + return t.button({onClick: () => this._vm.react(emoji)}, emoji); + }); + const customButton = t.button({onClick: () => { + const key = prompt("Enter your reaction (emoji)"); + if (key) { + this._vm.react(key); + } + }}, "…"); + return t.li({className: "quick-reactions"}, [...emojiButtons, customButton]); + } +}