mirror of
https://github.com/Qortal/qortal-ui.git
synced 2025-02-11 17:55:51 +00:00
publish with only fee, removed gif
This commit is contained in:
parent
74b7c380f9
commit
ec34b0137a
@ -3047,4 +3047,5 @@ class AppView extends connect(store)(LitElement) {
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('app-view', AppView)
|
||||
window.customElements.define('app-view', AppView)
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -506,21 +506,6 @@ mwc-checkbox::shadow .mdc-checkbox::after, mwc-checkbox::shadow .mdc-checkbox::b
|
||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||
</button>
|
||||
${this.setOpenGifModal ?
|
||||
html`
|
||||
<button
|
||||
class="emoji-button"
|
||||
@click=${()=> {
|
||||
if (!this.userName) {
|
||||
parentEpml.request('showSnackBar', get("gifs.gchange26"));
|
||||
return;
|
||||
}
|
||||
this.setOpenGifModal(true)
|
||||
}}>
|
||||
<span style="font-size: 30px" class="material-symbols-outlined"></span>
|
||||
</button>
|
||||
`
|
||||
: ''}
|
||||
${this.editedMessageObj ? (
|
||||
html`
|
||||
<div style="margin-bottom: 10px">
|
||||
|
||||
@ -26,11 +26,12 @@ import '@material/mwc-icon'
|
||||
import '@material/mwc-snackbar'
|
||||
import '@polymer/paper-spinner/paper-spinner-lite.js'
|
||||
import '@vaadin/grid'
|
||||
import { ModalHelper } from '../../../utils/publish-modal.js'
|
||||
|
||||
passiveSupport({ events: ['touchstart'] })
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
|
||||
export const modalHelper = new ModalHelper();
|
||||
class Chat extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
@ -910,4 +911,4 @@ class Chat extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('q-chat', Chat)
|
||||
window.customElements.define('q-chat', Chat)
|
||||
@ -3027,10 +3027,7 @@ async function showModalAndWait(type, data) {
|
||||
`).join('')}
|
||||
</table>
|
||||
<div class="checkbox-row">
|
||||
<label for="isWithFee" id="isWithFeeLabel" style="color: var(--black);">
|
||||
${get('browserpage.bchange33')} ${data.resources.length * data.feeAmount} QORT fee
|
||||
</label>
|
||||
<mwc-checkbox checked style="margin-right: -15px;" id="isWithFee"></mwc-checkbox>
|
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph">${get('browserpage.bchange47')} <span style="font-weight: bold">${data.resources.length * data.feeAmount} QORT fee</span></p>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
@ -3043,10 +3040,7 @@ async function showModalAndWait(type, data) {
|
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph"><span style="font-weight: bold">${get("browserpage.bchange32")}:</span> ${data.identifier}</p>
|
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph"><span style="font-weight: bold">${get("browserpage.bchange45")}:</span> ${data.encrypt ? true : false}</p>
|
||||
<div class="checkbox-row">
|
||||
<label for="isWithFee" id="isWithFeeLabel" style="color: var(--black);">
|
||||
${get('browserpage.bchange47')} ${data.feeAmount} QORT fee
|
||||
</label>
|
||||
<mwc-checkbox checked style="margin-right: -15px;" id="isWithFee"></mwc-checkbox>
|
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph">${get('browserpage.bchange47')} <span style="font-weight: bold">${data.feeAmount} QORT fee</span></p>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
@ -3118,7 +3112,8 @@ async function showModalAndWait(type, data) {
|
||||
const userData = {};
|
||||
if (type === actions.PUBLISH_QDN_RESOURCE || type === actions.PUBLISH_MULTIPLE_QDN_RESOURCES) {
|
||||
const isWithFeeCheckbox = modal.querySelector('#isWithFee');
|
||||
userData.isWithFee = isWithFeeCheckbox.checked;
|
||||
// userData.isWithFee = isWithFeeCheckbox.checked;
|
||||
userData.isWithFee = true
|
||||
}
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
|
||||
@ -14,8 +14,10 @@ import '@material/mwc-select'
|
||||
import '@material/mwc-dialog'
|
||||
import '@material/mwc-list/mwc-list-item.js'
|
||||
import '@polymer/paper-progress/paper-progress.js'
|
||||
import { ModalHelper } from '../../../utils/publish-modal'
|
||||
|
||||
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
|
||||
const modalHelper = new ModalHelper();
|
||||
|
||||
class PublishData extends LitElement {
|
||||
static get properties() {
|
||||
@ -299,8 +301,10 @@ class PublishData extends LitElement {
|
||||
<p style="color: green; word-break: break-word;">${this.successMessage}</p>
|
||||
${this.loading ? html` <paper-progress indeterminate style="width:100%; margin:4px;"></paper-progress> ` : ''}
|
||||
<div class="buttons">
|
||||
<mwc-button ?disabled=${this.btnDisable} style="width:49%;" raised icon="science" @click=${(e) => this.doPublish(e, true, false)}> ${translate("appspage.schange40")}</mwc-button>
|
||||
<mwc-button ?disabled=${this.btnDisable} style="width:49%;" raised icon="send" @click=${() => this.shadowRoot.querySelector('#publishWithFeeDialog').show()}> ${translate("publishpage.pchange11")}</mwc-button>
|
||||
<mwc-button ?disabled=${this.btnDisable} style="width:49%;" raised icon="science" @click=${(e) => this.shadowRoot.querySelector('#publishWithFeeDialog').close()}> ${translate("appspage.schange40")}</mwc-button>
|
||||
<mwc-button ?disabled=${this.btnDisable} style="width:49%;" raised icon="send" @click=${(e) => {
|
||||
this.doPublish(e, false, true)
|
||||
}}> ${translate("publishpage.pchange11")}</mwc-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -310,7 +314,7 @@ class PublishData extends LitElement {
|
||||
<mwc-button slot="primaryAction" @click="${(e) => this.feeDialogNo(e, false, false)}" class="red">
|
||||
${translate("general.no")}
|
||||
</mwc-button>
|
||||
<mwc-button slot="secondaryAction" @click="${(e) => this.feeDialogYes(e, false, true)}" class="green">
|
||||
<mwc-button slot="secondaryAction" @click="${(e) => this.feeDialogYes(e, false, true)}" class="green">
|
||||
${translate("general.yes")}
|
||||
</mwc-button>
|
||||
</mwc-dialog>
|
||||
@ -418,7 +422,7 @@ class PublishData extends LitElement {
|
||||
this.shadowRoot.querySelector('#publishWithFeeDialog').close()
|
||||
}
|
||||
|
||||
doPublish(e, preview, fee) {
|
||||
async doPublish(e, preview, fee) {
|
||||
let registeredName = this.shadowRoot.getElementById('registeredName').value
|
||||
let service = this.shadowRoot.getElementById('service').value
|
||||
let identifier = this.shadowRoot.getElementById('identifier').value
|
||||
@ -464,7 +468,22 @@ class PublishData extends LitElement {
|
||||
parentEpml.request('showSnackBar', `${err5string}`)
|
||||
}
|
||||
else {
|
||||
this.publishData(registeredName, path, file, service, identifier, preview, fee)
|
||||
try {
|
||||
if(!preview){
|
||||
const arbitraryFeeData = await modalHelper.getArbitraryFee()
|
||||
const res = await modalHelper.showModalAndWaitPublish(
|
||||
{
|
||||
feeAmount: arbitraryFeeData.feeToShow
|
||||
}
|
||||
);
|
||||
if (res.action !== 'accept') throw new Error('User declined publish')
|
||||
}
|
||||
|
||||
this.publishData(registeredName, path, file, service, identifier, preview, fee)
|
||||
} catch (error) {
|
||||
this.shadowRoot.querySelector('#publishWithFeeDialog').close()
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
147
plugins/plugins/utils/publish-modal.css
Normal file
147
plugins/plugins/utils/publish-modal.css
Normal file
@ -0,0 +1,147 @@
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(186 186 186 / 26%);
|
||||
overflow: hidden;
|
||||
animation: backdrop_blur cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
@keyframes backdrop_blur {
|
||||
0% {
|
||||
backdrop-filter: blur(0px);
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
backdrop-filter: blur(5px);
|
||||
background: rgb(186 186 186 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: 1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;
|
||||
z-index: 1000001;
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
max-width: 80%;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.modal-subcontainer {
|
||||
color: var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-subcontainer-error {
|
||||
color: var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-paragraph-error {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 700;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-paragraph {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 300;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.capitalize-first {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-buttons button {
|
||||
background-color: #4caf50;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-buttons button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
|
||||
#cancel-button {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
#cancel-button:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
263
plugins/plugins/utils/publish-modal.js
Normal file
263
plugins/plugins/utils/publish-modal.js
Normal file
@ -0,0 +1,263 @@
|
||||
import { get } from 'lit-translate';
|
||||
|
||||
export class ModalHelper {
|
||||
constructor() {
|
||||
this.initializeStyles();
|
||||
}
|
||||
|
||||
async getArbitraryFee() {
|
||||
const timestamp = Date.now();
|
||||
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
|
||||
const nodeUrl = `${myNode.protocol}://${myNode.domain}:${myNode.port}`;
|
||||
const url = `${nodeUrl}/transactions/unitfee?txType=ARBITRARY×tamp=${timestamp}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Error when fetching arbitrary fee');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const arbitraryFee = (Number(data) / 1e8).toFixed(8);
|
||||
return {
|
||||
timestamp,
|
||||
fee: Number(data),
|
||||
feeToShow: arbitraryFee
|
||||
};
|
||||
}
|
||||
|
||||
async showModalAndWaitPublish(data) {
|
||||
console.log({ data });
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const modal = this.createModal(data);
|
||||
document.body.appendChild(modal);
|
||||
this.addModalEventListeners(modal, resolve);
|
||||
});
|
||||
}
|
||||
|
||||
createModal(data) {
|
||||
const modal = document.createElement('div');
|
||||
modal.id = "backdrop";
|
||||
modal.classList.add("backdrop");
|
||||
modal.innerHTML = `
|
||||
<div class="modal my-modal-class">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="modal-subcontainer">
|
||||
<div class="checkbox-row">
|
||||
<p style="font-size: 16px;overflow-wrap: anywhere;" class="modal-paragraph">${get('browserpage.bchange47')} <span style="font-weight: bold">${data.feeAmount} QORT fee</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-buttons">
|
||||
<button id="cancel-button">${get("browserpage.bchange27")}</button>
|
||||
<button id="ok-button">${get("browserpage.bchange28")}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return modal;
|
||||
}
|
||||
|
||||
addModalEventListeners(modal, resolve) {
|
||||
// Event listener for the 'OK' button
|
||||
const okButton = modal.querySelector('#ok-button');
|
||||
okButton.addEventListener('click', () => {
|
||||
const userData = { isWithFee: true };
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
resolve({ action: 'accept', userData });
|
||||
});
|
||||
|
||||
// Prevent modal content from closing the modal
|
||||
const modalContent = modal.querySelector('.modal-content');
|
||||
modalContent.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Event listeners for backdrop and 'Cancel' button
|
||||
const backdropClick = document.getElementById('backdrop');
|
||||
backdropClick.addEventListener('click', () => {
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
resolve({ action: 'reject' });
|
||||
});
|
||||
|
||||
const cancelButton = modal.querySelector('#cancel-button');
|
||||
cancelButton.addEventListener('click', () => {
|
||||
if (modal.parentNode === document.body) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
resolve({ action: 'reject' });
|
||||
});
|
||||
}
|
||||
|
||||
initializeStyles() {
|
||||
const styles = `
|
||||
* {
|
||||
--mdc-theme-primary: rgb(3, 169, 244);
|
||||
--mdc-theme-secondary: var(--mdc-theme-primary);
|
||||
--paper-input-container-focus-color: var(--mdc-theme-primary);
|
||||
--mdc-checkbox-unchecked-color: var(--black);
|
||||
--mdc-theme-on-surface: var(--black);
|
||||
--mdc-checkbox-disabled-color: var(--black);
|
||||
--mdc-checkbox-ink-color: var(--black);
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgb(186 186 186 / 26%);
|
||||
overflow: hidden;
|
||||
animation: backdrop_blur cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
|
||||
z-index: 1000000;
|
||||
}
|
||||
|
||||
@keyframes backdrop_blur {
|
||||
0% {
|
||||
backdrop-filter: blur(0px);
|
||||
background: transparent;
|
||||
}
|
||||
100% {
|
||||
backdrop-filter: blur(5px);
|
||||
background: rgb(186 186 186 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
animation: 0.1s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal forwards running modal_transition;
|
||||
z-index: 1000001;
|
||||
}
|
||||
|
||||
@keyframes modal_transition {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--white);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
max-width: 80%;
|
||||
min-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.modal-subcontainer {
|
||||
color: var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-subcontainer-error {
|
||||
color: var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.modal-paragraph-error {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 700;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-paragraph {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 18px;
|
||||
letter-spacing: 0.3px;
|
||||
font-weight: 300;
|
||||
color: var(--black);
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.capitalize-first {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.checkbox-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: Montserrat, sans-serif;
|
||||
font-weight: 600;
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.modal-buttons button {
|
||||
background-color: #4caf50;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.modal-buttons button:hover {
|
||||
background-color: #3e8e41;
|
||||
}
|
||||
|
||||
#cancel-button {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
#cancel-button:hover {
|
||||
background-color: #d32f2f;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleSheet = new CSSStyleSheet();
|
||||
styleSheet.replaceSync(styles);
|
||||
|
||||
document.adoptedStyleSheets = [styleSheet];
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user