mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add active indicator to background selector 

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2020-08-18 20:30:12 +02:00
parent d288a11cee
commit 1e61cf617a
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/dashboard/src/App.vue
View File

@ -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>

28
apps/dashboard/src/components/BackgroundSettings.vue
View File

@ -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(),
@ -146,7 +154,6 @@ export default {
background-size: cover; background-size: cover;
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);