No OneTemporary
Actions

Authored By

Unknown

Size

68 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/boot/after_store.js b/src/boot/after_store.js
	index 5693dcc65a..3b08a3f6f8 100644
	--- a/src/boot/after_store.js
	+++ b/src/boot/after_store.js
	@@ -1,175 +1,176 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import routes from './routes'

	import App from '../App.vue'

	const afterStoreSetup = ({ store, i18n }) => {
	window.fetch('/api/statusnet/config.json')
	.then((res) => res.json())
	.then((data) => {
	const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey } = data.site

	store.dispatch('setInstanceOption', { name: 'name', value: name })
	store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
	store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
	store.dispatch('setInstanceOption', { name: 'server', value: server })

	// TODO: default values for this stuff, added if to not make it break on
	// my dev config out of the box.
	if (uploadlimit) {
	store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
	store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
	store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
	store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
	}

	if (vapidPublicKey) {
	store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
	}

	var apiConfig = data.site.pleromafe

	window.fetch('/static/config.json')
	.then((res) => res.json())
	.catch((err) => {
	console.warn('Failed to load static/config.json, continuing without it.')
	console.warn(err)
	return {}
	})
	.then((staticConfig) => {
	const overrides = window.___pleromafe_dev_overrides \|\| {}
	const env = window.___pleromafe_mode.NODE_ENV

	// This takes static config and overrides properties that are present in apiConfig
	let config = {}
	if (overrides.staticConfigPreference && env === 'development') {
	console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG')
	config = Object.assign({}, apiConfig, staticConfig)
	} else {
	config = Object.assign({}, staticConfig, apiConfig)
	}

	const copyInstanceOption = (name) => {
	store.dispatch('setInstanceOption', {name, value: config[name]})
	}

	copyInstanceOption('nsfwCensorImage')
	copyInstanceOption('theme')
	copyInstanceOption('background')
	copyInstanceOption('hidePostStats')
	copyInstanceOption('hideUserStats')
	copyInstanceOption('logo')

	store.dispatch('setInstanceOption', {
	name: 'logoMask',
	value: typeof config.logoMask === 'undefined'
	? true
	: config.logoMask
	})

	store.dispatch('setInstanceOption', {
	name: 'logoMargin',
	value: typeof config.logoMargin === 'undefined'
	? 0
	: config.logoMargin
	})

	copyInstanceOption('redirectRootNoLogin')
	copyInstanceOption('redirectRootLogin')
	copyInstanceOption('showInstanceSpecificPanel')
	copyInstanceOption('scopeOptionsEnabled')
	copyInstanceOption('formattingOptionsEnabled')
	copyInstanceOption('collapseMessageWithSubject')
	copyInstanceOption('loginMethod')
	copyInstanceOption('scopeCopy')
	copyInstanceOption('subjectLineBehavior')
	+ copyInstanceOption('postContentType')
	copyInstanceOption('alwaysShowSubjectInput')
	copyInstanceOption('noAttachmentLinks')

	if ((config.chatDisabled)) {
	store.dispatch('disableChat')
	} else {
	store.dispatch('initializeSocket')
	}

	const router = new VueRouter({
	mode: 'history',
	routes: routes(store),
	scrollBehavior: (to, _from, savedPosition) => {
	if (to.matched.some(m => m.meta.dontScroll)) {
	return false
	}
	return savedPosition \|\| { x: 0, y: 0 }
	}
	})

	/* eslint-disable no-new */
	new Vue({
	router,
	store,
	i18n,
	el: '#app',
	render: h => h(App)
	})
	})
	})

	window.fetch('/static/terms-of-service.html')
	.then((res) => res.text())
	.then((html) => {
	store.dispatch('setInstanceOption', { name: 'tos', value: html })
	})

	window.fetch('/api/pleroma/emoji.json')
	.then(
	(res) => res.json()
	.then(
	(values) => {
	const emoji = Object.keys(values).map((key) => {
	return { shortcode: key, image_url: values[key] }
	})
	store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji })
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true })
	},
	(failure) => {
	store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false })
	}
	),
	(error) => console.log(error)
	)

	window.fetch('/static/emoji.json')
	.then((res) => res.json())
	.then((values) => {
	const emoji = Object.keys(values).map((key) => {
	return { shortcode: key, image_url: false, 'utf': values[key] }
	})
	store.dispatch('setInstanceOption', { name: 'emoji', value: emoji })
	})

	window.fetch('/instance/panel.html')
	.then((res) => res.text())
	.then((html) => {
	store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
	})

	window.fetch('/nodeinfo/2.0.json')
	.then((res) => res.json())
	.then((data) => {
	const metadata = data.metadata

	const features = metadata.features
	store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
	store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') })
	store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })

	store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })

	const suggestions = metadata.suggestions
	store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
	store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
	})
	}

	export default afterStoreSetup
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 5e8c2252d8..ab379c233e 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,325 +1,329 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import Completion from '../../services/completion/completion.js'
	import { take, filter, reject, map, uniqBy } from 'lodash'

	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(' ') + ' ' : ''
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject'
	],
	components: {
	MediaUpload
	},
	mounted () {
	this.resize(this.$refs.textarea)
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)

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

	const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined'
	? this.$store.state.instance.scopeCopy
	: this.$store.state.config.scopeCopy

	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

	return {
	dropFiles: [],
	submitDisabled: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	- contentType: 'text/plain',
	nsfw: false,
	files: [],
	visibility: scope
	},
	caret: 0
	}
	},
	computed: {
	vis () {
	return {
	public: { selected: this.newStatus.visibility === 'public' },
	unlisted: { selected: this.newStatus.visibility === 'unlisted' },
	private: { selected: this.newStatus.visibility === 'private' },
	direct: { selected: this.newStatus.visibility === 'direct' }
	}
	},
	candidates () {
	const firstchar = this.textAtCaret.charAt(0)
	if (firstchar === '@') {
	const query = this.textAtCaret.slice(1).toUpperCase()
	const matchedUsers = filter(this.users, (user) => {
	return user.screen_name.toUpperCase().startsWith(query) \|\|
	user.name && user.name.toUpperCase().startsWith(query)
	})
	if (matchedUsers.length <= 0) {
	return false
	}
	// eslint-disable-next-line camelcase
	return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({
	// eslint-disable-next-line camelcase
	screen_name: `@${screen_name}`,
	name: name,
	img: profile_image_url_original,
	highlighted: index === this.highlighted
	}))
	} else if (firstchar === ':') {
	if (this.textAtCaret === ':') { return }
	const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.startsWith(this.textAtCaret.slice(1)))
	if (matchedEmoji.length <= 0) {
	return false
	}
	return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
	screen_name: `:${shortcode}:`,
	name: '',
	utf: utf \|\| '',
	// eslint-disable-next-line camelcase
	img: utf ? '' : this.$store.state.instance.server + image_url,
	highlighted: index === this.highlighted
	}))
	} else {
	return false
	}
	},
	textAtCaret () {
	return (this.wordAtCaret \|\| {}).word \|\| ''
	},
	wordAtCaret () {
	const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) \|\| {}
	return word
	},
	users () {
	return this.$store.state.users.users
	},
	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)
	},
	scopeOptionsEnabled () {
	return this.$store.state.instance.scopeOptionsEnabled
	},
	alwaysShowSubject () {
	if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') {
	return this.$store.state.config.alwaysShowSubjectInput
	} else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') {
	return this.$store.state.instance.alwaysShowSubjectInput
	} else {
	return this.$store.state.instance.scopeOptionsEnabled
	}
	},
	formattingOptionsEnabled () {
	return this.$store.state.instance.formattingOptionsEnabled
	+ },
	+ defaultPostContentType () {
	+ return typeof this.$store.state.config.postContentType === 'undefined'
	+ ? this.$store.state.instance.postContentType
	+ : this.$store.state.config.postContentType
	}
	},
	methods: {
	replace (replacement) {
	this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
	const el = this.$el.querySelector('textarea')
	el.focus()
	this.caret = 0
	},
	replaceCandidate (e) {
	const len = this.candidates.length \|\| 0
	if (this.textAtCaret === ':' \|\| e.ctrlKey) { return }
	if (len > 0) {
	e.preventDefault()
	const candidate = this.candidates[this.highlighted]
	const replacement = candidate.utf \|\| (candidate.screen_name + ' ')
	this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
	const el = this.$el.querySelector('textarea')
	el.focus()
	this.caret = 0
	this.highlighted = 0
	}
	},
	cycleBackward (e) {
	const len = this.candidates.length \|\| 0
	if (len > 0) {
	e.preventDefault()
	this.highlighted -= 1
	if (this.highlighted < 0) {
	this.highlighted = this.candidates.length - 1
	}
	} else {
	this.highlighted = 0
	}
	},
	cycleForward (e) {
	const len = this.candidates.length \|\| 0
	if (len > 0) {
	if (e.shiftKey) { return }
	e.preventDefault()
	this.highlighted += 1
	if (this.highlighted >= len) {
	this.highlighted = 0
	}
	} else {
	this.highlighted = 0
	}
	},
	setCaret ({target: {selectionStart}}) {
	this.caret = selectionStart
	},
	postStatus (newStatus) {
	if (this.posting) { return }
	if (this.submitDisabled) { return }

	if (this.newStatus.status === '') {
	if (this.newStatus.files.length > 0) {
	this.newStatus.status = '\u200b' // hack
	} else {
	this.error = 'Cannot post an empty status with no files'
	return
	}
	}

	this.posting = true
	statusPoster.postStatus({
	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
	}).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType
	}
	this.$refs.mediaUpload.clearFile()
	this.$emit('posted')
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.enableSubmit()
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	this.enableSubmit()
	},
	disableSubmit () {
	this.submitDisabled = true
	},
	enableSubmit () {
	this.submitDisabled = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	if (e.clipboardData.files.length > 0) {
	// 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.files.length > 0) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	}
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = 'copy'
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }
	const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) +
	Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1))
	// Auto is needed to make textbox shrink when removing lines
	target.style.height = 'auto'
	target.style.height = `${target.scrollHeight - vertPadding}px`
	if (target.value === '') {
	target.style.height = null
	}
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	}
	}
	}

	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 e09ad37f54..6ed5d92e0c 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,301 +1,301 @@
	<template>
	<div class="post-status-form">
	<form @submit.prevent="postStatus(newStatus)">
	<div class="form-group" >
	<i18n
	v-if="!this.$store.state.users.currentUser.locked && this.newStatus.visibility == 'private'"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice">
	<router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
	</i18n>
	<p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
	<input
	v-if="newStatus.spoilerText \|\| alwaysShowSubject"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	v-model="newStatus.spoilerText"
	class="form-cw">
	<textarea
	ref="textarea"
	@click="setCaret"
	@keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control"
	@keydown.down="cycleForward"
	@keydown.up="cycleBackward"
	@keydown.shift.tab="cycleBackward"
	@keydown.tab="cycleForward"
	@keydown.enter="replaceCandidate"
	@keydown.meta.enter="postStatus(newStatus)"
	@keyup.ctrl.enter="postStatus(newStatus)"
	@drop="fileDrop"
	@dragover.prevent="fileDrag"
	@input="resize"
	@paste="paste">
	</textarea>
	<div class="visibility-tray">
	<span class="text-format" v-if="formattingOptionsEnabled">
	<label for="post-content-type" class="select">
	- <select id="post-content-type" v-model="newStatus.contentType" class="form-control">
	+ <select id="post-content-type" v-model="defaultPostContentType" class="form-control">
	<option value="text/plain">{{$t('post_status.content_type.plain_text')}}</option>
	<option value="text/html">HTML</option>
	<option value="text/markdown">Markdown</option>
	</select>
	<i class="icon-down-open"></i>
	</label>
	</span>

	<div v-if="scopeOptionsEnabled">
	<i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i>
	<i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
	<i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
	<i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
	</div>
	</div>
	</div>
	<div style="position:relative;" v-if="candidates">
	<div class="autocomplete-panel">
	<div v-for="candidate in candidates" @click="replace(candidate.utf \|\| (candidate.screen_name + ' '))">
	<div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
	<span v-if="candidate.img"><img :src="candidate.img"></img></span>
	<span v-else>{{candidate.utf}}</span>
	<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
	</div>
	</div>
	</div>
	</div>
	<div class='form-bottom'>
	<media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload>

	<p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
	<p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>

	<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>
	<button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button>
	</div>
	<div class='alert error' v-if="error">
	Error: {{ error }}
	<i class="button-icon icon-cancel" @click="clearError"></i>
	</div>
	<div class="attachments">
	<div class="media-upload-wrapper" v-for="file in newStatus.files">
	<i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
	<div class="media-upload-container attachment">
	<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
	<video v-if="type(file) === 'video'" :src="file.image" controls></video>
	<audio v-if="type(file) === 'audio'" :src="file.image" controls></audio>
	<a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a>
	</div>
	</div>
	</div>
	<div class="upload_settings" v-if="newStatus.files.length > 0">
	<input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
	<label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
	</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, .login {
	.form-bottom {
	display: flex;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

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

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	flex: 0 0 auto;
	max-width: 100%;
	min-width: 50px;
	margin-right: .2em;
	margin-bottom: .5em;

	.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;
	}
	}

	.attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	position: relative;
	flex: 0 0 auto;
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	text-align: center;

	audio {
	min-width: 300px;
	flex: 1 0 auto;
	}

	a {
	display: block;
	text-align: left;
	line-height: 1.2;
	padding: .5em;
	}
	}

	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;
	padding: 0.6em;
	}

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

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

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

	form textarea.form-control:focus {
	min-height: 48px;
	}

	.btn {
	cursor: pointer;
	}

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

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

	.autocomplete-panel {
	margin: 0 0.5em 0 0.5em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	position: absolute;
	z-index: 1;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	// this doesn't match original but i don't care, making it uniform.
	box-shadow: var(--popupShadow);
	min-width: 75%;
	background: $fallback--bg;
	background: var(--bg, $fallback--bg);
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	.autocomplete {
	cursor: pointer;
	padding: 0.2em 0.4em 0.2em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	display: flex;

	img {
	width: 24px;
	height: 24px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	object-fit: contain;
	}

	span {
	line-height: 24px;
	margin: 0 0.1em 0 0.2em;
	}

	small {
	margin-left: .5em;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	&.highlighted {
	background-color: $fallback--fg;
	background-color: var(--lightBg, $fallback--fg);
	}
	}
	}
	</style>
	diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
	index 8d1384855e..9f2a1de430 100644
	--- a/src/components/settings/settings.js
	+++ b/src/components/settings/settings.js
	@@ -1,176 +1,184 @@
	/* eslint-env browser */
	import TabSwitcher from '../tab_switcher/tab_switcher.js'
	import StyleSwitcher from '../style_switcher/style_switcher.vue'
	import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
	import { filter, trim } from 'lodash'

	const settings = {
	data () {
	const user = this.$store.state.config
	const instance = this.$store.state.instance

	return {
	hideAttachmentsLocal: user.hideAttachments,
	hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
	hideNsfwLocal: user.hideNsfw,
	useOneClickNsfw: user.useOneClickNsfw,
	hideISPLocal: user.hideISP,
	preloadImage: user.preloadImage,

	hidePostStatsLocal: typeof user.hidePostStats === 'undefined'
	? instance.hidePostStats
	: user.hidePostStats,
	hidePostStatsDefault: this.$t('settings.values.' + instance.hidePostStats),

	hideUserStatsLocal: typeof user.hideUserStats === 'undefined'
	? instance.hideUserStats
	: user.hideUserStats,
	hideUserStatsDefault: this.$t('settings.values.' + instance.hideUserStats),

	notificationVisibilityLocal: user.notificationVisibility,
	replyVisibilityLocal: user.replyVisibility,
	loopVideoLocal: user.loopVideo,
	muteWordsString: user.muteWords.join('\n'),
	autoLoadLocal: user.autoLoad,
	streamingLocal: user.streaming,
	pauseOnUnfocusedLocal: user.pauseOnUnfocused,
	hoverPreviewLocal: user.hoverPreview,

	collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined'
	? instance.collapseMessageWithSubject
	: user.collapseMessageWithSubject,
	collapseMessageWithSubjectDefault: this.$t('settings.values.' + instance.collapseMessageWithSubject),

	subjectLineBehaviorLocal: typeof user.subjectLineBehavior === 'undefined'
	? instance.subjectLineBehavior
	: user.subjectLineBehavior,
	subjectLineBehaviorDefault: instance.subjectLineBehavior,

	+ postContentTypeLocal: typeof user.postContentType === 'undefined'
	+ ? instance.postContentType
	+ : user.postContentType,
	+ postContentTypeDefault: instance.postContentType,
	+
	alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined'
	? instance.alwaysShowSubjectInput
	: user.alwaysShowSubjectInput,
	alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput,

	scopeCopyLocal: typeof user.scopeCopy === 'undefined'
	? instance.scopeCopy
	: user.scopeCopy,
	scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy),

	stopGifs: user.stopGifs,
	webPushNotificationsLocal: user.webPushNotifications,
	loopVideoSilentOnlyLocal: user.loopVideosSilentOnly,
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
	playVideosInModal: user.playVideosInModal,
	useContainFit: user.useContainFit
	}
	},
	components: {
	TabSwitcher,
	StyleSwitcher,
	InterfaceLanguageSwitcher
	},
	computed: {
	user () {
	return this.$store.state.users.currentUser
	},
	currentSaveStateNotice () {
	return this.$store.state.interface.settings.currentSaveStateNotice
	}
	},
	watch: {
	hideAttachmentsLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideAttachments', value })
	},
	hideAttachmentsInConvLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
	},
	hidePostStatsLocal (value) {
	this.$store.dispatch('setOption', { name: 'hidePostStats', value })
	},
	hideUserStatsLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideUserStats', value })
	},
	hideNsfwLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideNsfw', value })
	},
	useOneClickNsfw (value) {
	this.$store.dispatch('setOption', { name: 'useOneClickNsfw', value })
	},
	preloadImage (value) {
	this.$store.dispatch('setOption', { name: 'preloadImage', value })
	},
	hideISPLocal (value) {
	this.$store.dispatch('setOption', { name: 'hideISP', value })
	},
	'notificationVisibilityLocal.likes' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	'notificationVisibilityLocal.follows' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	'notificationVisibilityLocal.repeats' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	'notificationVisibilityLocal.mentions' (value) {
	this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility })
	},
	replyVisibilityLocal (value) {
	this.$store.dispatch('setOption', { name: 'replyVisibility', value })
	},
	loopVideoLocal (value) {
	this.$store.dispatch('setOption', { name: 'loopVideo', value })
	},
	loopVideoSilentOnlyLocal (value) {
	this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
	},
	autoLoadLocal (value) {
	this.$store.dispatch('setOption', { name: 'autoLoad', value })
	},
	streamingLocal (value) {
	this.$store.dispatch('setOption', { name: 'streaming', value })
	},
	pauseOnUnfocusedLocal (value) {
	this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })
	},
	hoverPreviewLocal (value) {
	this.$store.dispatch('setOption', { name: 'hoverPreview', value })
	},
	muteWordsString (value) {
	value = filter(value.split('\n'), (word) => trim(word).length > 0)
	this.$store.dispatch('setOption', { name: 'muteWords', value })
	},
	collapseMessageWithSubjectLocal (value) {
	this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
	},
	scopeCopyLocal (value) {
	this.$store.dispatch('setOption', { name: 'scopeCopy', value })
	},
	alwaysShowSubjectInputLocal (value) {
	this.$store.dispatch('setOption', { name: 'alwaysShowSubjectInput', value })
	},
	subjectLineBehaviorLocal (value) {
	this.$store.dispatch('setOption', { name: 'subjectLineBehavior', value })
	},
	+ postContentTypeLocal (value) {
	+ this.$store.dispatch('setOption', { name: 'postContentType', value })
	+ },
	stopGifs (value) {
	this.$store.dispatch('setOption', { name: 'stopGifs', value })
	},
	webPushNotificationsLocal (value) {
	this.$store.dispatch('setOption', { name: 'webPushNotifications', value })
	if (value) this.$store.dispatch('registerPushNotifications')
	},
	playVideosInModal (value) {
	this.$store.dispatch('setOption', { name: 'playVideosInModal', value })
	},
	useContainFit (value) {
	this.$store.dispatch('setOption', { name: 'useContainFit', value })
	}
	}
	}

	export default settings
	diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
	index 9953780f23..ba53948968 100644
	--- a/src/components/settings/settings.vue
	+++ b/src/components/settings/settings.vue
	@@ -1,324 +1,346 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	<div class="title">
	{{$t('settings.settings')}}
	</div>

	<transition name="fade">
	<template v-if="currentSaveStateNotice">
	<div @click.prevent class="alert error" v-if="currentSaveStateNotice.error">
	{{ $t('settings.saving_err') }}
	</div>

	<div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error">
	{{ $t('settings.saving_ok') }}
	</div>
	</template>
	</transition>
	</div>
	<div class="panel-body">
	<keep-alive>
	<tab-switcher>
	<div :label="$t('settings.general')" >
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher />
	</li>
	<li>
	<input type="checkbox" id="hideISP" v-model="hideISPLocal">
	<label for="hideISP">{{$t('settings.hide_isp')}}</label>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{$t('nav.timeline')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal">
	<label for="collapseMessageWithSubject">
	{{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="streaming" v-model="streamingLocal">
	<label for="streaming">{{$t('settings.streaming')}}</label>
	<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
	<li>
	<input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
	<label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" id="autoload" v-model="autoLoadLocal">
	<label for="autoload">{{$t('settings.autoload')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
	<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.composing')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal">
	<label for="scopeCopy">
	{{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal">
	<label for="subjectHide">
	{{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}}
	</label>
	</li>
	<li>
	<div>
	{{$t('settings.subject_line_behavior')}}
	<label for="subjectLineBehavior" class="select">
	<select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal">
	<option value="email">
	{{$t('settings.subject_line_email')}}
	{{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}}
	</option>
	<option value="masto">
	{{$t('settings.subject_line_mastodon')}}
	{{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}}
	</option>
	<option value="noop">
	{{$t('settings.subject_line_noop')}}
	{{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}}
	</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	</li>
	+ <li>
	+ <div>
	+ {{$t('settings.post_status_content_type')}}
	+ <label for="postContentType" class="select">
	+ <select id="postContentType" v-model="postContentTypeLocal">
	+ <option value="text/plain">
	+ {{$t('settings.status_content_type_plain')}}
	+ {{postContentTypeDefault == 'text/plain' ? $t('settings.instance_default_simple') : ''}}
	+ </option>
	+ <option value="text/html">
	+ HTML
	+ {{postContentTypeDefault == 'text/html' ? $t('settings.instance_default_simple') : ''}}
	+ </option>
	+ <option value="text/markdown">
	+ Markdown
	+ {{postContentTypeDefault == 'text/markdown' ? $t('settings.instance_default_simple') : ''}}
	+ </option>
	+ </select>
	+ <i class="icon-down-open"/>
	+ </label>
	+ </div>
	+ </li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.attachments')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
	<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
	<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
	</li>
	<li>
	<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
	<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
	</li>
	<ul class="setting-list suboptions" >
	<li>
	<input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage">
	<label for="preloadImage">{{$t('settings.preload_images')}}</label>
	</li>
	<li>
	<input type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw">
	<label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label>
	</li>
	</ul>
	<li>
	<input type="checkbox" id="stopGifs" v-model="stopGifs">
	<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
	</li>
	<li>
	<input type="checkbox" id="loopVideo" v-model="loopVideoLocal">
	<label for="loopVideo">{{$t('settings.loop_video')}}</label>
	<ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]">
	<li>
	<input :disabled="!loopVideoLocal \|\| !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal">
	<label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label>
	<div v-if="!loopSilentAvailable" class="unavailable">
	<i class="icon-globe"/>! {{$t('settings.limited_availability')}}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<input type="checkbox" id="playVideosInModal" v-model="playVideosInModal">
	<label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label>
	</li>
	<li>
	<input type="checkbox" id="useContainFit" v-model="useContainFit">
	<label for="useContainFit">{{$t('settings.use_contain_fit')}}</label>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{$t('settings.notifications')}}</h2>
	<ul class="setting-list">
	<li>
	<input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal">
	<label for="webPushNotifications">
	{{$t('settings.enable_web_push_notifications')}}
	</label>
	</li>
	</ul>
	</div>
	</div>

	<div :label="$t('settings.theme')" >
	<div class="setting-item">
	<style-switcher></style-switcher>
	</div>
	</div>

	<div :label="$t('settings.filtering')" >
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{$t('settings.notification_visibility')}}</span>
	<ul class="option-list">
	<li>
	<input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes">
	<label for="notification-visibility-likes">
	{{$t('settings.notification_visibility_likes')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats">
	<label for="notification-visibility-repeats">
	{{$t('settings.notification_visibility_repeats')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows">
	<label for="notification-visibility-follows">
	{{$t('settings.notification_visibility_follows')}}
	</label>
	</li>
	<li>
	<input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions">
	<label for="notification-visibility-mentions">
	{{$t('settings.notification_visibility_mentions')}}
	</label>
	</li>
	</ul>
	</label>
	</div>
	<div>
	{{$t('settings.replies_in_timeline')}}
	<label for="replyVisibility" class="select">
	<select id="replyVisibility" v-model="replyVisibilityLocal">
	<option value="all" selected>{{$t('settings.reply_visibility_all')}}</option>
	<option value="following">{{$t('settings.reply_visibility_following')}}</option>
	<option value="self">{{$t('settings.reply_visibility_self')}}</option>
	</select>
	<i class="icon-down-open"/>
	</label>
	</div>
	<div>
	<input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal">
	<label for="hidePostStats">
	{{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}}
	</label>
	</div>
	<div>
	<input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal">
	<label for="hideUserStats">
	{{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}}
	</label>
	</div>
	</div>
	<div class="setting-item">
	<p>{{$t('settings.filtering_explanation')}}</p>
	<textarea id="muteWords" v-model="muteWordsString"></textarea>
	</div>
	</div>

	</tab-switcher>
	</keep-alive>
	</div>
	</div>
	</template>

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

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

	.setting-item {
	border-bottom: 2px solid var(--fg, $fallback--fg);
	margin: 1em 1em 1.4em;
	padding-bottom: 1.4em;

	> div {
	margin-bottom: .5em;
	&:last-child {
	margin-bottom: 0;
	}
	}

	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}


	textarea {
	width: 100%;
	height: 100px;
	}

	.unavailable,
	.unavailable i {
	color: var(--cRed, $fallback--cRed);
	color: $fallback--cRed;
	}

	.old-avatar {
	width: 128px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.new-avatar {
	object-fit: cover;
	width: 128px;
	height: 128px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	}

	.btn {
	min-height: 28px;
	min-width: 10em;
	padding: 0 2em;
	}
	}
	.select-multiple {
	display: flex;
	.option-list {
	margin: 0;
	padding-left: .5em;
	}
	}
	.setting-list,
	.option-list{
	list-style-type: none;
	padding-left: 2em;
	li {
	margin-bottom: 0.5em;
	}
	.suboptions {
	margin-top: 0.3em
	}
	}
	</style>
	diff --git a/src/i18n/en.json b/src/i18n/en.json
	index cde0caadc0..8e8fd3aecb 100644
	--- a/src/i18n/en.json
	+++ b/src/i18n/en.json
	@@ -1,383 +1,385 @@
	{
	"chat": {
	"title": "Chat"
	},
	"features_panel": {
	"chat": "Chat",
	"gopher": "Gopher",
	"media_proxy": "Media proxy",
	"scope_options": "Scope options",
	"text_limit": "Text limit",
	"title": "Features",
	"who_to_follow": "Who to follow"
	},
	"finder": {
	"error_fetching_user": "Error fetching user",
	"find_user": "Find user"
	},
	"general": {
	"apply": "Apply",
	"submit": "Submit",
	"more": "More",
	"generic_error": "An error occured"
	},
	"login": {
	"login": "Log in",
	"description": "Log in with OAuth",
	"logout": "Log out",
	"password": "Password",
	"placeholder": "e.g. lain",
	"register": "Register",
	"username": "Username",
	"hint": "Log in to join the discussion"
	},
	"nav": {
	"about": "About",
	"back": "Back",
	"chat": "Local Chat",
	"friend_requests": "Follow Requests",
	"mentions": "Mentions",
	"dms": "Direct Messages",
	"public_tl": "Public Timeline",
	"timeline": "Timeline",
	"twkn": "The Whole Known Network",
	"user_search": "User Search",
	"who_to_follow": "Who to follow",
	"preferences": "Preferences"
	},
	"notifications": {
	"broken_favorite": "Unknown status, searching for it...",
	"favorited_you": "favorited your status",
	"followed_you": "followed you",
	"load_older": "Load older notifications",
	"notifications": "Notifications",
	"read": "Read!",
	"repeated_you": "repeated your status",
	"no_more_notifications": "No more notifications"
	},
	"post_status": {
	"new_status": "Post new status",
	"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
	"account_not_locked_warning_link": "locked",
	"attachments_sensitive": "Mark attachments as sensitive",
	"content_type": {
	"plain_text": "Plain text"
	},
	"content_warning": "Subject (optional)",
	"default": "Just landed in L.A.",
	"direct_warning": "This post will only be visible to all the mentioned users.",
	"posting": "Posting",
	"scope": {
	"direct": "Direct - Post to mentioned users only",
	"private": "Followers-only - Post to followers only",
	"public": "Public - Post to public timelines",
	"unlisted": "Unlisted - Do not post to public timelines"
	}
	},
	"registration": {
	"bio": "Bio",
	"email": "Email",
	"fullname": "Display name",
	"password_confirm": "Password confirmation",
	"registration": "Registration",
	"token": "Invite token",
	"captcha": "CAPTCHA",
	"new_captcha": "Click the image to get a new captcha",
	"validations": {
	"username_required": "cannot be left blank",
	"fullname_required": "cannot be left blank",
	"email_required": "cannot be left blank",
	"password_required": "cannot be left blank",
	"password_confirmation_required": "cannot be left blank",
	"password_confirmation_match": "should be the same as password"
	}
	},
	"settings": {
	"attachmentRadius": "Attachments",
	"attachments": "Attachments",
	"autoload": "Enable automatic loading when scrolled to the bottom",
	"avatar": "Avatar",
	"avatarAltRadius": "Avatars (Notifications)",
	"avatarRadius": "Avatars",
	"background": "Background",
	"bio": "Bio",
	"btnRadius": "Buttons",
	"cBlue": "Blue (Reply, follow)",
	"cGreen": "Green (Retweet)",
	"cOrange": "Orange (Favorite)",
	"cRed": "Red (Cancel)",
	"change_password": "Change Password",
	"change_password_error": "There was an issue changing your password.",
	"changed_password": "Password changed successfully!",
	"collapse_subject": "Collapse posts with subjects",
	"composing": "Composing",
	"confirm_new_password": "Confirm new password",
	"current_avatar": "Your current avatar",
	"current_password": "Current password",
	"current_profile_banner": "Your current profile banner",
	"data_import_export_tab": "Data Import / Export",
	"default_vis": "Default visibility scope",
	"delete_account": "Delete Account",
	"delete_account_description": "Permanently delete your account and all your messages.",
	"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.",
	"avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
	"export_theme": "Save preset",
	"filtering": "Filtering",
	"filtering_explanation": "All statuses containing these words will be muted, one per line",
	"follow_export": "Follow export",
	"follow_export_button": "Export your follows to a csv file",
	"follow_export_processing": "Processing, you'll soon be asked to download your file",
	"follow_import": "Follow import",
	"follow_import_error": "Error importing followers",
	"follows_imported": "Follows imported! Processing them will take a while.",
	"foreground": "Foreground",
	"general": "General",
	"hide_attachments_in_convo": "Hide attachments in conversations",
	"hide_attachments_in_tl": "Hide attachments in timeline",
	"hide_isp": "Hide instance-specific panel",
	"preload_images": "Preload images",
	"use_one_click_nsfw": "Open NSFW attachments with just one click",
	"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
	"hide_user_stats": "Hide user statistics (e.g. the number of followers)",
	"import_followers_from_a_csv_file": "Import follows from a csv file",
	"import_theme": "Load preset",
	"inputRadius": "Input fields",
	"checkboxRadius": "Checkboxes",
	"instance_default": "(default: {value})",
	"instance_default_simple": "(default)",
	"interface": "Interface",
	"interfaceLanguage": "Interface language",
	"invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.",
	"limited_availability": "Unavailable in your browser",
	"links": "Links",
	"lock_account_description": "Restrict your account to approved followers only",
	"loop_video": "Loop videos",
	"loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
	"play_videos_in_modal": "Play videos directly in the media viewer",
	"use_contain_fit": "Don't crop the attachment in thumbnails",
	"name": "Name",
	"name_bio": "Name & Bio",
	"new_password": "New password",
	"notification_visibility": "Types of notifications to show",
	"notification_visibility_follows": "Follows",
	"notification_visibility_likes": "Likes",
	"notification_visibility_mentions": "Mentions",
	"notification_visibility_repeats": "Repeats",
	"no_rich_text_description": "Strip rich text formatting from all posts",
	"hide_follows_description": "Don't show who I'm following",
	"hide_followers_description": "Don't show who's following me",
	"nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding",
	"panelRadius": "Panels",
	"pause_on_unfocused": "Pause streaming when tab is not focused",
	"presets": "Presets",
	"profile_background": "Profile Background",
	"profile_banner": "Profile Banner",
	"profile_tab": "Profile",
	"radii_help": "Set up interface edge rounding (in pixels)",
	"replies_in_timeline": "Replies in timeline",
	"reply_link_preview": "Enable reply-link preview on mouse hover",
	"reply_visibility_all": "Show all replies",
	"reply_visibility_following": "Only show replies directed at me or users I'm following",
	"reply_visibility_self": "Only show replies directed at me",
	"saving_err": "Error saving settings",
	"saving_ok": "Settings saved",
	"security_tab": "Security",
	"scope_copy": "Copy scope when replying (DMs are always copied)",
	"set_new_avatar": "Set new avatar",
	"set_new_profile_background": "Set new profile background",
	"set_new_profile_banner": "Set new profile banner",
	"settings": "Settings",
	"subject_input_always_show": "Always show subject field",
	"subject_line_behavior": "Copy subject when replying",
	"subject_line_email": "Like email: \"re: subject\"",
	"subject_line_mastodon": "Like mastodon: copy as is",
	"subject_line_noop": "Do not copy",
	+ "post_status_content_type": "Post status content type",
	+ "status_content_type_plain": "Plain text",
	"stop_gifs": "Play-on-hover GIFs",
	"streaming": "Enable automatic streaming of new posts when scrolled to the top",
	"text": "Text",
	"theme": "Theme",
	"theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
	"theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
	"theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
	"tooltipRadius": "Tooltips/alerts",
	"user_settings": "User Settings",
	"values": {
	"false": "no",
	"true": "yes"
	},
	"notifications": "Notifications",
	"enable_web_push_notifications": "Enable web push notifications",
	"style": {
	"switcher": {
	"keep_color": "Keep colors",
	"keep_shadows": "Keep shadows",
	"keep_opacity": "Keep opacity",
	"keep_roundness": "Keep roundness",
	"keep_fonts": "Keep fonts",
	"save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
	"reset": "Reset",
	"clear_all": "Clear all",
	"clear_opacity": "Clear opacity"
	},
	"common": {
	"color": "Color",
	"opacity": "Opacity",
	"contrast": {
	"hint": "Contrast ratio is {ratio}, it {level} {context}",
	"level": {
	"aa": "meets Level AA guideline (minimal)",
	"aaa": "meets Level AAA guideline (recommended)",
	"bad": "doesn't meet any accessibility guidelines"
	},
	"context": {
	"18pt": "for large (18pt+) text",
	"text": "for text"
	}
	}
	},
	"common_colors": {
	"_tab_label": "Common",
	"main": "Common colors",
	"foreground_hint": "See \"Advanced\" tab for more detailed control",
	"rgbo": "Icons, accents, badges"
	},
	"advanced_colors": {
	"_tab_label": "Advanced",
	"alert": "Alert background",
	"alert_error": "Error",
	"badge": "Badge background",
	"badge_notification": "Notification",
	"panel_header": "Panel header",
	"top_bar": "Top bar",
	"borders": "Borders",
	"buttons": "Buttons",
	"inputs": "Input fields",
	"faint_text": "Faded text"
	},
	"radii": {
	"_tab_label": "Roundness"
	},
	"shadows": {
	"_tab_label": "Shadow and lighting",
	"component": "Component",
	"override": "Override",
	"shadow_id": "Shadow #{value}",
	"blur": "Blur",
	"spread": "Spread",
	"inset": "Inset",
	"hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
	"filter_hint": {
	"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
	"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
	"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
	"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
	"inset_classic": "Inset shadows will be using {0}"
	},
	"components": {
	"panel": "Panel",
	"panelHeader": "Panel header",
	"topBar": "Top bar",
	"avatar": "User avatar (in profile view)",
	"avatarStatus": "User avatar (in post display)",
	"popup": "Popups and tooltips",
	"button": "Button",
	"buttonHover": "Button (hover)",
	"buttonPressed": "Button (pressed)",
	"buttonPressedHover": "Button (pressed+hover)",
	"input": "Input field"
	}
	},
	"fonts": {
	"_tab_label": "Fonts",
	"help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.",
	"components": {
	"interface": "Interface",
	"input": "Input fields",
	"post": "Post text",
	"postCode": "Monospaced text in a post (rich text)"
	},
	"family": "Font name",
	"size": "Size (in px)",
	"weight": "Weight (boldness)",
	"custom": "Custom"
	},
	"preview": {
	"header": "Preview",
	"content": "Content",
	"error": "Example error",
	"button": "Button",
	"text": "A bunch of more {0} and {1}",
	"mono": "content",
	"input": "Just landed in L.A.",
	"faint_link": "helpful manual",
	"fine_print": "Read our {0} to learn nothing useful!",
	"header_faint": "This is fine",
	"checkbox": "I have skimmed over terms and conditions",
	"link": "a nice lil' link"
	}
	}
	},
	"timeline": {
	"collapse": "Collapse",
	"conversation": "Conversation",
	"error_fetching": "Error fetching updates",
	"load_older": "Load older statuses",
	"no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
	"repeated": "repeated",
	"show_new": "Show new",
	"up_to_date": "Up-to-date",
	"no_more_statuses": "No more statuses"
	},
	"user_card": {
	"approve": "Approve",
	"block": "Block",
	"blocked": "Blocked!",
	"deny": "Deny",
	"favorites": "Favorites",
	"follow": "Follow",
	"follow_sent": "Request sent!",
	"follow_progress": "Requesting…",
	"follow_again": "Send request again?",
	"follow_unfollow": "Stop following",
	"followees": "Following",
	"followers": "Followers",
	"following": "Following!",
	"follows_you": "Follows you!",
	"its_you": "It's you!",
	"media": "Media",
	"mute": "Mute",
	"muted": "Muted",
	"per_day": "per day",
	"remote_follow": "Remote follow",
	"statuses": "Statuses"
	},
	"user_profile": {
	"timeline_title": "User Timeline"
	},
	"who_to_follow": {
	"more": "More",
	"who_to_follow": "Who to follow"
	},
	"tool_tip": {
	"media_upload": "Upload Media",
	"repeat": "Repeat",
	"reply": "Reply",
	"favorite": "Favorite",
	"user_settings": "User Settings"
	},
	"upload":{
	"error": {
	"base": "Upload failed.",
	"file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
	"default": "Try again later"
	},
	"file_size_units": {
	"B": "B",
	"KiB": "KiB",
	"MiB": "MiB",
	"GiB": "GiB",
	"TiB": "TiB"
	}
	}
	}
	diff --git a/src/modules/config.js b/src/modules/config.js
	index 526a702108..2a70fbe2f1 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,69 +1,70 @@
	import { set, delete as del } from 'vue'
	import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'

	const browserLocale = (window.navigator.language \|\| 'en').split('-')[0]

	const defaultState = {
	colors: {},
	collapseMessageWithSubject: undefined, // instance default
	hideAttachments: false,
	hideAttachmentsInConv: false,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	autoLoad: true,
	streaming: false,
	hoverPreview: true,
	pauseOnUnfocused: true,
	stopGifs: false,
	replyVisibility: 'all',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true
	},
	webPushNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	- showFeaturesPanel: true
	+ showFeaturesPanel: true,
	+ postContentType: undefined // instance default
	}

	const config = {
	state: defaultState,
	mutations: {
	setOption (state, { name, value }) {
	set(state, name, value)
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	set(state.highlight, user, { color: color \|\| data.color, type: type \|\| data.type })
	} else {
	del(state.highlight, user)
	}
	}
	},
	actions: {
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', {user, color, type})
	},
	setOption ({ commit, dispatch }, { name, value }) {
	commit('setOption', {name, value})
	switch (name) {
	case 'theme':
	setPreset(value, commit)
	break
	case 'customTheme':
	applyTheme(value, commit)
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/instance.js b/src/modules/instance.js
	index 4ad418738e..475da92eab 100644
	--- a/src/modules/instance.js
	+++ b/src/modules/instance.js
	@@ -1,73 +1,74 @@
	import { set } from 'vue'
	import { setPreset } from '../services/style_setter/style_setter.js'

	const defaultState = {
	// Stuff from static/config.json and apiConfig
	name: 'Pleroma FE',
	registrationOpen: true,
	textlimit: 5000,
	server: 'http://localhost:4040/',
	theme: 'pleroma-dark',
	background: '/static/aurora_borealis.jpg',
	logo: '/static/logo.png',
	logoMask: true,
	logoMargin: '.2em',
	redirectRootNoLogin: '/main/all',
	redirectRootLogin: '/main/friends',
	showInstanceSpecificPanel: false,
	scopeOptionsEnabled: true,
	formattingOptionsEnabled: false,
	alwaysShowSubjectInput: true,
	collapseMessageWithSubject: false,
	hidePostStats: false,
	hideUserStats: false,
	disableChat: false,
	scopeCopy: true,
	subjectLineBehavior: 'email',
	+ postContentType: 'text/plain',
	loginMethod: 'password',
	nsfwCensorImage: undefined,
	vapidPublicKey: undefined,
	noAttachmentLinks: false,

	// Nasty stuff
	pleromaBackend: true,
	emoji: [],
	customEmoji: [],
	restrictedNicknames: [],

	// Feature-set, apparently, not everything here is reported...
	mediaProxyAvailable: false,
	chatAvailable: false,
	gopherAvailable: false,
	suggestionsEnabled: false,
	suggestionsWeb: '',

	// Html stuff
	instanceSpecificPanelContent: '',
	tos: ''
	}

	const instance = {
	state: defaultState,
	mutations: {
	setInstanceOption (state, { name, value }) {
	if (typeof value !== 'undefined') {
	set(state, name, value)
	}
	}
	},
	actions: {
	setInstanceOption ({ commit, dispatch }, { name, value }) {
	commit('setInstanceOption', {name, value})
	switch (name) {
	case 'name':
	dispatch('setPageTitle')
	break
	case 'theme':
	setPreset(value, commit)
	}
	}
	}
	}

	export default instance
	diff --git a/static/config.json b/static/config.json
	index 24e26696fa..685846b902 100644
	--- a/static/config.json
	+++ b/static/config.json
	@@ -1,23 +1,24 @@
	{
	"theme": "pleroma-dark",
	"background": "/static/aurora_borealis.jpg",
	"logo": "/static/logo.png",
	"logoMask": true,
	"logoMargin": ".1em",
	"redirectRootNoLogin": "/main/all",
	"redirectRootLogin": "/main/friends",
	"chatDisabled": false,
	"showInstanceSpecificPanel": false,
	"scopeOptionsEnabled": false,
	"formattingOptionsEnabled": false,
	"collapseMessageWithSubject": false,
	"scopeCopy": true,
	"subjectLineBehavior": "email",
	+ "postContentType": "text/plain",
	"alwaysShowSubjectInput": true,
	"hidePostStats": false,
	"hideUserStats": false,
	"loginMethod": "password",
	"webPushNotifications": false,
	"noAttachmentLinks": false,
	"nsfwCensorImage": ""
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Nov 1, 6:40 AM (12 h, 38 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1802697
Default Alt Text: (68 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions