From 672491c66c1fe37daf63b6b9214dd90358358c06 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Tue, 20 Aug 2024 18:11:13 +0200
Subject: [PATCH] UI: Offcanvas fixes

---
 BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml     | 2 +-
 BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml | 2 +-
 BTCPayServer/Views/Shared/TemplateEditor.cshtml              | 2 +-
 BTCPayServer/Views/UIForms/Modify.cshtml                     | 2 +-
 BTCPayServer/wwwroot/js/form-editor.js                       | 5 +++--
 BTCPayServer/wwwroot/js/template-editor.js                   | 5 +++--
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
index d64453640..f8ee52475 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/Cart.cshtml
@@ -142,7 +142,7 @@
                     Empty
                 </button>
                 <button id="CartClose" type="button" class="cart-toggle-btn" v-on:click="toggleCart" aria-controls="cart" aria-label="Close">
-                    <vc:icon symbol="close" />
+                    <vc:icon symbol="cross" />
                 </button>   
             </header>
             <div class="offcanvas-body py-0">
diff --git a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
index a1f9c0693..6606c15dc 100644
--- a/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
+++ b/BTCPayServer/Views/Shared/PointOfSale/Public/VueLight.cshtml
@@ -81,7 +81,7 @@
         <vc:icon symbol="nav-mobile-menu"/>
     </button>
     <div class="offcanvas offcanvas-end" data-bs-backdrop="static" tabindex="-1"  id="ItemsListOffcanvas" aria-labelledby="ItemsListToggle" v-if="showItems">
-        <div class="offcanvas-header flex-wrap p-3">
+        <div class="offcanvas-header justify-content-between flex-wrap p-3">
             <h5 class="offcanvas-title" id="offcanvasExampleLabel">Products</h5>
             <button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': cart.length > 0, 'btn-outline-secondary': cart.length === 0}" data-bs-dismiss="offcanvas" v-text="cart.length > 0 ? 'Apply' : 'Close'"></button>
             @if (Model.ShowSearch)
diff --git a/BTCPayServer/Views/Shared/TemplateEditor.cshtml b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
index 420e824dd..e542805d4 100644
--- a/BTCPayServer/Views/Shared/TemplateEditor.cshtml
+++ b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
@@ -151,7 +151,7 @@
                                   class="bg-tile pb-2 rounded" />
                 </div>
                 <div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas">
-                    <div class="offcanvas-header p-3">
+                    <div class="offcanvas-header justify-content-between p-3">
                         <h5 class="offcanvas-title">Edit Item</h5>
                         <button type="button" class="btn btn-sm rounded-pill" :class="{ 'btn-primary': itemChanged, 'btn-outline-secondary': !itemChanged }" v-on:click="hideOffcanvas" v-text="itemChanged ? 'Apply' : 'Close'"></button>
                     </div>
diff --git a/BTCPayServer/Views/UIForms/Modify.cshtml b/BTCPayServer/Views/UIForms/Modify.cshtml
index 808d5da5e..019fcab89 100644
--- a/BTCPayServer/Views/UIForms/Modify.cshtml
+++ b/BTCPayServer/Views/UIForms/Modify.cshtml
@@ -270,7 +270,7 @@
                                        class="bg-tile pb-2 rounded" />
                     </div>
                     <div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas">
-                        <div class="offcanvas-header p-3">
+                        <div class="offcanvas-header justify-content-between p-3">
                             <h5 class="offcanvas-title">Edit Field</h5>
                             <button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas">
                                 <vc:icon symbol="close" />
diff --git a/BTCPayServer/wwwroot/js/form-editor.js b/BTCPayServer/wwwroot/js/form-editor.js
index 7e6a3aae7..1a3873435 100644
--- a/BTCPayServer/wwwroot/js/form-editor.js
+++ b/BTCPayServer/wwwroot/js/form-editor.js
@@ -222,11 +222,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 return fields
             },
             showOffcanvas() {
-                if (window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden')
+                if (this.editorOffcanvas && window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden')
                     this.editorOffcanvas.show();
             },
             hideOffcanvas() {
-                this.editorOffcanvas.hide();
+                if (this.editorOffcanvas)
+                    this.editorOffcanvas.hide();
             }
         },
         mounted () {
diff --git a/BTCPayServer/wwwroot/js/template-editor.js b/BTCPayServer/wwwroot/js/template-editor.js
index d4aa0131b..99fefa4e0 100644
--- a/BTCPayServer/wwwroot/js/template-editor.js
+++ b/BTCPayServer/wwwroot/js/template-editor.js
@@ -298,11 +298,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0])
             },
             showOffcanvas() {
-                if (window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden')
+                if (this.editorOffcanvas && window.getComputedStyle(this.$refs.editorOffcanvas).visibility === 'hidden')
                     this.editorOffcanvas.show();
             },
             hideOffcanvas() {
-                this.editorOffcanvas.hide();
+                if (this.editorOffcanvas)
+                    this.editorOffcanvas.hide();
             }
         },
         mounted() {