Added turbo_stream animations

app/assets/stylesheets/application.css

@@ -13,3 +13,111 @@
  *= require_tree .
  *= require_self
  */
+
+.animate-job-in {
+  animation: fade-in 0.25s ease-out, slide-in 0.25s ease-out;
+}
+
+.animate-job-out {
+  animation: fade-out 0.25s ease-out, slide-out 0.25s ease-out;
+}
+
+.animate-fade-in {
+  animation: fade-in 0.25s ease-out;
+}
+
+.animate-fade-out {
+  animation: fade-out 0.25s ease-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateX(4rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(4rem);
+  }
+}
+
+.animate-job-item-in {
+  overflow: hidden;
+  animation: slide-down 0.5s ease-out;
+}
+
+.animate-job-item-out {
+  overflow: hidden;
+  animation: slide-up 0.5s ease-out;
+}
+
+/* "max-height: auto" unfortunately does not work here, so we set
+   to a fixed height that is greater than the expected height. */
+@keyframes slide-down {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: 3rem;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    max-height: 3rem;
+  }
+  to {
+    max-height: 0;
+  }
+}
+
+.animate-flash-increase {
+  animation: flash-green 0.5s ease-in-out;
+}
+
+.animate-flash-decrease {
+  animation: flash-red 0.5s ease-in-out;
+}
+
+@keyframes flash-green {
+  from {
+    background-color: #a7f3d0;
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+@keyframes flash-red {
+  from {
+    background-color: #fecaca;
+  }
+  to {
+    background-color: transparent;
+  }
+}

app/javascript/controllers/application.js

@@ -7,3 +7,32 @@ application.debug = false
 window.Stimulus   = application
 
 export { application }
+
+// URL: https://edforshaw.co.uk/hotwire-turbo-stream-animations
+// FIXME: data-stream-exit-class not working..
+document.addEventListener("turbo:before-stream-render", function(event) {
+    // Add a class to an element we are about to add to the page
+    // as defined by its "data-stream-enter-class"
+    if (event.target.firstElementChild instanceof HTMLTemplateElement) {
+      var enterAnimationClass = event.target.templateContent.firstElementChild.dataset.streamEnterClass
+      if (enterAnimationClass) {
+        event.target.templateElement.content.firstElementChild.classList.add(enterAnimationClass)
+      }
+    }
+  
+    // Add a class to an element we are about to remove from the page
+    // as defined by its "data-stream-exit-class"
+    var elementToRemove = document.getElementById(event.target.target)
+    if (elementToRemove) {
+      var streamExitClass = elementToRemove.dataset.streamExitClass
+      if (streamExitClass) {
+        // Intercept the removal of the element
+        event.preventDefault()
+        elementToRemove.classList.add(streamExitClass)
+        // Wait for its animation to end before removing the element
+        elementToRemove.addEventListener("animationend", function() {
+          event.target.performAction()
+        })
+      }
+    }
+  })

app/views/jobs/_job_tr.html.erb

@@ -1,4 +1,4 @@
-<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30">
+<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-15 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase" data-stram-exit-class="animate-job-item-out">
   <td class="p-2 py-3 text-center">
     <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg shadow">
       <%= job.id %>

app/views/operator/jobs/_job_tr.html.erb

@@ -1,4 +1,4 @@
-<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30">
+<tr id="<%= dom_id job %>" class="bg-status-<%= job.status %>-light odd:bg-opacity-20 even:bg-opacity-10 text-hsrm-gray whitespace-nowrap hover:bg-opacity-30" data-stream-enter-class="animate-flash-increase" data-stream-exit-class="animate-fade-out">
   <td class="p-2 py-3 text-center">
     <%= link_to operator_job_path(job) do %>
       <span class="badge badge-xl text-status-<%= job.status %> bg-status-<%= job.status %>-light">
@@ -29,7 +29,7 @@
     <td class="p-1 py-3">
       <% if job.printing? %>
         <div class="flex flex-col items-center">
-          <span class="badge badge-hover p-1">
+          <span class="p-1 badge badge-hover">
             <%= button_to icon("chevron-up", class: "size-5 inline", title: "erhöhen"), increment_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>
           </span>
         <% end %>
@@ -37,7 +37,7 @@
           <%= job.public_send("number_of_plans_#{din}") if job.respond_to? "number_of_plans_#{din}" %>
         </span>
         <% if job.printing? %>
-          <span class="badge badge-hover p-1">
+          <span class="p-1 badge badge-hover">
             <%= button_to icon("chevron-down", class: "size-5 inline", title: "verringern"), decrement_page_operator_job_path(job, din:), method: :patch, form_class: "inline" %>
           </span>
         </div>