No OneTemporary
Actions

Size

45 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index ab025d63f6..3e23ebfad8 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,844 +1,844 @@
	// stylelint-disable rscss/class-format
	@import './_variables.scss';

	:root {
	--navbar-height: 3.5rem;
	--post-line-height: 1.4;
	// Z-Index stuff
	--ZI_media_modal: 90000;
	--ZI_modals_popovers: 85000;
	--ZI_modals: 80000;
	--ZI_navbar_popovers: 75000;
	--ZI_navbar: 70000;
	--ZI_popovers: 60000;
	}

	html {
	font-size: 14px;
	// overflow-x: clip causes my browser's tab to crash with SIGILL lul
	}

	body {
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	overflow-x: clip;
	overflow-y: scroll;

	&.hidden {
	display: none;
	}
	}

	// ## Custom scrollbars
	// Only show custom scrollbars on devices which
	// have a cursor/pointer to operate them
	@media (any-pointer: fine) {
	* {
	scrollbar-color: var(--btn) transparent;

	&::-webkit-scrollbar {
	background: transparent;
	}

	&::-webkit-scrollbar-button,
	&::-webkit-scrollbar-thumb {
	background-color: var(--btn);
	box-shadow: var(--buttonShadow);
	border-radius: var(--btnRadius);
	}

	// horizontal/vertical/increment/decrement are webkit-specific stuff
	// that indicates whether we're affecting vertical scrollbar, increase button etc
	// stylelint-disable selector-pseudo-class-no-unknown
	&::-webkit-scrollbar-button {
	--___bgPadding: 2px;

	color: var(--btnText);
	background-repeat: no-repeat, no-repeat;

	&:horizontal {
	background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));

	&:increment {
	background-image:
	linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
	linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
	background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
	}

	&:decrement {
	background-image:
	linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
	linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
	background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
	}
	}

	&:vertical {
	background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;

	&:increment {
	background-image:
	linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
	linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
	background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
	}

	&:decrement {
	background-image:
	linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
	linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
	background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
	}
	}
	}
	// stylelint-enable selector-pseudo-class-no-unknown
	}
	// Body should have background to scrollbar otherwise it will use white (body color?)
	html {
	scrollbar-color: var(--selectedMenu) var(--wallpaper);
	background: var(--wallpaper);
	}
	}

	a {
	text-decoration: none;
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	h4 {
	margin: 0;
	}

	i[class*=icon-],
	.svg-inline--fa {
	color: $fallback--icon;
	color: var(--icon, $fallback--icon);
	}

	nav {
	z-index: var(--ZI_navbar);
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
	box-shadow: var(--topBarShadow);
	box-sizing: border-box;
	height: var(--navbar-height);
	position: fixed;
	}

	#sidebar {
	grid-area: sidebar;
	}

	.column.-scrollable {
	top: var(--navbar-height);
	position: sticky;
	}

	#main-scroller {
	grid-area: content;
	position: relative;
	}

	#notifs-column {
	grid-area: notifs;
	}

	.app-bg-wrapper {
	position: fixed;
	height: 100%;
	top: var(--navbar-height);
	z-index: -1000;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-position: 50%;
	}

	.underlay {
	grid-column-start: 1;
	grid-column-end: span 3;
	grid-row-start: 1;
	grid-row-end: 1;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.15);
	background-color: var(--underlay, rgba(0, 0, 0, 0.15));
	z-index: -1000;
	}

	.app-layout {
	--miniColumn: 25rem;
	--maxiColumn: minmax(var(--miniColumn), 45rem);
	--columnGap: 1em;
	--status-margin: 0.75em;

	position: relative;
	display: grid;
	grid-template-columns: var(--miniColumn) var(--maxiColumn);
	grid-template-areas: "sidebar content";
	grid-template-rows: 1fr;
	box-sizing: border-box;
	margin: 0 auto;
	align-content: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 100vh;
	overflow-x: clip;

	.column {
	--___columnMargin: var(--columnGap);

	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	grid-row-start: 1;
	grid-row-end: 1;
	margin: 0 calc(var(--___columnMargin) / 2);
	padding: calc(var(--___columnMargin)) 0;
	row-gap: var(--___columnMargin);
	align-content: start;

	&:not(.-scrollable) {
	margin-top: var(--navbar-height);
	}

	&:hover {
	z-index: 2;
	}

	&.-full-height {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	}

	&.-scrollable {
	--___paddingIncrease: calc(var(--columnGap) / 2);

	position: sticky;
	top: var(--navbar-height);
	max-height: calc(100vh - var(--navbar-height));
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: calc(var(--___paddingIncrease) * -1);
	padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
	// might implement old style of hiding scrollbars later if there's demand
	@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
	&:not(.-show-scrollbar) {
	scrollbar-width: none;
	margin-right: calc(var(--___paddingIncrease) * -1);
	padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	&::-webkit-scrollbar {
	display: block;
	width: 0;
	}
	}
	}

	.panel-heading.-sticky {
	top: calc(var(--columnGap) / -1);
	}
	}
	}

	&.-has-new-post-button {
	.column {
	padding-bottom: 10rem;
	}
	}

	&.-no-sticky-headers {
	.column {
	.panel-heading.-sticky {
	position: relative;
	top: 0;
	}
	}
	}

	.column-inner {
	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	row-gap: 1em;
	align-content: start;
	}

	&.-reverse:not(.-wide):not(.-mobile) {
	grid-template-columns: var(--maxiColumn) var(--miniColumn);
	grid-template-areas: "content sidebar";
	}

	&.-wide {
	grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
	grid-template-areas: "sidebar content notifs";

	&.-reverse {
	grid-template-areas: "notifs content sidebar";
	}
	}

	&.-mobile {
	grid-template-columns: 100vw;
	grid-template-areas: "content";
	padding: 0;

	.column {
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	margin-top: var(--navbar-height);
	margin-bottom: 0;
	}

	.panel-heading,
	.panel-heading::after,
	.panel-heading::before,
	.panel,
	.panel::after {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	}

	#sidebar,
	#notifs-column {
	display: none;
	}
	}

	&.-normal {
	#notifs-column {
	display: none;
	}
	}
	}

	.text-center {
	text-align: center;
	}

	.button-default {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	box-shadow: $fallback--buttonShadow;
	box-shadow: var(--buttonShadow);
	font-size: 1em;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	&.-sublime {
	background: transparent;
	}

	i[class*=icon-],
	.svg-inline--fa {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

	&::-moz-focus-inner {
	border: none;
	}

	&:hover {
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnPressed, $fallback--fg);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	}
	}

	&:disabled {
	cursor: not-allowed;
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnDisabled, $fallback--fg);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	}
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggled, $fallback--fg);
	box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	}
	}

	&.danger {
	// TODO: add better color variable
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	}
	}

	.button-unstyled {
	background: none;
	border: none;
	outline: none;
	display: inline;
	text-align: initial;
	font-size: 100%;
	font-family: inherit;
	padding: 0;
	line-height: unset;
	cursor: pointer;
	box-sizing: content-box;
	color: inherit;

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

	&.-fullwidth {
	width: 100%;
	}

	&.-hover-highlight {
	&:hover svg {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}

	input,
	textarea,
	.input {
	&.unstyled {
	border-radius: 0;
	background: none;
	box-shadow: none;
	height: unset;
	}

	--_padding: 0.5em;

	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 1em;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	line-height: 2;
	hyphens: none;
	padding: 0 var(--_padding);

	&:disabled,
	&[disabled=disabled],
	&.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio] {
	display: none;

	&:checked + label::before {
	box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '';
	transition: box-shadow 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: 100%; // Radio buttons should always be circle
	box-shadow: 0 0 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: 0.5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&[type=checkbox] {
	display: none;

	&:checked + label::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '✓';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0 0 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: 0.5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&.resize-height {
	resize: vertical;
	}
	}

	// Textareas should have stock line-height + vertical padding instead of huge line-height
	textarea {
	padding: var(--_padding);
	line-height: var(--post-line-height);
	}

	option {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	}

	.hide-number-spinner {
	-moz-appearance: textfield;

	&[type=number]::-webkit-inner-spin-button,
	&[type=number]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	.btn-block {
	display: block;
	width: 100%;
	}

	.btn-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	button {
	position: relative;
	flex: 1 1 auto;

	&:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	&:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}

	@import './panel.scss';

	.fa {
	color: grey;
	}

	.mobile-shown {
	display: none;
	}

	.badge {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 99px;
	max-width: 10em;
	min-width: 1.7em;
	height: 1.3em;
	padding: 0.15em 0.15em;
	vertical-align: middle;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

	.alert {
	margin: 0 0.35em;
	padding: 0 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}

	&.warning {
	background-color: $fallback--alertWarning;
	background-color: var(--alertWarning, $fallback--alertWarning);
	color: $fallback--text;
	color: var(--alertWarningText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertWarningPanelText, $fallback--text);
	}
	}

	&.success {
	background-color: var(--alertSuccess, $fallback--alertWarning);
	color: var(--alertSuccessText, $fallback--text);

	.panel-heading & {
	color: var(--alertSuccessPanelText, $fallback--text);
	}
	}
	}

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

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	.visibility-notice {
	padding: 0.5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

	.notice-dismissible {
	padding-right: 4rem;
	position: relative;

	.dismiss {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.5em;
	color: inherit;
	}
	}

	.fa-scale-110 {
	&.svg-inline--fa {
	font-size: 1.1em;
	}
	}

	.fa-old-padding {
	- &.svg-inline--fa {
	+ &.svg-inline--fa, &-layer {
	padding: 0 0.3em;
	}
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0;
	width: 100%;
	}
	}

	.btn.button-default {
	min-height: 2em;
	}

	.new-status-notification {
	position: relative;
	font-size: 1.1em;
	z-index: 1;
	flex: 1;
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(359deg);
	}
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}

	15% {
	transform: translateX(0.375rem);
	}

	30% {
	transform: translateX(-0.375rem);
	}

	45% {
	transform: translateX(0.375rem);
	}

	60% {
	transform: translateX(-0.375rem);
	}

	75% {
	transform: translateX(0.375rem);
	}

	90% {
	transform: translateX(-0.375rem);
	}

	100% {
	transform: translateX(0);
	}
	}

	// Vue transitions
	.fade-enter-active,
	.fade-leave-active {
	transition: opacity 0.3s;
	}

	.fade-enter-from,
	.fade-leave-active {
	opacity: 0;
	}
	diff --git a/src/_mixins.scss b/src/_mixins.scss
	new file mode 100644
	index 0000000000..1fed16c3d1
	--- /dev/null
	+++ b/src/_mixins.scss
	@@ -0,0 +1,17 @@
	+@mixin unfocused-style {
	+ @content;
	+
	+ &:focus:not(:focus-visible):not(:hover) {
	+ @content;
	+ }
	+}
	+
	+@mixin focused-style {
	+ &:hover, &:focus {
	+ @content;
	+ }
	+
	+ &:focus-visible {
	+ @content;
	+ }
	+}
	diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
	index 22ffb65aeb..68fa66adc4 100644
	--- a/src/components/extra_buttons/extra_buttons.js
	+++ b/src/components/extra_buttons/extra_buttons.js
	@@ -1,101 +1,116 @@
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faEllipsisH,
	faBookmark,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	- faExternalLinkAlt
	+ faExternalLinkAlt,
	+ faPlus,
	+ faTimes
	} from '@fortawesome/free-solid-svg-icons'
	import {
	faBookmark as faBookmarkReg,
	faFlag
	} from '@fortawesome/free-regular-svg-icons'

	library.add(
	faEllipsisH,
	faBookmark,
	faBookmarkReg,
	faEyeSlash,
	faThumbtack,
	faShareAlt,
	faExternalLinkAlt,
	- faFlag
	+ faFlag,
	+ faPlus,
	+ faTimes
	)

	const ExtraButtons = {
	props: ['status'],
	components: { Popover },
	+ data () {
	+ return {
	+ expanded: false
	+ }
	+ },
	methods: {
	+ onShow () {
	+ this.expanded = true
	+ },
	+ onClose () {
	+ this.expanded = false
	+ },
	deleteStatus () {
	const confirmed = window.confirm(this.$t('status.delete_confirm'))
	if (confirmed) {
	this.$store.dispatch('deleteStatus', { id: this.status.id })
	}
	},
	pinStatus () {
	this.$store.dispatch('pinStatus', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unpinStatus () {
	this.$store.dispatch('unpinStatus', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	muteConversation () {
	this.$store.dispatch('muteConversation', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unmuteConversation () {
	this.$store.dispatch('unmuteConversation', this.status.id)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	copyLink () {
	navigator.clipboard.writeText(this.statusLink)
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	bookmarkStatus () {
	this.$store.dispatch('bookmark', { id: this.status.id })
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	unbookmarkStatus () {
	this.$store.dispatch('unbookmark', { id: this.status.id })
	.then(() => this.$emit('onSuccess'))
	.catch(err => this.$emit('onError', err.error.error))
	},
	reportStatus () {
	this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
	}
	},
	computed: {
	currentUser () { return this.$store.state.users.currentUser },
	canDelete () {
	if (!this.currentUser) { return }
	const superuser = this.currentUser.rights.moderator \|\| this.currentUser.rights.admin
	return superuser \|\| this.status.user.id === this.currentUser.id
	},
	ownStatus () {
	return this.status.user.id === this.currentUser.id
	},
	canPin () {
	return this.ownStatus && (this.status.visibility === 'public' \|\| this.status.visibility === 'unlisted')
	},
	canMute () {
	return !!this.currentUser
	},
	canBookmark () {
	return !!this.currentUser
	},
	statusLink () {
	return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
	}
	}
	}

	export default ExtraButtons
	diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
	index 2c893bf3b6..011dff9b7a 100644
	--- a/src/components/extra_buttons/extra_buttons.vue
	+++ b/src/components/extra_buttons/extra_buttons.vue
	@@ -1,156 +1,188 @@
	<template>
	<Popover
	class="ExtraButtons"
	trigger="click"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	+ @show="onShow"
	+ @close="onClose"
	>
	<template #content="{close}">
	<div class="dropdown-menu">
	<button
	v-if="canMute && !status.thread_muted"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="muteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.mute_conversation") }}</span>
	</button>
	<button
	v-if="canMute && status.thread_muted"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unmuteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.unmute_conversation") }}</span>
	</button>
	<button
	v-if="!status.pinned && canPin"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="pinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.pin") }}</span>
	</button>
	<button
	v-if="status.pinned && canPin"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unpinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.unpin") }}</span>
	</button>
	<template v-if="canBookmark">
	<button
	v-if="!status.bookmarked"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="bookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'bookmark']"
	/><span>{{ $t("status.bookmark") }}</span>
	</button>
	<button
	v-if="status.bookmarked"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="unbookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="bookmark"
	/><span>{{ $t("status.unbookmark") }}</span>
	</button>
	</template>
	<button
	v-if="canDelete"
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="deleteStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="times"
	/><span>{{ $t("status.delete") }}</span>
	</button>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="copyLink"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="share-alt"
	/><span>{{ $t("status.copy_link") }}</span>
	</button>
	<a
	v-if="!status.is_local"
	class="button-default dropdown-item dropdown-item-icon"
	title="Source"
	:href="status.external_url"
	target="_blank"
	>
	<FAIcon
	fixed-width
	icon="external-link-alt"
	/><span>{{ $t("status.external_source") }}</span>
	</a>
	<button
	class="button-default dropdown-item dropdown-item-icon"
	@click.prevent="reportStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'flag']"
	/><span>{{ $t("user_card.report") }}</span>
	</button>
	</div>
	</template>
	<template #trigger>
	<span class="button-unstyled popover-trigger">
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- icon="ellipsis-h"
	- />
	+ <FALayers class="fa-old-padding-layer">
	+ <FAIcon
	+ class="fa-scale-110 "
	+ icon="ellipsis-h"
	+ />
	+ <FAIcon
	+ v-show="!expanded"
	+ class="focus-marker"
	+ transform="shrink-6 up-8 right-16"
	+ icon="plus"
	+ />
	+ <FAIcon
	+ v-show="expanded"
	+ class="focus-marker"
	+ transform="shrink-6 up-8 right-16"
	+ icon="times"
	+ />
	+ </FALayers>
	</span>
	</template>
	</Popover>
	</template>

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

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

	.ExtraButtons {
	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	position: static;
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	+
	+ }
	+
	+ .popover-trigger-button {
	+ @include unfocused-style {
	+ .focus-marker {
	+ visibility: hidden;
	+ }
	+ }
	+
	+ @include focused-style {
	+ .focus-marker {
	+ visibility: visible;
	+ }
	+ }
	}
	}
	</style>
	diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
	index 5cd05f73eb..c996cba21d 100644
	--- a/src/components/favorite_button/favorite_button.js
	+++ b/src/components/favorite_button/favorite_button.js
	@@ -1,38 +1,46 @@
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	-import { faStar } from '@fortawesome/free-solid-svg-icons'
	+import {
	+ faStar,
	+ faPlus,
	+ faMinus,
	+ faCheck
	+} from '@fortawesome/free-solid-svg-icons'
	import {
	faStar as faStarRegular
	} from '@fortawesome/free-regular-svg-icons'

	library.add(
	faStar,
	- faStarRegular
	+ faStarRegular,
	+ faPlus,
	+ faMinus,
	+ faCheck
	)

	const FavoriteButton = {
	props: ['status', 'loggedIn'],
	data () {
	return {
	animated: false
	}
	},
	methods: {
	favorite () {
	if (!this.status.favorited) {
	this.$store.dispatch('favorite', { id: this.status.id })
	} else {
	this.$store.dispatch('unfavorite', { id: this.status.id })
	}
	this.animated = true
	setTimeout(() => {
	this.animated = false
	}, 500)
	}
	},
	computed: {
	...mapGetters(['mergedConfig'])
	}
	}

	export default FavoriteButton
	diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
	index d5c4c61e7e..74a1dfbb45 100644
	--- a/src/components/favorite_button/favorite_button.vue
	+++ b/src/components/favorite_button/favorite_button.vue
	@@ -1,62 +1,103 @@
	<template>
	<div class="FavoriteButton">
	<button
	v-if="loggedIn"
	class="button-unstyled interactive"
	:class="status.favorited && '-favorited'"
	:title="$t('tool_tip.favorite')"
	@click.prevent="favorite()"
	>
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- :icon="[status.favorited ? 'fas' : 'far', 'star']"
	- :spin="animated"
	- />
	+ <FALayers class="fa-scale-110 fa-old-padding-layer">
	+ <FAIcon
	+ class="fa-scale-110"
	+ :icon="[status.favorited ? 'fas' : 'far', 'star']"
	+ :spin="animated"
	+ />
	+ <FAIcon
	+ v-if="status.favorited"
	+ class="active-marker"
	+ transform="shrink-6 up-9 right-12"
	+ icon="check"
	+ />
	+ <FAIcon
	+ v-if="!status.favorited"
	+ class="focus-marker"
	+ transform="shrink-6 up-9 right-12"
	+ icon="plus"
	+ />
	+ <FAIcon
	+ v-else
	+ class="focus-marker"
	+ transform="shrink-6 up-9 right-12"
	+ icon="minus"
	+ />
	+ </FALayers>
	</button>
	<span v-else>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	:title="$t('tool_tip.favorite')"
	:icon="['far', 'star']"
	/>
	</span>
	<span
	v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
	class="action-counter"
	>
	{{ status.fave_num }}
	</span>
	</div>
	</template>

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

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

	.FavoriteButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	.svg-inline--fa {
	animation-duration: 0.6s;
	}

	&:hover .svg-inline--fa,
	&.-favorited .svg-inline--fa {
	color: $fallback--cOrange;
	color: var(--cOrange, $fallback--cOrange);
	}
	+
	+ @include unfocused-style {
	+ .focus-marker {
	+ visibility: hidden;
	+ }
	+
	+ .active-marker {
	+ visibility: visible;
	+ }
	+ }
	+
	+ @include focused-style {
	+ .focus-marker {
	+ visibility: visible;
	+ }
	+
	+ .active-marker {
	+ visibility: hidden;
	+ }
	+ }
	}
	}
	</style>
	diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
	index 37d6e7d046..5e052e1e06 100644
	--- a/src/components/react_button/react_button.js
	+++ b/src/components/react_button/react_button.js
	@@ -1,70 +1,83 @@
	import Popover from '../popover/popover.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	+import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
	import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
	import { trim } from 'lodash'

	-library.add(faSmileBeam)
	+library.add(
	+ faPlus,
	+ faTimes,
	+ faSmileBeam
	+)

	const ReactButton = {
	props: ['status'],
	data () {
	return {
	- filterWord: ''
	+ filterWord: '',
	+ expanded: false
	}
	},
	components: {
	Popover
	},
	methods: {
	addReaction (event, emoji, close) {
	const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
	if (existingReaction && existingReaction.me) {
	this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
	} else {
	this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
	}
	close()
	},
	+ onShow () {
	+ this.expanded = true
	+ this.focusInput()
	+ },
	+ onClose () {
	+ this.expanded = false
	+ },
	focusInput () {
	this.$nextTick(() => {
	const input = this.$el.querySelector('input')
	if (input) input.focus()
	})
	}
	},
	computed: {
	commonEmojis () {
	return [
	{ displayText: 'thumbsup', replacement: '👍' },
	{ displayText: 'angry', replacement: '😠' },
	{ displayText: 'eyes', replacement: '👀' },
	{ displayText: 'joy', replacement: '😂' },
	{ displayText: 'fire', replacement: '🔥' }
	]
	},
	emojis () {
	if (this.filterWord !== '') {
	const filterWordLowercase = trim(this.filterWord.toLowerCase())
	const orderedEmojiList = []
	for (const emoji of this.$store.state.instance.emoji) {
	if (emoji.replacement === this.filterWord) return [emoji]

	const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
	if (indexOfFilterWord > -1) {
	if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
	orderedEmojiList[indexOfFilterWord] = []
	}
	orderedEmojiList[indexOfFilterWord].push(emoji)
	}
	}
	return orderedEmojiList.flat()
	}
	return this.$store.state.instance.emoji \|\| []
	},
	mergedConfig () {
	return this.$store.getters.mergedConfig
	}
	}
	}

	export default ReactButton
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index 5a80984757..254c49dbd0 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,131 +1,162 @@
	<template>
	<Popover
	trigger="click"
	class="ReactButton"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	popover-class="ReactButton popover-default"
	- @show="focusInput"
	+ @show="onShow"
	+ @close="onClose"
	>
	<template #content="{close}">
	<div class="reaction-picker-filter">
	<input
	v-model="filterWord"
	size="1"
	:placeholder="$t('emoji.search_emoji')"
	@input="$event.target.composing = false"
	>
	</div>
	<div class="reaction-picker">
	<span
	v-for="emoji in commonEmojis"
	:key="emoji.replacement"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-picker-divider" />
	<span
	v-for="(emoji, key) in emojis"
	:key="key"
	class="emoji-button"
	:title="emoji.displayText"
	@click="addReaction($event, emoji.replacement, close)"
	>
	{{ emoji.replacement }}
	</span>
	<div class="reaction-bottom-fader" />
	</div>
	</template>
	<template #trigger>
	<span
	class="button-unstyled popover-trigger"
	:title="$t('tool_tip.add_reaction')"
	>
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- :icon="['far', 'smile-beam']"
	- />
	+ <FALayers>
	+ <FAIcon
	+ class="fa-scale-110 fa-old-padding"
	+ :icon="['far', 'smile-beam']"
	+ />
	+ <FAIcon
	+ v-show="!expanded"
	+ class="focus-marker"
	+ transform="shrink-6 up-9 right-17"
	+ icon="plus"
	+ />
	+ <FAIcon
	+ v-show="expanded"
	+ class="focus-marker"
	+ transform="shrink-6 up-9 right-17"
	+ icon="times"
	+ />
	+ </FALayers>
	</span>
	</template>
	</Popover>
	</template>

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

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

	.ReactButton {
	.reaction-picker-filter {
	padding: 0.5em;
	display: flex;

	input {
	flex: 1;
	}
	}

	.reaction-picker-divider {
	height: 1px;
	width: 100%;
	margin: 0.5em;
	background-color: var(--border, $fallback--border);
	}

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	user-select: none;

	mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;

	.emoji-button {
	cursor: pointer;

	flex-basis: 20%;
	line-height: 1.5;
	align-content: center;

	&:hover {
	transform: scale(1.25);
	}
	}
	}

	/* override of popover internal stuff */
	.popover-trigger-button {
	width: auto;
	}

	.popover-trigger {
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	+
	+ }
	+
	+ .popover-trigger-button {
	+ @include unfocused-style {
	+ .focus-marker {
	+ visibility: hidden;
	+ }
	+ }
	+
	+ @include focused-style {
	+ .focus-marker {
	+ visibility: visible;
	+ }
	+ }
	}
	}

	</style>
	diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
	index c7bd2a2b8b..d6382982da 100644
	--- a/src/components/reply_button/reply_button.js
	+++ b/src/components/reply_button/reply_button.js
	@@ -1,16 +1,24 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	-import { faReply } from '@fortawesome/free-solid-svg-icons'
	+import {
	+ faReply,
	+ faPlus,
	+ faTimes
	+} from '@fortawesome/free-solid-svg-icons'

	-library.add(faReply)
	+library.add(
	+ faReply,
	+ faPlus,
	+ faTimes
	+)

	const ReplyButton = {
	name: 'ReplyButton',
	props: ['status', 'replying'],
	computed: {
	loggedIn () {
	return !!this.$store.state.users.currentUser
	}
	}
	}

	export default ReplyButton
	diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
	index c17041dacf..ea97fbaad2 100644
	--- a/src/components/reply_button/reply_button.vue
	+++ b/src/components/reply_button/reply_button.vue
	@@ -1,58 +1,85 @@
	<template>
	<div class="ReplyButton">
	<button
	v-if="loggedIn"
	class="button-unstyled interactive"
	:class="{'-active': replying}"
	:title="$t('tool_tip.reply')"
	@click.prevent="$emit('toggle')"
	>
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- icon="reply"
	- />
	+ <FALayers class="fa-old-padding-layer">
	+ <FAIcon
	+ class="fa-scale-110"
	+ icon="reply"
	+ />
	+ <FAIcon
	+ v-if="!replying"
	+ class="focus-marker"
	+ transform="shrink-6 up-8 right-11"
	+ icon="plus"
	+ />
	+ <FAIcon
	+ v-else
	+ class="focus-marker"
	+ transform="shrink-6 up-8 right-11"
	+ icon="times"
	+ />
	+ </FALayers>
	</button>
	<span v-else>
	<FAIcon
	icon="reply"
	class="fa-scale-110 fa-old-padding"
	:title="$t('tool_tip.reply')"
	/>
	</span>
	<span
	v-if="status.replies_count > 0"
	class="action-counter"
	>
	{{ status.replies_count }}
	</span>
	</div>
	</template>

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

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

	.ReplyButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	&:hover .svg-inline--fa,
	&.-active .svg-inline--fa {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}
	+
	+ @include unfocused-style {
	+ .focus-marker {
	+ visibility: hidden;
	+ }
	+ }
	+
	+ @include focused-style {
	+ .focus-marker {
	+ visibility: visible;
	+ }
	+ }
	}

	}
	</style>
	diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
	index 2103fd0b9b..b7911814b8 100644
	--- a/src/components/retweet_button/retweet_button.js
	+++ b/src/components/retweet_button/retweet_button.js
	@@ -1,33 +1,43 @@
	import { library } from '@fortawesome/fontawesome-svg-core'
	-import { faRetweet } from '@fortawesome/free-solid-svg-icons'
	+import {
	+ faRetweet,
	+ faPlus,
	+ faMinus,
	+ faCheck
	+} from '@fortawesome/free-solid-svg-icons'

	-library.add(faRetweet)
	+library.add(
	+ faRetweet,
	+ faPlus,
	+ faMinus,
	+ faCheck
	+)

	const RetweetButton = {
	props: ['status', 'loggedIn', 'visibility'],
	data () {
	return {
	animated: false
	}
	},
	methods: {
	retweet () {
	if (!this.status.repeated) {
	this.$store.dispatch('retweet', { id: this.status.id })
	} else {
	this.$store.dispatch('unretweet', { id: this.status.id })
	}
	this.animated = true
	setTimeout(() => {
	this.animated = false
	}, 500)
	}
	},
	computed: {
	mergedConfig () {
	return this.$store.getters.mergedConfig
	}
	}
	}

	export default RetweetButton
	diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
	index 5a15d38724..396d1200bd 100644
	--- a/src/components/retweet_button/retweet_button.vue
	+++ b/src/components/retweet_button/retweet_button.vue
	@@ -1,69 +1,110 @@
	<template>
	<div class="RetweetButton">
	<button
	v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
	class="button-unstyled interactive"
	:class="status.repeated && '-repeated'"
	:title="$t('tool_tip.repeat')"
	@click.prevent="retweet()"
	>
	- <FAIcon
	- class="fa-scale-110 fa-old-padding"
	- icon="retweet"
	- :spin="animated"
	- />
	+ <FALayers class="fa-old-padding-layer">
	+ <FAIcon
	+ class="fa-scale-110"
	+ icon="retweet"
	+ :spin="animated"
	+ />
	+ <FAIcon
	+ v-if="status.repeated"
	+ class="active-marker"
	+ transform="shrink-6 up-9 right-12"
	+ icon="check"
	+ />
	+ <FAIcon
	+ v-if="!status.repeated"
	+ class="focus-marker"
	+ transform="shrink-6 up-9 right-12"
	+ icon="plus"
	+ />
	+ <FAIcon
	+ v-else
	+ class="focus-marker"
	+ transform="shrink-6 up-9 right-12"
	+ icon="minus"
	+ />
	+ </FALayers>
	</button>
	<span v-else-if="loggedIn">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="lock"
	:title="$t('timeline.no_retweet_hint')"
	/>
	</span>
	<span v-else>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	</span>
	<span
	v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
	class="no-event"
	>
	{{ status.repeat_num }}
	</span>
	</div>
	</template>

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

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

	.RetweetButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	.svg-inline--fa {
	animation-duration: 0.6s;
	}

	&:hover .svg-inline--fa,
	&.-repeated .svg-inline--fa {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}
	+
	+ @include unfocused-style {
	+ .focus-marker {
	+ visibility: hidden;
	+ }
	+
	+ .active-marker {
	+ visibility: visible;
	+ }
	+ }
	+
	+ @include focused-style {
	+ .focus-marker {
	+ visibility: visible;
	+ }
	+
	+ .active-marker {
	+ visibility: hidden;
	+ }
	+ }
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Tue, Oct 13, 4:00 PM (1 d, 22 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1786818
Default Alt Text: (45 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions