From 10d29f93e2e8db7812485c5fa6baa027f25f0d4c Mon Sep 17 00:00:00 2001
From: Hans K <hans@communitycomputing.net>
Date: Wed, 7 Feb 2024 17:31:16 -0500
Subject: [PATCH] Visual feedback when swapping elements in the editor

---
 OpenShow/slides/editor/static/editor/editor.css        | 10 ++++++++++
 .../slides/editor/templates/editor/edit_slide.html     |  2 +-
 .../slides/editor/templates/editor/show_editor.html    |  6 +++---
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/OpenShow/slides/editor/static/editor/editor.css b/OpenShow/slides/editor/static/editor/editor.css
index 0791609..a151e9c 100644
--- a/OpenShow/slides/editor/static/editor/editor.css
+++ b/OpenShow/slides/editor/static/editor/editor.css
@@ -214,4 +214,14 @@ ul > a {
     height: 3rem;
     background-color: #3A7734;
     transition: height, background-color 500ms;
+}
+
+.htmx-swapping:not(#dummy) {
+    background-color: #539c68;
+    opacity: 0;
+    transition: background-color 0.1s, opacity 0.1s;
+}
+
+:not(.htmx-swapping) {
+    transition: background-color 0.1s, opacity 0.1s;
 }
\ No newline at end of file
diff --git a/OpenShow/slides/editor/templates/editor/edit_slide.html b/OpenShow/slides/editor/templates/editor/edit_slide.html
index 8731fe0..166ffbf 100644
--- a/OpenShow/slides/editor/templates/editor/edit_slide.html
+++ b/OpenShow/slides/editor/templates/editor/edit_slide.html
@@ -24,7 +24,7 @@
                 {{ form.order }}
             </fieldset>
 {#            <input type="submit">#}
-            <button hx-select="#editor" hx-target="#editor" hx-swap="outerHTML" hx-post="{% url 'edit-slide' slide.pk %}">Submit</button>
+            <button hx-select="#editor" hx-target="#editor" hx-swap="outerHTML swap:0.1s" hx-post="{% url 'edit-slide' slide.pk %}">Submit</button>
         </form>
         <ul class="segment-list">
             {% for element in slide.get_elements %}
diff --git a/OpenShow/slides/editor/templates/editor/show_editor.html b/OpenShow/slides/editor/templates/editor/show_editor.html
index 2dce9f8..165df1e 100644
--- a/OpenShow/slides/editor/templates/editor/show_editor.html
+++ b/OpenShow/slides/editor/templates/editor/show_editor.html
@@ -32,7 +32,7 @@ <h1>{{ show.name }}</h1>
             {% for segment in show.segments.all %}
                 <li class="show-segment">
                     <span class="segment-title">{{ segment.name }}</span>
-                    <button hx-get="{% url 'edit-segment' segment.pk %}" hx-select="#editor" hx-target="#editor" hx-swap="outerHTML">{% icon 'edit-3' %}</button>
+                    <button hx-get="{% url 'edit-segment' segment.pk %}" hx-select="#editor" hx-target="#editor" hx-swap="outerHTML swap:0.1s">{% icon 'edit-3' %}</button>
                     {% if segment.included_deck %}
                         <h4>Deck: {{ segment.included_deck.name }}</h4>
                     {% endif %}
@@ -40,7 +40,7 @@ <h4>Deck: {{ segment.included_deck.name }}</h4>
                         {% for slide in segment.slides.all %}
                             <li class="slide-thumbnail"
                                 hx-get="{% url 'edit-slide' pk=slide.pk %}"
-                                hx-swap="outerHTML"
+                                hx-swap="outerHTML swap:0.1s"
                                 hx-select="#editor"
                                 hx-target="#editor">
                                 {% include "slides/slide.html" with slide=slide %}
@@ -51,7 +51,7 @@ <h4>Deck: {{ segment.included_deck.name }}</h4>
                                 {% csrf_token %}
                                 <input type="hidden" name="segment" value="{{ segment.pk }}">
 {#                                <input type="submit" value="+">#}
-                                <button hx-post="{% url 'new-slide' %}" hx-select="#slides-sidebar > *" hx-target="#slides-sidebar" hx-swap="innerHTML">+</button>
+                                <button hx-post="{% url 'new-slide' %}" hx-select="#slides-sidebar > *" hx-target="#slides-sidebar" hx-swap="innerHTML swap:0.1s">+</button>
                             </form>
                         </li>
                     </ul>