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

Dashboard: fix HTML structure of background picker 

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan C. Borchardt 2020-08-18 13:04:16 +02:00 committed by Julius Härtl
parent 135ceb4a9d
commit 5932376333
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
1 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,9 +27,7 @@
@click="pickFile" @click="pickFile"
@keyup.enter="pickFile" @keyup.enter="pickFile"
@keyup.space="pickFile"> @keyup.space="pickFile">
<div class="background--preview"> {{ t('dashboard', 'Pick from files') }}
{{ t('dashboard', 'Pick from files') }}
</div>
</a> </a>
<a class="background default" <a class="background default"
tabindex="0" tabindex="0"
@ -37,18 +35,14 @@
@click="setDefault" @click="setDefault"
@keyup.enter="setDefault" @keyup.enter="setDefault"
@keyup.space="setDefault"> @keyup.space="setDefault">
<div class="background--preview"> {{ t('dashboard', 'Default images') }}
{{ t('dashboard', 'Default images') }}
</div>
</a> </a>
<a class="background color" <a class="background color"
tabindex="0" tabindex="0"
@click="pickColor" @click="pickColor"
@keyup.enter="pickColor" @keyup.enter="pickColor"
@keyup.space="pickColor"> @keyup.space="pickColor">
<div class="background--preview"> {{ t('dashboard', 'Plain background') }}
{{ t('dashboard', 'Plain background') }}
</div>
</a> </a>
<a v-for="background in shippedBackgrounds" <a v-for="background in shippedBackgrounds"
:key="background.name" :key="background.name"
@ -56,11 +50,10 @@
tabindex="0" tabindex="0"
class="background" class="background"
:class="{ 'icon-loading': loading === background.name }" :class="{ 'icon-loading': loading === background.name }"
:style="{ 'background-image': 'url(' + background.url + ')' }"
@click="setShipped(background.name)" @click="setShipped(background.name)"
@keyup.enter="setShipped(background.name)" @keyup.enter="setShipped(background.name)"
@keyup.space="setShipped(background.name)"> @keyup.space="setShipped(background.name)" />
<div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
</a>
</div> </div>
</template> </template>
@ -148,7 +141,10 @@ export default {
.background { .background {
width: 176px; width: 176px;
height: 96px;
margin: 8px; margin: 8px;
background-size: cover;
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-radius: var(--border-radius-large);
@ -159,21 +155,12 @@ export default {
background-image: var(--color-background-dark); background-image: var(--color-background-dark);
} }
&--preview {
width: 100%;
height: 96px;
background-size: cover;
background-position: center center;
}
&.filepicker, &.default, &.color { &.filepicker, &.default, &.color {
border: 2px solid var(--color-border); border-color: var(--color-border);
.background--preview { line-height: 96px;
line-height: 100px;
}
} }
&.color .background--preview { &.color {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-primary-text); color: var(--color-primary-text);
} }