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

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

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