From 86fd0eb3a3e33f3ea2c9cc078af4a8fd33f22c79 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Mon, 19 Oct 2020 21:23:26 +0200
Subject: [PATCH] further table styling

---
 src/components/Table.vue | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index 3c7d97e..4813db1 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -1,5 +1,5 @@
 <template>
-	<table id="table">
+	<table v-if="stationData" id="table">
 		<thead>
 			<tr>
 				<th />
@@ -9,14 +9,16 @@
 				<th />
 			</tr>
 		</thead>
-		<tbody v-if="stationData">
+		<tbody>
 			<tr
 				v-for="(station, idx) in stationData"
 				:key="idx"
 				:class="{ selected: idx === activeItem}">
 				<td @click="doPlay">
 					<div class="stationIcon"
-						:style="{ backgroundImage: `url('${ station.favicon }')` }" />
+						:style="{ backgroundImage: `url('${ station.favicon }')` }">
+						<span class="icon-starred" />
+					</div>
 				</td>
 				<td class="filenameColumn" @click="doPlay(idx, station)">
 					<span class="innernametext">
@@ -25,7 +27,7 @@
 				</td>
 				<td class="actionColumn">
 					<Actions>
-						<ActionButton icon="icon-star" :close-after-click="true">
+						<ActionButton icon="icon-star" :close-after-click="true" @click="doFavor(idx, station)">
 							{{ t('radio', 'Add to favorites') }}
 						</ActionButton>
 						<ActionButton icon="icon-info" :close-after-click="true">
@@ -64,6 +66,9 @@ export default {
 			this.activeItem = idx
 			this.$emit('doPlay', station)
 		},
+		doFavor(idx, station) {
+			this.$emit('doFavor', station)
+		},
 	},
 }
 </script>
@@ -105,6 +110,7 @@ table {
 			background-position: 8px center;
 			background-repeat: no-repeat;
 			border-bottom: 1px solid var(--color-border);
+			cursor: pointer;
 		}
 
 		tr {
@@ -114,10 +120,10 @@ table {
 			tr:hover, tr:focus, tr.mouseOver td {
 				background-color: var(--color-background-hover);
 			}
-		}
 
-		tr.selected {
-			background-color: var(--color-primary-light);
+			tr.selected {
+				background-color: var(--color-primary-light);
+			}
 		}
 
 		tr td:first-child {
@@ -133,6 +139,7 @@ table {
 			position: relative;
 			vertical-align: top;
 			user-select: none;
+			cursor: pointer;
 		}
 
 		.stationIcon {
@@ -143,6 +150,17 @@ table {
 			background-position: center;
 		}
 
+		.icon-starred {
+			background-image: var(--icon-star-dark-fc0);
+			vertical-align: middle;
+			background-size: 16px 16px;
+			display: inline-block;
+			background-repeat: no-repeat;
+			background-position: center;
+			min-width: 16px;
+			min-height: 16px;
+		}
+
 		.actionColumn {
 			width: auto;
 			padding-right: 40px;