mirrors/btcpayserver
1
0
Fork 0
mirror of https://github.com/btcpayserver/btcpayserver.git synced 2025-01-18 13:26:47 +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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 12 deletions
Show Stats 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="offcanvas-header p-3">
<h5 class="offcanvas-title">Edit Item</h5>
<button type="button" class="btn-close" aria-label="Close" v-on:click="hideOffcanvas">
<vc:icon symbol="close" />
</button>
<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>
<div class="offcanvas-body p-3 p-xl-0">
<item-editor ref="itemEditor" :item="selectedItem" class="bg-tile w-100 p-xl-4 rounded" />
</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>

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

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