Visual feedback when swapping elements in the editor

sheepman4267 · Feb 7, 2024 · 10d29f9 · 10d29f9
1 parent ae2ad1c
commit 10d29f9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git 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;
 }
diff --git 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
@@ -32,15 +32,15 @@ <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 %}
                     <ul>
                         {% 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>