add delete button

Former-commit-id: 2f4c852246863df64da176c58ada58ce3f445f18 [formerly 261760e95a81f32882e7bf3b57d6012c63911230] [formerly d2a6c7600bbdd51f717ab10c0310beb0ae4c45a6 [formerly cc917a621e]]
Former-commit-id: 6fe869e23eb2393ab2527d5585faff5755d10741 [formerly c67901bc11bacd4101a89cb1e7c3936fe4b88bb7]
Former-commit-id: 7e39134924a109b64b089ff76ac0777f9ed9e2cb

_assets/_old/templates/actions.tmpl

@@ -1,14 +1,3 @@
-{{ define "info-button" }}
-
-{{ end }}
-
-{{ define "delete-button" }}
-<button aria-label="Delete"  title="Delete" class="action" id="delete">
-    <i class="material-icons">delete</i>
-    <span>Delete</span>
-</button>
-{{ end }}
-
 {{ define "right-side-actions" }}
     {{ template "info-button" }}
 {{ end }}
@@ -33,12 +22,6 @@
     </button>
     {{- end }}
 
-    {{- if and .User.AllowEdit (.IsEditor) }}
-    <button aria-label="Delete"  title="Delete" class="action" id="delete">
-        <i class="material-icons">delete</i>
-        <span>Delete</span>
-    </button>
-    {{- end }}
 
     <button {{ if .IsDir }}data-dropdown{{ end }} aria-label="Download" title="Download" class="action" id="download">
         {{- if .IsEditor}}<a href="?download=true">{{ end }}

_assets/src/App.vue

@@ -6,6 +6,7 @@
         <search></search>
       </div>
       <div>
+        <delete-button></delete-button>
         <info-button></info-button>
       </div>
       <!-- <div id="click-overlay"></div> -->
@@ -26,7 +27,6 @@
 
     <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">
@@ -41,7 +41,7 @@
             <i class="material-icons" title="Clear">clear</i>
         </div>
     </div>
-
+    
     <info-prompt v-show="showInfo" :class="{ active: showInfo }"></info-prompt>
     <help v-show="showHelp" :class="{ active: showHelp }"></help>
 
@@ -58,6 +58,7 @@ import Help from './components/Help'
 import Listing from './components/Listing'
 import InfoButton from './components/InfoButton'
 import InfoPrompt from './components/InfoPrompt'
+import DeleteButton from './components/DeleteButton'
 import css from './css.js'
 
 function updateColumnSizes () {
@@ -122,7 +123,7 @@ window.addEventListener('keydown', (event) => {
 
 export default {
   name: 'app',
-  components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help },
+  components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help, DeleteButton },
   mounted: function () {
     updateColumnSizes()
     window.addEventListener('resize', updateColumnSizes)

_assets/src/components/DeleteButton.vue

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