Merge branch 'emoji-selector-update' into shigusegubu

* emoji-selector-update: (24 commits)
  fix aspect
  Apply suggestion to src/components/emoji_input/emoji_input.js
  scale emoji on hover
  added emoji zoom for picker
  fixed scroll when switching back to emoji
  fixed some bugs, added spam mode, minor collateral fixes
  fixed a lot of bugs with emoji picker, improved relevant components
  initial attempts at making emoji-picker somewhat extensible
  rename for consistency
  linting
  cleanup and appropriation for new emoji-input component API, styles updates
  rename emoji-selector to emoji-picker
  post-merge fix
  #101 - remove unused code
  #101 - bind outside click, add emoji to post status form
  #101 - click outside of emoji implementation
  #101 - update caret pos after emoji's inserted
  #101 - bind scroll event, highlight relevent section by tabs
  #101 - update hard-coded server url
  merge develop
  ...

src/boot/after_store.js

@@ -184,7 +184,7 @@ const getStaticEmoji = async ({ store }) => {
           imageUrl: false,
           replacement: values[key]
         }
-      })
+      }).sort((a, b) => a.displayText - b.displayText)
       store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
     } else {
       throw (res)
@@ -203,14 +203,16 @@ const getCustomEmoji = async ({ store }) => {
     if (res.ok) {
       const result = await res.json()
       const values = Array.isArray(result) ? Object.assign({}, ...result) : result
-      const emoji = Object.keys(values).map((key) => {
+      const emoji = Object.entries(values).map(([key, value]) => {
-        const imageUrl = values[key].image_url
+        const imageUrl = value.image_url
         return {
           displayText: key,
-          imageUrl: imageUrl ? store.state.instance.server + imageUrl : values[key],
+          imageUrl: imageUrl ? store.state.instance.server + imageUrl : value,
+          tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'],
           replacement: `:${key}: `
         }
-      })
+        // Technically could use tags but those are kinda useless right now, should have been "pack" field, that would be more useful
+      }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0)
       store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
       store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
     } else {

src/components/emoji_input/emoji_input.js

@@ -1,4 +1,5 @@
 import Completion from '../../services/completion/completion.js'
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { take } from 'lodash'
 
 /**
@@ -52,6 +53,21 @@ const EmojiInput = {
        */
       required: true,
       type: String
+    },
+    emojiPicker: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    emojiPickerExternalTrigger: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    stickerPicker: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -60,9 +76,15 @@ const EmojiInput = {
       highlighted: 0,
       caret: 0,
       focused: false,
-      blurTimeout: null
+      blurTimeout: null,
+      showPicker: false,
+      spamMode: false,
+      disableClickOutside: false
     }
   },
+  components: {
+    EmojiPicker
+  },
   computed: {
     suggestions () {
       const firstchar = this.textAtCaret.charAt(0)
@@ -79,8 +101,8 @@ const EmojiInput = {
           highlighted: index === this.highlighted
         }))
     },
