Add active indicator to background selector

Signed-off-by: Julius Härtl <jus@bitgrid.net>

2 files changed, 19 insertions, 11 deletions

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 8a5daf904c4..294fddf259b 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 50a055a1267..7c43ed9ff39 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);