From 89e15b6d424ed98d31ebabf1b3149c300d758916 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Mon, 6 Mar 2023 14:20:10 +0100
Subject: [PATCH] Add small animation for workflow cards
#37
---
.../transitions/CardTransitionGroup.vue | 31 +++++++++++++++++++
.../transitions/ListTransitionGroup.vue | 31 +++++++++++++++++++
src/views/object-storage/S3KeysView.vue | 2 +-
src/views/workflows/ListWorkflowsView.vue | 5 +--
4 files changed, 66 insertions(+), 3 deletions(-)
create mode 100644 src/components/transitions/CardTransitionGroup.vue
create mode 100644 src/components/transitions/ListTransitionGroup.vue
diff --git a/src/components/transitions/CardTransitionGroup.vue b/src/components/transitions/CardTransitionGroup.vue
new file mode 100644
index 0000000..677b5fa
--- /dev/null
+++ b/src/components/transitions/CardTransitionGroup.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps({
+ tag: { type: String, required: false, default: "div" },
+});
+</script>
+
+<template>
+ <transition-group name="card" :tag="tag">
+ <slot></slot>
+ </transition-group>
+</template>
+
+<style>
+.card-move, /* apply transition to moving elements */
+.card-enter-active,
+.card-leave-active {
+ transition: all 0.5s ease;
+}
+
+.card-enter-from,
+.card-leave-to {
+ opacity: 0;
+ transform: scale(0);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+ animations can be calculated correctly. */
+.card-leave-active {
+ position: absolute;
+}
+</style>
diff --git a/src/components/transitions/ListTransitionGroup.vue b/src/components/transitions/ListTransitionGroup.vue
new file mode 100644
index 0000000..59f342d
--- /dev/null
+++ b/src/components/transitions/ListTransitionGroup.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+defineProps({
+ tag: { type: String, required: false, default: "div" },
+});
+</script>
+
+<template>
+ <transition-group name="list" :tag="tag">
+ <slot></slot>
+ </transition-group>
+</template>
+
+<style>
+.list-move, /* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+ transition: all 0.3s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+ transform: rotateX(90deg);
+ transform-origin: center top;
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+ animations can be calculated correctly. */
+.list-leave-active {
+ position: absolute;
+}
+</style>
diff --git a/src/views/object-storage/S3KeysView.vue b/src/views/object-storage/S3KeysView.vue
index 42766a2..4c09afb 100644
--- a/src/views/object-storage/S3KeysView.vue
+++ b/src/views/object-storage/S3KeysView.vue
@@ -139,7 +139,7 @@ onMounted(() => {
<button
v-for="(s3key, index) in keyState.keys"
:key="s3key.access_key"
- class="btn w-100 fs-5 mb-3"
+ class="btn w-100 fs-5 mb-3 text-truncate"
type="button"
@click="keyState.activeKey = index"
:class="{
diff --git a/src/views/workflows/ListWorkflowsView.vue b/src/views/workflows/ListWorkflowsView.vue
index f840a23..8a35758 100644
--- a/src/views/workflows/ListWorkflowsView.vue
+++ b/src/views/workflows/ListWorkflowsView.vue
@@ -4,6 +4,7 @@ import type { ComputedRef } from "vue";
import { useWorkflowStore } from "@/stores/workflows";
import type { WorkflowOut } from "@/client/workflow";
import WorkflowCard from "@/components/workflows/WorkflowCard.vue";
+import CardTransitionGroup from "@/components/transitions/CardTransitionGroup.vue";
import dayjs from "dayjs";
import BootstrapIcon from "@/components/BootstrapIcon.vue";
@@ -155,7 +156,7 @@ onMounted(() => {
workflowsState.filterString
}}'
</div>
- <div
+ <CardTransitionGroup
v-else
class="d-flex flex-wrap align-items-center justify-content-between"
>
@@ -165,7 +166,7 @@ onMounted(() => {
:workflow="workflow"
:loading="false"
/>
- </div>
+ </CardTransitionGroup>
</div>
<div
v-else
--
GitLab