extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-27 02:36:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add transition to draggable for smother moves

Browse Source
This commit is contained in:
Bubka 2020-03-28 15:07:42 +01:00
parent ffd1199a28
commit bfa1f43ba8
1 changed files with 45 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
resources/js/views/Accounts.vue
View File

@ -32,38 +32,40 @@
readyLabel: '', readyLabel: '',
loadingLabel: 'refreshing' loadingLabel: 'refreshing'
}" > --> }" > -->
<draggable v-model="filteredAccounts" @end="saveOrder" handle=".tfa-dots" class="accounts columns is-multiline is-centered"> <draggable v-model="filteredAccounts" @start="drag = true" @end="saveOrder" ghost-class="ghost" handle=".tfa-dots" animation="200" class="accounts columns is-multiline is-centered">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id"> <transition-group type="transition" :name="!drag ? 'flip-list' : null">
<div class="tfa-container"> <div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts" :key="account.id">
<transition name="slideCheckbox"> <div class="tfa-container">
<div class="tfa-checkbox" v-if="editMode"> <transition name="slideCheckbox">
<div class="field"> <div class="tfa-checkbox" v-if="editMode">
<input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts"> <div class="field">
<label :for="'ckb_' + account.id"></label> <input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
</div> <label :for="'ckb_' + account.id"></label>
</div> </div>
</transition> </div>
<div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)"> </transition>
<div class="tfa-text has-ellipsis"> <div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon"> <div class="tfa-text has-ellipsis">
{{ account.service }} <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span> {{ account.service }}
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
</div>
</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> </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>
</div> </transition-group>
</draggable> </draggable>
<!-- </vue-pull-refresh> --> <!-- </vue-pull-refresh> -->
</div> </div>
@ -153,6 +155,7 @@
form: new Form({ form: new Form({
qrcode: null qrcode: null
}), }),
drag: false,
} }
}, },
@ -256,6 +259,7 @@
}, },
saveOrder() { saveOrder() {
this.drag = false
this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)}) this.axios.patch('/api/twofaccounts/reorder', {orderedIds: this.accounts.map(a => a.id)})
}, },
@ -310,4 +314,15 @@
} }
}; };
</script> </script>
<style>
.flip-list-move {
transition: transform 0.5s;
}
.ghost {
opacity: 1;
/*background: hsl(0, 0%, 21%);*/
}
</style>