Add active indicator to background selector
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
parent
d288a11cee
commit
1e61cf617a
|
@ -58,7 +58,7 @@
|
||||||
<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
|
<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
|
||||||
|
|
||||||
<h3>{{ t('dashboard', 'Change background image') }}</h3>
|
<h3>{{ t('dashboard', 'Change background image') }}</h3>
|
||||||
<BackgroundSettings @updateBackground="updateBackground" />
|
<BackgroundSettings :background="background" @updateBackground="updateBackground" />
|
||||||
|
|
||||||
<h3>{{ t('dashboard', 'Credits') }}</h3>
|
<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>
|
<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>
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="background-selector">
|
<div class="background-selector">
|
||||||
<a class="background filepicker"
|
<a class="background filepicker"
|
||||||
|
:class="{ active: background === 'custom' }"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@click="pickFile"
|
@click="pickFile"
|
||||||
@keyup.enter="pickFile"
|
@keyup.enter="pickFile"
|
||||||
|
@ -31,29 +32,30 @@
|
||||||
</a>
|
</a>
|
||||||
<a class="background default"
|
<a class="background default"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
:class="{ 'icon-loading': loading === 'default' }"
|
:class="{ 'icon-loading': loading === 'default', active: background === 'default' }"
|
||||||
@click="setDefault"
|
@click="setDefault"
|
||||||
@keyup.enter="setDefault"
|
@keyup.enter="setDefault"
|
||||||
@keyup.space="setDefault">
|
@keyup.space="setDefault">
|
||||||
{{ t('dashboard', 'Default images') }}
|
{{ t('dashboard', 'Default images') }}
|
||||||
</a>
|
</a>
|
||||||
<a class="background color"
|
<a class="background color"
|
||||||
|
:class="{ active: background === 'custom' }"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@click="pickColor"
|
@click="pickColor"
|
||||||
@keyup.enter="pickColor"
|
@keyup.enter="pickColor"
|
||||||
@keyup.space="pickColor">
|
@keyup.space="pickColor">
|
||||||
{{ t('dashboard', 'Plain background') }}
|
{{ t('dashboard', 'Plain background') }}
|
||||||
</a>
|
</a>
|
||||||
<a v-for="background in shippedBackgrounds"
|
<a v-for="shippedBackground in shippedBackgrounds"
|
||||||
:key="background.name"
|
:key="shippedBackground.name"
|
||||||
v-tooltip="background.details.attribution"
|
v-tooltip="shippedBackground.details.attribution"
|
||||||
|
:class="{ 'icon-loading': loading === shippedBackground.name, active: background === shippedBackground.name }"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="background"
|
class="background"
|
||||||
:class="{ 'icon-loading': loading === background.name }"
|
:style="{ 'background-image': 'url(' + shippedBackground.url + ')' }"
|
||||||
:style="{ 'background-image': 'url(' + background.url + ')' }"
|
@click="setShipped(shippedBackground.name)"
|
||||||
@click="setShipped(background.name)"
|
@keyup.enter="setShipped(shippedBackground.name)"
|
||||||
@keyup.enter="setShipped(background.name)"
|
@keyup.space="setShipped(shippedBackground.name)" />
|
||||||
@keyup.space="setShipped(background.name)" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -67,6 +69,12 @@ const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'BackgroundSettings',
|
name: 'BackgroundSettings',
|
||||||
|
props: {
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
backgroundImage: generateUrl('/apps/dashboard/background') + '?v=' + Date.now(),
|
backgroundImage: generateUrl('/apps/dashboard/background') + '?v=' + Date.now(),
|
||||||
|
@ -147,7 +155,6 @@ export default {
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: var(--border-radius-large);
|
border-radius: var(--border-radius-large);
|
||||||
border-radius: var(--border-radius-large);
|
|
||||||
border: 2px solid var(--color-main-background);
|
border: 2px solid var(--color-main-background);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
@ -165,6 +172,7 @@ export default {
|
||||||
color: var(--color-primary-text);
|
color: var(--color-primary-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.active,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 2px solid var(--color-primary);
|
border: 2px solid var(--color-primary);
|
||||||
|
|
Loading…
Reference in New Issue