mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-11 07:26:41 +02:00
Add transitions when toggling Edit mode
This commit is contained in:
parent
8b0156d76d
commit
848b53fed8
@ -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>
|
Loading…
x
Reference in New Issue
Block a user