fixed some bugs, added spam mode, minor collateral fixes

This commit is contained in:
Henry Jameson 2019-09-08 15:51:17 +03:00
parent db086fe1fd
commit 14df84d89b
9 changed files with 69 additions and 24 deletions

View file

@ -77,7 +77,9 @@ const EmojiInput = {
caret: 0,
focused: false,
blurTimeout: null,
showPicker: false
showPicker: false,
spamMode: false,
disableClickOutside: false
}
},
components: {
@ -100,7 +102,7 @@ const EmojiInput = {
}))
},
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 || ''
@ -142,6 +144,13 @@ 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
@ -151,12 +160,13 @@ const EmojiInput = {
this.$emit('input', newValue)
this.caret = 0
},
insert (insertion) {
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
@ -191,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
@ -203,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
@ -234,7 +244,10 @@ const EmojiInput = {
this.blurTimeout = null
}
console.log(this.spamMode)
if (!this.spamMode) {
this.showPicker = false
}
this.focused = true
this.setCaret(e)
this.resize()
@ -280,7 +293,8 @@ const EmojiInput = {
this.resize()
this.$emit('input', e.target.value)
},
onClickOutside () {
onClickOutside (e) {
if (this.disableClickOutside) return
this.showPicker = false
},
onStickerUploaded (e) {

View file

@ -13,9 +13,11 @@ const EmojiPicker = {
},
data () {
return {
labelKey: String(Math.random() * 100000),
keyword: '',
activeGroup: 'custom',
showingStickers: false
showingStickers: false,
spamMode: false
}
},
components: {
@ -24,8 +26,7 @@ const EmojiPicker = {
methods: {
onEmoji (emoji) {
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
this.$emit('emoji', ` ${value} `)
this.open = false
this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
},
highlight (key) {
const ref = this.$refs['group-' + key]

View file

@ -10,29 +10,48 @@
margin: 0 !important;
z-index: 1;
.panel-body {
.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: 5px;
padding-left: 7px;
flex: 0 0 0;
}
.emoji-tabs {
flex: 1 1 0;
}
.additional-tabs,
.emoji-tabs {
display: block;
min-width: 0;
flex-basis: auto;
flex-shrink: 1;
&-item {
padding: 0 5px;
padding: 0 7px;
cursor: pointer;
font-size: 24px;

View file

@ -1,6 +1,6 @@
<template>
<div class="emoji-picker panel panel-default">
<div class="panel-heading">
<div class="emoji-picker panel panel-default panel-body">
<div class="heading">
<span class="emoji-tabs">
<span
v-for="group in emojis"
@ -30,7 +30,7 @@
</span>
</span>
</div>
<div class="panel-body">
<div class="content">
<div
class="emoji-content"
:class="{hidden: showingStickers}"
@ -74,6 +74,16 @@
</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"

View file

@ -282,7 +282,7 @@ const PostStatusForm = {
target.style.height = null
}
},
showEmoji () {
showEmojiPicker () {
this.$refs['textarea'].focus()
this.$refs['emoji-input'].triggerShowPicker()
},

View file

@ -170,7 +170,7 @@
<i
:title="$t('emoji.add_emoji')"
class="icon-smile btn btn-default"
@click.stop.prevent="showEmoji"
@click="showEmojiPicker"
/>
</div>
<div

View file

@ -413,7 +413,7 @@
v-if="replying"
class="container"
>
<post-status-form
<PostStatusForm
class="reply-body"
:reply-to="status.id"
:attentions="status.attentions"

View file

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

View file

@ -109,6 +109,7 @@
"emoji": {
"stickers": "Stickers",
"emoji": "Emoji",
"spam": "Keep open after adding emoji",
"search_emoji": "Search for an emoji",
"add_emoji": "Insert emoji",
"custom": "Custom emoji",