cleanup and appropriation for new emoji-input component API, styles updates

src/boot/after_store.js

@@ -190,7 +190,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)
@@ -209,14 +209,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 imageUrl = values[key].image_url
+      const emoji = Object.entries(values).map(([key, value]) => {
+        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

@@ -53,6 +53,11 @@ const EmojiInput = {
        */
       required: true,
       type: String
+    },
+    emojiPicker: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -61,7 +66,8 @@ const EmojiInput = {
       highlighted: 0,
       caret: 0,
       focused: false,
-      blurTimeout: null
+      blurTimeout: null,
+      showPicker: false,
     }
   },
   components: {
@@ -83,12 +89,15 @@ const EmojiInput = {
           highlighted: index === this.highlighted
         }))
     },
-    showPopup () {
+    showSuggestions () {
       return this.focused && this.suggestions && this.suggestions.length > 0
     },
     textAtCaret () {
       return (this.wordAtCaret || {}).word || ''
     },
+    pickerIconBottom () {
+      return this.input && this.input.tag === 'textarea'
+    },
     wordAtCaret () {
       if (this.value && this.caret) {
         const word = Completion.wordAtPosition(this.value, this.caret - 1) || {}
@@ -124,11 +133,22 @@ const EmojiInput = {
     }
   },
   methods: {
+    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) {
+      const newValue = [
+        this.value.substring(0, this.caret),
+        insertion,
+        this.value.substring(this.caret)
+      ].join('')
+      this.$emit('input', newValue)
+    },
     replaceText (e, suggestion) {
       const len = this.suggestions.length || 0
       if (this.textAtCaret.length === 1) { return }
@@ -195,6 +215,7 @@ const EmojiInput = {
         this.blurTimeout = null
       }
 
+      this.showPicker = false
       this.focused = true
       this.setCaret(e)
       this.resize()
@@ -231,6 +252,7 @@ const EmojiInput = {
       }
     },
     onInput (e) {
+      this.showPicker = false
       this.setCaret(e)
       this.$emit('input', e.target.value)
     },
@@ -239,6 +261,9 @@ const EmojiInput = {
       this.resize()
       this.$emit('input', e.target.value)
     },
+    onClickOutside () {
+      this.showPicker = false
+    },
     setCaret ({ target: { selectionStart } }) {
       this.caret = selectionStart
     },
@@ -247,6 +272,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,29 @@
 <template>
-  <div class="emoji-input">
+<div
+  class="emoji-input"
+  v-click-outside="onClickOutside"
+  >
     <slot />
+    <template v-if="emojiPicker">
+      <div
+        @click.prevent="togglePicker"
+        class="emoji-picker-icon"
+        :class="pickerIconBottom ? 'picker-icon-bottom': 'picker-icon-right'"
+        >
+        <i class="icon-smile"></i>
+      </div>
+      <EmojiPicker
+        v-if="emojiPicker"
+        :class="{ hide: !showPicker }"
+        ref="picker"
+        class="emoji-picker-panel"
+        @emoji="insert"
+        />
+    </template>
     <div
       ref="panel"
       class="autocomplete-panel"
-      :class="{ hide: !showPopup }"
+      :class="{ hide: !showSuggestions }"
     >
       <div class="autocomplete-panel-body">
         <div
@@ -39,6 +58,37 @@
 .emoji-input {
   display: flex;
   flex-direction: column;
+  position: relative;
+
+  .emoji-picker-icon {
+    position: absolute;
+    margin: 0 .25em;
+    font-size: 16px;
+    cursor: pointer;
+
+    &:hover i {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    &.picker-icon-bottom {
+      bottom: 0;
+      left: 0;
+    }
+    &.picker-icon-right {
+      top: 0;
+      right: 0;
+    }
+  }
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 9;
+    margin-top: 2px;
+
+    &.hide {
+      display: none
+    }
+  }
 
   .autocomplete {
     &-panel {

src/components/emoji-picker/emoji-picker.js

@@ -1,33 +1,17 @@
 const filterByKeyword = (list, keyword = '') => {
-  return list.filter(x => x.shortcode.indexOf(keyword) !== -1)
+  return list.filter(x => x.displayText.includes(keyword))
 }
 
 const EmojiPicker = {
-  mounted () {
-    document.body.addEventListener('click', this.outsideClicked)
-  },
-  destroyed () {
-    document.body.removeEventListener('click', this.outsideClicked)
-  },
   data () {
     return {
-      open: false,
       keyword: '',
       activeGroup: 'standard'
     }
   },
   methods: {
-    togglePanel () {
-      this.open = !this.open
-    },
-    insideClicked (e) {
-      e.stopPropagation()
-    },
-    outsideClicked () {
-      this.open = false
-    },
     onEmoji (emoji) {
-      const value = emoji.image_url ? `:${emoji.shortcode}:` : emoji.utf
+      const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
       this.$emit('emoji', ` ${value} `)
       this.open = false
     },
@@ -51,20 +35,17 @@ const EmojiPicker = {
       const standardEmojis = this.$store.state.instance.emoji || []
       const customEmojis = this.$store.state.instance.customEmoji || []
       return {
-        standard: {
-          text: 'Standard',
-          icon: 'icon-star',
-          emojis: filterByKeyword(standardEmojis, this.keyword)
-        },
         custom: {
           text: 'Custom',
           icon: 'icon-picture',
           emojis: filterByKeyword(customEmojis, this.keyword)
-        }
-      }
         },
-    serverUrl () {
-      return this.$store.state.instance.server
+        standard: {
+          text: 'Standard',
+          icon: 'icon-star',
+          emojis: filterByKeyword(standardEmojis, this.keyword)
+        }
+      }
     }
   }
 }

src/components/emoji-picker/emoji-picker.vue

@@ -1,9 +1,5 @@
 <template>
-  <div class="emoji-dropdown" @click.prevent="insideClicked">
-    <span class="emoji-dropdown-toggle" @click.prevent="togglePanel">
-      <i class="icon-smile"></i>
-    </span>
-    <div class="emoji-dropdown-menu panel panel-default" v-if="open">
+<div class="emoji-dropdown-menu panel panel-default">
   <div class="panel-heading emoji-tabs">
     <span class="emoji-tabs-item" :class="{'active': activeGroup === key}" v-for="(value, key) in emojis" :key="key" :title="value.text" @click.prevent="highlight(key)">
       <i :class="value.icon"></i>
@@ -18,19 +14,18 @@
         <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6>
         <span
           v-for="emoji in value.emojis"
-              :key="key + emoji.shortcode"
-              :title="emoji.shortcode"
+          :key="key + emoji.displayText"
+          :title="emoji.displayText"
           class="emoji-item"
           @click="onEmoji(emoji)"
           >
-              <span v-if="!emoji.image_url">{{emoji.utf}}</span>
-              <img :src="serverUrl + emoji.image_url" v-else>
+          <span v-if="!emoji.imageUrl">{{emoji.replacement}}</span>
+          <img :src="emoji.imageUrl" v-else>
         </span>
       </div>
     </div>
   </div>
-    </div>
-  </div>
+</div>
 </template>
 
 <script src="./emoji-picker.js"></script>
@@ -119,14 +114,14 @@
   }
 
   &-item {
-    width: 34px;
-    height: 34px;
+    width: 32px;
+    height: 32px;
     box-sizing: border-box;
     display: flex;
-    font-size: 16px;
+    font-size: 32px;
     align-items: center;
     justify-content: center;
-    padding: 5px;
+    margin: 2px;
     cursor: pointer;
 
     img {

src/components/post_status_form/post_status_form.js

@@ -2,7 +2,6 @@ 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 EmojiPicker from '../emoji-picker/emoji-picker.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'
@@ -37,7 +36,6 @@ const PostStatusForm = {
     EmojiInput,
     PollForm,
     StickerPicker,
-    EmojiSelector,
     ScopeSelector
   },
   mounted () {

src/components/post_status_form/post_status_form.vue

@@ -61,6 +61,7 @@
         <EmojiInput
           v-if="newStatus.spoilerText || alwaysShowSubject"
           v-model="newStatus.spoilerText"
+          emojiPicker
           :suggest="emojiSuggestor"
           class="form-control"
         >
@@ -75,6 +76,7 @@
         <EmojiInput
           v-model="newStatus.status"
           :suggest="emojiUserSuggestor"
+          emojiPicker
           class="form-control main-input"
         >
           <textarea

static/font/config.json

@@ -238,7 +238,7 @@
       "uid": "266d5d9adf15a61800477a5acf9a4462",
       "css": "chart-bar",
       "code": 59419,
-      "src": "fontelico"
+      "src": "fontawesome"
     },
     {
       "uid": "d862a10e1448589215be19702f98f2c1",

static/font/css/fontello-codes.css

@@ -37,6 +37,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

@@ -37,6 +37,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

@@ -48,6 +48,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?91349539');
-  src: url('../font/fontello.eot?91349539#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?91349539') format('woff2'),
-       url('../font/fontello.woff?91349539') format('woff'),
-       url('../font/fontello.ttf?91349539') format('truetype'),
-       url('../font/fontello.svg?91349539#fontello') format('svg');
+  src: url('../font/fontello.eot?94788965');
+  src: url('../font/fontello.eot?94788965#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?94788965') format('woff2'),
+       url('../font/fontello.woff?94788965') format('woff'),
+       url('../font/fontello.ttf?94788965') format('truetype'),
+       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?91349539#fontello') format('svg');
+    src: url('../font/fontello.svg?94788965#fontello') format('svg');
   }
 }
 */
@@ -93,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?82370835');
-      src: url('./font/fontello.eot?82370835#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?82370835') format('woff'),
-           url('./font/fontello.ttf?82370835') format('truetype'),
-           url('./font/fontello.svg?82370835#fontello') format('svg');
+      src: url('./font/fontello.eot?31206390');
+      src: url('./font/fontello.eot?31206390#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?31206390') format('woff'),
+           url('./font/fontello.ttf?31206390') format('truetype'),
+           url('./font/fontello.svg?31206390#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -354,13 +354,16 @@ body {
       <div class="row">
         <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 class="the-icons span3" title="Code: 0xf141"><i class="demo-icon icon-ellipsis">&#xf141;</i> <span class="i-name">icon-ellipsis</span><span class="i-code">0xf141</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf141"><i class="demo-icon icon-ellipsis">&#xf141;</i> <span class="i-name">icon-ellipsis</span><span class="i-code">0xf141</span></div>
         <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div>
         <div class="the-icons span3" title="Code: 0xf164"><i class="demo-icon icon-thumbs-up-alt">&#xf164;</i> <span class="i-name">icon-thumbs-up-alt</span><span class="i-code">0xf164</span></div>
         <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
+      </div>
+      <div class="row">
         <div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
       </div>
     </div>

static/font/font/fontello.svg

@@ -82,6 +82,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" />