No OneTemporary
Actions

Size

48 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index e7094bec94..ad149506ee 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,562 +1,565 @@
	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 PollForm from '../poll/poll_form.vue'
	import Attachment from '../attachment/attachment.vue'
	import StatusContent from '../status_content/status_content.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { reject, map, uniqBy, debounce } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters, mapState } from 'vuex'
	import Checkbox from '../checkbox/checkbox.vue'

	const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: currentUser.id })

	let mentions = map(allAttentions, (attention) => {
	return `@${attention.screen_name}`
	})

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

	// Converts a string with px to a number like '2px' -> 2
	const pxStringToNumber = (str) => {
	return Number(str.substring(0, str.length - 2))
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	Attachment,
	StatusContent
	},
	mounted () {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

	if (this.replyTo) {
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)
	}

	if (this.replyTo \|\| this.autoFocus) {
	this.$refs.textarea.focus()
	}
	},
	data () {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	const { scopeCopy } = this.$store.getters.mergedConfig

	if (this.replyTo) {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	}

	const scope = ((this.copyMessageScope && scopeCopy) \|\| this.copyMessageScope === 'direct')
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	const { postContentType: contentType } = this.$store.getters.mergedConfig

	return {
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: false,
	files: [],
	poll: {},
	mediaDescriptions: {},
	visibility: scope,
	contentType
	},
	caret: 0,
	pollFormVisible: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: ''
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	users: this.$store.state.users.users,
	updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.state.instance.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	},
	hideScopeNotice () {
	return this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	showPreview () {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus () {
	return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	},
	uploadFileLimitReached () {
	return this.newStatus.files.length >= this.fileLimit
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	mobileLayout: state => state.interface.mobileLayout
	})
	},
	watch: {
	'newStatus': {
	deep: true,
	handler () {
	this.statusChanged()
	}
	}
	},
	methods: {
	statusChanged () {
	this.autoPreview()
	this.updateIdempotencyKey()
	},
	clearStatus () {
	const newStatus = this.newStatus
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	mediaDescriptions: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	},
	async postStatus (event, newStatus, opts = {}) {
	if (this.posting) { return }
	if (this.disableSubmit) { return }
	if (this.emojiInputShown) { return }
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

	if (this.emptyStatus) {
	this.error = this.$t('post_status.empty_status_error')
	return
	}

	const poll = this.pollFormVisible ? this.newStatus.poll : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch (e) {
	this.error = this.$t('post_status.media_description_error')
	this.posting = false
	return
	}

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey
	}

	const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus

	postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.clearStatus()
	this.$emit('posted', data)
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus () {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll: {},
	preview: true
	}).then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	}).catch((error) => {
	this.preview = { error }
	}).finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
	autoPreview () {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview () {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview () {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.$emit('resize', { delayed: true })
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles () {
	this.uploadingFiles = true
	},
	finishedUploadingFiles () {
	this.$emit('resize')
	this.uploadingFiles = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop (e) {
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop (e) {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	onEmojiInputInput (e) {
	this.$nextTick(() => {
	this.resize(this.$refs['textarea'])
	})
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }

	// Reset to default height for empty form, nothing else to do here.
	if (target.value === '') {
	target.style.height = null
	this.$emit('resize')
	this.$refs['emoji-input'].resize()
	return
	}

	const formRef = this.$refs['form']
	const bottomRef = this.$refs['bottom']
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
	const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)

	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

	// Getting info about padding we have to account for, removing 'px' part
	const topPaddingStr = window.getComputedStyle(target)['padding-top']
	const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
	const topPadding = pxStringToNumber(topPaddingStr)
	const bottomPadding = pxStringToNumber(bottomPaddingStr)
	const vertPadding = topPadding + bottomPadding

	const oldHeight = pxStringToNumber(target.style.height)

	/* Explanation:
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
	* scrollHeight returns element's scrollable content height, i.e. visible
	* element + overscrolled parts of it. We use it to determine when text
	* inside the textarea exceeded its height, so we can set height to prevent
	* overscroll, i.e. make textarea grow with the text. HOWEVER, since we
	* explicitly set new height, scrollHeight won't go below that, so we can't
	* SHRINK the textarea when there's extra space. To workaround that we set
	* height to 'auto' which makes textarea tiny again, so that scrollHeight
	* will match text height again. HOWEVER, shrinking textarea can screw with
	* the scroll since there might be not enough padding around form-bottom to even
	* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
	* so we check current scroll position before shrinking and then restore it
	* with needed delta.
	*/

	// this part has to be BEFORE the content size update
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight
	const scrollerBottomBorder = currentScroll + scrollerHeight

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
	let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
	// This is a bit of a hack to combat target.scrollHeight being different on every other input
	// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
	if (Math.abs(newHeight - oldHeight) <= 1) {
	newHeight = oldHeight
	}
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

	// We check where the bottom border of form-bottom element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding

	const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
	const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
	const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
	// The intention is basically this;
	// Keep form-bottom always visible so that submit button is in view EXCEPT
	// if form element bigger than scroller and caret isn't at the end, so that
	// if you scroll up and edit middle of text you won't get scrolled back to bottom
	const shouldScrollToBottom = isBottomObstructed &&
	!(isFormBiggerThanScroller &&
	this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
	const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
	const targetScroll = currentScroll + totalDelta

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}

	this.$refs['emoji-input'].resize()
	},
	showEmojiPicker () {
	this.$refs['textarea'].focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	},
	setMediaDescription (id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({ store: this.$store, id, description })
	},
	setAllMediaDescriptions () {
	const ids = this.newStatus.files.map(file => file.id)
	return Promise.all(ids.map(id => this.setMediaDescription(id)))
	},
	handleEmojiInputShow (value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey () {
	this.idempotencyKey = Date.now().toString()
	+ },
	+ openProfileTab () {
	+ this.$store.dispatch('openSettingsModalTab', 'profile')
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 520c03ea1e..d67d9ae9c6 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,654 +1,657 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	:class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	/>
	<div class="form-group">
	<i18n
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	>
	- <router-link :to="{ name: 'user-settings' }">
	+ <a
	+ href="#"
	+ @click="openProfileTab"
	+ >
	{{ $t('post_status.account_not_locked_warning_link') }}
	- </router-link>
	+ </a>
	</i18n>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="button-icon dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<i class="icon-cancel" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div
	v-if="!disablePreview"
	class="preview-heading faint"
	>
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
	</a>
	<i
	v-show="previewLoading"
	class="icon-spin3 animate-spin"
	/>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	:newline-on-ctrl-enter="submitOnEnter"
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	cols="1"
	:disabled="posting"
	class="form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<label
	for="post-content-type"
	class="select"
	>
	<select
	id="post-content-type"
	v-model="newStatus.contentType"
	class="form-control"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div
	ref="bottom"
	class="form-bottom"
	>
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<div
	class="emoji-icon"
	>
	<i
	:title="$t('emoji.add_emoji')"
	class="icon-smile btn btn-default"
	@click="showEmojiPicker"
	/>
	</div>
	<div
	v-if="pollsAvailable"
	class="poll-icon"
	:class="{ selected: pollFormVisible }"
	>
	<i
	:title="$t('polls.add_poll')"
	class="icon-chart-bar btn btn-default"
	@click="togglePollForm"
	/>
	</div>
	</div>
	<button
	v-if="posting"
	disabled
	class="btn btn-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn btn-default"
	>
	{{ $t('general.submit') }}
	</button>
	<!-- touchstart is used to keep the OSK at the same position after a message send -->
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn btn-default"
	@touchstart.stop.prevent="postStatus($event, newStatus)"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('general.submit') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<div class="attachments">
	<div
	v-for="file in newStatus.files"
	:key="file.url"
	class="media-upload-wrapper"
	>
	<i
	class="fa button-icon icon-cancel"
	@click="removeMediaFile(file)"
	/>
	<attachment
	:attachment="file"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	size="small"
	allow-play="false"
	/>
	<input
	v-model="newStatus.mediaDescriptions[file.id]"
	type="text"
	:placeholder="$t('post_status.media_description')"
	@keydown.enter.prevent=""
	>
	</div>
	</div>
	<div
	v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
	class="upload_settings"
	>
	<Checkbox v-model="newStatus.nsfw">
	{{ $t('post_status.attachments_sensitive') }}
	</Checkbox>
	</div>
	</form>
	</div>
	</template>

	<script src="./post_status_form.js"></script>

	<style lang="scss">
	@import '../../_variables.scss';

	.tribute-container {
	ul {
	padding: 0px;
	li {
	display: flex;
	align-items: center;
	}
	}
	img {
	padding: 3px;
	width: 16px;
	height: 16px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}

	.post-status-form {
	position: relative;

	.form-bottom {
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.form-bottom-left {
	display: flex;
	flex: 1;
	padding-right: 7px;
	margin-right: 7px;
	max-width: 10em;
	}

	.preview-heading {
	padding-left: 0.5em;
	display: flex;
	width: 100%;

	.icon-spin3 {
	margin-left: auto;
	}
	}

	.preview-toggle {
	display: flex;
	cursor: pointer;
	user-select: none;

	&:hover {
	text-decoration: underline;
	}
	i {
	margin-left: 0.2em;
	font-size: 0.8em;
	transform: rotate(90deg);
	}
	}

	.preview-container {
	margin-bottom: 1em;
	}

	.preview-error {
	font-style: italic;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.preview-status {
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	padding: 0.5em;
	margin: 0;
	line-height: 1.4em;
	}

	.text-format {
	.only-format {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}
	}

	.visibility-tray {
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	}

	.media-upload-icon, .poll-icon, .emoji-icon {
	font-size: 26px;
	flex: 1;

	&.selected, &:hover {
	// needs to be specific to override icon default color
	i, label {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	&.disabled {
	i {
	cursor: not-allowed;
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);

	&:hover {
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);
	}
	}
	}
	}

	// Order is not necessary but a good indicator
	.media-upload-icon {
	order: 1;
	text-align: left;
	}

	.emoji-icon {
	order: 2;
	text-align: center;
	}

	.poll-icon {
	order: 3;
	text-align: right;
	}

	.icon-chart-bar {
	cursor: pointer;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: .2em;
	margin-bottom: .5em;
	width: 18em;

	.icon-cancel {
	display: inline-block;
	position: static;
	margin: 0;
	padding-bottom: 0;
	margin-left: $fallback--attachmentRadius;
	margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	}

	img, video {
	object-fit: contain;
	max-height: 10em;
	}

	.video {
	max-height: 10em;
	}

	input {
	flex: 1;
	width: 100%;
	}
	}

	.status-input-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	flex-direction: column;
	}

	.media-upload-wrapper .attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	padding: 0;
	position: relative;
	}

	i {
	position: absolute;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	font-weight: bold;
	}
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;
	position: relative;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.25em 0.5em 0.5em;
	line-height:24px;
	}

	form textarea.form-cw {
	line-height:16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 1px;
	}

	.form-post-body {
	height: 16px; // Only affects the empty-height
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	padding-bottom: 1.75em;
	min-height: 1px;
	box-sizing: content-box;

	&.scrollable-form {
	overflow-y: auto;
	}
	}

	.main-input {
	position: relative;
	}

	.character-counter {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0 0.5em;

	&.error {
	color: $fallback--cRed;
	color: var(--cRed, $fallback--cRed);
	}
	}

	.btn {
	cursor: pointer;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	.icon-cancel {
	cursor: pointer;
	z-index: 4;
	}

	@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 0.6; }
	}

	@keyframes fade-out {
	from { opacity: 0.6; }
	to { opacity: 0; }
	}

	.drop-indicator {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	font-size: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	border: 2px dashed $fallback--text;
	border: 2px dashed var(--text, $fallback--text);
	}
	}

	// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
	img.media-upload, .media-upload-container > video {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
	index 48101a9069..ef1a5ffa02 100644
	--- a/src/components/settings_modal/settings_modal_content.js
	+++ b/src/components/settings_modal/settings_modal_content.js
	@@ -1,34 +1,62 @@
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'

	import DataImportExportTab from './tabs/data_import_export_tab.vue'
	import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
	import NotificationsTab from './tabs/notifications_tab.vue'
	import FilteringTab from './tabs/filtering_tab.vue'
	import SecurityTab from './tabs/security_tab/security_tab.vue'
	import ProfileTab from './tabs/profile_tab.vue'
	import GeneralTab from './tabs/general_tab.vue'
	import VersionTab from './tabs/version_tab.vue'
	import ThemeTab from './tabs/theme_tab/theme_tab.vue'

	const SettingsModalContent = {
	components: {
	TabSwitcher,

	DataImportExportTab,
	MutesAndBlocksTab,
	NotificationsTab,
	FilteringTab,
	SecurityTab,
	ProfileTab,
	GeneralTab,
	VersionTab,
	ThemeTab
	},
	computed: {
	isLoggedIn () {
	return !!this.$store.state.users.currentUser
	+ },
	+ open () {
	+ return this.$store.state.interface.settingsModalState !== 'hidden'
	+ }
	+ },
	+ methods: {
	+ onOpen () {
	+ const targetTab = this.$store.state.interface.settingsModalTargetTab
	+ // We're being told to open in specific tab
	+ if (targetTab) {
	+ const tabIndex = this.$refs.tabSwitcher.$slots.default.findIndex(elm => {
	+ return elm.data && elm.data.attrs['data-tab-name'] === targetTab
	+ })
	+ if (tabIndex >= 0) {
	+ this.$refs.tabSwitcher.setTab(tabIndex)
	+ }
	+ }
	+ // Clear the state of target tab, so that next time settings is opened
	+ // it doesn't force it.
	+ this.$store.dispatch('clearSettingsModalTargetTab')
	+ }
	+ },
	+ mounted () {
	+ this.onOpen()
	+ },
	+ watch: {
	+ open: function (value) {
	+ if (value) this.onOpen()
	}
	}
	}

	export default SettingsModalContent
	diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
	index 2156844f28..bc30a0ff7d 100644
	--- a/src/components/settings_modal/settings_modal_content.vue
	+++ b/src/components/settings_modal/settings_modal_content.vue
	@@ -1,73 +1,82 @@
	<template>
	<tab-switcher
	ref="tabSwitcher"
	class="settings_tab-switcher"
	:side-tab-bar="true"
	:scrollable-tabs="true"
	>
	<div
	:label="$t('settings.general')"
	icon="wrench"
	+ data-tab-name="general"
	>
	<GeneralTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.profile_tab')"
	icon="user"
	+ data-tab-name="profile"
	>
	<ProfileTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.security_tab')"
	icon="lock"
	+ data-tab-name="security"
	>
	<SecurityTab />
	</div>
	<div
	:label="$t('settings.filtering')"
	icon="filter"
	+ data-tab-name="filtering"
	>
	<FilteringTab />
	</div>
	<div
	:label="$t('settings.theme')"
	icon="brush"
	+ data-tab-name="theme"
	>
	<ThemeTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.notifications')"
	icon="bell-ringing-o"
	+ data-tab-name="notifications"
	>
	<NotificationsTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.data_import_export_tab')"
	icon="download"
	+ data-tab-name="dataImportExport"
	>
	<DataImportExportTab />
	</div>
	<div
	v-if="isLoggedIn"
	:label="$t('settings.mutes_and_blocks')"
	:fullHeight="true"
	icon="eye-off"
	+ data-tab-name="mutesAndBlocks"
	>
	<MutesAndBlocksTab />
	</div>
	<div
	:label="$t('settings.version.title')"
	icon="info-circled"
	+ data-tab-name="version"
	>
	<VersionTab />
	</div>
	</tab-switcher>
	</template>

	<script src="./settings_modal_content.js"></script>

	<style src="./settings_modal_content.scss" lang="scss"></style>
	diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
	index 40b5b3ca15..9c1da35451 100644
	--- a/src/components/tab_switcher/tab_switcher.js
	+++ b/src/components/tab_switcher/tab_switcher.js
	@@ -1,150 +1,153 @@
	import Vue from 'vue'
	import { mapState } from 'vuex'

	import './tab_switcher.scss'

	export default Vue.component('tab-switcher', {
	name: 'TabSwitcher',
	props: {
	renderOnlyFocused: {
	required: false,
	type: Boolean,
	default: false
	},
	onSwitch: {
	required: false,
	type: Function,
	default: undefined
	},
	activeTab: {
	required: false,
	type: String,
	default: undefined
	},
	scrollableTabs: {
	required: false,
	type: Boolean,
	default: false
	},
	sideTabBar: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	data () {
	return {
	active: this.$slots.default.findIndex(_ => _.tag)
	}
	},
	computed: {
	activeIndex () {
	// In case of controlled component
	if (this.activeTab) {
	return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
	} else {
	return this.active
	}
	},
	settingsModalVisible () {
	return this.settingsModalState === 'visible'
	},
	...mapState({
	settingsModalState: state => state.interface.settingsModalState
	})
	},
	beforeUpdate () {
	const currentSlot = this.$slots.default[this.active]
	if (!currentSlot.tag) {
	this.active = this.$slots.default.findIndex(_ => _.tag)
	}
	},
	methods: {
	- activateTab (index) {
	+ clickTab (index) {
	return (e) => {
	e.preventDefault()
	- if (typeof this.onSwitch === 'function') {
	- this.onSwitch.call(null, this.$slots.default[index].key)
	- }
	- this.active = index
	- if (this.scrollableTabs) {
	- this.$refs.contents.scrollTop = 0
	- }
	+ this.setTab(index)
	+ }
	+ },
	+ setTab (index) {
	+ if (typeof this.onSwitch === 'function') {
	+ this.onSwitch.call(null, this.$slots.default[index].key)
	+ }
	+ this.active = index
	+ if (this.scrollableTabs) {
	+ this.$refs.contents.scrollTop = 0
	}
	}
	},
	render (h) {
	const tabs = this.$slots.default
	.map((slot, index) => {
	if (!slot.tag) return
	const classesTab = ['tab']
	const classesWrapper = ['tab-wrapper']
	if (this.activeIndex === index) {
	classesTab.push('active')
	classesWrapper.push('active')
	}
	if (slot.data.attrs.image) {
	return (
	<div class={classesWrapper.join(' ')}>
	<button
	disabled={slot.data.attrs.disabled}
	- onClick={this.activateTab(index)}
	+ onClick={this.clickTab(index)}
	class={classesTab.join(' ')}>
	<img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
	{slot.data.attrs.label ? '' : slot.data.attrs.label}
	</button>
	</div>
	)
	}
	return (
	<div class={classesWrapper.join(' ')}>
	<button
	disabled={slot.data.attrs.disabled}
	- onClick={this.activateTab(index)}
	+ onClick={this.clickTab(index)}
	class={classesTab.join(' ')}
	type="button"
	>
	{!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
	<span class="text">
	{slot.data.attrs.label}
	</span>
	</button>
	</div>
	)
	})

	const contents = this.$slots.default.map((slot, index) => {
	if (!slot.tag) return
	const active = this.activeIndex === index
	const classes = [ active ? 'active' : 'hidden' ]
	if (slot.data.attrs.fullHeight) {
	classes.push('full-height')
	}
	const renderSlot = (!this.renderOnlyFocused \|\| active)
	? slot
	: ''

	return (
	<div class={classes}>
	{
	this.sideTabBar
	? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
	: ''
	}
	{renderSlot}
	</div>
	)
	})

	return (
	<div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
	<div class="tabs">
	{tabs}
	</div>
	<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
	{contents}
	</div>
	</div>
	)
	}
	})
	diff --git a/src/modules/interface.js b/src/modules/interface.js
	index 748d30258f..d6db32fd99 100644
	--- a/src/modules/interface.js
	+++ b/src/modules/interface.js
	@@ -1,131 +1,142 @@
	import { set, delete as del } from 'vue'

	const defaultState = {
	settingsModalState: 'hidden',
	settingsModalLoaded: false,
	+ settingsModalTargetTab: null,
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null
	},
	browserSupport: {
	cssFilter: window.CSS && window.CSS.supports && (
	window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
	)
	},
	mobileLayout: false,
	globalNotices: [],
	layoutHeight: 0,
	lastTimeline: null
	}

	const interfaceMod = {
	state: defaultState,
	mutations: {
	settingsSaved (state, { success, error }) {
	if (success) {
	if (state.noticeClearTimeout) {
	clearTimeout(state.noticeClearTimeout)
	}
	set(state.settings, 'currentSaveStateNotice', { error: false, data: success })
	set(state.settings, 'noticeClearTimeout',
	setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
	} else {
	set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error })
	}
	},
	setNotificationPermission (state, permission) {
	state.notificationPermission = permission
	},
	setMobileLayout (state, value) {
	state.mobileLayout = value
	},
	closeSettingsModal (state) {
	state.settingsModalState = 'hidden'
	},
	togglePeekSettingsModal (state) {
	switch (state.settingsModalState) {
	case 'minimized':
	state.settingsModalState = 'visible'
	return
	case 'visible':
	state.settingsModalState = 'minimized'
	return
	default:
	throw new Error('Illegal minimization state of settings modal')
	}
	},
	openSettingsModal (state) {
	state.settingsModalState = 'visible'
	if (!state.settingsModalLoaded) {
	state.settingsModalLoaded = true
	}
	},
	+ setSettingsModalTargetTab (state, value) {
	+ state.settingsModalTargetTab = value
	+ },
	pushGlobalNotice (state, notice) {
	state.globalNotices.push(notice)
	},
	removeGlobalNotice (state, notice) {
	state.globalNotices = state.globalNotices.filter(n => n !== notice)
	},
	setLayoutHeight (state, value) {
	state.layoutHeight = value
	},
	setLastTimeline (state, value) {
	state.lastTimeline = value
	}
	},
	actions: {
	setPageTitle ({ rootState }, option = '') {
	document.title = `${option} ${rootState.instance.name}`
	},
	settingsSaved ({ commit, dispatch }, { success, error }) {
	commit('settingsSaved', { success, error })
	},
	setNotificationPermission ({ commit }, permission) {
	commit('setNotificationPermission', permission)
	},
	setMobileLayout ({ commit }, value) {
	commit('setMobileLayout', value)
	},
	closeSettingsModal ({ commit }) {
	commit('closeSettingsModal')
	},
	openSettingsModal ({ commit }) {
	commit('openSettingsModal')
	},
	togglePeekSettingsModal ({ commit }) {
	commit('togglePeekSettingsModal')
	},
	+ clearSettingsModalTargetTab ({ commit }) {
	+ commit('setSettingsModalTargetTab', null)
	+ },
	+ openSettingsModalTab ({ commit }, value) {
	+ commit('setSettingsModalTargetTab', value)
	+ commit('openSettingsModal')
	+ },
	pushGlobalNotice (
	{ commit, dispatch },
	{
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level
	}
	if (timeout) {
	setTimeout(() => dispatch('removeGlobalNotice', notice), timeout)
	}
	commit('pushGlobalNotice', notice)
	return notice
	},
	removeGlobalNotice ({ commit }, notice) {
	commit('removeGlobalNotice', notice)
	},
	setLayoutHeight ({ commit }, value) {
	commit('setLayoutHeight', value)
	},
	setLastTimeline ({ commit }, value) {
	commit('setLastTimeline', value)
	}
	}
	}

	export default interfaceMod

File Metadata

Mime Type: text/x-diff
Expires: Sat, Jul 18, 5:54 PM (1 d, 4 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1695108
Default Alt Text: (48 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions