added outline styles for keyboard nav

This commit is contained in:
Danny Coates 2019-02-20 15:58:44 -08:00
parent 060b6835f1
commit b6a703d5de
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
6 changed files with 45 additions and 20 deletions

View File

@ -13,6 +13,10 @@ a {
text-decoration: none;
}
a:focus {
outline: 1px dotted grey;
}
body {
background-image: url('../assets/bg.svg');
background-position: center;
@ -96,10 +100,6 @@ body {
cursor: auto;
}
.delete:hover {
opacity: 0.7;
}
details {
overflow: hidden;
}
@ -278,6 +278,12 @@ select {
}
}
@variants focus {
.outline {
outline: 1px dotted grey;
}
}
.word-break-all {
word-break: break-all;
}

View File

@ -62,7 +62,7 @@ class Account extends Component {
return html`
<send-account>
<button
class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark"
class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark focus:outline"
onclick="${e => this.login(e)}"
>
${translate('signInMenuOption')}

View File

@ -157,7 +157,7 @@ module.exports = function(state, emit, archive) {
platform() !== 'android'
? html`
<button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-center"
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
onclick=${copy}
>
<img src="${assets.get('copy-16.svg')}" class="mr-2" />
@ -178,6 +178,7 @@ module.exports = function(state, emit, archive) {
<a
class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker"
href="${archive.url}"
tabindex="0"
>
<img src="${assets.get('dl.svg')}" class="mr-2" />
${state.translate('downloadButtonLabel')}
@ -194,7 +195,7 @@ module.exports = function(state, emit, archive) {
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
type="image"
class="float-right self-center text-white delete"
class="float-right self-center text-white hover:opacity-75 focus:outline"
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick=${del}/>
@ -251,9 +252,11 @@ module.exports.wip = function(state, emit) {
>
<input
id="file-upload"
class="hidden"
class="opacity-0 w-0"
type="file"
multiple
onfocus="${focus}"
onblur="${blur}"
onchange="${add}"
/>
<label
@ -273,7 +276,7 @@ module.exports.wip = function(state, emit) {
${expiryOptions(state, emit)} ${password(state, emit)}
<button
id="upload-btn"
class="btn rounded-lg flex-no-shrink"
class="btn rounded-lg flex-no-shrink focus:outline"
title="${state.translate('uploadFilesButton')}"
onclick="${upload}"
>
@ -282,6 +285,16 @@ module.exports.wip = function(state, emit) {
</send-upload-area>
`;
function focus(event) {
event.target.nextElementSibling.firstElementChild.classList.add('outline');
}
function blur(event) {
event.target.nextElementSibling.firstElementChild.classList.remove(
'outline'
);
}
function upload(event) {
window.scrollTo(0, 0);
event.preventDefault();
@ -307,7 +320,7 @@ module.exports.wip = function(state, emit) {
return html`
<input
type="image"
class="self-center text-white ml-4 h-4"
class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline"
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick="${del}"
@ -399,11 +412,14 @@ module.exports.empty = function(state, emit) {
`;
function focus(event) {
event.target.nextElementSibling.classList.add('bg-blue-darker');
event.target.nextElementSibling.classList.add('bg-blue-darker', 'outline');
}
function blur(event) {
event.target.nextElementSibling.classList.remove('bg-blue-darker');
event.target.nextElementSibling.classList.remove(
'bg-blue-darker',
'outline'
);
}
function add(event) {
@ -433,7 +449,7 @@ module.exports.preview = function(state, emit) {
</div>
<button
id="download-btn"
class="btn rounded-lg mt-4 w-full flex-no-shrink"
class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}

View File

@ -18,14 +18,18 @@ module.exports = function(name, url) {
value="${url}"
readonly="true"
/>
<button class="btn rounded-lg w-full flex-no-shrink" onclick="${copy}">
<button
class="btn rounded-lg w-full flex-no-shrink focus:outline"
onclick="${copy}"
>
${state.translate('copyUrlFormButton')}
</button>
<a
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer"
<button
class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
onclick="${close}"
>${state.translate('okButton')}</a
>
${state.translate('okButton')}
</button>
</send-copy-dialog>
`;

View File

@ -68,8 +68,6 @@ function password(state, emit) {
event.preventDefault();
const el = document.getElementById('password-input');
const password = el.value;
// clear the value to prevent the save password dialog
el.value = '';
if (password.length > 0) {
document.getElementById('password-btn').disabled = true;
state.fileInfo.url = window.location.href;

View File

@ -457,6 +457,7 @@ module.exports = {
width: {
auto: 'auto',
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
@ -861,7 +862,7 @@ module.exports = {
minHeight: ['responsive'],
minWidth: ['responsive'],
negativeMargin: ['responsive'],
opacity: ['responsive'],
opacity: ['responsive', 'hover'],
outline: ['focus'],
overflow: ['responsive'],
padding: ['responsive'],