From 1e61cf617a383763c27175a6c3196e8fdb93bf94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 18 Aug 2020 20:30:12 +0200
Subject: [PATCH] Add active indicator to background selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/dashboard/src/App.vue                    |  2 +-
 .../src/components/BackgroundSettings.vue     | 28 ++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 8a5daf904c..294fddf259 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -58,7 +58,7 @@
 				<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
 
 				<h3>{{ t('dashboard', 'Change background image') }}</h3>
-				<BackgroundSettings @updateBackground="updateBackground" />
+				<BackgroundSettings :background="background" @updateBackground="updateBackground" />
 
 				<h3>{{ t('dashboard', 'Credits') }}</h3>
 				<p>{{ t('dashboard', 'Photos') }}: <a href="https://www.flickr.com/photos/paszczak000/8715851521/" target="_blank" rel="noopener">Clouds (Kamil Porembiński)</a>, <a href="https://www.flickr.com/photos/148302424@N05/36591009215/" target="_blank" rel="noopener">Un beau soir dété (Tanguy Domenge)</a>.</p>
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
index 50a055a126..7c43ed9ff3 100644
--- a/apps/dashboard/src/components/BackgroundSettings.vue
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -23,6 +23,7 @@
 <template>
 	<div class="background-selector">
 		<a class="background filepicker"
+			:class="{ active: background === 'custom' }"
 			tabindex="0"
 			@click="pickFile"
 			@keyup.enter="pickFile"
@@ -31,29 +32,30 @@
 		</a>
 		<a class="background default"
 			tabindex="0"
-			:class="{ 'icon-loading': loading === 'default' }"
+			:class="{ 'icon-loading': loading === 'default', active: background === 'default' }"
 			@click="setDefault"
 			@keyup.enter="setDefault"
 			@keyup.space="setDefault">
 			{{ t('dashboard', 'Default images') }}
 		</a>
 		<a class="background color"
+			:class="{ active: background === 'custom' }"
 			tabindex="0"
 			@click="pickColor"
 			@keyup.enter="pickColor"
 			@keyup.space="pickColor">
 			{{ t('dashboard', 'Plain background') }}
 		</a>
-		<a v-for="background in shippedBackgrounds"
-			:key="background.name"
-			v-tooltip="background.details.attribution"
+		<a v-for="shippedBackground in shippedBackgrounds"
+			:key="shippedBackground.name"
+			v-tooltip="shippedBackground.details.attribution"
+			:class="{ 'icon-loading': loading === shippedBackground.name, active: background === shippedBackground.name }"
 			tabindex="0"
 			class="background"
-			:class="{ 'icon-loading': loading === background.name }"
-			:style="{ 'background-image': 'url(' + background.url + ')' }"
-			@click="setShipped(background.name)"
-			@keyup.enter="setShipped(background.name)"
-			@keyup.space="setShipped(background.name)" />
+			:style="{ 'background-image': 'url(' + shippedBackground.url + ')' }"
+			@click="setShipped(shippedBackground.name)"
+			@keyup.enter="setShipped(shippedBackground.name)"
+			@keyup.space="setShipped(shippedBackground.name)" />
 	</div>
 </template>
 
@@ -67,6 +69,12 @@ const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
 
 export default {
 	name: 'BackgroundSettings',
+	props: {
+		background: {
+			type: String,
+			default: 'default',
+		},
+	},
 	data() {
 		return {
 			backgroundImage: generateUrl('/apps/dashboard/background') + '?v=' + Date.now(),
@@ -147,7 +155,6 @@ export default {
             background-position: center center;
 			text-align: center;
             border-radius: var(--border-radius-large);
-			border-radius: var(--border-radius-large);
 			border: 2px solid var(--color-main-background);
 			overflow: hidden;
 
@@ -165,6 +172,7 @@ export default {
 				color: var(--color-primary-text);
 			}
 
+			&.active,
 			&:hover,
             &:focus {
                 border: 2px solid var(--color-primary);