From bfa1f43ba8565f713e1fc70d8c2a48a016ea08d5 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Sat, 28 Mar 2020 15:07:42 +0100
Subject: [PATCH] Add transition to draggable for smother moves

---
 resources/js/views/Accounts.vue | 75 ++++++++++++++++++++-------------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 607b4fda..5317f9ae 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -32,38 +32,40 @@
                 readyLabel: '',
                 loadingLabel: 'refreshing'
                 }" > -->
-                <draggable v-model="filteredAccounts" @end="saveOrder" handle=".tfa-dots" class="accounts columns is-multiline is-centered">
-                    <div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id">
-                        <div class="tfa-container">
-    	                    <transition name="slideCheckbox">
-    	                        <div class="tfa-checkbox" v-if="editMode">
-    	                            <div class="field">
-    	                                <input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
-    	                                <label :for="'ckb_' + account.id"></label>
-    	                            </div>
-    	                        </div>
-    	                    </transition>
-                            <div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">  
-                                <div class="tfa-text has-ellipsis">
-                                    <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
-                                    {{ account.service }}
-                                    <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
+                <draggable v-model="filteredAccounts" @start="drag = true" @end="saveOrder" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts columns is-multiline is-centered">
+                    <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+                        <div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id">
+                            <div class="tfa-container">
+        	                    <transition name="slideCheckbox">
+        	                        <div class="tfa-checkbox" v-if="editMode">
+        	                            <div class="field">
+        	                                <input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
+        	                                <label :for="'ckb_' + account.id"></label>
+        	                            </div>
+        	                        </div>
+        	                    </transition>
+                                <div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">  
+                                    <div class="tfa-text has-ellipsis">
+                                        <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
+                                        {{ account.service }}
+                                        <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
+                                    </div>
                                 </div>
+        	                    <transition name="fadeInOut">
+        	                        <div class="tfa-edit has-text-grey" v-if="editMode">
+        	                            <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
+        	                                {{ $t('commons.edit') }}
+        	                            </router-link>
+        	                        </div>
+        	                    </transition>
+                                <transition name="fadeInOut">
+                                    <div class="tfa-dots has-text-grey" v-if="editMode">
+                                        <font-awesome-icon :icon="['fas', 'bars']" />
+                                    </div>
+                                </transition>
                             </div>
-    	                    <transition name="fadeInOut">
-    	                        <div class="tfa-edit has-text-grey" v-if="editMode">
-    	                            <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
-    	                                {{ $t('commons.edit') }}
-    	                            </router-link>
-    	                        </div>
-    	                    </transition>
-                            <transition name="fadeInOut">
-                                <div class="tfa-dots has-text-grey" v-if="editMode">
-                                    <font-awesome-icon :icon="['fas', 'bars']" />
-                                </div>
-                            </transition>
                         </div>
-                    </div>
+                    </transition-group>
                 </draggable>
             <!-- </vue-pull-refresh> -->
         </div>
@@ -153,6 +155,7 @@
                 form: new Form({
                     qrcode: null
                 }),
+                drag: false,
             }
         },
 
@@ -256,6 +259,7 @@
             },
 
             saveOrder() {
+                this.drag = false
                 this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)})
             },
 
@@ -310,4 +314,15 @@
         }
     };
 
-</script>
\ No newline at end of file
+</script>
+
+<style>
+    .flip-list-move {
+      transition: transform 0.5s;
+    }
+
+    .ghost {
+      opacity: 1;
+      /*background: hsl(0, 0%, 21%);*/
+    }
+</style>
\ No newline at end of file