updates

Former-commit-id: f1539e92838e1140679ef920b6371b9d391af69c [formerly c84baa55075fee51ebb721d6b6696370d3abbeb8] [formerly 9ed81811e74619df1adb92c12a50d37915eadb92 [formerly 98a92a3da0f2147215ea219f6521766a269b8228]]
Former-commit-id: d84ec2952d31bd0bd1242be89487dd7b58db2749 [formerly 4cadf618b95922326d41a20d565d7e063afc1045]
Former-commit-id: 8bdba61ef5e95c8662ca27c0964ad9d91b3e8e8c

_assets/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" :class="{ multiple }">
     <header>
       <div>
         <img src="./assets/logo.svg" alt="File Manager">
@@ -31,21 +31,6 @@
     </main>
 
     <preview v-if="req.kind === 'preview'"></preview> 
-
-    <!-- TODO: show on listing and allowedit -->
-    <div class="floating">
-        <div tabindex="0" role="button" class="action" id="new">
-            <i class="material-icons" title="New file or directory">add</i>
-        </div>
-    </div>
-
-    <!-- TODO ??? -->
-     <div id="multiple-selection" class="mobile-only">
-        <p>Multiple selection enabled</p>
-        <div tabindex="0" role="button" class="action" id="multiple-selection-cancel">
-            <i class="material-icons" title="Clear">clear</i>
-        </div>
-    </div>
     
     <rename-prompt v-if="showRename" :class="{ active: showRename }"></rename-prompt>
     <delete-prompt v-if="showDelete" :class="{ active: showDelete }"></delete-prompt>
@@ -170,6 +155,8 @@ export default {
       url: window.location.pathname,
       name: document.title
     }, document.title, window.location.pathname)
+
+    document.getElementById('loading').classList.add('done')
   },
   data: function () {
     return window.info

_assets/src/components/Listing.vue

@@ -58,6 +58,20 @@
         </div>
 
         <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
+
+        <!-- TODO: show on listing and allowedit -->
+        <div class="floating">
+        <div tabindex="0" role="button" class="action" id="new">
+        <i class="material-icons" title="New file or directory">add</i>
+        </div>
+        </div>
+
+        <div v-show="multiple" :class="{ active: multiple }" id="multiple-selection">
+          <p>Multiple selection enabled</p>
+          <div @click="cancelMultiple" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
+            <i class="material-icons" title="Clear">clear</i>
+          </div>
+        </div>
     </div>
 </template>
 
@@ -66,6 +80,8 @@ import Item from './ListingItem'
 import webdav from '../webdav.js'
 import page from '../page.js'
 
+var $ = window.info
+
 export default {
   name: 'listing',
   data: function () {
@@ -111,6 +127,9 @@ export default {
     base64: function (name) {
       return window.btoa(name)
     },
+    cancelMultiple: function () {
+      $.multiple = false
+    },
     dragEnter: function (event) {
       let items = document.getElementsByClassName('item')
 

_assets/src/css/listing.css

@@ -1,9 +1,3 @@
-
-
-/* * * * * * * * * * * * * * * *
- *            LISTING          *
- * * * * * * * * * * * * * * * */
-
 #listing {
     max-width: calc(100% - 1.2em);
     width: 100%;
@@ -81,11 +75,6 @@
     vertical-align: middle;
 }
 
-
-/* * * * * * * * * * * * * * * *
- *        LISTING - MOSAIC     *
- * * * * * * * * * * * * * * * */
-
 #listing.mosaic {
     padding-top: 1em;
 }
@@ -114,11 +103,6 @@
     width: calc(100% - 5vw);
 }
 
-
-/* * * * * * * * * * * * * * * *
-  *        LISTING - DETAIL     *
-  * * * * * * * * * * * * * * * */
-
 #listing.list {
     flex-direction: column;
     padding-top: 3.25em;
@@ -240,4 +224,28 @@
 
 #listing.list .item.header .active {
     font-weight: bold;
-}
+}
+
+#listing #multiple-selection {
+    position: fixed;
+    bottom: -4em;
+    left: 0;
+    z-index: 99999;
+    width: 100%;
+    background-color: #2196f3;
+    height: 4em;
+    display: flex !important;
+    padding: 0.5em 0.5em 0.5em 1em;
+    justify-content: space-between;
+    align-items: center;
+    transition: .2s ease bottom;
+}
+
+#listing #multiple-selection.active {
+    bottom: 0;
+}
+
+#listing #multiple-selection p,
+#listing #multiple-selection i {
+    color: #fff;
+}

_assets/src/css/styles.css

@@ -78,6 +78,14 @@ i.spin {
 }
 
 
+#app {
+    transition: .2s ease padding;
+}
+
+#app.multiple {
+    padding-bottom: 4em;
+}
+
 /* * * * * * * * * * * * * * * *
  *            EDITOR           *
  * * * * * * * * * * * * * * * */
@@ -500,37 +508,6 @@ main {
 }
 
 
-/* * * * * * * * * * * * * * * *
- *  MULTIPLE SELECTION DIALOG  *
- * * * * * * * * * * * * * * * */
-
-#multiple-selection {
-    position: fixed;
-    bottom: -4em;
-    left: 0;
-    z-index: 99999999;
-    width: 100%;
-    background-color: #2196f3;
-    height: 4em;
-    display: flex !important;
-    padding: 0.5em 0.5em 0.5em 1em;
-    justify-content: space-between;
-    align-items: center;
-    transition: .2s ease all;
-}
-
-#multiple-selection.active {
-    bottom: 0;
-}
-
-#multiple-selection * {
-    margin: 0;
-}
-
-#multiple-selection p,
-#multiple-selection i {
-    color: #fff;
-}
 
 
 /* * * * * * * * * * * * * * * *