From: Abijeet <redacted>
Date: Sun, 17 Jun 2018 08:51:31 +0000 (+0530)
Subject: Fixes issue with having to click the delete icon for attachment twice.
X-Git-Tag: v0.23.0~1^2^2~1^2
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/refs/pull/892/head?ds=sidebyside

Fixes issue with having to click the delete icon for attachment twice.

Fixes #884

This is happening because -

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

Source: https://vuejs.org/v2/guide/reactivity.html

Also added padding to the icons in the attachment section.

Signed-off-by: Abijeet <redacted>
---

diff --git a/resources/assets/js/vues/attachment-manager.js b/resources/assets/js/vues/attachment-manager.js
index 16f96c70b..5acad6184 100644
--- a/resources/assets/js/vues/attachment-manager.js
+++ b/resources/assets/js/vues/attachment-manager.js
@@ -52,7 +52,9 @@ let methods = {
     },
 
     deleteFile(file) {
-        if (!file.deleting) return file.deleting = true;
+        if (!file.deleting) {
+            return this.$set(file, 'deleting', true);
+        }
 
         this.$http.delete(window.baseUrl(`/attachments/${file.id}`)).then(resp => {
             this.$events.emit('success', resp.data.message);
diff --git a/resources/views/pages/form-toolbox.blade.php b/resources/views/pages/form-toolbox.blade.php
index f6ee2510d..01c224543 100644
--- a/resources/views/pages/form-toolbox.blade.php
+++ b/resources/views/pages/form-toolbox.blade.php
@@ -42,8 +42,8 @@
                                             <span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span>
                                         </div>
                                     </div>
-                                    <div @click="startEdit(file)" class="drag-card-action text-center text-primary" style="padding: 0;">@icon('edit')</div>
-                                    <div @click="deleteFile(file)" class="drag-card-action text-center text-neg" style="padding: 0;">@icon('close')</div>
+                                    <div @click="startEdit(file)" class="drag-card-action text-center text-primary">@icon('edit')</div>
+                                    <div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div>
                                 </div>
                             </draggable>
                             <p class="small muted" v-if="files.length === 0">