diff options
| -rw-r--r-- | src/components/emoji-input/emoji-input.js | 2 | ||||
| -rw-r--r-- | src/components/emoji-input/emoji-input.vue | 16 | ||||
| -rw-r--r-- | src/components/emoji-picker/emoji-picker.vue | 71 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 4 |
4 files changed, 60 insertions, 33 deletions
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index 1c49c710..f751f6a0 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -67,7 +67,7 @@ const EmojiInput = { caret: 0, focused: false, blurTimeout: null, - showPicker: false, + showPicker: false } }, components: { diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue index 605882e8..05418657 100644 --- a/src/components/emoji-input/emoji-input.vue +++ b/src/components/emoji-input/emoji-input.vue @@ -1,24 +1,24 @@ <template> -<div - class="emoji-input" - v-click-outside="onClickOutside" + <div + v-click-outside="onClickOutside" + class="emoji-input" > <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> + @click.prevent="togglePicker" + > + <i class="icon-smile" /> </div> <EmojiPicker v-if="emojiPicker" - :class="{ hide: !showPicker }" ref="picker" + :class="{ hide: !showPicker }" class="emoji-picker-panel" @emoji="insert" - /> + /> </template> <div ref="panel" diff --git a/src/components/emoji-picker/emoji-picker.vue b/src/components/emoji-picker/emoji-picker.vue index ea93e6fc..ec48fc45 100644 --- a/src/components/emoji-picker/emoji-picker.vue +++ b/src/components/emoji-picker/emoji-picker.vue @@ -1,31 +1,58 @@ <template> -<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> - </span> - </div> - <div class="panel-body emoji-dropdown-menu-content"> - <div class="emoji-search"> - <input type="text" class="form-control" v-model="keyword" /> + <div class="emoji-dropdown-menu panel panel-default"> + <div class="panel-heading emoji-tabs"> + <span + v-for="(value, key) in emojis" + :key="key" + class="emoji-tabs-item" + :class="{'active': activeGroup === key}" + :title="value.text" + @click.prevent="highlight(key)" + > + <i :class="value.icon" /> + </span> </div> - <div class="emoji-groups" ref="emoji-groups" @scroll="scrolledGroup"> - <div v-for="(value, key) in emojis" :key="key" class="emoji-group"> - <h6 class="emoji-group-title" :ref="'group-' + key">{{value.text}}</h6> - <span - v-for="emoji in value.emojis" - :key="key + emoji.displayText" - :title="emoji.displayText" - class="emoji-item" - @click="onEmoji(emoji)" + <div class="panel-body emoji-dropdown-menu-content"> + <div class="emoji-search"> + <input + v-model="keyword" + type="text" + class="form-control" + > + </div> + <div + ref="emoji-groups" + class="emoji-groups" + @scroll="scrolledGroup" + > + <div + v-for="(value, key) in emojis" + :key="key" + class="emoji-group" + > + <h6 + :ref="'group-' + key" + class="emoji-group-title" + > + {{ value.text }} + </h6> + <span + v-for="emoji in value.emojis" + :key="key + emoji.displayText" + :title="emoji.displayText" + class="emoji-item" + @click="onEmoji(emoji)" > - <span v-if="!emoji.imageUrl">{{emoji.replacement}}</span> - <img :src="emoji.imageUrl" v-else> - </span> + <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span> + <img + v-else + :src="emoji.imageUrl" + > + </span> + </div> </div> </div> </div> -</div> </template> <script src="./emoji-picker.js"></script> diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 0b3db30d..e691acad 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -61,7 +61,7 @@ <EmojiInput v-if="newStatus.spoilerText || alwaysShowSubject" v-model="newStatus.spoilerText" - emojiPicker + emoji-picker :suggest="emojiSuggestor" class="form-control" > @@ -76,7 +76,7 @@ <EmojiInput v-model="newStatus.status" :suggest="emojiUserSuggestor" - emojiPicker + emoji-picker class="form-control main-input" > <textarea |