added outline styles for keyboard nav
This commit is contained in:
parent
060b6835f1
commit
b6a703d5de
14
app/main.css
14
app/main.css
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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')}
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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'],
|
||||
|
|
Loading…
Reference in New Issue