github
/
filebrowser
mirror of https://github.com/filebrowser/filebrowser
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add animation for disable multiple selection and break word for filename in info panel (#922)

pull/932/head
blackywkl 2019-12-02 23:30:18 +08:00 committed by Henrique Dias
parent d79d864825
commit 2a81ea90db
4 changed files with 9 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Header.vue
View File

@ -47,7 +47,7 @@
<upload-button v-show="showUpload"></upload-button> <upload-button v-show="showUpload"></upload-button>
<info-button v-show="isFiles"></info-button> <info-button v-show="isFiles"></info-button>
<button v-show="isListing" @click="openSelect" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action"> <button v-show="isListing" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
<i class="material-icons">check_circle</i> <i class="material-icons">check_circle</i>
<span>{{ $t('buttons.select') }}</span> <span>{{ $t('buttons.select') }}</span>
</button> </button>
@ -177,8 +177,8 @@ export default {
openSearch () { openSearch () {
this.$store.commit('showHover', 'search') this.$store.commit('showHover', 'search')
}, },
openSelect () { toggleMultipleSelection () {
this.$store.commit('multiple', true) this.$store.commit('multiple', !this.multiple)
this.resetPrompts() this.resetPrompts()
}, },
resetPrompts () { resetPrompts () {

2
frontend/src/components/prompts/Info.vue
View File

@ -7,7 +7,7 @@
<div class="card-content"> <div class="card-content">
<p v-if="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p> <p v-if="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
<p v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name }}</p> <p class="break-word" v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name }}</p>
<p v-if="!dir || selected.length > 1"><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span> {{ humanSize }}</p> <p v-if="!dir || selected.length > 1"><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span> {{ humanSize }}</p>
<p v-if="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}</p> <p v-if="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}</p>

4
frontend/src/css/base.css
View File

@ -124,3 +124,7 @@ main {
width: 0; width: 0;
transition: .2s ease width; transition: .2s ease width;
} }
.break-word {
word-break: break-all;
}

17
frontend/src/css/listing.css
View File

@ -12,10 +12,8 @@
#listing>div { #listing>div {
display: flex; display: flex;
padding: 0;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
position: relative;
} }
#listing .item { #listing .item {
@ -207,16 +205,6 @@
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;
@ -225,16 +213,13 @@
width: 100%; width: 100%;
background-color: var(--blue); background-color: var(--blue);
height: 4em; height: 4em;
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;
transition: .2s ease bottom; transition: .2s ease bottom;
} }
#listing #multiple-selection.active { #listing #multiple-selection.active {
animation: slidein 0.2s forwards; bottom: 0;
display: flex;
} }
#listing #multiple-selection p, #listing #multiple-selection p,