No OneTemporary
Actions

Size

28 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 336c49989e..e2e2d079c9 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,996 +1,979 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

	.app-bg-wrapper {
	position: fixed;
	z-index: -1;
	height: 100%;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 50%;
	}

	i[class^='icon-'] {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	align-content: flex-start;
	}
	.underlay {
	background-color: rgba(0,0,0,0.15);
	background-color: var(--underlay, rgba(0,0,0,0.15));
	}

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

	html {
	font-size: 14px;
	}

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

	&.hidden {
	display: none;
	}
	}

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

	button {
	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: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

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

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

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

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px 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);
	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);
	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: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	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);
	}
	}

	input, textarea, .select, .input {

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

	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px 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: 14px;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;
	padding: 8px .5em;

	&.select {
	padding: 0;
	}

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

	.icon-down-open {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	line-height: 28px;
	z-index: 0;
	pointer-events: none;
	}

	select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: $fallback--text;
	color: var(--inputText, --text, $fallback--text);
	margin: 0;
	padding: 0 2em 0 .2em;
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	width: 100%;
	z-index: 1;
	height: 28px;
	line-height: 16px;
	}

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

	&[type=radio] {
	display: none;
	&:checked + label::before {
	box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .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: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}

	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .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: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}
	}

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

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

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

	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.item {
	flex: 1;
	line-height: 50px;
	height: 50px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	.nav-icon {
	margin-left: 0.4em;
	}

	&.right {
	justify-content: flex-end;
	}
	}

	.auto-size {
	flex: 1
	}

	.nav-bar {
	padding: 0;
	width: 100%;
	align-items: center;
	position: fixed;
	height: 50px;
	box-sizing: border-box;

	button {
	&, i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnTopBarText, $fallback--text);
	}

	&:active {
	background-color: $fallback--fg;
	background-color: var(--btnPressedTopBar, $fallback--fg);
	color: $fallback--text;
	color: var(--btnPressedTopBarText, $fallback--text);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledTopBarText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledTopBarText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggledTopBar, $fallback--fg)
	}
	}


	.logo {
	display: flex;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	align-items: stretch;
	justify-content: center;
	flex: 0 0 auto;
	z-index: -1;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: $fallback--fg;
	background-color: var(--topBarText, $fallback--fg);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	height: 100%;
	object-fit: contain;
	display: block;
	flex: 0;
	}
	}

	.inner-nav {
	position: relative;
	margin: auto;
	box-sizing: border-box;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
	flex-basis: 970px;
	height: 50px;

	a, a i {
	color: $fallback--link;
	color: var(--topBarLink, $fallback--link);
	}
	}
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after, & {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	flex: none;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}
	.faint-link {
	color: $fallback--faint;
	color: var(--faintLink, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	button {
	flex-shrink: 0;
	}

	button, .alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .5em;
	min-width: 1px;
	align-self: stretch;
	}

	button {
	&, i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnPanelText, $fallback--text);
	}

	&:active {
	background-color: $fallback--fg;
	background-color: var(--btnPressedPanel, $fallback--fg);
	color: $fallback--text;
	color: var(--btnPressedPanelText, $fallback--text);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledPanelText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledPanelText, $fallback--text);
	}
	}

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);


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

	a {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}
	.badge {
	display: inline-block;
	border-radius: 99px;
	min-width: 22px;
	max-width: 22px;
	min-height: 22px;
	max-height: 22px;
	font-size: 15px;
	line-height: 22px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	padding: 0;

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

	.alert {
	margin: 0.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

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

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

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

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

	@media all and (min-width: 800px) {
	.logo {
	opacity: 1 !important;
	}
	}

	.item.right {
	text-align: right;
	}

	.visibility-notice {
	padding: .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: .5em;
	color: inherit;
	}
	}

	.button-icon {
	font-size: 1.2em;
	}

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

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

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	.menu-button {
	display: block;
	margin-right: 0.8em;
	}

	.main {
	margin-bottom: 7em;
	}
	}

	.select-multiple {
	display: flex;
	.option-list {
	margin: 0;
	padding-left: .5em;
	}
	}
	.setting-list,
	.option-list{
	list-style-type: none;
	padding-left: 2em;
	li {
	margin-bottom: 0.5em;
	}
	.suboptions {
	margin-top: 0.3em
	}
	}

	.login-hint {
	text-align: center;

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

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

	.btn.btn-default {
	min-height: 28px;
	}

	.animate-spin {
	animation: spin 2s infinite linear;
	display: inline-block;
	}

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

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

	.new-status-notification {
	position:relative;
	margin-top: -1px;
	font-size: 1.1em;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);
	padding: 10px;
	z-index: 1;
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	}

	.unread-chat-count {
	font-size: 0.9em;
	font-weight: bolder;
	font-style: normal;
	position: absolute;
	right: 0.6rem;
	padding: 0 0.3em;
	min-width: 1.3rem;
	min-height: 1.3rem;
	max-height: 1.3rem;
	line-height: 1.3rem;
	}

	-.settings-modal-layout {
	- @media all and (max-width: 800px) {
	- height: 100%;
	-
	- body {
	- height: 100vh;
	- width: 100%;
	- overflow-y: hidden;
	- position: fixed;
	- }
	-
	- #app {
	- height: 100%;
	- }
	- }
	-}
	-
	.chat-layout {
	// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
	overflow: hidden;
	height: 100%;

	// Ensures the fixed position of the mobile browser bars on scroll up / down events.
	// Prevents the mobile browser bars from overlapping or hiding the message posting form.
	@media all and (max-width: 800px) {
	body {
	height: 100%;
	}

	#app {
	height: 100%;
	overflow: hidden;
	min-height: auto;
	}

	#app_bg_wrapper {
	overflow: hidden;
	}

	.main {
	overflow: hidden;
	height: 100%;
	}

	#content {
	padding-top: 0;
	height: 100%;
	overflow: visible;
	}
	}
	}
	diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
	index 4f54d6a3c0..f0d49c9158 100644
	--- a/src/components/settings_modal/settings_modal.js
	+++ b/src/components/settings_modal/settings_modal.js
	@@ -1,54 +1,42 @@
	import Modal from 'src/components/modal/modal.vue'
	import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
	import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
	import getResettableAsyncComponent from 'src/services/resettable_async_component.js'

	const SettingsModal = {
	components: {
	Modal,
	SettingsModalContent: getResettableAsyncComponent(
	() => import('./settings_modal_content.vue'),
	{
	loading: PanelLoading,
	error: AsyncComponentError,
	delay: 0
	}
	)
	},
	methods: {
	closeModal () {
	this.$store.dispatch('closeSettingsModal')
	},
	peekModal () {
	this.$store.dispatch('togglePeekSettingsModal')
	}
	},
	computed: {
	currentSaveStateNotice () {
	return this.$store.state.interface.settings.currentSaveStateNotice
	},
	modalActivated () {
	return this.$store.state.interface.settingsModalState !== 'hidden'
	},
	modalOpenedOnce () {
	return this.$store.state.interface.settingsModalLoaded
	},
	modalPeeked () {
	return this.$store.state.interface.settingsModalState === 'minimized'
	}
	- },
	- watch: {
	- // This is the only way to access the <html> element.
	- modalActivated (newValue) {
	- let html = document.querySelector('html')
	- if (!html) return
	- if (newValue) {
	- html.classList.add('settings-modal-layout')
	- } else {
	- html.classList.remove('settings-modal-layout')
	- }
	- }
	}
	}

	export default SettingsModal
	diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
	index f32db4bd5d..cdb32fd787 100644
	--- a/src/components/settings_modal/settings_modal.scss
	+++ b/src/components/settings_modal/settings_modal.scss
	@@ -1,49 +1,48 @@
	@import 'src/_variables.scss';
	.settings-modal {
	overflow: hidden;
	- height: 100%;

	&.peek {
	.settings-modal-panel {
	/* Explanation:
	* Modal is positioned vertically centered.
	* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
	* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
	* + 100% - we move modal completely off-screen, it's top boundary touches
	* bottom of the screen
	* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
	*/
	transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));

	@media all and (max-width: 800px) {
	- transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px));
	+ transform: translateY(calc(100% - 50px));
	}
	}
	}

	.settings-modal-panel {
	overflow: hidden;
	transition: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 300ms;
	width: 1000px;
	max-width: 90vw;
	height: 90vh;

	@media all and (max-width: 800px) {
	max-width: 100vw;
	height: 100%;
	}

	>.panel-body {
	height: 100%;
	overflow-y: hidden;

	.btn {
	min-height: 28px;
	min-width: 10em;
	padding: 0 2em;
	}
	}
	}
	}
	diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
	index 919eb7cd7e..1920661098 100644
	--- a/src/components/tab_switcher/tab_switcher.js
	+++ b/src/components/tab_switcher/tab_switcher.js
	@@ -1,143 +1,150 @@
	import Vue from 'vue'
	+import { mapState } from 'vuex'

	import './tab_switcher.scss'

	export default Vue.component('tab-switcher', {
	name: 'TabSwitcher',
	props: {
	renderOnlyFocused: {
	required: false,
	type: Boolean,
	default: false
	},
	onSwitch: {
	required: false,
	type: Function,
	default: undefined
	},
	activeTab: {
	required: false,
	type: String,
	default: undefined
	},
	scrollableTabs: {
	required: false,
	type: Boolean,
	default: false
	},
	sideTabBar: {
	required: false,
	type: Boolean,
	default: false
	}
	},
	data () {
	return {
	active: this.$slots.default.findIndex(_ => _.tag)
	}
	},
	computed: {
	activeIndex () {
	// In case of controlled component
	if (this.activeTab) {
	return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
	} else {
	return this.active
	}
	- }
	+ },
	+ bodyLocked () {
	+ return this.settingsModalState === 'visible'
	+ },
	+ ...mapState({
	+ settingsModalState: state => state.interface.settingsModalState
	+ })
	},
	beforeUpdate () {
	const currentSlot = this.$slots.default[this.active]
	if (!currentSlot.tag) {
	this.active = this.$slots.default.findIndex(_ => _.tag)
	}
	},
	methods: {
	activateTab (index) {
	return (e) => {
	e.preventDefault()
	if (typeof this.onSwitch === 'function') {
	this.onSwitch.call(null, this.$slots.default[index].key)
	}
	this.active = index
	if (this.scrollableTabs) {
	this.$refs.contents.scrollTop = 0
	}
	}
	}
	},
	render (h) {
	const tabs = this.$slots.default
	.map((slot, index) => {
	if (!slot.tag) return
	const classesTab = ['tab']
	const classesWrapper = ['tab-wrapper']
	if (this.activeIndex === index) {
	classesTab.push('active')
	classesWrapper.push('active')
	}
	if (slot.data.attrs.image) {
	return (
	<div class={classesWrapper.join(' ')}>
	<button
	disabled={slot.data.attrs.disabled}
	onClick={this.activateTab(index)}
	class={classesTab.join(' ')}>
	<img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
	{slot.data.attrs.label ? '' : slot.data.attrs.label}
	</button>
	</div>
	)
	}
	return (
	<div class={classesWrapper.join(' ')}>
	<button
	disabled={slot.data.attrs.disabled}
	onClick={this.activateTab(index)}
	class={classesTab.join(' ')}
	type="button"
	>
	{!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
	<span class="text">
	{slot.data.attrs.label}
	</span>
	</button>
	</div>
	)
	})

	const contents = this.$slots.default.map((slot, index) => {
	if (!slot.tag) return
	const active = this.activeIndex === index
	const classes = [ active ? 'active' : 'hidden' ]
	if (slot.data.attrs.fullHeight) {
	classes.push('full-height')
	}
	const renderSlot = (!this.renderOnlyFocused \|\| active)
	? slot
	: ''

	return (
	<div class={classes}>
	{
	this.sideTabBar
	? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
	: ''
	}
	{renderSlot}
	</div>
	)
	})

	return (
	<div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
	<div class="tabs">
	{tabs}
	</div>
	- <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock>
	+ <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.bodyLocked}>
	{contents}
	</div>
	</div>
	)
	}
	})

File Metadata

Mime Type: text/x-diff
Expires: Sat, Aug 8, 11:29 AM (1 d, 7 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1723126
Default Alt Text: (28 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions