upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-06-09 08:44:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 11

Fix keyboard navigation

Browse source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2020-08-17 20:04:05 +02:00
parent 38afee82bd
commit fa2072e36b
No known key found for this signature in database
GPG key ID: 4C614C6ED2CDE6DF
2 changed files with 36 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
apps/dashboard/src/App.vue
View file

@ -29,7 +29,9 @@
<a v-tooltip="tooltip"
class="edit-panels icon-rename"
tabindex="0"
@click="showModal">{{ t('dashboard', 'Customize') }}</a>
@click="showModal"
@keyup.enter="showModal"
@keyup.space="showModal">{{ t('dashboard', 'Customize') }}</a>
</div>
<Modal v-if="modal" @close="closeModal">
@ -427,6 +429,7 @@ export default {
opacity: 1;
text-align: center;
&:focus,
&:hover {
opacity: 1;
background-color: var(--color-background-hover);

48
apps/dashboard/src/components/BackgroundSettings.vue
View file

@ -22,27 +22,35 @@
<template>
<div class="background-selector">
<div class="background" tabindex="0" @click="pickFile">
<a class="background filepicker"
tabindex="0"
@click="pickFile"
@keyup.enter="pickFile"
@keyup.space="pickFile">
<div class="background--preview">
{{ t('dashboard', 'Pick from files') }}
</div>
</div>
<div class="background default"
:class="{ 'icon-loading': loading === 'default' }"
</a>
<a class="background default"
tabindex="0"
@click="setDefault()">
:class="{ 'icon-loading': loading === 'default' }"
@click="setDefault"
@keyup.enter="setDefault"
@keyup.space="setDefault">
<div class="background--preview">
Default
{{ t('dashboard', 'Default images') }}
</div>
</div>
<div v-for="background in shippedBackgrounds"
</a>
<a v-for="background in shippedBackgrounds"
:key="background.name"
tabindex="0"
class="background"
:class="{ 'icon-loading': loading === background.name }"
tabindex="0"
@click="setShipped(background.name)">
@click="setShipped(background.name)"
@keyup.enter="setShipped(background.name)"
@keyup.space="setShipped(background.name)">
<div class="background--preview" :style="{ 'background-image': 'url(' + background.url + ')' }" />
</div>
</a>
</div>
</template>
@ -138,22 +146,30 @@ export default {
margin: 8px;
text-align: center;
border-radius: var(--border-radius-large);
border-radius: var(--border-radius-large);
border: 2px solid var(--color-main-background);
overflow: hidden;
&.current {
background-image: var(--color-background-dark);
}
&--preview {
width: 172px;
width: 100%;
height: 96px;
background-size: cover;
background-position: center center;
border-radius: var(--border-radius-large);
border: 2px solid var(--color-main-background);
}
&:hover .background--preview,
&:focus .background--preview {
&.filepicker, &.default {
border: 2px solid var(--color-border);
.background--preview {
line-height: 100px;
}
}
&:hover,
&:focus {
border: 2px solid var(--color-primary);
}
}