Allow focus on input with keyboard

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-10-23 16:49:56 +02:00
parent cf57df6e73
commit 8013dab044
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
4 changed files with 11 additions and 5 deletions

View File

@ -973,7 +973,8 @@ table.dragshadow td.size {
opacity: .5;
&:hover,
&:focus {
&:focus,
#showgridview:focus + & {
opacity: 1;
}
}

View File

@ -24,9 +24,10 @@
<?php endif;?>
<input type="hidden" class="max_human_file_size"
value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)">
<input type="checkbox" class="hidden" id="showgridview"
<input type="checkbox" class="hidden-visually" id="showgridview"
<?php if($_['showgridview']) { ?>checked="checked" <?php } ?>/>
<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>" title="<?php p($l->t('Toggle grid view'))?>" tabindex="0"></label>
<label id="view-toggle" for="showgridview" class="button <?php p($_['showgridview'] ? 'icon-toggle-filelist' : 'icon-toggle-pictures') ?>"
title="<?php p($l->t('Toggle grid view'))?>"></label>
</div>
<div id="emptycontent" class="hidden">

View File

@ -742,6 +742,10 @@ code {
opacity: 1;
}
}
// keyboard focus
#picker-showgridview:focus + #picker-view-toggle {
opacity: 1;
}
.filelist-container {
box-sizing: border-box;

View File

@ -1,7 +1,7 @@
<div id="{dialog_name}" title="{title}">
<span class="dirtree breadcrumb"></span>
<input type="checkbox" class="hidden" id="picker-showgridview" checked="checked" />
<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist" tabindex="0"></label>
<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
<div class="filelist-container">
<div class="emptycontent">
<div class="icon-folder"></div>