Merge pull request #360 from RyanCoulsonCA/fix-347

remove confusing add button from slideshow editor
ramp4-pcar4 · Jul 18, 2024 · e9bb496 · e9bb496
2 parents 61fcaa9 + 61f0e96
commit e9bb496
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/src/components/slideshow-editor.vue b/src/components/slideshow-editor.vue
@@ -11,14 +11,32 @@
             <!-- add item button -->
             <button
                 class="editor-button bg-gray-100 cursor-pointer hover:bg-gray-200"
-                @click="editingStatus = 'create'"
+                @click="editingStatus = editingStatus === 'create' ? 'none' : 'create'"
             >
                 <div class="flex items-center">
-                    <svg height="18px" width="18px" viewBox="0 0 23 21" xmlns="http://www.w3.org/2000/svg">
+                    <svg
+                        height="18px"
+                        width="18px"
+                        viewBox="0 0 23 21"
+                        xmlns="http://www.w3.org/2000/svg"
+                        v-if="editingStatus === 'none'"
+                    >
                         <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                     </svg>
+                    <svg
+                        class="fill-current"
+                        height="18px"
+                        width="18px"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 352 512"
+                        v-else
+                    >
+                        <path
+                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                        ></path>
+                    </svg>
                     <span class="px-2">
-                        {{ $t('editor.slideshow.label.create') }}
+                        {{ editingStatus === 'create' ? $t('editor.cancel') : $t('editor.slideshow.label.create') }}
                     </span>
                 </div>
             </button>