No OneTemporary
Actions

Size

30 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index 0081dee4d0..cafa1e79b0 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,195 +1,195 @@
	<template>
	<Status
	v-if="notification.type === 'mention'"
	:compact="true"
	:statusoid="notification.status"
	/>
	<div v-else>
	<div
	v-if="needMute && !unmuted"
	class="Notification container -muted"
	>
	<small>
	<router-link :to="userProfileLink">
	{{ notification.from_profile.screen_name_ui }}
	</router-link>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="notification.from_profile.statusnet_profile_url"
	@click.stop.prevent.capture="toggleUserExpanded"
	>
	<UserAvatar
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</a>
	<div class="notification-right">
	<UserCard
	v-if="userExpanded"
	:user-id="getUser(notification).id"
	:rounded="true"
	:bordered="true"
	/>
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi
	v-if="!!notification.from_profile.name_html"
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	v-html="notification.from_profile.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	>{{ notification.from_profile.name }}</span>
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	- <i18n path="notifications.reacted_with">
	+ <i18n-t keypath="notifications.reacted_with">
	<span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
	- </i18n>
	+ </i18n-t>
	</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	class="faint-link"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<router-link
	:to="userProfileLink"
	class="follow-name"
	>
	@{{ notification.from_profile.screen_name_ui }}
	</router-link>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	/>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	/>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<router-link :to="targetUserProfileLink">
	@{{ notification.target.screen_name_ui }}
	</router-link>
	</div>
	<template v-else>
	<status-content
	class="faint"
	:status="notification.action"
	/>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
	index 187d1829d5..2215d675a1 100644
	--- a/src/components/poll/poll.vue
	+++ b/src/components/poll/poll.vue
	@@ -1,144 +1,144 @@
	<template>
	<div
	class="poll"
	:class="containerClass"
	>
	<div
	v-for="(option, index) in options"
	:key="index"
	class="poll-option"
	>
	<div
	v-if="showResults"
	:title="resultTitle(option)"
	class="option-result"
	>
	<div class="option-result-label">
	<span class="result-percentage">
	{{ percentageForOption(option.votes_count) }}%
	</span>
	<!-- eslint-disable-next-line vue/no-v-html -->
	<span v-html="option.title_html" />
	</div>
	<div
	class="result-fill"
	:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
	/>
	</div>
	<div
	v-else
	@click="activateOption(index)"
	>
	<input
	v-if="poll.multiple"
	type="checkbox"
	:disabled="loading"
	:value="index"
	>
	<input
	v-else
	type="radio"
	:disabled="loading"
	:value="index"
	>
	<label class="option-vote">
	<!-- eslint-disable-next-line vue/no-v-html -->
	<div v-html="option.title_html" />
	</label>
	</div>
	</div>
	<div class="footer faint">
	<button
	v-if="!showResults"
	class="btn button-default poll-vote-button"
	type="button"
	:disabled="isDisabled"
	@click="vote"
	>
	{{ $t('polls.vote') }}
	</button>
	<div class="total">
	<template v-if="typeof poll.voters_count === 'number'">
	{{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }} ·
	</template>
	<template v-else>
	{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} ·
	</template>
	</div>
	- <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'">
	+ <i18n-t :keypath="expired ? 'polls.expired' : 'polls.expires_in'">
	<Timeago
	:time="expiresAt"
	:auto-update="60"
	:now-threshold="0"
	/>
	- </i18n>
	+ </i18n-t>
	</div>
	</div>
	</template>

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

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

	.poll {
	.votes {
	display: flex;
	flex-direction: column;
	margin: 0 0 0.5em;
	}
	.poll-option {
	margin: 0.75em 0.5em;
	}
	.option-result {
	height: 100%;
	display: flex;
	flex-direction: row;
	position: relative;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	.option-result-label {
	display: flex;
	align-items: center;
	padding: 0.1em 0.25em;
	z-index: 1;
	word-break: break-word;
	}
	.result-percentage {
	width: 3.5em;
	flex-shrink: 0;
	}
	.result-fill {
	height: 100%;
	position: absolute;
	color: $fallback--text;
	color: var(--pollText, $fallback--text);
	background-color: $fallback--lightBg;
	background-color: var(--poll, $fallback--lightBg);
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	top: 0;
	left: 0;
	transition: width 0.5s;
	}
	.option-vote {
	display: flex;
	align-items: center;
	}
	input {
	width: 3.5em;
	}
	.footer {
	display: flex;
	align-items: center;
	}
	&.loading * {
	cursor: progress;
	}
	.poll-vote-button {
	padding: 0 0.5em;
	margin-right: 0.5em;
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 6b490aeef8..c0a85727fc 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,635 +1,635 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	>
	<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
	</div>
	<div class="form-group">
	- <i18n
	+ <i18n-t
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	- path="post_status.account_not_locked_warning"
	+ keypath="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	>
	<button
	class="button-unstyled -link"
	@click="openProfileTab"
	>
	{{ $t('post_status.account_not_locked_warning_link') }}
	</button>
	- </i18n>
	+ </i18n-t>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</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="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</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="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div
	v-if="!disablePreview"
	class="preview-heading faint"
	>
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
	</a>
	<div
	v-show="previewLoading"
	class="preview-spinner"
	>
	<FAIcon
	class="fa-old-padding"
	spin
	icon="circle-notch"
	/>
	</div>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting && !optimisticPosting"
	size="1"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	:newline-on-ctrl-enter="submitOnEnter"
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	cols="1"
	:disabled="posting && !optimisticPosting"
	class="form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

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

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

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

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

	.post-status-form {
	position: relative;

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

	button {
	width: 10em;
	}

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

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

	.preview-heading {
	display: flex;
	padding-left: 0.5em;
	}

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

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

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

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

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

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

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

	.media-upload-icon, .poll-icon, .emoji-icon {
	font-size: 26px;
	line-height: 1.1;
	flex: 1;
	padding: 0 0.1em;

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

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

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

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

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

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

	.poll-icon {
	cursor: pointer;
	}

	.error {
	text-align: center;
	}

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

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

	.video {
	max-height: 10em;
	}

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

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

	.attachments .media-upload-wrapper {
	position: relative;

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

	.btn {
	cursor: pointer;
	}

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

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

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

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

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

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

	.main-input {
	position: relative;
	}

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

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

	.btn {
	cursor: pointer;
	}

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

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

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

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

	// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
	img.media-upload, .media-upload-container > video {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
	index 7ac7b9d3ff..36613d20f1 100644
	--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
	+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
	@@ -1,144 +1,144 @@
	<template>
	<div class="preview-container">
	<div class="underlay underlay-preview" />
	<div class="panel dummy">
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.style.preview.header') }}
	<span class="badge badge-notification">
	99
	</span>
	</div>
	<span class="faint">
	{{ $t('settings.style.preview.header_faint') }}
	</span>
	<span class="alert error">
	{{ $t('settings.style.preview.error') }}
	</span>
	<button class="btn button-default">
	{{ $t('settings.style.preview.button') }}
	</button>
	</div>
	<div class="panel-body theme-preview-content">
	<div class="post">
	<div class="avatar still-image">
	( ͡° ͜ʖ ͡°)
	</div>
	<div class="content">
	<h4>
	{{ $t('settings.style.preview.content') }}
	</h4>

	- <i18n path="settings.style.preview.text">
	+ <i18n-t keypath="settings.style.preview.text">
	<code style="font-family: var(--postCodeFont)">
	{{ $t('settings.style.preview.mono') }}
	</code>
	<a style="color: var(--link)">
	{{ $t('settings.style.preview.link') }}
	</a>
	- </i18n>
	+ </i18n-t>

	<div class="icons">
	<FAIcon
	fixed-width
	style="color: var(--cBlue)"
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cGreen)"
	class="fa-scale-110 fa-old-padding"
	icon="retweet"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cOrange)"
	class="fa-scale-110 fa-old-padding"
	icon="star"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cRed)"
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</div>
	</div>
	</div>

	<div class="after-post">
	<div class="avatar-alt">
	:^)
	</div>
	<div class="content">
	- <i18n
	- path="settings.style.preview.fine_print"
	+ <i18n-t
	+ keypath="settings.style.preview.fine_print"
	tag="span"
	class="faint"
	>
	<a style="color: var(--faintLink)">
	{{ $t('settings.style.preview.faint_link') }}
	</a>
	- </i18n>
	+ </i18n-t>
	</div>
	</div>
	<div class="separator" />

	<span class="alert error">
	{{ $t('settings.style.preview.error') }}
	</span>
	<input
	:value="$t('settings.style.preview.input')"
	type="text"
	>

	<div class="actions">
	<span class="checkbox">
	<input
	id="preview_checkbox"
	checked="very yes"
	type="checkbox"
	>
	<label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
	</span>
	<button class="btn button-default">
	{{ $t('settings.style.preview.button') }}
	</button>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faTimes,
	faStar,
	faRetweet,
	faReply
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faStar,
	faRetweet,
	faReply
	)

	export default {}
	</script>

	<style lang="scss">
	.preview-container {
	position: relative;
	}
	.underlay-preview {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10px;
	right: 10px;
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 11:48 PM (1 d, 15 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1724058
Default Alt Text: (30 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions