fix: multiple selection enabled always visible (#30)

Although I couldn't reproduce #29, this fixes #29. It now truly hides the box while multiple selection isn't activated.

License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias 2018-08-20 09:03:47 +01:00 committed by GitHub
parent 62106cc0a4
commit fa67652ba4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions

View File

@ -78,7 +78,7 @@
<input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple> <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
<div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection"> <div :class="{ active: $store.state.multiple }" id="multiple-selection">
<p>{{ $t('files.multipleSelectionEnabled') }}</p> <p>{{ $t('files.multipleSelectionEnabled') }}</p>
<div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action"> <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
<i class="material-icons">clear</i> <i class="material-icons">clear</i>

View File

@ -212,6 +212,16 @@
font-weight: bold; font-weight: bold;
} }
@keyframes slidein {
from {
bottom: -4em;
}
to {
bottom: 0;
}
}
#listing #multiple-selection { #listing #multiple-selection {
position: fixed; position: fixed;
bottom: -4em; bottom: -4em;
@ -220,7 +230,7 @@
width: 100%; width: 100%;
background-color: #2196f3; background-color: #2196f3;
height: 4em; height: 4em;
display: flex !important; display: none;
padding: 0.5em 0.5em 0.5em 1em; padding: 0.5em 0.5em 0.5em 1em;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -228,7 +238,8 @@
} }
#listing #multiple-selection.active { #listing #multiple-selection.active {
bottom: 0; animation: slidein 0.2s forwards;
display: flex;
} }
#listing #multiple-selection p, #listing #multiple-selection p,