extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-11 07:26:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add transitions when toggling Edit mode

Browse Source
This commit is contained in:
Bubka 2020-02-10 17:28:30 +01:00
parent 8b0156d76d
commit 848b53fed8
1 changed files with 177 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,12 +34,14 @@
}" class="accounts columns is-multiline is-centered">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts">
<div class="tfa-container">
<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 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">
@ -47,11 +49,13 @@
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
</div>
</div>
<div class="tfa-dots 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 name="fadeInOut">
<div class="tfa-dots 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>
</div>
</div>
</vue-pull-refresh>
@ -68,7 +72,7 @@
<form @submit.prevent="createAccount" @keydown="form.onKeydown($event)">
<div class="columns is-mobile no-account is-vcentered">
<div class="column has-text-centered">
<label class="button is-link is-medium is-rounded is-focused">
<label :class="{'is-loading' : form.isBusy}" class="button is-link is-medium is-rounded is-focused">
<input class="file-input" type="file" accept="image/*" v-on:change="uploadQrcode" ref="qrcodeInput">
{{ $t('twofaccounts.forms.use_qrcode.val') }}
</label>
@ -312,7 +316,167 @@
next()
}
}
};
</script>
<style>
.fadeInOut-enter-active {
animation: fadeIn 500ms
}
.fadeInOut-leave-active {
animation: fadeOut 500ms
}
.slideCheckbox-enter-active {
animation: enterFromTop 500ms
}
.slideCheckbox-enter-active + .tfa-content {
animation: addTopOffset 500ms
}
.slideCheckbox-leave-active {
animation: leaveToTop 500ms
}
.slideCheckbox-leave-active + .tfa-content {
animation: removeTopOffset 500ms
}
@media screen and (max-width: 768px) {
.slideCheckbox-enter-active {
animation: enterFromLeft 500ms
}
.slideCheckbox-enter-active + .tfa-content {
animation: addLeftOffset 500ms
}
.slideCheckbox-leave-active {
animation: leaveToLeft 500ms
}
.slideCheckbox-leave-active + .tfa-content {
animation: removeLeftOffset 500ms
}
}
/*FadeInOut*/
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media screen and (max-width: 768px) {
@keyframes fadeIn {
from {
opacity: 0;
}
75% {
opacity: 0;
}
to {
opacity: 1;
}
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*Enter from left*/
@keyframes enterFromLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes addLeftOffset {
from {
transform: translateX(-2.875rem);
}
to {
transform: translateX(0);
}
}
/*Enter from top*/
@keyframes enterFromTop {
from {
transform: translateY(-50%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes addTopOffset {
from {
transform: translateY(-2rem);
}
to {
transform: translateY(0);
}
}
/*Leave from left*/
@keyframes leaveToLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes removeLeftOffset {
from {
transform: translateX(0);
}
to {
transform: translateX(-2.875rem);
}
}
/*Leave from top*/
@keyframes leaveToTop {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
opacity: 0;
}
}
@keyframes removeTopOffset {
from {
transform: translateY(0);
}
to {
transform: translateY(-2rem);
}
}
</style>