feat(User List): added share button (cp to clipboard), fixed some overflow issues

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -56,8 +56,12 @@
 			class="button create-playlist tab-actionable-button"
 			href="#"
 			@click="openModal({ sector: 'station', modal: 'createPlaylist' })"
-			>Create Playlist</a
 		>
+			<i class="material-icons icon-with-button">create</i>
+			<span class="optional-desktop-only-text">
+				Create Playlist
+			</span>
+		</a>
 	</div>
 </template>
 
@@ -240,19 +244,12 @@ export default {
 	width: 100%;
 	height: 40px;
 	border-radius: 5px;
-	background-color: var(--station-theme);
-	color: $white !important;
 	border: 0;
 
 	&:active,
 	&:focus {
 		border: 0;
 	}
-
-	&:hover,
-	&:focus {
-		filter: brightness(90%);
-	}
 }
 
 .draggable-list-transition-move {

frontend/src/pages/Station/components/Sidebar/Queue/index.vue

@@ -15,7 +15,6 @@
 			</p>
 		</div>
 		<button
-			id="add-song-to-queue"
 			class="button is-primary tab-actionable-button"
 			v-if="
 				loggedIn &&
@@ -130,15 +129,5 @@ export default {
 		display: flex;
 		justify-content: center;
 	}
-
-	#add-song-to-queue {
-		background-color: var(--station-theme) !important;
-		color: $white !important;
-
-		&:hover,
-		&:focus {
-			filter: brightness(90%);
-		}
-	}
 }
 </style>

frontend/src/pages/Station/components/Sidebar/Users.vue

@@ -5,7 +5,7 @@
 		<transition-group name="notification-box">
 			<h6
 				class="has-text-centered"
-				v-if="users.loggedOut.length > 0"
+				v-if="users && users.loggedOut.length > 0"
 				key="logged-out-users"
 			>
 				{{ users.loggedOut.length }}
@@ -15,7 +15,9 @@
 			<h6
 				class="has-text-centered"
 				v-else-if="
-					users.loggedIn.length === 1 && users.loggedOut.length === 0
+					users &&
+						users.loggedIn.length === 1 &&
+						users.loggedOut.length === 0
 				"
 				key="only-me"
 			>
@@ -23,10 +25,8 @@
 			</h6>
 		</transition-group>
 
-		<br />
-
 		<aside class="menu">
-			<ul class="menu-list">
+			<ul class="menu-list scrollable-list">
 				<li v-for="(user, index) in users.loggedIn" :key="index">
 					<router-link
 						:to="{
@@ -50,16 +50,28 @@
 				</li>
 			</ul>
 		</aside>
+
+		<button
+			class="button is-primary tab-actionable-button"
+			@click="copyToClipboard()"
+		>
+			<i class="material-icons icon-with-button">share</i>
+			<span class="optional-desktop-only-text">
+				Share (copy to clipboard)
+			</span>
+		</button>
 	</div>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import Toast from "toasters";
 
 export default {
 	data() {
 		return {
-			notesUri: ""
+			notesUri: "",
+			frontendDomain: ""
 		};
 	},
 	computed: mapState({
@@ -69,7 +81,22 @@ export default {
 	mounted() {
 		lofig.get("frontendDomain").then(frontendDomain => {
 			this.notesUri = encodeURI(`${frontendDomain}/assets/notes.png`);
+			this.frontendDomain = frontendDomain;
 		});
+	},
+	methods: {
+		async copyToClipboard() {
+			try {
+				await navigator.clipboard.writeText(
+					this.frontendDomain + this.$route.fullPath
+				);
+			} catch (err) {
+				new Toast({
+					content: "Failed to copy to clipboard.",
+					timeout: 8000
+				});
+			}
+		}
 	}
 };
 </script>
@@ -106,33 +133,46 @@ export default {
 #users {
 	background-color: #fff;
 	margin-bottom: 20px;
-	padding: 10px;
 	border-radius: 0 0 5px 5px;
 	max-height: 100%;
 
-	li {
-		margin-top: 10px;
+	.menu {
+		padding: 0 10px;
+		margin-top: 20px;
+		width: 100%;
+		overflow: auto;
+		height: calc(100% - 20px - 40px);
 
-		a {
-			display: flex;
-			align-items: center;
-			padding: 5px 10px;
-			border: 0.5px $light-grey-2 solid;
-			border-radius: 3px;
-			cursor: pointer;
+		.menu-list {
+			padding: 0 10px;
+		}
 
-			&:hover {
-				background-color: #eee;
-				color: #000;
+		li {
+			&:not(:first-of-type) {
+				margin-top: 10px;
 			}
 
-			img {
-				background-color: #fff;
-				width: 35px;
-				height: 35px;
-				border-radius: 100%;
-				border: 2px solid $light-grey;
-				margin-right: 10px;
+			a {
+				display: flex;
+				align-items: center;
+				padding: 5px 10px;
+				border: 0.5px $light-grey-2 solid;
+				border-radius: 3px;
+				cursor: pointer;
+
+				&:hover {
+					background-color: #eee;
+					color: #000;
+				}
+
+				img {
+					background-color: #fff;
+					width: 35px;
+					height: 35px;
+					border-radius: 100%;
+					border: 2px solid $light-grey;
+					margin-right: 10px;
+				}
 			}
 		}
 	}

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

@@ -134,11 +134,19 @@ export default {
 	position: absolute;
 	bottom: 0;
 	border: 0;
+	background-color: var(--station-theme) !important;
+	color: $white !important;
 
 	&:active,
 	&:focus {
 		border: 0;
 	}
+
+	&:hover,
+	&:focus {
+		background-color: var(--station-theme) !important;
+		filter: brightness(90%);
+	}
 }
 
 /deep/ .scrollable-list {

frontend/src/store/modules/station.js

@@ -5,7 +5,10 @@ const state = {
 	privatePlaylistQueueSelected: null,
 	editing: {},
 	userCount: 0,
-	users: {},
+	users: {
+		loggedIn: [],
+		loggedOut: []
+	},
 	currentSong: {},
 	previousSong: null,
 	songsList: [],