From 735327e46b22663eeafdea588e80d5566a8dc8c4 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Fri, 5 Jul 2024 12:53:14 -0500
Subject: [PATCH] fix: improve collapse panels for butterball theme

---
 tailbone/templates/custorders/create.mako   |  10 +-
 tailbone/templates/people/view_profile.mako | 117 ++++++++++++++------
 2 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/tailbone/templates/custorders/create.mako b/tailbone/templates/custorders/create.mako
index 9a3a2d57..63505422 100644
--- a/tailbone/templates/custorders/create.mako
+++ b/tailbone/templates/custorders/create.mako
@@ -78,15 +78,16 @@
 
             <b-icon v-if="props.open"
                     pack="fas"
-                    icon="angle-down">
+                    icon="caret-down">
             </b-icon>
 
             <span v-if="!props.open">
               <b-icon pack="fas"
-                      icon="angle-right">
+                      icon="caret-right">
               </b-icon>
             </span>
 
+            &nbsp;
             <strong v-html="customerPanelHeader"></strong>
           </div>
         </template>
@@ -525,15 +526,16 @@
 
             <b-icon v-if="props.open"
                     pack="fas"
-                    icon="angle-down">
+                    icon="caret-down">
             </b-icon>
 
             <span v-if="!props.open">
               <b-icon pack="fas"
-                      icon="angle-right">
+                      icon="caret-right">
               </b-icon>
             </span>
 
+            &nbsp;
             <strong v-html="itemsPanelHeader"></strong>
           </div>
         </template>
diff --git a/tailbone/templates/people/view_profile.mako b/tailbone/templates/people/view_profile.mako
index 0b700ca5..1eac6a2f 100644
--- a/tailbone/templates/people/view_profile.mako
+++ b/tailbone/templates/people/view_profile.mako
@@ -836,20 +836,35 @@
             </div>
 
             <br />
-            <b-collapse v-for="member in members"
-                        :key="member.uuid"
-                        class="panel"
-                        :open="members.length == 1">
+            <${b}-collapse v-for="member in members"
+                           :key="member.uuid"
+                           class="panel"
+                           :open="members.length == 1">
 
-              <div slot="trigger"
-                   slot-scope="props"
-                   class="panel-heading"
-                   role="button">
-                <b-icon pack="fas"
-                        icon="caret-right">
-                </b-icon>
-                <strong>{{ member._key }} - {{ member.display }}</strong>
-              </div>
+              <template #trigger="props">
+                <div class="panel-heading"
+                     role="button"
+                     style="cursor: pointer;">
+
+                  ## TODO: for some reason buefy will "reuse" the icon
+                  ## element in such a way that its display does not
+                  ## refresh.  so to work around that, we use different
+                  ## structure for the two icons, so buefy is forced to
+                  ## re-draw
+
+                  <b-icon v-if="props.open"
+                          pack="fas"
+                          icon="caret-down" />
+
+                  <span v-if="!props.open">
+                    <b-icon pack="fas"
+                            icon="caret-right" />
+                  </span>
+
+                  &nbsp;
+                  <strong>{{ member._key }} - {{ member.display }}</strong>
+                </div>
+              </template>
 
               <div class="panel-block">
                 <div style="display: flex; justify-content: space-between; width: 100%;">
@@ -917,7 +932,7 @@
                   </div>
                 </div>
               </div>
-            </b-collapse>
+            </${b}-collapse>
           </div>
 
           <div v-if="!members.length">
@@ -957,20 +972,35 @@
         </div>
 
         <br />
-        <b-collapse v-for="customer in customers"
-                    :key="customer.uuid"
-                    class="panel"
-                    :open="customers.length == 1">
+        <${b}-collapse v-for="customer in customers"
+                       :key="customer.uuid"
+                       class="panel"
+                       :open="customers.length == 1">
 
-          <div slot="trigger"
-               slot-scope="props"
-               class="panel-heading"
-               role="button">
-            <b-icon pack="fas"
-                    icon="caret-right">
-            </b-icon>
-            <strong>{{ customer._key }} - {{ customer.name }}</strong>
-          </div>
+          <template #trigger="props">
+            <div class="panel-heading"
+                 role="button"
+                 style="cursor: pointer;">
+
+              ## TODO: for some reason buefy will "reuse" the icon
+              ## element in such a way that its display does not
+              ## refresh.  so to work around that, we use different
+              ## structure for the two icons, so buefy is forced to
+              ## re-draw
+
+              <b-icon v-if="props.open"
+                      pack="fas"
+                      icon="caret-down" />
+
+              <span v-if="!props.open">
+                <b-icon pack="fas"
+                        icon="caret-right" />
+              </span>
+
+              &nbsp;
+              <strong>{{ customer._key }} - {{ customer.name }}</strong>
+            </div>
+          </template>
 
           <div class="panel-block">
             <div style="display: flex; justify-content: space-between; width: 100%;">
@@ -1045,7 +1075,7 @@
               </div>
             </div>
           </div>
-        </b-collapse>
+        </${b}-collapse>
       </div>
 
       <div v-if="!customers.length">
@@ -1639,15 +1669,30 @@
                       :key="user.uuid"
                       class="panel">
 
-            <div slot="trigger"
-                 slot-scope="props"
-                 class="panel-heading"
-                 role="button">
-                <b-icon pack="fas"
-                        icon="caret-right">
-                </b-icon>
+            <template #trigger="props">
+              <div class="panel-heading"
+                   role="button"
+                   style="cursor: pointer;">
+
+                ## TODO: for some reason buefy will "reuse" the icon
+                ## element in such a way that its display does not
+                ## refresh.  so to work around that, we use different
+                ## structure for the two icons, so buefy is forced to
+                ## re-draw
+
+                <b-icon v-if="props.open"
+                        pack="fas"
+                        icon="caret-down" />
+
+                <span v-if="!props.open">
+                  <b-icon pack="fas"
+                          icon="caret-right" />
+                </span>
+
+                &nbsp;
                 <strong>{{ user.username }}</strong>
-            </div>
+              </div>
+            </template>
 
             <div class="panel-block">
               <div style="display: flex; justify-content: space-between; width: 100%;">