feat: bouncy save banner :)

Signed-off-by: Evan Song <[email protected]>
modrinth · Oct 16, 2024 · 63f056f · 63f056f
1 parent 7d8a1df
commit 63f056f
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 36 deletions.
diff --git a/apps/frontend/src/components/ui/servers/SaveBanner.vue b/apps/frontend/src/components/ui/servers/SaveBanner.vue
@@ -1,27 +1,30 @@
 <template>
-  <div
-    data-pyro-save-banner
-    class="save-banner fixed bottom-8 left-4 right-4 z-50 mx-auto h-fit w-full max-w-4xl rounded-2xl border-2 border-solid border-divider bg-bg-raised p-4 transition-all duration-300"
-  >
-    <div class="flex flex-col items-center justify-between gap-2 md:flex-row">
-      <span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
-      <div class="flex gap-2">
-        <ButtonStyled type="transparent" color="standard" transparent>
-          <button :disabled="props.isUpdating" @click="props.reset">Reset</button>
-        </ButtonStyled>
-        <ButtonStyled type="standard" color="brand">
-          <button :disabled="props.isUpdating" @click="props.save">
-            {{ props.isUpdating ? "Saving..." : "Save" }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled v-if="props.restart" type="standard" color="brand">
-          <button :disabled="props.isUpdating" @click="saveAndRestart">
-            {{ props.isUpdating ? "Saving..." : "Save & Restart" }}
-          </button>
-        </ButtonStyled>
+  <transition name="save-banner">
+    <div
+      v-if="props.isVisible"
+      data-pyro-save-banner
+      class="save-banner fixed bottom-8 left-4 right-4 z-50 mx-auto h-fit w-full max-w-4xl rounded-2xl border-2 border-solid border-divider bg-bg-raised p-4 transition-all duration-300"
+    >
+      <div class="flex flex-col items-center justify-between gap-2 md:flex-row">
+        <span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
+        <div class="flex gap-2">
+          <ButtonStyled type="transparent" color="standard" transparent>
+            <button :disabled="props.isUpdating" @click="props.reset">Reset</button>
+          </ButtonStyled>
+          <ButtonStyled type="standard" color="brand">
+            <button :disabled="props.isUpdating" @click="props.save">
+              {{ props.isUpdating ? "Saving..." : "Save" }}
+            </button>
+          </ButtonStyled>
+          <ButtonStyled v-if="props.restart" type="standard" color="brand">
+            <button :disabled="props.isUpdating" @click="saveAndRestart">
+              {{ props.isUpdating ? "Saving..." : "Save & Restart" }}
+            </button>
+          </ButtonStyled>
+        </div>
       </div>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script setup lang="ts">
@@ -33,6 +36,7 @@ const props = defineProps<{
   restart?: boolean;
   save: () => void;
   reset: () => void;
+  isVisible: boolean;
   server: Server<["general", "mods", "backups", "network", "startup", "ws", "fs"]>;
 }>();
 
@@ -43,18 +47,60 @@ const saveAndRestart = async () => {
 </script>
 
 <style scoped>
-.save-banner {
-  animation: slide-up 200ms ease;
+.save-banner-enter-active {
+  transition:
+    opacity 800ms,
+    transform 800ms;
 }
 
-@keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.save-banner-leave-active {
+  transition:
+    opacity 200ms,
+    transform 200ms;
+}
+
+.save-banner-enter-active {
+  transition-timing-function: linear(
+    0 0%,
+    0.01 0.8%,
+    0.04 1.6%,
+    0.161 3.3%,
+    0.816 9.4%,
+    1.046 11.9%,
+    1.189 14.4%,
+    1.231 15.7%,
+    1.254 17%,
+    1.259 17.8%,
+    1.257 18.6%,
+    1.236 20.45%,
+    1.194 22.3%,
+    1.057 27%,
+    0.999 29.4%,
+    0.955 32.1%,
+    0.942 33.5%,
+    0.935 34.9%,
+    0.933 36.65%,
+    0.939 38.4%,
+    1 47.3%,
+    1.011 49.95%,
+    1.017 52.6%,
+    1.016 56.4%,
+    1 65.2%,
+    0.996 70.2%,
+    1.001 87.2%,
+    1 100%
+  );
+}
+
+.save-banner-enter-from,
+.save-banner-leave-to {
+  opacity: 0;
+  transform: translateY(100%) scale(0.98);
+}
+
+.save-banner-enter-to,
+.save-banner-leave-from {
+  opacity: 1;
+  transform: none;
 }
 </style>
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/index.vue b/apps/frontend/src/pages/servers/manage/[id]/options/index.vue
@@ -73,7 +73,7 @@
     <UiServersPyroLoading v-else />
     <div class="absolute bottom-[2.5%] left-[2.5%] z-10 w-[95%]">
       <UiServersSaveBanner
-        v-if="hasUnsavedChanges && isValidServerName"
+        :is-visible="!!hasUnsavedChanges && !!isValidServerName"
         :server="props.server"
         :is-updating="isUpdating"
         :save="saveGeneral"

diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/network.vue b/apps/frontend/src/pages/servers/manage/[id]/options/network.vue
@@ -132,7 +132,7 @@
     <UiServersPyroLoading v-else />
     <div class="absolute bottom-[2.5%] left-[2.5%] z-10 w-[95%]">
       <UiServersSaveBanner
-        v-if="hasUnsavedChanges && isValidSubdomain"
+        :is-visible="!!hasUnsavedChanges && !!isValidSubdomain"
         :server="props.server"
         :is-updating="isUpdating"
         :save="saveNetwork"

diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue b/apps/frontend/src/pages/servers/manage/[id]/options/properties.vue
@@ -112,7 +112,7 @@
     <UiServersPyroLoading v-else />
     <div class="absolute bottom-[2.5%] left-[2.5%] z-10 w-[95%]">
       <UiServersSaveBanner
-        v-if="hasUnsavedChanges"
+        :is-visible="!!hasUnsavedChanges"
         :server="props.server"
         :is-updating="isUpdating"
         restart

diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue b/apps/frontend/src/pages/servers/manage/[id]/options/startup.vue
@@ -51,7 +51,7 @@
     <UiServersPyroLoading v-else />
     <div class="absolute bottom-[2.5%] left-[2.5%] z-10 w-[95%]">
       <UiServersSaveBanner
-        v-if="hasUnsavedChanges"
+        :is-visible="!!hasUnsavedChanges"
         :server="props.server"
         :is-updating="isUpdating"
         :save="saveStartup"