aljaz/btcpayserver
1
0
Fork 0
mirror of https://github.com/aljazceru/btcpayserver.git synced 2025-12-20 23:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Template Editor: Fix mobile view (#5871)

Browse Source 
Fixes #5869.
This commit is contained in:
d11n
2024-03-27 11:20:49 +01:00
committed by GitHub
parent 0f3f8b6bf9
commit dba102e74f
2 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
BTCPayServer/Views/Shared/TemplateEditor.cshtml
View File

@@ -153,17 +153,11 @@
<div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas"> <div class="col-xl-5 offcanvas-xl offcanvas-end" tabindex="-1" ref="editorOffcanvas">
<div class="offcanvas-header p-3"> <div class="offcanvas-header p-3">
<h5 class="offcanvas-title">Edit Item</h5> <h5 class="offcanvas-title">Edit Item</h5>
<button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas"> <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>
<vc:icon symbol="close" />
</button>
</div> </div>
<div class="offcanvas-body p-3 p-xl-0"> <div class="offcanvas-body p-3 p-xl-0">
<item-editor ref="itemEditor" :item="selectedItem" class="bg-tile w-100 p-xl-4 rounded" /> <item-editor ref="itemEditor" :item="selectedItem" class="bg-tile w-100 p-xl-4 rounded" />
</div> </div>
<div class="offcanvas-header p-3">
<button class="btn btn-primary" type="button" v-on:click="() => { $refs.itemEditor.apply(); hideOffcanvas() }">Apply and close</button>
<button class="btn btn-secondary" type="button" v-on:click="hideOffcanvas">Cancel</button>
</div>
</div> </div>
</div> </div>
</div> </div>

24
BTCPayServer/wwwroot/js/template-editor.js
View File

@@ -235,7 +235,8 @@ document.addEventListener('DOMContentLoaded', () => {
return { return {
items, items,
selectedItem: null, selectedItem: null,
editorOffcanvas: null selectedItemInitial: null,
editorOffcanvas: null,
} }
}, },
computed: { computed: {
@@ -247,6 +248,19 @@ document.addEventListener('DOMContentLoaded', () => {
(item.categories || []).forEach(category => { res.add(category); }); (item.categories || []).forEach(category => { res.add(category); });
return res; return res;
}, new Set())); }, new Set()));
},
itemChanged() {
return this.selectedItem && this.selectedItemInitial && (
this.selectedItem.id !== this.selectedItemInitial.id ||
this.selectedItem.title !== this.selectedItemInitial.title ||
this.selectedItem.price !== this.selectedItemInitial.price ||
this.selectedItem.image !== this.selectedItemInitial.image ||
this.selectedItem.disabled !== this.selectedItemInitial.disabled ||
this.selectedItem.inventory !== this.selectedItemInitial.inventory ||
this.selectedItem.priceType !== this.selectedItemInitial.priceType ||
this.selectedItem.categories !== this.selectedItemInitial.categories ||
this.selectedItem.description !== this.selectedItemInitial.description
)
} }
}, },
methods: { methods: {
@@ -254,7 +268,7 @@ document.addEventListener('DOMContentLoaded', () => {
const items = parseConfig(event.target.value) const items = parseConfig(event.target.value)
if (!items) return if (!items) return
this.items = items this.items = items
this.selectedItem = null this.selectedItem = this.selectedItemInitial = null
}, },
addItem(event) { addItem(event) {
const length = this.items.push({ const length = this.items.push({
@@ -268,16 +282,16 @@ document.addEventListener('DOMContentLoaded', () => {
inventory: null, inventory: null,
disabled: false disabled: false
}) })
this.selectedItem = this.items[length - 1] this.selectItem(null, length - 1)
this.showOffcanvas()
}, },
selectItem(event, index) { selectItem(event, index) {
this.selectedItem = this.items[index] this.selectedItem = this.items[index]
this.selectedItemInitial = { ...this.selectedItem } // pristine copy
this.showOffcanvas() this.showOffcanvas()
}, },
removeItem(event, index) { removeItem(event, index) {
this.items.splice(index, 1) this.items.splice(index, 1)
this.selectedItem = null this.selectedItem = this.selectedItemInitial = null
}, },
sortItems(event) { sortItems(event) {
const { newIndex, oldIndex } = event const { newIndex, oldIndex } = event