split spam mode into two separate options (one in settings page)

This commit is contained in:
Henry Jameson 2019-09-23 20:29:01 +03:00
parent 3cd23ae2d4
commit 7b4cb38734
9 changed files with 43 additions and 26 deletions

View File

@ -89,7 +89,7 @@ const EmojiInput = {
blurTimeout: null, blurTimeout: null,
showPicker: false, showPicker: false,
temporarilyHideSuggestions: false, temporarilyHideSuggestions: false,
spamMode: false, keepOpen: false,
disableClickOutside: false disableClickOutside: false
} }
}, },
@ -97,6 +97,9 @@ const EmojiInput = {
EmojiPicker EmojiPicker
}, },
computed: { computed: {
padEmoji () {
return this.$store.state.config.padEmoji
},
suggestions () { suggestions () {
const firstchar = this.textAtCaret.charAt(0) const firstchar = this.textAtCaret.charAt(0)
if (this.textAtCaret === firstchar) { return [] } if (this.textAtCaret === firstchar) { return [] }
@ -176,7 +179,7 @@ const EmojiInput = {
this.$emit('input', newValue) this.$emit('input', newValue)
this.caret = 0 this.caret = 0
}, },
insert ({ insertion, spamMode }) { insert ({ insertion, keepOpen }) {
const before = this.value.substring(0, this.caret) || '' const before = this.value.substring(0, this.caret) || ''
const after = this.value.substring(this.caret) || '' const after = this.value.substring(this.caret) || ''
@ -195,8 +198,8 @@ const EmojiInput = {
* them, masto seem to be rendering :emoji::emoji: correctly now so why not * them, masto seem to be rendering :emoji::emoji: correctly now so why not
*/ */
const isSpaceRegex = /\s/ const isSpaceRegex = /\s/
const spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && !spamMode > 0 ? ' ' : '' const spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0 ? ' ' : ''
const spaceAfter = !isSpaceRegex.exec(after[0]) && !spamMode ? ' ' : '' const spaceAfter = !isSpaceRegex.exec(after[0]) && this.padEmoji ? ' ' : ''
const newValue = [ const newValue = [
before, before,
@ -205,7 +208,7 @@ const EmojiInput = {
spaceAfter, spaceAfter,
after after
].join('') ].join('')
this.spamMode = spamMode this.keepOpen = keepOpen
this.$emit('input', newValue) this.$emit('input', newValue)
const position = this.caret + (insertion + spaceAfter + spaceBefore).length const position = this.caret + (insertion + spaceAfter + spaceBefore).length
@ -283,7 +286,7 @@ const EmojiInput = {
this.blurTimeout = null this.blurTimeout = null
} }
if (!this.spamMode) { if (!this.keepOpen) {
this.showPicker = false this.showPicker = false
} }
this.focused = true this.focused = true

View File

@ -18,7 +18,7 @@ const EmojiPicker = {
activeGroup: 'custom', activeGroup: 'custom',
showingStickers: false, showingStickers: false,
groupsScrolledClass: 'scrolled-top', groupsScrolledClass: 'scrolled-top',
spamMode: false keepOpen: false
} }
}, },
components: { components: {
@ -27,7 +27,7 @@ const EmojiPicker = {
methods: { methods: {
onEmoji (emoji) { onEmoji (emoji) {
const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
this.$emit('emoji', { insertion: value, spamMode: this.spamMode }) this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
}, },
highlight (key) { highlight (key) {
const ref = this.$refs['group-' + key] const ref = this.$refs['group-' + key]

View File

@ -10,11 +10,11 @@
margin: 0 !important; margin: 0 !important;
z-index: 1; z-index: 1;
.spam-mode { .keep-open {
padding: 7px; padding: 7px;
line-height: normal; line-height: normal;
} }
.spam-mode-label { .keep-open-label {
padding: 0 7px; padding: 0 7px;
display: flex; display: flex;
} }

View File

@ -76,16 +76,16 @@
</div> </div>
</div> </div>
<div <div
class="spam-mode" class="keep-open"
> >
<input <input
:id="labelKey + 'spam-mode'" :id="labelKey + 'keep-open'"
v-model="spamMode" v-model="keepOpen"
type="checkbox" type="checkbox"
> >
<label class="spam-mode-label" :for="labelKey + 'spam-mode'"> <label class="keep-open-label" :for="labelKey + 'keep-open'">
<div class="spam-mode-label-text"> <div class="keep-open-label-text">
{{ $t('emoji.spam') }} {{ $t('emoji.keep_open') }}
</div> </div>
</label> </label>
</div> </div>

View File

@ -16,6 +16,7 @@ const settings = {
return { return {
hideAttachmentsLocal: user.hideAttachments, hideAttachmentsLocal: user.hideAttachments,
padEmojiLocal: user.padEmoji,
hideAttachmentsInConvLocal: user.hideAttachmentsInConv, hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
maxThumbnails: user.maxThumbnails, maxThumbnails: user.maxThumbnails,
hideNsfwLocal: user.hideNsfw, hideNsfwLocal: user.hideNsfw,
@ -127,6 +128,9 @@ const settings = {
hideAttachmentsLocal (value) { hideAttachmentsLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachments', value }) this.$store.dispatch('setOption', { name: 'hideAttachments', value })
}, },
padEmojiLocal (value) {
this.$store.dispatch('setOption', { name: 'padEmoji', value })
},
hideAttachmentsInConvLocal (value) { hideAttachmentsInConvLocal (value) {
this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value }) this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
}, },

View File

@ -198,6 +198,14 @@
> >
<label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label> <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
</li> </li>
<li>
<input
id="padEmoji"
v-model="padEmojiLocal"
type="checkbox"
>
<label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
</li>
</ul> </ul>
</div> </div>

View File

@ -109,7 +109,7 @@
"emoji": { "emoji": {
"stickers": "Stickers", "stickers": "Stickers",
"emoji": "Emoji", "emoji": "Emoji",
"spam": "Keep picker open, don't separate emoji with spaces", "keep_open": "Keep picker open",
"search_emoji": "Search for an emoji", "search_emoji": "Search for an emoji",
"add_emoji": "Insert emoji", "add_emoji": "Insert emoji",
"custom": "Custom emoji", "custom": "Custom emoji",
@ -232,6 +232,7 @@
"delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.", "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
"delete_account_instructions": "Type your password in the input below to confirm account deletion.", "delete_account_instructions": "Type your password in the input below to confirm account deletion.",
"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.", "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
"pad_emoji": "Pad emoji with spaces when adding from picker",
"export_theme": "Save preset", "export_theme": "Save preset",
"filtering": "Filtering", "filtering": "Filtering",
"filtering_explanation": "All statuses containing these words will be muted, one per line", "filtering_explanation": "All statuses containing these words will be muted, one per line",

View File

@ -7,6 +7,7 @@ const defaultState = {
colors: {}, colors: {},
hideMutedPosts: undefined, // instance default hideMutedPosts: undefined, // instance default
collapseMessageWithSubject: undefined, // instance default collapseMessageWithSubject: undefined, // instance default
padEmoji: true,
hideAttachments: false, hideAttachments: false,
hideAttachmentsInConv: false, hideAttachmentsInConv: false,
maxThumbnails: 16, maxThumbnails: 16,

View File

@ -26,7 +26,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '(test)', spamMode: false }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ') expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
}) })
@ -36,7 +36,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '(test)', spamMode: false }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ') expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
}) })
@ -46,7 +46,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 0 }) wrapper.setData({ caret: 0 })
wrapper.vm.insert({ insertion: '(test)', spamMode: false }) wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
expect(wrapper.emitted().input[0][0]).to.eql('(test) Testing') expect(wrapper.emitted().input[0][0]).to.eql('(test) Testing')
}) })
@ -56,7 +56,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 6 }) wrapper.setData({ caret: 6 })
wrapper.vm.insert({ insertion: ':ebin:', spamMode: false }) wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde') expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
}) })
@ -66,7 +66,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 7 }) wrapper.setData({ caret: 7 })
wrapper.vm.insert({ insertion: ':ebin:', spamMode: false }) wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde') expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
}) })
@ -76,7 +76,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: ':spam:', spamMode: true }) wrapper.vm.insert({ insertion: ':spam:', keepOpen: true })
expect(wrapper.emitted().input[0][0]).to.eql('Eat some spam!:spam:') expect(wrapper.emitted().input[0][0]).to.eql('Eat some spam!:spam:')
}) })
@ -86,7 +86,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: 0 }) wrapper.setData({ caret: 0 })
wrapper.vm.insert({ insertion: '1234', spamMode: false }) wrapper.vm.insert({ insertion: '1234', keepOpen: false })
vue.nextTick(() => { vue.nextTick(() => {
expect(wrapper.vm.caret).to.eql(5) expect(wrapper.vm.caret).to.eql(5)
done() done()
@ -99,7 +99,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '1234', spamMode: false }) wrapper.vm.insert({ insertion: '1234', keepOpen: false })
vue.nextTick(() => { vue.nextTick(() => {
expect(wrapper.vm.caret).to.eql(10) expect(wrapper.vm.caret).to.eql(10)
done() done()
@ -112,7 +112,7 @@ describe('EmojiInput', () => {
const input = wrapper.find('input') const input = wrapper.find('input')
input.setValue(initialString) input.setValue(initialString)
wrapper.setData({ caret: initialString.length }) wrapper.setData({ caret: initialString.length })
wrapper.vm.insert({ insertion: '1234', spamMode: true }) wrapper.vm.insert({ insertion: '1234', keepOpen: true })
vue.nextTick(() => { vue.nextTick(() => {
expect(wrapper.vm.caret).to.eql(8) expect(wrapper.vm.caret).to.eql(8)
done() done()