MusareFork/frontend/src/pages/Station/Sidebar/index.vue

<template>
	<div id="tabs-container">
		<div id="tab-selection">
			<button
				class="button is-default"
				:class="{ selected: tab === 'queue' }"
				@click="showTab('queue')"
			>
				Queue
			</button>
			<button
				class="button is-default"
				:class="{ selected: tab === 'users' }"
				@click="showTab('users')"
			>
				Users
			</button>
			<button
				v-if="station.requests && station.requests.enabled && loggedIn"
				class="button is-default"
				:class="{ selected: tab === 'requests' }"
				@click="showTab('requests')"
			>
				Requests
			</button>
			<button
				v-else-if="station.requests && station.requests.enabled"
				class="button is-default"
				content="Login to request songs"
				v-tippy="{ theme: 'info' }"
			>
				Requests
			</button>
		</div>
		<queue class="tab" v-show="tab === 'queue'" />
		<users class="tab" v-show="tab === 'users'" />
		<request
			v-if="station.requests && station.requests.enabled && loggedIn"
			v-show="tab === 'requests'"
			class="tab requests-tab"
			sector="station"
		/>
	</div>
</template>

<script>
import { mapActions, mapState } from "vuex";

import Queue from "@/components/Queue.vue";
import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
import Users from "./Users.vue";
import Request from "@/components/Request.vue";

export default {
	components: { Queue, Users, Request },
	mixins: [TabQueryHandler],
	data() {
		return {
			tab: "queue"
		};
	},
	computed: mapState({
		station: state => state.station.station,
		users: state => state.station.users,
		userCount: state => state.station.userCount,
		loggedIn: state => state.user.auth.loggedIn
	}),
	mounted() {
		if (
			this.$route.query.tab === "queue" ||
			this.$route.query.tab === "users" ||
			this.$route.query.tab === "requests"
		)
			this.tab = this.$route.query.tab;
	},
	methods: {
		...mapActions("modalVisibility", ["openModal"])
	}
};
</script>

<style lang="less" scoped>
.night-mode {
	#tab-selection .button {
		background: var(--dark-grey);
		color: var(--white);
	}

	.tab.requests-tab {
		background-color: var(--dark-grey-3) !important;
		border: 0 !important;
	}
}

#tabs-container .tab {
	width: 100%;
	height: calc(100% - 36px);
	position: absolute;
	border: 1px solid var(--light-grey-3);
	border-top: 0;
}

#tab-selection {
	display: flex;
	overflow-x: auto;

	.button {
		border-radius: @border-radius @border-radius 0 0;
		border: 0;
		text-transform: uppercase;
		font-size: 17px;
		color: var(--dark-grey-3);
		background-color: var(--light-grey-2);
		flex-grow: 1;

		&:not(:first-of-type) {
			margin-left: 5px;
		}
	}

	.selected {
		background-color: var(--primary-color) !important;
		color: var(--white) !important;
		font-weight: 600;
	}
}

:deep(.nothing-here-text) {
	height: 100%;
}

:deep(.tab) {
	.nothing-here-text:not(:only-child) {
		height: calc(100% - 40px);
	}

	&.requests-tab {
		background-color: var(--white);
		margin-bottom: 20px;
		border-radius: 0 0 @border-radius @border-radius;
		max-height: 100%;
		padding: 15px;
		overflow-y: auto;
	}
}

:deep(.tab-actionable-button) {
	width: calc(100% - 20px);
	height: 40px;
	border-radius: @border-radius;
	margin: 10px;
	position: absolute;
	bottom: 0;
	border: 0;
	background-color: var(--primary-color) !important;
	color: var(--white) !important;

	&:active,
	&:focus {
		border: 0;
	}

	&:hover,
	&:focus {
		background-color: var(--primary-color) !important;
		filter: brightness(90%);
	}
}

:deep(.scrollable-list) {
	width: 100%;
	max-height: calc(100% - 40px - 20px);
	overflow: auto;
	padding: 10px;

	.song-item:not(:last-of-type) {
		margin-bottom: 10px;
	}
}
</style>