No OneTemporary
Actions

Size

53 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
	index b832e10ff9..561a5a98fb 100644
	--- a/src/components/attachment/attachment.js
	+++ b/src/components/attachment/attachment.js
	@@ -1,106 +1,118 @@
	import StillImage from '../still-image/still-image.vue'
	import VideoAttachment from '../video_attachment/video_attachment.vue'
	import nsfwImage from '../../assets/nsfw.png'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { mapGetters } from 'vuex'

	const Attachment = {
	props: [
	'attachment',
	'nsfw',
	- 'statusId',
	'size',
	'allowPlay',
	'setMedia',
	'naturalSizeLoad'
	],
	data () {
	return {
	nsfwImage: this.$store.state.instance.nsfwCensorImage \|\| nsfwImage,
	hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
	preloadImage: this.$store.getters.mergedConfig.preloadImage,
	loading: false,
	img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
	modalOpen: false,
	showHidden: false
	}
	},
	components: {
	StillImage,
	VideoAttachment
	},
	computed: {
	- usePlaceHolder () {
	+ usePlaceholder () {
	return this.size === 'hide' \|\| this.type === 'unknown'
	},
	+ placeholderName () {
	+ if (this.attachment.description === '' \|\| !this.attachment.description) {
	+ return this.type.toUpperCase()
	+ }
	+ return this.attachment.description
	+ },
	+ placeholderIconClass () {
	+ if (this.type === 'image') return 'icon-picture'
	+ if (this.type === 'video') return 'icon-video'
	+ if (this.type === 'audio') return 'icon-music'
	+ return 'icon-link'
	+ },
	referrerpolicy () {
	return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
	},
	type () {
	return fileTypeService.fileType(this.attachment.mimetype)
	},
	hidden () {
	return this.nsfw && this.hideNsfwLocal && !this.showHidden
	},
	isEmpty () {
	return (this.type === 'html' && !this.attachment.oembed) \|\| this.type === 'unknown'
	},
	isSmall () {
	return this.size === 'small'
	},
	fullwidth () {
	return this.type === 'html' \|\| this.type === 'audio'
	},
	+ useModal () {
	+ return this.size === 'hide' ? ['image', 'video', 'audio']
	+ : this.mergedConfig.playVideosInModal
	+ ? ['image', 'video']
	+ : ['image']
	+ },
	...mapGetters(['mergedConfig'])
	},
	methods: {
	linkClicked ({ target }) {
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	openModal (event) {
	- const modalTypes = this.mergedConfig.playVideosInModal
	- ? ['image', 'video']
	- : ['image']
	- if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) \|\|
	- this.usePlaceHolder
	- ) {
	+ if (this.useModal) {
	event.stopPropagation()
	event.preventDefault()
	this.setMedia()
	this.$store.dispatch('setCurrent', this.attachment)
	}
	},
	toggleHidden (event) {
	if (
	(this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
	(this.type !== 'video' \|\| this.mergedConfig.playVideosInModal)
	) {
	this.openModal(event)
	return
	}
	if (this.img && !this.preloadImage) {
	if (this.img.onload) {
	this.img.onload()
	} else {
	this.loading = true
	this.img.src = this.attachment.url
	this.img.onload = () => {
	this.loading = false
	this.showHidden = !this.showHidden
	}
	}
	} else {
	this.showHidden = !this.showHidden
	}
	},
	onImageLoad (image) {
	const width = image.naturalWidth
	const height = image.naturalHeight
	this.naturalSizeLoad && this.naturalSizeLoad({ width, height })
	}
	}
	}

	export default Attachment
	diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
	index 98f772c0d2..a18bf18699 100644
	--- a/src/components/attachment/attachment.vue
	+++ b/src/components/attachment/attachment.vue
	@@ -1,297 +1,301 @@
	<template>
	<div
	- v-if="usePlaceHolder"
	+ v-if="usePlaceholder"
	@click="openModal"
	>
	<a
	v-if="type !== 'html'"
	class="placeholder"
	target="_blank"
	:href="attachment.url"
	+ :alt="attachment.description"
	+ :title="attachment.description"
	>
	- [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}]
	+ <span :class="placeholderIconClass" />
	+ <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
	</a>
	</div>
	<div
	v-else
	v-show="!isEmpty"
	class="attachment"
	:class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}"
	>
	<a
	v-if="hidden"
	class="image-attachment"
	:href="attachment.url"
	+ :alt="attachment.description"
	+ :title="attachment.description"
	@click.prevent="toggleHidden"
	>
	<img
	:key="nsfwImage"
	class="nsfw"
	:src="nsfwImage"
	:class="{'small': isSmall}"
	>
	<i
	v-if="type === 'video'"
	class="play-icon icon-play-circled"
	/>
	</a>
	<div
	v-if="nsfw && hideNsfwLocal && !hidden"
	class="hider"
	>
	<a
	href="#"
	@click.prevent="toggleHidden"
	>Hide</a>
	</div>

	<a
	v-if="type === 'image' && (!hidden \|\| preloadImage)"
	class="image-attachment"
	:class="{'hidden': hidden && preloadImage }"
	:href="attachment.url"
	target="_blank"
	@click="openModal"
	>
	<StillImage
	:referrerpolicy="referrerpolicy"
	:mimetype="attachment.mimetype"
	:src="attachment.large_thumb_url \|\| attachment.url"
	:image-load-handler="onImageLoad"
	:alt="attachment.description"
	/>
	</a>

	<a
	v-if="type === 'video' && !hidden"
	class="video-container"
	:class="{'small': isSmall}"
	:href="allowPlay ? undefined : attachment.url"
	@click="openModal"
	>
	<VideoAttachment
	class="video"
	:attachment="attachment"
	:controls="allowPlay"
	/>
	<i
	v-if="!allowPlay"
	class="play-icon icon-play-circled"
	/>
	</a>

	<audio
	v-if="type === 'audio'"
	:src="attachment.url"
	+ :alt="attachment.description"
	+ :title="attachment.description"
	controls
	/>

	<div
	v-if="type === 'html' && attachment.oembed"
	class="oembed"
	@click.prevent="linkClicked"
	>
	<div
	v-if="attachment.thumb_url"
	class="image"
	>
	<img :src="attachment.thumb_url">
	</div>
	<div class="text">
	<!-- eslint-disable vue/no-v-html -->
	<h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1>
	<div v-html="attachment.oembed.oembedHTML" />
	<!-- eslint-enable vue/no-v-html -->
	</div>
	</div>
	</div>
	</template>

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

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

	.attachments {
	display: flex;
	flex-wrap: wrap;

	- .attachment.media-upload-container {
	- flex: 0 0 auto;
	- max-height: 200px;
	+ .non-gallery {
	max-width: 100%;
	- display: flex;
	- align-items: center;
	- video {
	- max-width: 100%;
	- }
	}

	.placeholder {
	- margin-right: 8px;
	- margin-bottom: 4px;
	+ display: inline-block;
	+ padding: 0.3em 1em 0.3em 0;
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	+ overflow: hidden;
	+ white-space: nowrap;
	+ text-overflow: ellipsis;
	+ max-width: 100%;
	}

	.nsfw-placeholder {
	cursor: pointer;

	&.loading {
	cursor: progress;
	}
	}

	.attachment {
	position: relative;
	margin-top: 0.5em;
	align-self: flex-start;
	line-height: 0;

	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--attachmentRadius;
	border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	overflow: hidden;
	}

	.non-gallery.attachment {
	&.video {
	flex: 1 0 40%;
	}
	.nsfw {
	height: 260px;
	}
	.small {
	height: 120px;
	flex-grow: 0;
	}
	.video {
	height: 260px;
	display: flex;
	}
	video {
	max-height: 100%;
	object-fit: contain;
	}
	}

	.fullwidth {
	flex-basis: 100%;
	}
	// fixes small gap below video
	&.video {
	line-height: 0;
	}

	.video-container {
	display: flex;
	max-height: 100%;
	}

	.video {
	width: 100%;
	height: 100%;
	}

	.play-icon {
	position: absolute;
	font-size: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
	}

	.play-icon::before {
	margin: 0;
	}

	&.html {
	flex-basis: 90%;
	width: 100%;
	display: flex;
	}

	.hider {
	position: absolute;
	right: 0;
	white-space: nowrap;
	margin: 10px;
	padding: 5px;
	background: rgba(230,230,230,0.6);
	font-weight: bold;
	z-index: 4;
	line-height: 1;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	}

	video {
	z-index: 0;
	}

	audio {
	width: 100%;
	}

	img.media-upload {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}

	.oembed {
	line-height: 1.2em;
	flex: 1 0 100%;
	width: 100%;
	margin-right: 15px;
	display: flex;

	img {
	width: 100%;
	}

	.image {
	flex: 1;
	img {
	border: 0px;
	border-radius: 5px;
	height: 100%;
	object-fit: cover;
	}
	}

	.text {
	flex: 2;
	margin: 8px;
	word-break: break-all;
	h1 {
	font-size: 14px;
	margin: 0px;
	}
	}
	}

	.image-attachment {
	width: 100%;
	height: 100%;

	&.hidden {
	display: none;
	}

	.nsfw {
	object-fit: cover;
	width: 100%;
	height: 100%;
	}

	img {
	image-orientation: from-image; // NOTE: only FF supports this
	}
	}
	}
	</style>
	diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index d52f00a51c..469316678c 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,112 +1,120 @@
	<template>
	<Modal
	v-if="showing"
	class="media-modal-view"
	@backdropClicked="hide"
	>
	<img
	v-if="type === 'image'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	@touchstart.stop="mediaTouchStart"
	@touchmove.stop="mediaTouchMove"
	@click="hide"
	>
	<VideoAttachment
	v-if="type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	/>
	+ <audio
	+ v-if="type === 'audio'"
	+ class="modal-image"
	+ :src="currentMedia.url"
	+ :alt="currentMedia.description"
	+ :title="currentMedia.description"
	+ controls
	+ />
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	<i class="icon-left-open arrow-icon" />
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	<i class="icon-right-open arrow-icon" />
	</button>
	</Modal>
	</template>

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

	<style lang="scss">
	.modal-view.media-modal-view {
	z-index: 1001;

	.modal-view-button-arrow {
	opacity: 0.75;

	&:focus,
	&:hover {
	outline: none;
	box-shadow: none;
	}
	&:hover {
	opacity: 1;
	}
	}
	}

	.modal-image {
	max-width: 90%;
	max-height: 90%;
	box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5);
	image-orientation: from-image; // NOTE: only FF supports this
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: -50px;
	width: 70px;
	height: 100px;
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(.4,0,.22,1);

	.arrow-icon {
	position: absolute;
	top: 35px;
	height: 30px;
	width: 32px;
	font-size: 14px;
	line-height: 30px;
	color: #FFF;
	text-align: center;
	background-color: rgba(0,0,0,.3);
	}

	&--prev {
	left: 0;
	.arrow-icon {
	left: 6px;
	}
	}

	&--next {
	right: 0;
	.arrow-icon {
	right: 6px;
	}
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index df2999f2bb..6bbf6cf179 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,398 +1,400 @@
	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 fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { reject, map, uniqBy } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters } 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(' ') + ' ' : ''
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	- Checkbox
	+ Checkbox,
	+ Attachment
	},
	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 } = 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: [],
	submitDisabled: 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
	}
	},
	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
	},
	hideScopeNotice () {
	return this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	...mapGetters(['mergedConfig'])
	},
	methods: {
	postStatus (newStatus) {
	if (this.posting) { return }
	if (this.submitDisabled) { return }

	if (this.newStatus.status === '') {
	if (this.newStatus.files.length === 0) {
	this.error = 'Cannot post an empty status with no files'
	return
	}
	}

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

	this.posting = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	mediaDescriptions: newStatus.mediaDescriptions \|\| {},
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll
	}).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	mediaDescriptions: {},
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	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)
	},
	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)
	},
	disableSubmit () {
	this.submitDisabled = true
	},
	enableSubmit () {
	this.submitDisabled = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	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 = '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.$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 = Number(bottomBottomPaddingStr.substring(0, bottomBottomPaddingStr.length - 2))

	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 = Number(topPaddingStr.substring(0, topPaddingStr.length - 2))
	const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2))
	const vertPadding = topPadding + bottomPadding

	/* 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 newHeight = target.scrollHeight - vertPadding
	target.style.height = `${newHeight}px`
	// 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 })
	}
	}
	}

	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 4929145501..a33e1a59e3 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,557 +1,535 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent="postStatus(newStatus)"
	@dragover.prevent="fileDrag"
	>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator icon-upload"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	/>
	<div class="form-group">
	<i18n
	v-if="!$store.state.users.currentUser.locked && 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="!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>
	<EmojiInput
	v-if="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"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="$t('post_status.default')"
	rows="1"
	:disabled="posting"
	class="form-post-body"
	@keydown.meta.enter="postStatus(newStatus)"
	@keydown.ctrl.enter="postStatus(newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div 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"
	@uploading="disableSubmit"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="enableSubmit"
	/>
	<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>
	<button
	v-else
	:disabled="submitDisabled"
	type="submit"
	class="btn btn-default"
	>
	{{ $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)"
	/>
	- <div class="media-upload-container attachment">
	- <img
	- v-if="type(file) === 'image'"
	- class="thumbnail media-upload"
	- :src="file.url"
	- >
	- <video
	- v-if="type(file) === 'video'"
	- :src="file.url"
	- controls
	- />
	- <audio
	- v-if="type(file) === 'audio'"
	- :src="file.url"
	- controls
	- />
	- <a
	- v-if="type(file) === 'unknown'"
	- :href="file.url"
	- >{{ file.url }}</a>
	- </div>
	+ <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.prevent.enter=""
	>
	</div>
	</div>
	<div
	v-if="newStatus.files.length > 0"
	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 {
	.visibility-tray {
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	}
	}

	.post-status-form {
	.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;
	}

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

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

	// 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 {
	- flex: 0 0 auto;
	- max-width: 100%;
	- min-width: 50px;
	margin-right: .2em;
	margin-bottom: .5em;
	+ width: 260px;

	.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: 140px;
	+ }
	+
	+ .video {
	+ max-height: 140px;
	+ }
	+
	input {
	- min-width: 300px;
	flex: 1;
	+ width: 100%;
	}
	}

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

	.attachments {
	padding: 0 0.5em;

	.attachment {
	margin: 0;
	+ padding: 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;
	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;
	}

	.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);
	}
	}
	</style>
	diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
	index 97ddf1cdb9..1ffed4e049 100644
	--- a/src/components/video_attachment/video_attachment.vue
	+++ b/src/components/video_attachment/video_attachment.vue
	@@ -1,12 +1,14 @@
	<template>
	<video
	class="video"
	:src="attachment.url"
	:loop="loopVideo"
	:controls="controls"
	+ :alt="attachment.description"
	+ :title="attachment.description"
	playsinline
	@loadeddata="onVideoDataLoad"
	/>
	</template>

	<script src="./video_attachment.js"></script>
	diff --git a/src/modules/media_viewer.js b/src/modules/media_viewer.js
	index a24b408d70..721c25e6fb 100644
	--- a/src/modules/media_viewer.js
	+++ b/src/modules/media_viewer.js
	@@ -1,39 +1,39 @@
	import fileTypeService from '../services/file_type/file_type.service.js'

	const mediaViewer = {
	state: {
	media: [],
	currentIndex: 0,
	activated: false
	},
	mutations: {
	setMedia (state, media) {
	state.media = media
	},
	setCurrent (state, index) {
	state.activated = true
	state.currentIndex = index
	},
	close (state) {
	state.activated = false
	}
	},
	actions: {
	setMedia ({ commit }, attachments) {
	const media = attachments.filter(attachment => {
	const type = fileTypeService.fileType(attachment.mimetype)
	- return type === 'image' \|\| type === 'video'
	+ return type === 'image' \|\| type === 'video' \|\| type === 'audio'
	})
	commit('setMedia', media)
	},
	setCurrent ({ commit, state }, current) {
	const index = state.media.indexOf(current)
	commit('setCurrent', index \|\| 0)
	},
	closeMediaViewer ({ commit }) {
	commit('close')
	}
	}
	}

	export default mediaViewer
	diff --git a/static/fontello.json b/static/fontello.json
	index ac3f0a18c7..f3053b8d34 100755
	--- a/static/fontello.json
	+++ b/static/fontello.json
	@@ -1,380 +1,386 @@
	{
	"name": "",
	"css_prefix_text": "icon-",
	"css_use_suffix": false,
	"hinting": true,
	"units_per_em": 1000,
	"ascent": 857,
	"glyphs": [
	{
	"uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
	"css": "spin4",
	"code": 59444,
	"src": "fontelico"
	},
	{
	"uid": "5211af474d3a9848f67f945e2ccaf143",
	"css": "cancel",
	"code": 59392,
	"src": "fontawesome"
	},
	{
	"uid": "eeec3208c90b7b48e804919d0d2d4a41",
	"css": "upload",
	"code": 59393,
	"src": "fontawesome"
	},
	{
	"uid": "2a6740fc2f9d0edea54205963f662594",
	"css": "spin3",
	"code": 59442,
	"src": "fontelico"
	},
	{
	"uid": "c6be5a58ee4e63a5ec399c2b0d15cf2c",
	"css": "reply",
	"code": 61714,
	"src": "fontawesome"
	},
	{
	"uid": "474656633f79ea2f1dad59ff63f6bf07",
	"css": "star",
	"code": 59394,
	"src": "fontawesome"
	},
	{
	"uid": "d17030afaecc1e1c22349b99f3c4992a",
	"css": "star-empty",
	"code": 59395,
	"src": "fontawesome"
	},
	{
	"uid": "09feb4465d9bd1364f4e301c9ddbaa92",
	"css": "retweet",
	"code": 59396,
	"src": "fontawesome"
	},
	{
	"uid": "7fd683b2c518ceb9e5fa6757f2276faa",
	"css": "eye-off",
	"code": 59397,
	"src": "fontawesome"
	},
	{
	"uid": "73ffeb70554099177620847206c12457",
	"css": "binoculars",
	"code": 61925,
	"src": "fontawesome"
	},
	{
	"uid": "e99461abfef3923546da8d745372c995",
	"css": "cog",
	"code": 59399,
	"src": "fontawesome"
	},
	{
	"uid": "1bafeeb1808a5fe24484c7890096901a",
	"css": "user-plus",
	"code": 62004,
	"src": "fontawesome"
	},
	{
	"uid": "559647a6f430b3aeadbecd67194451dd",
	"css": "menu",
	"code": 61641,
	"src": "fontawesome"
	},
	{
	"uid": "0d20938846444af8deb1920dc85a29fb",
	"css": "logout",
	"code": 59400,
	"src": "fontawesome"
	},
	{
	"uid": "ccddff8e8670dcd130e3cb55fdfc2fd0",
	"css": "down-open",
	"code": 59401,
	"src": "fontawesome"
	},
	{
	"uid": "44b9e75612c5fad5505edd70d071651f",
	"css": "attach",
	"code": 59402,
	"src": "entypo"
	},
	{
	"uid": "e15f0d620a7897e2035c18c80142f6d9",
	"css": "link-ext",
	"code": 61582,
	"src": "fontawesome"
	},
	{
	"uid": "e35de5ea31cd56970498e33efbcb8e36",
	"css": "link-ext-alt",
	"code": 61583,
	"src": "fontawesome"
	},
	{
	"uid": "381da2c2f7fd51f8de877c044d7f439d",
	"css": "picture",
	"code": 59403,
	"src": "fontawesome"
	},
	{
	"uid": "872d9516df93eb6b776cc4d94bd97dac",
	"css": "video",
	"code": 59404,
	"src": "fontawesome"
	},
	{
	"uid": "399ef63b1e23ab1b761dfbb5591fa4da",
	"css": "right-open",
	"code": 59405,
	"src": "fontawesome"
	},
	{
	"uid": "d870630ff8f81e6de3958ecaeac532f2",
	"css": "left-open",
	"code": 59406,
	"src": "fontawesome"
	},
	{
	"uid": "fe6697b391355dec12f3d86d6d490397",
	"css": "up-open",
	"code": 59407,
	"src": "fontawesome"
	},
	{
	"uid": "9c1376672bb4f1ed616fdd78a23667e9",
	"css": "comment-empty",
	"code": 61669,
	"src": "fontawesome"
	},
	{
	"uid": "ccc2329632396dc096bb638d4b46fb98",
	"css": "mail-alt",
	"code": 61664,
	"src": "fontawesome"
	},
	{
	"uid": "c1f1975c885aa9f3dad7810c53b82074",
	"css": "lock",
	"code": 59409,
	"src": "fontawesome"
	},
	{
	"uid": "05376be04a27d5a46e855a233d6e8508",
	"css": "lock-open-alt",
	"code": 61758,
	"src": "fontawesome"
	},
	{
	"uid": "197375a3cea8cb90b02d06e4ddf1433d",
	"css": "globe",
	"code": 59410,
	"src": "fontawesome"
	},
	{
	"uid": "b3a9e2dab4d19ea3b2f628242c926bfe",
	"css": "brush",
	"code": 59411,
	"src": "iconic"
	},
	{
	"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
	"css": "search",
	"code": 59398,
	"src": "fontawesome"
	},
	{
	"uid": "ca90da02d2c6a3183f2458e4dc416285",
	"css": "adjust",
	"code": 59414,
	"src": "fontawesome"
	},
	{
	"uid": "5e2ab018e3044337bcef5f7e94098ea1",
	"css": "thumbs-up-alt",
	"code": 61796,
	"src": "fontawesome"
	},
	{
	"uid": "c76b7947c957c9b78b11741173c8349b",
	"css": "attention",
	"code": 59412,
	"src": "fontawesome"
	},
	{
	"uid": "1a5cfa186647e8c929c2b17b9fc4dac1",
	"css": "plus-squared",
	"code": 61694,
	"src": "fontawesome"
	},
	{
	"uid": "44e04715aecbca7f266a17d5a7863c68",
	"css": "plus",
	"code": 59413,
	"src": "fontawesome"
	},
	{
	"uid": "41087bc74d4b20b55059c60a33bf4008",
	"css": "edit",
	"code": 59415,
	"src": "fontawesome"
	},
	{
	"uid": "5717236f6134afe2d2a278a5c9b3927a",
	"css": "play-circled",
	"code": 61764,
	"src": "fontawesome"
	},
	{
	"uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
	"css": "pencil",
	"code": 59416,
	"src": "fontawesome"
	},
	{
	"uid": "266d5d9adf15a61800477a5acf9a4462",
	"css": "chart-bar",
	"code": 59419,
	"src": "fontawesome"
	},
	{
	"uid": "d862a10e1448589215be19702f98f2c1",
	"css": "smile",
	"code": 61720,
	"src": "fontawesome"
	},
	{
	"uid": "671f29fa10dda08074a4c6a341bb4f39",
	"css": "bell-alt",
	"code": 61683,
	"src": "fontawesome"
	},
	{
	"uid": "5bb103cd29de77e0e06a52638527b575",
	"css": "wrench",
	"code": 59418,
	"src": "fontawesome"
	},
	{
	"uid": "5b0772e9484a1a11646793a82edd622a",
	"css": "pin",
	"code": 59417,
	"src": "fontawesome"
	},
	{
	"uid": "22411a88489225a018f68db737de3c77",
	"css": "ellipsis",
	"code": 61761,
	"src": "custom_icons",
	"selected": true,
	"svg": {
	"path": "M214 411V518Q214 540 199 556T161 571H54Q31 571 16 556T0 518V411Q0 388 16 373T54 357H161Q183 357 199 373T214 411ZM500 411V518Q500 540 484 556T446 571H339Q317 571 301 556T286 518V411Q286 388 301 373T339 357H446Q469 357 484 373T500 411ZM786 411V518Q786 540 770 556T732 571H625Q603 571 587 556T571 518V411Q571 388 587 373T625 357H732Q755 357 770 373T786 411Z",
	"width": 785.7
	},
	"search": [
	"ellipsis"
	]
	},
	{
	"uid": "0bef873af785ead27781fdf98b3ae740",
	"css": "bell-ringing-o",
	"code": 59408,
	"src": "custom_icons",
	"selected": true,
	"svg": {
	"path": "M497.8 0C468.3 0 444.4 23.9 444.4 53.3 444.4 61.1 446.1 68.3 448.9 75 301.7 96.7 213.3 213.3 213.3 320 213.3 588.3 117.8 712.8 35.6 782.2 35.6 821.1 67.8 853.3 106.7 853.3H355.6C355.6 931.7 419.4 995.6 497.8 995.6S640 931.7 640 853.3H888.9C927.8 853.3 960 821.1 960 782.2 877.8 712.8 782.2 588.3 782.2 320 782.2 213.3 693.9 96.7 546.7 75 549.4 68.3 551.1 61.1 551.1 53.3 551.1 23.9 527.2 0 497.8 0ZM189.4 44.8C108.4 118.6 70.5 215.1 71.1 320.2L142.2 319.8C141.7 231.2 170.4 158.3 237.3 97.4L189.4 44.8ZM806.2 44.8L758.3 97.4C825.2 158.3 853.9 231.2 853.3 319.8L924.4 320.2C925.1 215.1 887.2 118.6 806.2 44.8ZM408.9 844.4C413.9 844.4 417.8 848.3 417.8 853.3 417.8 897.2 453.9 933.3 497.8 933.3 502.8 933.3 506.7 937.2 506.7 942.2S502.8 951.1 497.8 951.1C443.9 951.1 400 907.2 400 853.3 400 848.3 403.9 844.4 408.9 844.4Z",
	"width": 1000
	},
	"search": [
	"bell-ringing-o"
	]
	},
	{
	"uid": "0b2b66e526028a6972d51a6f10281b4b",
	"css": "zoom-in",
	"code": 59420,
	"src": "fontawesome"
	},
	{
	"uid": "0bda4bc779d4c32623dec2e43bd67ee8",
	"css": "gauge",
	"code": 61668,
	"src": "fontawesome"
	},
	{
	"uid": "31972e4e9d080eaa796290349ae6c1fd",
	"css": "users",
	"code": 59421,
	"src": "fontawesome"
	},
	{
	"uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
	"css": "info-circled",
	"code": 59423,
	"src": "fontawesome"
	},
	{
	"uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
	"css": "home-2",
	"code": 59425,
	"src": "typicons"
	},
	{
	"uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
	"css": "chat",
	"code": 59422,
	"src": "fontawesome"
	},
	{
	"uid": "3a00327e61b997b58518bd43ed83c3df",
	"css": "login",
	"code": 59424,
	"src": "fontawesome"
	},
	{
	"uid": "f3ebd6751c15a280af5cc5f4a764187d",
	"css": "arrow-curved",
	"code": 59426,
	"src": "iconic"
	},
	{
	"uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
	"css": "link",
	"code": 59427,
	"src": "fontawesome"
	},
	{
	"uid": "4aad6bb50b02c18508aae9cbe14e784e",
	"css": "share",
	"code": 61920,
	"src": "fontawesome"
	},
	{
	"uid": "8b80d36d4ef43889db10bc1f0dc9a862",
	"css": "user",
	"code": 59428,
	"src": "fontawesome"
	},
	{
	"uid": "12f4ece88e46abd864e40b35e05b11cd",
	"css": "ok",
	"code": 59431,
	"src": "fontawesome"
	},
	{
	"uid": "4109c474ff99cad28fd5a2c38af2ec6f",
	"css": "filter",
	"code": 61616,
	"src": "fontawesome"
	},
	{
	"uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
	"css": "download",
	"code": 59429,
	"src": "fontawesome"
	+ },
	+ {
	+ "uid": "9ea0a737ccc45d6c510dcbae56058849",
	+ "css": "music",
	+ "code": 59430,
	+ "src": "fontawesome"
	}
	]
	}
	\ No newline at end of file

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 7:49 PM (1 d, 11 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723930
Default Alt Text: (53 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions