b4tman
/
pub1c-web.frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

animations

This commit is contained in:
Dmitry Belyaev 2021-06-07 13:47:09 +03:00
parent 6f338806ed
commit 4c8df5ba9c
Signed by: b4tman
GPG Key ID: 41A00BF15EA7E5F3
1 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/InfobaseListItem.vue
View File

@ -4,57 +4,65 @@
<td class="text-center">{{ name }}</td> <td class="text-center">{{ name }}</td>
<td class="text-start"> <td class="text-start">
<template v-if="publicated"> <template v-if="publicated">
<InfobaseURLEditor <transition name="slide-fade" mode="out-in">
v-if="url_edit" <InfobaseURLEditor
:infobase_name="name" v-if="url_edit"
:key="name" :infobase_name="name"
:init_url="url" :key="name"
@submit="apply_edit_url" :init_url="url"
@cancel="cancel_edit_url" @submit="apply_edit_url"
/> @cancel="cancel_edit_url"
<a /> </transition
class="text-break" ><transition name="fade-fast" mode="out-in">
v-if="!url_edit" <a
v-bind:href="url_full" class="text-break"
target="blank" v-if="!url_edit"
>{{ url }}</a v-bind:href="url_full"
target="blank"
style="position: absolute"
>{{ url }}</a
></transition
> >
</template> </template>
</td> </td>
<td class="text-end"> <td class="text-end">
<div v-if="!url_edit && !is_locked" class="btn-group shadow" role="group"> <transition name="slide-left-fade" mode="out-in">
<button <template v-if="!url_edit">
v-if="publicated" <transition name="slide-left-fade" mode="out-in">
type="button" <div v-if="!is_locked" class="btn-group shadow" role="group">
class="btn btn-warning" <button
@click="start_edit_url" v-if="publicated"
title="Изменить URL" type="button"
v-tooltip:left class="btn btn-warning"
> @click="start_edit_url"
Изменить title="Изменить URL"
</button> v-tooltip:left
<button >
v-if="publicated" Изменить
type="button" </button>
class="btn btn-danger" <button
@click="remove_publication" v-if="publicated"
title="Снять с публикации" type="button"
v-tooltip:top class="btn btn-danger"
> @click="remove_publication"
Отменить title="Снять с публикации"
</button> v-tooltip:top
<button >
v-if="!publicated" Отменить
type="button" </button>
class="btn btn-primary" <button
@click="add_publication" v-if="!publicated"
title="Опубликовать базу" type="button"
v-tooltip:left class="btn btn-primary"
> @click="add_publication"
Публиковать title="Опубликовать базу"
</button> v-tooltip:left
</div> >
<ItemLoading v-if="is_locked" /> Публиковать
</button>
</div>
<ItemLoading v-else /> </transition></template
></transition>
</td> </td>
</tr> </tr>
</template> </template>
@ -129,3 +137,38 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.slide-fade-enter-active {
transition: all 0.2s ease-out;
}
.slide-fade-leave-active {
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(40px);
opacity: 0;
}
.slide-left-fade-enter-active {
transition: all 0.2s ease-out;
}
.slide-left-fade-leave-active {
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-left-fade-enter-from,
.slide-left-fade-leave-to {
transform: translateX(-40px);
opacity: 0;
}
.fade-fast-enter-active {
transition: all 1s ease-out;
}
.fade-fast-leave-active {
opacity: 0;
}
.fade-fast-enter-from,
.fade-fast-leave-to {
opacity: 0;
}
</style>