Updates on front end :D

Former-commit-id: 032b13b1f3a6216ae6bafde75f583038916b4f74 [formerly 80588a95ad5168ecab65e3d8cc8968bad9a20a6b] [formerly 94b306854bac60361ddf1b945a3edec7204d1327 [formerly 193adea6bb8a5cdc0d4e072b2c59fc0e82f69548]]
Former-commit-id: 67b5219c1a6488c1a797bec42a0dec2036441a48 [formerly 28183c674806c3125a285a48905a01e1e835be7e]
Former-commit-id: d2169aab351eab252ea34e07bb943411aa8e9cb4

_assets/src/components/DeleteButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <button @click="show" aria-label="Delete"  title="Delete" class="action" id="delete">
+    <button @click="show" aria-label="Delete"  title="Delete" class="action">
         <i class="material-icons">delete</i>
         <span>Delete</span>
     </button>

_assets/src/components/DownloadButton.vue

@@ -0,0 +1,35 @@
+<template>
+    <button @click="download" aria-label="Download" title="Download" class="action">
+        <i class="material-icons">file_download</i>
+        <span>Download</span>
+    </button>
+</template>
+
+<script>
+var $ = window.info
+
+export default {
+  name: 'download-button',
+  methods: {
+    download: function (event) {
+      if ($.req.kind !== 'listing') {
+        window.location = window.location.pathname + '?download=true'
+        return
+      }
+
+      /*
+           <ul class="dropdown" id="download-drop">
+            <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
+            <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
+            <a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
+            <a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
+            <a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
+        </ul>
+        */
+      // document.getElementById('upload-input').click()
+      // TODO
+      alert('Not Implemented!')
+    }
+  }
+}
+</script>

_assets/src/components/InfoButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <button @click="show" title="Info" aria-label="Info" class="action" id="info">
+    <button @click="show" title="Info" aria-label="Info" class="action">
         <i class="material-icons">info</i>
         <span>Info</span>
     </button>

_assets/src/components/Listing.vue

@@ -57,9 +57,7 @@
           </item>
         </div>
 
-        <!--
-          <input style="display:none" type="file" id="upload-input" onchange="listing.handleFiles(this.files, '')" value="Upload" multiple>
-          -->
+        <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
     </div>
 </template>
 
@@ -155,6 +153,9 @@ export default {
         })
       }
     },
+    uploadInput: function (event) {
+      this.handleFiles(event.currentTarget.files, '')
+    },
     handleFiles: function (files, base) {
       // buttons.setLoading('upload')
       let promises = []

_assets/src/components/MoveButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <button @click="show" aria-label="Move" title="Move" class="action">
+        <i class="material-icons">forward</i>
+        <span>Move file</span>
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'move-button',
+  methods: {
+    show: function (event) {
+      window.info.showMove = true
+    }
+  }
+}
+</script>

_assets/src/components/Preview.vue

@@ -4,7 +4,11 @@
             <button @click="back" class="action" aria-label="Close Preview" id="close">
                 <i class="material-icons">close</i>
             </button>
-            <!-- TODO: add more buttons -->
+            
+            <rename-button v-if="allowEdit()"></rename-button>
+            <delete-button v-if="allowEdit()"></delete-button>
+            <download-button></download-button>
+            <info-button></info-button>
         </div>
 
         <div class="preview">
@@ -24,9 +28,19 @@
 
 <script>
 import page from '../page'
+import InfoButton from './InfoButton'
+import DeleteButton from './DeleteButton'
+import RenameButton from './RenameButton'
+import DownloadButton from './DownloadButton'
 
 export default {
   name: 'preview',
+  components: {
+    InfoButton,
+    DeleteButton,
+    RenameButton,
+    DownloadButton
+  },
   data: function () {
     return window.info.req.data
   },
@@ -37,6 +51,9 @@ export default {
     back: function (event) {
       let url = page.removeLastDir(window.location.pathname)
       page.open(url)
+    },
+    allowEdit: function (event) {
+      return window.info.user.allowEdit
     }
   }
 }

_assets/src/components/RenameButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <button @click="show" aria-label="Rename" title="Rename" class="action">
+        <i class="material-icons">mode_edit</i>
+        <span>Rename</span>
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'rename-button',
+  methods: {
+    show: function (event) {
+      window.info.showRename = true
+    }
+  }
+}
+</script>

_assets/src/components/SwitchViewButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <button @click="change" aria-label="Switch View" title="Switch View" class="action">
+    <i class="material-icons">{{ icon() }}</i>
+    <span>Switch view</span>
+  </button>
+</template>
+
+<script>
+import page from '../page'
+
+var $ = window.info
+
+export default {
+  name: 'switch-button',
+  methods: {
+    change: function (event) {
+      let url = window.location.pathname + '?display='
+
+      if ($.req.data.display === 'mosaic') {
+        url += 'list'
+      } else {
+        url += 'mosaic'
+      }
+
+      page.open(url)
+    },
+    icon: function () {
+      if ($.req.data.display === 'mosaic') return 'view_list'
+      return 'view_module'
+    }
+  }
+}
+</script>

_assets/src/components/UploadButton.vue

@@ -0,0 +1,17 @@
+<template>
+    <button @click="upload" aria-label="Upload" title="Upload" class="action">
+        <i class="material-icons">file_upload</i>
+        <span>Upload</span>
+    </button>
+</template>
+
+<script>
+export default {
+  name: 'upload-button',
+  methods: {
+    upload: function (event) {
+      document.getElementById('upload-input').click()
+    }
+  }
+}
+</script>