Add active indicator to background selector

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

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 8a5daf904c48d8ebcf96b36887cd46a6e6f554bb..294fddf259ba925ee86b4ae6833a069a1e84fa2e 100644 (file)
--- 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 50a055a126773164241921f37252440968ca14c0..7c43ed9ff39e78b86c9b220e435589fdfdb2613a 100644 (file)
--- 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);