No OneTemporary
Actions

Authored By

Unknown

Size

37 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index 4f4c6aca42..4f6cee9c87 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,276 +1,278 @@
	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.join(' ') + ' '
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	- 'messageScope'
	+ 'messageScope',
	+ 'parentSpoilerText'
	],
	components: {
	MediaUpload
	},
	mounted () {
	this.resize(this.$refs.textarea)
	},
	data () {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

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

	return {
	dropFiles: [],
	submitDisabled: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	status: statusText,
	files: [],
	- visibility: this.messageScope \|\| 'public'
	+ visibility: this.messageScope \|\| 'public',
	+ spoilerText: this.parentSpoilerText \|\| null
	},
	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 matchedUsers = filter(this.users, (user) => (String(user.name + user.screen_name)).toUpperCase()
	.match(this.textAtCaret.slice(1).toUpperCase()))
	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.match(this.textAtCaret.slice(1)))
	if (matchedEmoji.length <= 0) {
	return false
	}
	return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({
	// eslint-disable-next-line camelcase
	screen_name: `:${shortcode}:`,
	name: '',
	utf: utf \|\| '',
	img: 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.config.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.config.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	statusLengthLimit () {
	return this.$store.state.config.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - this.statusLength
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.statusLength > this.statusLengthLimit)
	},
	scopeOptionsEnabled () {
	return this.$store.state.config.scopeOptionsEnabled
	}
	},
	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,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo
	}).then((data) => {
	if (!data.error) {
	this.newStatus = {
	status: '',
	files: [],
	visibility: newStatus.visibility
	}
	this.$emit('posted')
	let el = this.$el.querySelector('textarea')
	el.style.height = '16px'
	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)
	},
	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) {
	if (!e.target) { return }
	const vertPadding = Number(window.getComputedStyle(e.target)['padding-top'].substr(0, 1)) +
	Number(window.getComputedStyle(e.target)['padding-bottom'].substr(0, 1))
	e.target.style.height = 'auto'
	e.target.style.height = `${e.target.scrollHeight - vertPadding}px`
	if (e.target.value === '') {
	e.target.style.height = '16px'
	}
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/status/status.js b/src/components/status/status.js
	index 87ef90d884..40786d94f3 100644
	--- a/src/components/status/status.js
	+++ b/src/components/status/status.js
	@@ -1,185 +1,192 @@
	import Attachment from '../attachment/attachment.vue'
	import FavoriteButton from '../favorite_button/favorite_button.vue'
	import RetweetButton from '../retweet_button/retweet_button.vue'
	import DeleteButton from '../delete_button/delete_button.vue'
	import PostStatusForm from '../post_status_form/post_status_form.vue'
	import UserCardContent from '../user_card_content/user_card_content.vue'
	import StillImage from '../still-image/still-image.vue'
	import { filter, find } from 'lodash'

	const Status = {
	name: 'Status',
	props: [
	'statusoid',
	'expandable',
	'inConversation',
	'focused',
	'highlight',
	'compact',
	'replies',
	'noReplyLinks',
	'noHeading',
	'inlineExpanded'
	],
	data: () => ({
	replying: false,
	expanded: false,
	unmuted: false,
	userExpanded: false,
	preview: null,
	showPreview: false,
	- showingTall: false
	+ showingTall: false,
	+ showingContentWarningContent: false
	}),
	computed: {
	muteWords () {
	return this.$store.state.config.muteWords
	},
	hideAttachments () {
	return (this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation)
	},
	retweet () { return !!this.statusoid.retweeted_status },
	retweeter () { return this.statusoid.user.name },
	status () {
	if (this.retweet) {
	return this.statusoid.retweeted_status
	} else {
	return this.statusoid
	}
	},
	loggedIn () {
	return !!this.$store.state.users.currentUser
	},
	muteWordHits () {
	const statusText = this.status.text.toLowerCase()
	const hits = filter(this.muteWords, (muteWord) => {
	return statusText.includes(muteWord.toLowerCase())
	})

	return hits
	},
	muted () { return !this.unmuted && (this.status.user.muted \|\| this.muteWordHits.length > 0) },
	isReply () { return !!this.status.in_reply_to_status_id },
	isFocused () {
	// retweet or root of an expanded conversation
	if (this.focused) {
	return true
	} else if (!this.inConversation) {
	return false
	}
	// use conversation highlight only when in conversation
	return this.status.id === this.highlight
	},
	// This is a bit hacky, but we want to approximate post height before rendering
	// so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
	// as well as approximate line count by counting characters and approximating ~80
	// per line.
	//
	// Using max-height + overflow: auto for status components resulted in false positives
	// very often with japanese characters, and it was very annoying.
	hideTallStatus () {
	if (this.showingTall) {
	return false
	}
	const lengthScore = this.status.statusnet_html.split(/<p\|<br/).length + this.status.text.length / 80
	return lengthScore > 20
	},
	attachmentSize () {
	if ((this.$store.state.config.hideAttachments && !this.inConversation) \|\|
	(this.$store.state.config.hideAttachmentsInConv && this.inConversation)) {
	return 'hide'
	} else if (this.compact) {
	return 'small'
	}
	return 'normal'
	+ },
	+ clickThroughContentWarningsEnabled () {
	+ return this.$store.state.config.clickThroughContentWarningsEnabled
	}
	},
	components: {
	Attachment,
	FavoriteButton,
	RetweetButton,
	DeleteButton,
	PostStatusForm,
	UserCardContent,
	StillImage
	},
	methods: {
	visibilityIcon (visibility) {
	switch (visibility) {
	case 'private':
	return 'icon-lock'
	case 'unlisted':
	return 'icon-lock-open-alt'
	case 'direct':
	return 'icon-mail-alt'
	default:
	return 'icon-globe'
	}
	},
	linkClicked ({target}) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	toggleReplying () {
	this.replying = !this.replying
	},
	gotoOriginal (id) {
	// only handled by conversation, not status_or_conversation
	if (this.inConversation) {
	this.$emit('goto', id)
	}
	},
	toggleExpanded () {
	this.$emit('toggleExpanded')
	},
	toggleMute () {
	this.unmuted = !this.unmuted
	},
	toggleUserExpanded () {
	this.userExpanded = !this.userExpanded
	},
	toggleShowTall () {
	this.showingTall = !this.showingTall
	},
	+ toggleContentWarningContent () {
	+ this.showingContentWarningContent = !this.showingContentWarningContent
	+ },
	replyEnter (id, event) {
	this.showPreview = true
	const targetId = Number(id)
	const statuses = this.$store.state.statuses.allStatuses

	if (!this.preview) {
	// if we have the status somewhere already
	this.preview = find(statuses, { 'id': targetId })
	// or if we have to fetch it
	if (!this.preview) {
	this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => {
	this.preview = status
	})
	}
	} else if (this.preview.id !== targetId) {
	this.preview = find(statuses, { 'id': targetId })
	}
	},
	replyLeave () {
	this.showPreview = false
	}
	},
	watch: {
	'highlight': function (id) {
	id = Number(id)
	if (this.status.id === id) {
	let rect = this.$el.getBoundingClientRect()
	if (rect.top < 100) {
	window.scrollBy(0, rect.top - 200)
	} else if (rect.bottom > window.innerHeight - 50) {
	window.scrollBy(0, rect.bottom - window.innerHeight + 50)
	}
	}
	}
	}
	}

	export default Status
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index f88c810d1e..2e33999a57 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,491 +1,521 @@
	<template>
	<div class="status-el" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
	<template v-if="muted && !noReplyLinks">
	<div class="media status container muted">
	<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
	<small class="muteWords">{{muteWordHits.join(', ')}}</small>
	<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
	</div>
	</template>
	<template v-else>
	<div v-if="retweet && !noHeading" class="media container retweet-info">
	<StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
	<div class="media-body faint">
	<a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
	<i class='fa icon-retweet retweeted'></i>
	{{$t('timeline.repeated')}}
	</div>
	</div>

	<div class="media status">
	<div v-if="!noHeading" class="media-left">
	<a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
	<StillImage class='avatar' :class="{'avatar-compact': compact}" :src="status.user.profile_image_url_original"/>
	</a>
	</div>
	<div class="status-body">
	<div class="usercard media-body" v-if="userExpanded">
	<user-card-content :user="status.user" :switcher="false"></user-card-content>
	</div>
	<div v-if="!noHeading" class="media-body container media-heading">
	<div class="media-heading-left">
	<div class="name-and-links">
	<h4 class="user-name">{{status.user.name}}</h4>
	<span class="links">
	<router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
	<span v-if="status.in_reply_to_screen_name" class="faint reply-info">
	<i class="icon-right-open"></i>
	<router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
	{{status.in_reply_to_screen_name}}
	</router-link>
	</span>
	<a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)">
	<i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
	</a>
	</span>
	</div>
	<h4 class="replies" v-if="inConversation && !noReplyLinks">
	<small v-if="replies.length">Replies:</small>
	<small class="reply-link" v-for="reply in replies">
	<a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}} </a>
	</small>
	</h4>
	</div>
	<div class="media-heading-right">
	<router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
	<timeago :since="status.created_at" :auto-update="60"></timeago>
	</router-link>
	<span v-if="status.visibility"><i :class="visibilityIcon(status.visibility)"></i> </span>
	<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext"></i></a>
	<template v-if="expandable">
	<a href="#" @click.prevent="toggleExpanded"><i class="icon-plus-squared"></i></a>
	</template>
	<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
	</div>
	</div>

	<div v-if="showPreview" class="status-preview-container">
	<status class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status>
	<div class="status-preview status-preview-loading" v-else>
	<i class="icon-spin4 animate-spin"></i>
	</div>
	</div>

	<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
	<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a>
	- <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
	+ <div v-if="status.summary" @click.prevent="linkClicked" class="status-content media-body">
	+ <div class="contentWarningLabel">
	+ <span v-html="status.summary"></span>
	+ <span v-if="clickThroughContentWarningsEnabled">
	+ <button v-if="showingContentWarningContent" @click.prevent="toggleContentWarningContent">Hide</button>
	+ <button v-else @click.prevent="toggleContentWarningContent">Show</button>
	+ </span>
	+ </div>
	+ <div v-if="showingContentWarningContent \|\| !clickThroughContentWarningsEnabled" v-html="status.content" class="contentWarnedContent"></div>
	+ <div v-else class="hiddenContent" @click.prevent="toggleContentWarningContent">Click to view this post.<span v-if="status.attachments && status.attachments.length > 0"> (has attachments)</span></div>
	+ </div>
	+ <div v-else @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
	<a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
	</div>

	- <div v-if='status.attachments' class='attachments media-body'>
	+ <div v-if='status.attachments && (!status.summary \|\| showingContentWarningContent \|\| !clickThroughContentWarningsEnabled)' class='attachments media-body'>
	<attachment :size="attachmentSize" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
	</attachment>
	</div>

	<div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
	<div v-if="loggedIn">
	<a href="#" v-on:click.prevent="toggleReplying">
	<i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
	</a>
	</div>
	<retweet-button :loggedIn='loggedIn' :status='status'></retweet-button>
	<favorite-button :loggedIn='loggedIn' :status='status'></favorite-button>
	<delete-button :status='status'></delete-button>
	</div>
	</div>
	</div>
	<div class="container" v-if="replying">
	<div class="reply-left"/>
	- <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :message-scope="status.visibility" v-on:posted="toggleReplying"/>
	+ <post-status-form class="reply-body"
	+ :reply-to="status.id"
	+ :attentions="status.attentions"
	+ :repliedUser="status.user"
	+ :message-scope="status.visibility"
	+ :parentSpoilerText="status.summary"
	+ v-on:posted="toggleReplying"/>
	</div>
	</template>
	</div>
	</template>

	<script src="./status.js" ></script>
	<style lang="scss">
	@import '../../_variables.scss';

	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-preview.status-el {
	border-style: solid;
	border-width: 1px;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}

	.status-preview-container {
	position: relative;
	max-width: 100%;
	}

	.status-preview {
	position: absolute;
	max-width: 95%;
	display: flex;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	border-style: solid;
	border-width: 1px;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
	margin-top: 0.25em;
	margin-left: 0.5em;
	z-index: 50;
	.status {
	flex: 1;
	border: 0;
	min-width: 15em;
	}
	}

	.status-preview-loading {
	display: block;
	min-width: 15em;
	padding: 1em;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	i {
	font-size: 2em;
	}
	}

	.status-el {
	hyphens: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	line-height: 18px;
	min-width: 0;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--lightBg, $fallback--lightBg);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.media-body {
	flex: 1;
	padding: 0;
	margin: 0 0 0.25em 0.8em;
	}

	.usercard {
	margin-bottom: .7em
	}

	.media-heading {
	flex-wrap: nowrap;
	}

	.media-heading-left {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;

	small {
	font-weight: lighter;
	}
	h4 {
	white-space: nowrap;
	font-size: 14px;
	margin-right: 0.25em;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	.name-and-links {
	padding: 0;
	flex: 1 0;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	}
	.links {
	display: flex;
	padding-top: 1px;
	margin-left: 0.2em;
	font-size: 12px;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	max-width: 100%;
	a {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	}
	}
	.reply-info {
	display: flex;
	}
	.replies {
	line-height: 16px;
	}
	.reply-link {
	margin-right: 0.2em;
	}
	}

	.media-heading-right {
	flex-shrink: 0;
	display: flex;
	flex-wrap: nowrap;
	max-height: 1.5em;
	margin-left: 0.25em;
	.timeago {
	margin-right: 0.2em;
	font-size: 12px;
	padding-top: 1px;
	}
	i {
	margin-left: 0.2em;
	}
	}

	a {
	display: inline-block;
	word-break: break-all;
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	}

	.tall-status-hider {
	position: absolute;
	height: 70px;
	margin-top: 150px;
	width: 100%;
	text-align: center;
	line-height: 110px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
	&_focused {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%);
	}
	}

	.tall-status-unhider {
	width: 100%;
	text-align: center;
	}

	.status-content {
	margin-right: 0.5em;
	img, video {
	max-width: 100%;
	max-height: 400px;
	vertical-align: middle;
	object-fit: contain;
	}

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}

	p {
	margin: 0;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	}
	}

	.retweet-info {
	padding: 0.4em 0.6em 0 0.6em;
	margin: 0 0 -0.5em 0;
	.avatar {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.media-body {
	font-size: 1em;
	line-height: 22px;

	display: flex;
	align-content: center;
	flex-wrap: wrap;
	i {
	padding: 0 0.2em;
	}
	a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.greentext {
	color: green;
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	width: 100%;
	display: flex;

	div, favorite-button {
	padding-top: 0.25em;
	max-width: 6em;
	flex: 1;
	}
	}

	.icon-reply:hover {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.icon-reply-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.status .avatar-compact {
	width: 32px;
	height: 32px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

	.avatar {
	width: 48px;
	height: 48px;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	overflow: hidden;
	position: relative;

	img {
	width: 100%;
	height: 100%;
	}

	&.animated::before {
	display: none;
	}

	&.retweeted {
	}
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status {
	display: flex;
	padding: 0.6em;
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.muted {
	padding: 0.25em 0.5em;
	button {
	margin-left: auto;
	}

	.muteWords {
	margin-left: 10px;
	}
	}

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-left {
	flex: 0;
	min-width: 48px;
	}

	.reply-body {
	flex: 1;
	}

	.timeline > {
	.status-el:last-child {
	border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	}
	}

	@media all and (max-width: 960px) {
	.status-el {
	.retweet-info {
	.avatar {
	margin-left: 20px;
	}
	}
	}
	.status {
	max-width: 100%;
	}

	.status .avatar {
	width: 40px;
	height: 40px;
	}

	.status .avatar-compact {
	width: 32px;
	height: 32px;
	}
	}

	+.hiddenContent {
	+ margin: 8px;
	+ padding: 32px;
	+ background: var(--lightBg, $fallback--lightBg);
	+ border-radius: var(--panelRadius, $fallback--panelRadius);
	+}
	+.status-el_focused * .hiddenContent {
	+ background: var(--bg, $fallback--bg);
	+}
	+.contentWarnedContent {
	+ margin: 8px;
	+}
	+
	</style>
	diff --git a/src/main.js b/src/main.js
	index bacd7f6d65..01ee7f75d4 100644
	--- a/src/main.js
	+++ b/src/main.js
	@@ -1,185 +1,187 @@
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	import Vuex from 'vuex'
	import App from './App.vue'
	import PublicTimeline from './components/public_timeline/public_timeline.vue'
	import PublicAndExternalTimeline from './components/public_and_external_timeline/public_and_external_timeline.vue'
	import FriendsTimeline from './components/friends_timeline/friends_timeline.vue'
	import TagTimeline from './components/tag_timeline/tag_timeline.vue'
	import ConversationPage from './components/conversation-page/conversation-page.vue'
	import Mentions from './components/mentions/mentions.vue'
	import UserProfile from './components/user_profile/user_profile.vue'
	import Settings from './components/settings/settings.vue'
	import Registration from './components/registration/registration.vue'
	import UserSettings from './components/user_settings/user_settings.vue'
	import FollowRequests from './components/follow_requests/follow_requests.vue'

	import statusesModule from './modules/statuses.js'
	import usersModule from './modules/users.js'
	import apiModule from './modules/api.js'
	import configModule from './modules/config.js'
	import chatModule from './modules/chat.js'

	import VueTimeago from 'vue-timeago'
	import VueI18n from 'vue-i18n'

	import createPersistedState from './lib/persisted_state.js'

	import messages from './i18n/messages.js'

	import VueChatScroll from 'vue-chat-scroll'

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

	Vue.use(Vuex)
	Vue.use(VueRouter)
	Vue.use(VueTimeago, {
	locale: currentLocale === 'ja' ? 'ja' : 'en',
	locales: {
	'en': require('../static/timeago-en.json'),
	'ja': require('../static/timeago-ja.json')
	}
	})
	Vue.use(VueI18n)
	Vue.use(VueChatScroll)

	const persistedStateOptions = {
	paths: [
	'config.hideAttachments',
	'config.hideAttachmentsInConv',
	'config.hideNsfw',
	'config.autoLoad',
	'config.hoverPreview',
	'config.streaming',
	'config.muteWords',
	'config.customTheme',
	'users.lastLoginName'
	]
	}

	const store = new Vuex.Store({
	modules: {
	statuses: statusesModule,
	users: usersModule,
	api: apiModule,
	config: configModule,
	chat: chatModule
	},
	plugins: [createPersistedState(persistedStateOptions)],
	strict: false // Socket modifies itself, let's ignore this for now.
	// strict: process.env.NODE_ENV !== 'production'
	})

	const i18n = new VueI18n({
	locale: currentLocale,
	fallbackLocale: 'en',
	messages
	})

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

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

	window.fetch('/static/config.json')
	.then((res) => res.json())
	.then((data) => {
	- const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled} = data
	+ const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled, clickThroughContentWarningsEnabled} = data
	store.dispatch('setOption', { name: 'theme', value: theme })
	store.dispatch('setOption', { name: 'background', value: background })
	store.dispatch('setOption', { name: 'logo', value: logo })
	store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
	store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider })
	store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
	store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
	store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
	+ store.dispatch('setOption', { name: 'clickThroughContentWarningsEnabled', value: clickThroughContentWarningsEnabled })
	+
	if (data['chatDisabled']) {
	store.dispatch('disableChat')
	}

	const routes = [
	{ name: 'root',
	path: '/',
	redirect: to => {
	var redirectRootLogin = data['redirectRootLogin']
	var redirectRootNoLogin = data['redirectRootNoLogin']
	return (store.state.users.currentUser ? redirectRootLogin : redirectRootNoLogin) \|\| '/main/all'
	}},
	{ path: '/main/all', component: PublicAndExternalTimeline },
	{ path: '/main/public', component: PublicTimeline },
	{ path: '/main/friends', component: FriendsTimeline },
	{ path: '/tag/:tag', component: TagTimeline },
	{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
	{ name: 'user-profile', path: '/users/:id', component: UserProfile },
	{ name: 'mentions', path: '/:username/mentions', component: Mentions },
	{ name: 'settings', path: '/settings', component: Settings },
	{ name: 'registration', path: '/registration', component: Registration },
	{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
	{ name: 'user-settings', path: '/user-settings', component: UserSettings }
	]

	const router = new VueRouter({
	mode: 'history',
	routes,
	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('setOption', { 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('setOption', { name: 'customEmoji', value: emoji })
	store.dispatch('setOption', { name: 'pleromaBackend', value: true })
	},
	(failure) => {
	store.dispatch('setOption', { 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('setOption', { name: 'emoji', value: emoji })
	})

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

	diff --git a/static/config.json b/static/config.json
	index 4dacfebedf..4fdddf2936 100644
	--- a/static/config.json
	+++ b/static/config.json
	@@ -1,15 +1,16 @@
	{
	"theme": "pleroma-dark",
	"background": "/static/aurora_borealis.jpg",
	"logo": "/static/logo.png",
	"redirectRootNoLogin": "/main/all",
	"redirectRootLogin": "/main/friends",
	"chatDisabled": false,
	"showWhoToFollowPanel": false,
	"whoToFollowProvider": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-osa-api.cgi?{{host}}+{{user}}",
	"whoToFollowProviderDummy2": "https://followlink.osa-p.net/api/get_recommend.json?acct=@{{user}}@{{host}}",
	"whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
	"whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
	"showInstanceSpecificPanel": false,
	- "scopeOptionsEnabled": false
	+ "scopeOptionsEnabled": true,
	+ "clickThroughContentWarningsEnabled": true
	}

File Metadata

Mime Type: text/x-diff
Expires: Thu, Oct 29, 4:29 PM (1 d, 10 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1798351
Default Alt Text: (37 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions