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; opacity: .5;
&:hover, &:hover,
&:focus { &:focus,
#showgridview:focus + & {
opacity: 1; opacity: 1;
} }
} }

View File

@ -24,9 +24,10 @@
<?php endif;?> <?php endif;?>
<input type="hidden" class="max_human_file_size" <input type="hidden" class="max_human_file_size"
value="(max <?php isset($_['uploadMaxHumanFilesize']) ? p($_['uploadMaxHumanFilesize']) : ''; ?>)"> 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 } ?>/> <?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>
<div id="emptycontent" class="hidden"> <div id="emptycontent" class="hidden">

View File

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

View File

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