-    showPopup () {
+    showSuggestions () {
-      return this.focused && this.suggestions && this.suggestions.length > 0
+      return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker
     },
     textAtCaret () {
       return (this.wordAtCaret || {}).word || ''
@@ -120,11 +142,42 @@ const EmojiInput = {
     }
   },
   methods: {
+    triggerShowPicker () {
+      this.showPicker = true
+      // This temporarily disables "click outside" handler
+      // since external trigger also means click originates
+      // from outside, thus preventing picker from opening
+      this.disableClickOutside = true
+      setTimeout(() => {
+        this.disableClickOutside = false
+      }, 0)
+    },
+    togglePicker () {
+      this.showPicker = !this.showPicker
+    },
     replace (replacement) {
       const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
       this.$emit('input', newValue)
       this.caret = 0
     },
+    insert ({ insertion, spamMode }) {
+      const newValue = [
+        this.value.substring(0, this.caret),
+        insertion,
+        this.value.substring(this.caret)
+      ].join('')
+      this.spamMode = spamMode
+      this.$emit('input', newValue)
+      const position = this.caret + insertion.length
+
+      this.$nextTick(function () {
+        // Re-focus inputbox after clicking suggestion
+        this.input.elm.focus()
+        // Set selection right after the replacement instead of the very end
+        this.input.elm.setSelectionRange(position, position)
+        this.caret = position
+      })
+    },
     replaceText (e, suggestion) {
       const len = this.suggestions.length || 0
       if (this.textAtCaret.length === 1) { return }
@@ -148,7 +201,7 @@ const EmojiInput = {
     },
     cycleBackward (e) {
       const len = this.suggestions.length || 0
-      if (len > 0) {
+      if (len > 1) {
         this.highlighted -= 1
         if (this.highlighted < 0) {
           this.highlighted = this.suggestions.length - 1
@@ -160,7 +213,7 @@ const EmojiInput = {
     },
     cycleForward (e) {
       const len = this.suggestions.length || 0
-      if (len > 0) {
+      if (len > 1) {
         this.highlighted += 1
         if (this.highlighted >= len) {
           this.highlighted = 0
@@ -191,6 +244,9 @@ const EmojiInput = {
         this.blurTimeout = null
       }
 
+      if (!this.spamMode) {
+        this.showPicker = false
+      }
       this.focused = true
       this.setCaret(e)
       this.resize()
@@ -227,6 +283,7 @@ const EmojiInput = {
       }
     },
     onInput (e) {
+      this.showPicker = false
       this.setCaret(e)
       this.$emit('input', e.target.value)
     },
@@ -235,6 +292,18 @@ const EmojiInput = {
       this.resize()
       this.$emit('input', e.target.value)
     },
+    onClickOutside (e) {
+      if (this.disableClickOutside) return
+      this.showPicker = false
+    },
+    onStickerUploaded (e) {
+      this.showPicker = false
+      this.$emit('sticker-uploaded', e)
+    },
+    onStickerUploadFailed (e) {
+      this.showPicker = false
+      this.$emit('sticker-upload-Failed', e)
+    },
     setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
     },
@@ -243,6 +312,7 @@ const EmojiInput = {
       if (!panel) return
       const { offsetHeight, offsetTop } = this.input.elm
       this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px'
+      this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px'
     }
   }
 }

src/components/emoji_input/emoji_input.vue

@@ -1,10 +1,32 @@
 <template>
-  <div class="emoji-input">
+  <div
+    v-click-outside="onClickOutside"
+    class="emoji-input"
+  >
     <slot />
+    <template v-if="emojiPicker">
+      <div
+        v-if="!emojiPickerExternalTrigger"
+        class="emoji-picker-icon"
+        @click.prevent="togglePicker"
+      >
+        <i class="icon-smile" />
+      </div>
+      <EmojiPicker
+        v-if="emojiPicker"
+        ref="picker"
+        :class="{ hide: !showPicker }"
+        :sticker-picker="stickerPicker"
+        class="emoji-picker-panel"
+        @emoji="insert"
+        @sticker-uploaded="onStickerUploaded"
+        @sticker-upload-failed="onStickerUploadFailed"
+      />
+    </template>
     <div
       ref="panel"
       class="autocomplete-panel"
-      :class="{ hide: !showPopup }"
+      :class="{ hide: !showSuggestions }"
     >
       <div class="autocomplete-panel-body">
         <div
@@ -31,7 +53,7 @@
   </div>
 </template>
 
-<script src="./emoji-input.js"></script>
+<script src="./emoji_input.js"></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
@@ -39,6 +61,30 @@
 .emoji-input {
   display: flex;
   flex-direction: column;
+  position: relative;
+
+  .emoji-picker-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0 .25em;
+    font-size: 16px;
+    cursor: pointer;
+
+    &:hover i {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+  }
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 9;
+    margin-top: 2px;
+
+    &.hide {
+      display: none
+    }
+  }
 
   .autocomplete {
     &-panel {

src/components/emoji_picker/emoji_picker.js

@@ -0,0 +1,112 @@
+
+const filterByKeyword = (list, keyword = '') => {
+  return list.filter(x => x.displayText.includes(keyword))
+}
+
+const EmojiPicker = {
+  props: {
+    stickerPicker: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      labelKey: String(Math.random() * 100000),
+      keyword: '',
+      activeGroup: 'custom',
+      showingStickers: false,
+      zoomEmoji: false,
+      spamMode: false
+    }
+  },
+  components: {
+    StickerPicker: () => import('../sticker_picker/sticker_picker.vue')
+  },
+  methods: {
+    onEmoji (emoji) {
+      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
+      this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
+    },
+    highlight (key) {
+      const ref = this.$refs['group-' + key]
+      const top = ref[0].offsetTop
+      this.setShowStickers(false)
+      this.activeGroup = key
+      this.$nextTick(() => {
+        this.$refs['emoji-groups'].scrollTop = top + 1
+      })
+    },
+    scrolledGroup (e) {
+      const target = (e && e.target) || this.$refs['emoji-groups']
+      const top = target.scrollTop + 5
+      this.$nextTick(() => {
+        this.emojisView.forEach(group => {
+          const ref = this.$refs['group-' + group.id]
+          if (ref[0].offsetTop <= top) {
+            this.activeGroup = group.id
+          }
+        })
+      })
+    },
+    toggleStickers () {
+      this.showingStickers = !this.showingStickers
+    },
+    setShowStickers (value) {
+      this.showingStickers = value
+    },
+    onStickerUploaded (e) {
+      this.$emit('sticker-uploaded', e)
+    },
+    onStickerUploadFailed (e) {
+      this.$emit('sticker-upload-failed', e)
+    },
+    setZoomEmoji (e, emoji) {
+      this.zoomEmoji = emoji
+      const { x, y } = e.target.getBoundingClientRect()
+      console.log(e.target)
+      this.$refs['zoom-portal'].style.left = (x - 32) + 'px'
+      this.$refs['zoom-portal'].style.top = (y - 32) + 'px'
+    }
+  },
+  watch: {
+    keyword () {
+      this.scrolledGroup()
+    }
+  },
+  computed: {
+    activeGroupView () {
+      return this.showingStickers ? '' : this.activeGroup
+    },
+    stickersAvailable () {
+      if (this.$store.state.instance.stickers) {
+        return this.$store.state.instance.stickers.length > 0
+      }
+      return 0
+    },
+    emojis () {
+      const standardEmojis = this.$store.state.instance.emoji || []
+      const customEmojis = this.$store.state.instance.customEmoji || []
+      return [
+        {
+          id: 'custom',
+          text: this.$t('emoji.custom'),
+          icon: 'icon-smile',
+          emojis: filterByKeyword(customEmojis, this.keyword)
+        },
+        {
+          id: 'standard',
+          text: this.$t('emoji.unicode'),
+          icon: 'icon-picture',
+          emojis: filterByKeyword(standardEmojis, this.keyword)
+        }
+      ]
+    },
+    emojisView () {
+      return this.emojis.filter(value => value.emojis.length > 0)
+    }
+  }
+}
+
+export default EmojiPicker

src/components/emoji_picker/emoji_picker.scss

@@ -0,0 +1,166 @@
+@import '../../_variables.scss';
+
+.emoji-picker {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 300px;
+  margin: 0 !important;
+  z-index: 1;
+
+  .zoom-portal {
+    position: fixed;
+    pointer-events: none;
+    width: 96px;
+    height: 96px;
+    font-size: 96px;
+    line-height: 96px;
+    z-index: 10;
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .spam-mode {
+    padding: 7px;
+    line-height: normal;
+  }
+  .spam-mode-label {
+    padding: 7px;
+  }
+
+  .heading {
+    display: flex;
+    height: 32px;
+    padding: 10px 7px 5px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-height: 0px;
+  }
+
+  .emoji-tabs {
+    flex-grow: 1;
+  }
+
+  .additional-tabs {
+    border-left: 1px solid;
+    border-left-color: $fallback--icon;
+    border-left-color: var(--icon, $fallback--icon);
+    padding-left: 7px;
+    flex: 0 0 0;
+  }
+
+  .additional-tabs,
+  .emoji-tabs {
+    display: block;
+    min-width: 0;
+    flex-basis: auto;
+    flex-shrink: 1;
+
+    &-item {
+      padding: 0 7px;
+      cursor: pointer;
+      font-size: 24px;
+
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      &.active {
+        border-bottom: 4px solid;
+
+        i {
+          color: $fallback--lightText;
+          color: var(--lightText, $fallback--lightText);
+        }
+      }
+    }
+  }
+
+  .sticker-picker {
+    flex: 1 1 0
+  }
+
+  .stickers,
+  .emoji {
+    &-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 0;
+      min-height: 0;
+
+      &.hidden {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+      }
+    }
+  }
+
+  .emoji {
+    &-search {
+      padding: 5px;
+      flex: 0 0 0;
+
+      input {
+        width: 100%;
+      }
+    }
+
+    &-groups {
+      flex: 1 1 1px;
+      position: relative;
+      overflow: auto;
+    }
+
+    &-group {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding-left: 5px;
+      justify-content: left;
+
+      &-title {
+        font-size: 12px;
+        width: 100%;
+        margin: 0;
+        &.disabled {
+          display: none;
+        }
+      }
+    }
+
+    &-item {
+      width: 32px;
+      height: 32px;
+      box-sizing: border-box;
+      display: flex;
+      font-size: 32px;
+      align-items: center;
+      justify-content: center;
+      margin: 4px;
+
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0
+      }
+
+      img {
+        object-fit: contain;
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+
+  }
+
+}

src/components/emoji_picker/emoji_picker.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="emoji-picker panel panel-default panel-body">
+    <div class="heading">
+      <span class="emoji-tabs">
+        <span
+          v-for="group in emojis"
+          :key="group.id"
+          class="emoji-tabs-item"
+          :class="{
+            active: activeGroupView === group.id,
+            disabled: group.emojis.length === 0
+          }"
+          :title="group.text"
+          @click.prevent="highlight(group.id)"
+        >
+          <i :class="group.icon" />
+        </span>
+      </span>
+      <span
+        v-if="stickerPicker"
+        class="additional-tabs"
+      >
+        <span
+          class="stickers-tab-icon additional-tabs-item"
+          :class="{active: showingStickers}"
+          :title="$t('emoji.stickers')"
+          @click.prevent="toggleStickers"
+        >
+          <i class="icon-star" />
+        </span>
+      </span>
+    </div>
+    <div class="content">
+      <div
+        class="emoji-content"
+        :class="{hidden: showingStickers}"
+      >
+        <div class="emoji-search">
+          <input
+            v-model="keyword"
+            type="text"
+            class="form-control"
+            :placeholder="$t('emoji.search_emoji')"
+          >
+        </div>
+        <div
+          ref="emoji-groups"
+          class="emoji-groups"
+          @scroll="scrolledGroup"
+        >
+          <div
+            v-for="group in emojisView"
+            :key="group.id"
+            class="emoji-group"
+          >
+            <h6
+              :ref="'group-' + group.id"
+              class="emoji-group-title"
+            >
+              {{ group.text }}
+            </h6>
+            <span
+              v-for="emoji in group.emojis"
+              :key="group.id + emoji.displayText"
+              :title="emoji.displayText"
+              class="emoji-item"
+              @click.stop.prevent="onEmoji(emoji)"
+              @mouseenter="setZoomEmoji($event, emoji)"
+              @mouseleave="setZoomEmoji($event, false)"
+              >
+              <span v-if="!emoji.imageUrl">
+                {{ emoji.replacement }}
+              </span>
+              <img
+                v-else
+                :src="emoji.imageUrl"
+                >
+            </span>
+          </div>
+        </div>
+        <div
+          class="spam-mode"
+          >
+          <input
+            :id="labelKey + 'spam-mode'"
+            v-model="spamMode"
+            type="checkbox"
+            >
+          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label>
+        </div>
+      </div>
+      <div
+        v-if="showingStickers"
+        class="stickers-content"
+      >
+        <sticker-picker
+          @uploaded="onStickerUploaded"
+          @upload-failed="onStickerUploadFailed"
+        />
+      </div>
+    </div>
+    <div ref="zoom-portal" class="zoom-portal">
+      <span v-if="zoomEmoji">
+        <span v-if="!zoomEmoji.imageUrl">
+          {{ zoomEmoji.replacement }}
+        </span>
+        <img
+          v-else
+          :key="zoomEmoji.imageUrl"
+          :src="zoomEmoji.imageUrl"
+          >
+      </span>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_picker.js"></script>
+<style lang="scss" src="./emoji_picker.scss"></style>

src/components/post_status_form/post_status_form.js

@@ -1,12 +1,11 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
-import EmojiInput from '../emoji-input/emoji-input.vue'
+import EmojiInput from '../emoji_input/emoji_input.vue'
 import PollForm from '../poll/poll_form.vue'
-import StickerPicker from '../sticker_picker/sticker_picker.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { reject, map, uniqBy } from 'lodash'
-import suggestor from '../emoji-input/suggestor.js'
+import suggestor from '../emoji_input/suggestor.js'
 
 const buildMentionsString = ({ user, attentions }, currentUser) => {
   let allAttentions = [...attentions]
@@ -35,7 +34,6 @@ const PostStatusForm = {
     MediaUpload,
     EmojiInput,
     PollForm,
-    StickerPicker,
     ScopeSelector
   },
   mounted () {
@@ -84,8 +82,7 @@ const PostStatusForm = {
         contentType
       },
       caret: 0,
-      pollFormVisible: false,
+      pollFormVisible: false
-      stickerPickerVisible: false
     }
   },
   computed: {
@@ -161,12 +158,6 @@ const PostStatusForm = {
     safeDMEnabled () {
       return this.$store.state.instance.safeDM
     },
-    stickersAvailable () {
-      if (this.$store.state.instance.stickers) {
-        return this.$store.state.instance.stickers.length > 0
-      }
-      return 0
-    },
     pollsAvailable () {
       return this.$store.state.instance.pollsAvailable &&
         this.$store.state.instance.pollLimits.max_options >= 2
@@ -222,7 +213,6 @@ const PostStatusForm = {
             poll: {}
           }
           this.pollFormVisible = false
-          this.stickerPickerVisible = false
           this.$refs.mediaUpload.clearFile()
           this.clearPollForm()
           this.$emit('posted')
@@ -239,7 +229,6 @@ const PostStatusForm = {
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
       this.enableSubmit()
-      this.stickerPickerVisible = false
     },
     removeMediaFile (fileInfo) {
       let index = this.newStatus.files.indexOf(fileInfo)
@@ -293,20 +282,16 @@ const PostStatusForm = {
         target.style.height = null
       }
     },
+    showEmojiPicker () {
+      this.$refs['textarea'].focus()
+      this.$refs['emoji-input'].triggerShowPicker()
+    },
     clearError () {
       this.error = null
     },
     changeVis (visibility) {
       this.newStatus.visibility = visibility
     },
-    toggleStickerPicker () {
-      this.stickerPickerVisible = !this.stickerPickerVisible
-    },
-    clearStickerPicker () {
-      if (this.$refs.stickerPicker) {
-        this.$refs.stickerPicker.clear()
-      }
-    },
     togglePollForm () {
       this.pollFormVisible = !this.pollFormVisible
     },

src/components/post_status_form/post_status_form.vue

@@ -61,6 +61,7 @@
         <EmojiInput
           v-if="newStatus.spoilerText || alwaysShowSubject"
           v-model="newStatus.spoilerText"
+          emoji-picker
           :suggest="emojiSuggestor"
           class="form-control"
         >
@@ -73,9 +74,15 @@
           >
         </EmojiInput>
         <EmojiInput
+          ref="emoji-input"
           v-model="newStatus.status"
           :suggest="emojiUserSuggestor"
           class="form-control main-input"
+          emoji-picker
+          emoji-picker-external-trigger
+          sticker-picker
+          @sticker-uploaded="addMediaFile"
+          @sticker-upload-failed="uploadFailed"
         >
           <textarea
             ref="textarea"
@@ -158,14 +165,12 @@
             @upload-failed="uploadFailed"
           />
           <div
-            v-if="stickersAvailable"
+            class="emoji-icon"
-            class="sticker-icon"
           >
             <i
-              :title="$t('stickers.add_sticker')"
+              :title="$t('emoji.add_emoji')"
-              class="icon-picture btn btn-default"
+              class="icon-smile btn btn-default"
-              :class="{ selected: stickerPickerVisible }"
+              @click="showEmojiPicker"
-              @click="toggleStickerPicker"
             />
           </div>
           <div
@@ -258,11 +263,6 @@
         <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label>
       </div>
     </form>
-    <sticker-picker
-      v-if="stickerPickerVisible"
-      ref="stickerPicker"
-      @uploaded="addMediaFile"
-    />
   </div>
 </template>
 
@@ -325,7 +325,7 @@
     }
   }
 
-  .poll-icon, .sticker-icon {
+  .poll-icon, .emoji-icon {
     font-size: 26px;
     flex: 1;
 
@@ -335,7 +335,7 @@
     }
   }
 
-  .sticker-icon {
+  .emoji-icon {
     flex: 0;
     min-width: 50px;
   }
@@ -369,6 +369,13 @@
     }
   }
 
+  .status-input-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+    flex-direction: column;
+  }
+
   .attachments {
     padding: 0 0.5em;
 

src/components/status/status.vue

@@ -413,7 +413,7 @@
         v-if="replying"
         class="container"
       >
-        <post-status-form
+        <PostStatusForm
           class="reply-body"
           :reply-to="status.id"
           :attentions="status.attentions"
@@ -705,6 +705,14 @@ $status-margin: 0.75em;
       &.emoji {
         width: 32px;
         height: 32px;
+        transition: transform 200ms;
+        transform: scale(1);
+        z-index: 1;
+
+        &:hover {
+          transform: scale(3);
+          z-index: 2;
+        }
       }
     }
 

src/components/sticker_picker/sticker_picker.js

@@ -3,9 +3,9 @@ import statusPosterService from '../../services/status_poster/status_poster.serv
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
 
 const StickerPicker = {
-  components: [
+  components: {
     TabSwitcher
-  ],
+  },
   data () {
     return {
       meta: {

src/components/sticker_picker/sticker_picker.vue

@@ -2,32 +2,30 @@
   <div
     class="sticker-picker"
   >
-    <div
+    <tab-switcher
-      class="sticker-picker-panel"
+      class="tab-switcher"
+      :render-only-focused="true"
+      scrollable-tabs
     >
-      <tab-switcher
+      <div
-        :render-only-focused="true"
+        v-for="stickerpack in pack"
+        :key="stickerpack.path"
+        :image-tooltip="stickerpack.meta.title"
+        :image="stickerpack.path + stickerpack.meta.tabIcon"
+        class="sticker-picker-content"
       >
         <div
-          v-for="stickerpack in pack"
+          v-for="sticker in stickerpack.meta.stickers"
-          :key="stickerpack.path"
+          :key="sticker"
-          :image-tooltip="stickerpack.meta.title"
+          class="sticker"
-          :image="stickerpack.path + stickerpack.meta.tabIcon"
+          @click.stop.prevent="pick(stickerpack.path + sticker, stickerpack.meta.title)"
-          class="sticker-picker-content"
         >
-          <div
+          <img
-            v-for="sticker in stickerpack.meta.stickers"
+            :src="stickerpack.path + sticker"
-            :key="sticker"
-            class="sticker"
-            @click="pick(stickerpack.path + sticker, stickerpack.meta.title)"
           >
-            <img
-              :src="stickerpack.path + sticker"
-            >
-          </div>
         </div>
-      </tab-switcher>
+      </div>
-    </div>
+    </tab-switcher>
   </div>
 </template>
 
@@ -37,22 +35,24 @@
 @import '../../_variables.scss';
 
 .sticker-picker {
-  .sticker-picker-panel {
+  width: 100%;
-    display: inline-block;
+  position: relative;
-    width: 100%;
+  .tab-switcher {
-    .sticker-picker-content {
+    position: absolute;
-      max-height: 300px;
+    top: 0;
-      overflow-y: scroll;
+    bottom: 0;
-      overflow-x: auto;
+    left: 0;
-      .sticker {
+    right: 0;
-        display: inline-block;
+  }
-        width: 20%;
+  .sticker-picker-content {
-        height: 20%;
+    .sticker {
-        img {
+      display: inline-block;
-          width: 100%;
+      width: 20%;
-          &:hover {
+      height: 20%;
-            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+      img {
-          }
+        width: 100%;
+        &:hover {
+          filter: drop-shadow(0 0 5px var(--link, $fallback--link));
         }
       }
     }

src/components/tab_switcher/tab_switcher.js

@@ -4,7 +4,26 @@ import './tab_switcher.scss'
 
 export default Vue.component('tab-switcher', {
   name: 'TabSwitcher',
-  props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
+  props: {
+    renderOnlyFocused: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    onSwitch: {
+      required: false,
+      type: Function
+    },
+    activeTab: {
+      required: false,
+      type: String
+    },
+    scrollableTabs: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
       active: this.$slots.default.findIndex(_ => _.tag)
@@ -28,7 +47,8 @@ export default Vue.component('tab-switcher', {
   },
   methods: {
     activateTab (index) {
-      return () => {
+      return (e) => {
+        e.preventDefault()
         if (typeof this.onSwitch === 'function') {
           this.onSwitch.call(null, this.$slots.default[index].key)
         }
@@ -87,7 +107,7 @@ export default Vue.component('tab-switcher', {
         <div class="tabs">
           {tabs}
         </div>
-        <div class="contents">
+        <div class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}>
           {contents}
         </div>
       </div>

src/components/tab_switcher/tab_switcher.scss

@@ -1,10 +1,21 @@
 @import '../../_variables.scss';
 
 .tab-switcher {
+  display: flex;
+  flex-direction: column;
+
   .contents {
+    flex: 1 0 auto;
+    min-height: 0px;
+
     .hidden {
       display: none;
     }
+
+    &.scrollable-tabs {
+      flex-basis: 0;
+      overflow-y: auto;
+    }
   }
   .tabs {
     display: flex;

src/components/user_panel/user_panel.vue

@@ -11,7 +11,7 @@
         rounded="top"
       />
       <div class="panel-footer">
-        <post-status-form v-if="user" />
+        <PostStatusForm v-if="user" />
       </div>
     </div>
     <auth-form

src/components/user_settings/user_settings.js

@@ -11,8 +11,8 @@ import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
-import EmojiInput from '../emoji-input/emoji-input.vue'
+import EmojiInput from '../emoji_input/emoji_input.vue'
-import suggestor from '../emoji-input/suggestor.js'
+import suggestor from '../emoji_input/suggestor.js'
 import Autosuggest from '../autosuggest/autosuggest.vue'
 import Importer from '../importer/importer.vue'
 import Exporter from '../exporter/exporter.vue'

src/i18n/en.json

@@ -106,8 +106,14 @@
     "expired": "Poll ended {0} ago",
     "not_enough_options": "Too few unique options in poll"
   },
-  "stickers": {
+  "emoji": {
-    "add_sticker": "Add Sticker"
+    "stickers": "Stickers",
+    "emoji": "Emoji",
+    "spam": "Keep open after adding emoji",
+    "search_emoji": "Search for an emoji",
+    "add_emoji": "Insert emoji",
+    "custom": "Custom emoji",
+    "unicode": "Unicode emoji"
   },
   "interactions": {
     "favs_repeats": "Repeats and Favorites",

static/font/config.json

@@ -240,6 +240,12 @@
       "code": 59419,
       "src": "fontawesome"
     },
+    {
+      "uid": "d862a10e1448589215be19702f98f2c1",
+      "css": "smile",
+      "code": 61720,
+      "src": "fontawesome"
+    },
     {
       "uid": "671f29fa10dda08074a4c6a341bb4f39",
       "css": "bell-alt",

static/font/css/fontello-codes.css

@@ -38,6 +38,7 @@
 .icon-bell-alt:before { content: '\f0f3'; } /* '' */
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
+.icon-smile:before { content: '\f118'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */
 .icon-ellipsis:before { content: '\f141'; } /* '' */
 .icon-play-circled:before { content: '\f144'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -38,6 +38,7 @@
 .icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-smile { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-ellipsis { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -49,6 +49,7 @@
 .icon-bell-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-plus-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-smile { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock-open-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-ellipsis { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-play-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?4060331');
+  src: url('../font/fontello.eot?94788965');
-  src: url('../font/fontello.eot?4060331#iefix') format('embedded-opentype'),
+  src: url('../font/fontello.eot?94788965#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?4060331') format('woff2'),
+       url('../font/fontello.woff2?94788965') format('woff2'),
-       url('../font/fontello.woff?4060331') format('woff'),
+       url('../font/fontello.woff?94788965') format('woff'),
-       url('../font/fontello.ttf?4060331') format('truetype'),
+       url('../font/fontello.ttf?94788965') format('truetype'),
-       url('../font/fontello.svg?4060331#fontello') format('svg');
+       url('../font/fontello.svg?94788965#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?4060331#fontello') format('svg');
+    src: url('../font/fontello.svg?94788965#fontello') format('svg');
   }
 }
 */
@@ -83,7 +83,6 @@
 .icon-pin:before { content: '\e819'; } /* '' */
 .icon-wrench:before { content: '\e81a'; } /* '' */
 .icon-chart-bar:before { content: '\e81b'; } /* '' */
-.icon-zoom-in:before { content: '\e81c'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */
@@ -94,6 +93,7 @@
 .icon-bell-alt:before { content: '\f0f3'; } /* '' */
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */
+.icon-smile:before { content: '\f118'; } /* '' */
 .icon-lock-open-alt:before { content: '\f13e'; } /* '' */
 .icon-ellipsis:before { content: '\f141'; } /* '' */
 .icon-play-circled:before { content: '\f144'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?25455785');
+      src: url('./font/fontello.eot?31206390');
-      src: url('./font/fontello.eot?25455785#iefix') format('embedded-opentype'),
+      src: url('./font/fontello.eot?31206390#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?25455785') format('woff'),
+           url('./font/fontello.woff?31206390') format('woff'),
-           url('./font/fontello.ttf?25455785') format('truetype'),
+           url('./font/fontello.ttf?31206390') format('truetype'),
-           url('./font/fontello.svg?25455785#fontello') format('svg');
+           url('./font/fontello.svg?31206390#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -340,21 +340,21 @@ body {
         <div class="the-icons span3" title="Code: 0xe81b"><i class="demo-icon icon-chart-bar">&#xe81b;</i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xe81b</span></div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xe81c"><i class="demo-icon icon-zoom-in">&#xe81c;</i> <span class="i-name">icon-zoom-in</span><span class="i-code">0xe81c</span></div>
         <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
         <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
         <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
+        <div class="the-icons span3" title="Code: 0xf08f"><i class="demo-icon icon-link-ext-alt">&#xf08f;</i> <span class="i-name">icon-link-ext-alt</span><span class="i-code">0xf08f</span></div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf08f"><i class="demo-icon icon-link-ext-alt">&#xf08f;</i> <span class="i-name">icon-link-ext-alt</span><span class="i-code">0xf08f</span></div>
         <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
         <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
         <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
+        <div class="the-icons span3" title="Code: 0xf0f3"><i class="demo-icon icon-bell-alt">&#xf0f3;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xf0f3</span></div>
       </div>
       <div class="row">
-        <div class="the-icons span3" title="Code: 0xf0f3"><i class="demo-icon icon-bell-alt">&#xf0f3;</i> <span class="i-name">icon-bell-alt</span><span class="i-code">0xf0f3</span></div>
         <div class="the-icons span3" title="Code: 0xf0fe"><i class="demo-icon icon-plus-squared">&#xf0fe;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xf0fe</span></div>
         <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
+        <div class="the-icons span3" title="Code: 0xf118"><i class="demo-icon icon-smile">&#xf118;</i> <span class="i-name">icon-smile</span><span class="i-code">0xf118</span></div>
         <div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
       </div>
       <div class="row">

static/font/font/fontello.svg

@@ -84,6 +84,8 @@
 
 <glyph glyph-name="reply" unicode="&#xf112;" d="M1000 232q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
 
+<glyph glyph-name="smile" unicode="&#xf118;" d="M633 257q-21-67-77-109t-127-41-128 41-77 109q-4 14 3 27t21 18q14 4 27-2t17-22q14-44 52-72t85-28 84 28 52 72q4 15 18 22t27 2 21-18 2-27z m-276 243q0-30-21-51t-50-21-51 21-21 51 21 50 51 21 50-21 21-50z m286 0q0-30-21-51t-51-21-50 21-21 51 21 50 50 21 51-21 21-50z m143-143q0 73-29 139t-76 114-114 76-138 28-139-28-114-76-76-114-29-139 29-139 76-113 114-77 139-28 138 28 114 77 76 113 29 139z m71 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="lock-open-alt" unicode="&#xf13e;" d="M589 428q23 0 38-15t16-38v-322q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v322q0 22 16 38t38 15h17v179q0 103 74 177t176 73 177-73 73-177q0-14-10-25t-25-11h-36q-14 0-25 11t-11 25q0 59-42 101t-101 42-101-42-41-101v-179h410z" horiz-adv-x="642.9" />
 
 <glyph glyph-name="ellipsis" unicode="&#xf141;" d="M214 446v-107q0-22-15-38t-38-15h-107q-23 0-38 15t-16 38v107q0 23 16 38t38 16h107q22 0 38-16t15-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-15 38v107q0 23 15 38t38 16h107q23 0 38-16t16-38z m286 0v-107q0-22-16-38t-38-15h-107q-22 0-38 15t-16 38v107q0 23 16 38t38 16h107q23 0 38-16t16-38z" horiz-adv-x="785.7" />