2 files changed, 149 insertions, 0 deletions
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
new file mode 100644
index 00000000..f0931446
--- /dev/null
+++ b/src/components/react_button/react_button.js
@@ -0,0 +1,39 @@
+import Popover from '../popover/popover.vue'
+import { mapGetters } from 'vuex'
+
+const ReactButton = {
+  props: ['status'],
+  data () {
+    return {
+      filterWord: ''
+    }
+  },
+  components: {
+    Popover
+  },
+  methods: {
+    addReaction (event, emoji, close) {
+      const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
+      if (existingReaction && existingReaction.me) {
+        this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+      } else {
+        this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      }
+      close()
+    }
+  },
+  computed: {
+    commonEmojis () {
+      return ['👍', '😠', '👀', '😂', '🔥']
+    },
+    emojis () {
+      if (this.filterWord !== '') {
+        return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
+      }
+      return this.$store.state.instance.emoji || []
+    },
+    ...mapGetters(['mergedConfig'])
+  }
+}
+
+export default ReactButton
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
new file mode 100644
index 00000000..0b34add1
--- /dev/null
+++ b/src/components/react_button/react_button.vue
@@ -0,0 +1,110 @@
+<template>
+  <Popover
+    trigger="click"
+    placement="top"
+    :offset="{ y: 5 }"
+    class="react-button-popover"
+  >
+    <div
+      slot="content"
+      slot-scope="{close}"
+    >
+      <div class="reaction-picker-filter">
+        <input
+          v-model="filterWord"
+          :placeholder="$t('emoji.search_emoji')"
+        >
+      </div>
+      <div class="reaction-picker">
+        <span
+          v-for="emoji in commonEmojis"
+          :key="emoji"
+          class="emoji-button"
+          @click="addReaction($event, emoji, close)"
+        >
+          {{ emoji }}
+        </span>
+        <div class="reaction-picker-divider" />
+        <span
+          v-for="(emoji, key) in emojis"
+          :key="key"
+          class="emoji-button"
+          @click="addReaction($event, emoji.replacement, close)"
+        >
+          {{ emoji.replacement }}
+        </span>
+        <div class="reaction-bottom-fader" />
+      </div>
+    </div>
+    <i
+      slot="trigger"
+      class="icon-smile button-icon add-reaction-button"
+      :title="$t('tool_tip.add_reaction')"
+    />
+  </Popover>
+</template>
+
+<script src="./react_button.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.reaction-picker-filter {
+  padding: 0.5em;
+  display: flex;
+  input {
+    flex: 1;
+  }
+}
+
+.reaction-picker-divider {
+  height: 1px;
+  width: 100%;
+  margin: 0.5em;
+  background-color: var(--border, $fallback--border);
+}
+
+.reaction-picker {
+  width: 10em;
+  height: 9em;
+  font-size: 1.5em;
+  overflow-y: scroll;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.5em;
+  text-align: center;
+  align-content: flex-start;
+  user-select: none;
+
+  mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+    linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+    linear-gradient(to top, white, white);
+  transition: mask-size 150ms;
+  mask-size: 100% 20px, 100% 20px, auto;
+  // Autoprefixed seem to ignore this one, and also syntax is different
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+
+  .emoji-button {
+    cursor: pointer;
+
+    flex-basis: 20%;
+    line-height: 1.5em;
+    align-content: center;
+
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
+}
+
+.add-reaction-button {
+  cursor: pointer;
+
+  &:hover {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+
+</style>