From 2a81ea90db541caf9a7a69b33e8145784e9313b8 Mon Sep 17 00:00:00 2001
From: blackywkl <blackywkl@gmail.com>
Date: Mon, 2 Dec 2019 23:30:18 +0800
Subject: [PATCH] feat: add animation for disable multiple selection and break
 word for filename in info panel (#922)

---
 frontend/src/components/Header.vue       |  6 +++---
 frontend/src/components/prompts/Info.vue |  2 +-
 frontend/src/css/base.css                |  4 ++++
 frontend/src/css/listing.css             | 17 +----------------
 4 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index 0cfc4cbe..2ca5658d 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -47,7 +47,7 @@
           <upload-button v-show="showUpload"></upload-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>
             <span>{{ $t('buttons.select') }}</span>
           </button>
@@ -177,8 +177,8 @@ export default {
     openSearch () {
       this.$store.commit('showHover', 'search')
     },
-    openSelect () {
-      this.$store.commit('multiple', true)
+    toggleMultipleSelection () {
+      this.$store.commit('multiple', !this.multiple)
       this.resetPrompts()
     },
     resetPrompts () {
diff --git a/frontend/src/components/prompts/Info.vue b/frontend/src/components/prompts/Info.vue
index 3d1cc0d5..b1c1c72e 100644
--- a/frontend/src/components/prompts/Info.vue
+++ b/frontend/src/components/prompts/Info.vue
@@ -7,7 +7,7 @@
     <div class="card-content">
       <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="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}</p>
 
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 707a389b..552fa691 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -124,3 +124,7 @@ main {
   width: 0;
   transition: .2s ease width;
 }
+
+.break-word {
+  word-break: break-all;
+}
\ No newline at end of file
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index 994d396c..48c78f10 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -12,10 +12,8 @@
 
 #listing>div {
   display: flex;
-  padding: 0;
   flex-wrap: wrap;
   justify-content: flex-start;
-  position: relative;
 }
 
 #listing .item {
@@ -207,16 +205,6 @@
   font-weight: bold;
 }
 
-@keyframes slidein {
-  from {
-    bottom: -4em;
-  }
-
-  to {
-    bottom: 0;
-  }
-}
-
 #listing #multiple-selection {
   position: fixed;
   bottom: -4em;
@@ -225,16 +213,13 @@
   width: 100%;
   background-color: var(--blue);
   height: 4em;
-  display: none;
   padding: 0.5em 0.5em 0.5em 1em;
   justify-content: space-between;
-  align-items: center;
   transition: .2s ease bottom;
 }
 
 #listing #multiple-selection.active {
-  animation: slidein 0.2s forwards;
-  display: flex;
+  bottom: 0;
 }
 
 #listing #multiple-selection p,