RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-11-18 21:42:28 +05:30
parent a68fd08577
commit 3da3c9f9ac
5 changed files with 51 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -443,6 +443,10 @@ ol li::before {
margin-left: 0.5rem;
}
.margin-left-auto {
margin-left: auto;
}
.margin-top-1 {
margin-top: 1rem;
}
@ -608,20 +612,10 @@ ol li::before {
#prompt_popup h4 {
margin-bottom: 0.5rem;
}
#confirmation_popup sm-button,
#prompt_popup sm-button {
margin: 0;
}
#confirmation_popup .flex,
#prompt_popup .flex {
padding: 0;
margin-top: 1rem;
}
#confirmation_popup .flex sm-button:first-of-type,
#prompt_popup .flex sm-button:first-of-type {
margin-right: 0.6rem;
margin-left: auto;
}
#prompt_message {
margin-bottom: 1.5rem;
@ -865,6 +859,7 @@ ol li::before {
display: grid;
text-align: center;
align-items: center;
justify-items: center;
}
.multi-state-button > * {
grid-area: 1/1/2/2;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
css/main.scss
View File

@ -406,6 +406,9 @@ ol {
.margin-left-0-5 {
margin-left: 0.5rem;
}
.margin-left-auto {
margin-left: auto;
}
.margin-top-1 {
margin-top: 1rem;
}
@ -551,19 +554,13 @@ ol {
#confirmation_popup,
#prompt_popup {
flex-direction: column;
h4 {
margin-bottom: 0.5rem;
}
sm-button {
margin: 0;
}
.flex {
padding: 0;
margin-top: 1rem;
sm-button:first-of-type {
margin-right: 0.6rem;
margin-left: auto;
}
}
}
#prompt_message {
@ -798,6 +795,7 @@ ol {
display: grid;
text-align: center;
align-items: center;
justify-items: center;
& > * {
grid-area: 1/1/2/2;
}

10
index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>FLO Pay</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="description"
content="This webapp allows monitoring FLO addresses and performing transactions based on blockchain.">
@ -43,9 +43,9 @@
<p id="prompt_message"></p>
<sm-form>
<sm-input id="prompt_input"></sm-input>
<div class="flex align-center">
<button class="button cancel-btn">Cancel</button>
<button class="button submit-btn button--primary" type="submit">OK</button>
<div class="flex align-center gap-0-5 margin-left-auto">
<button class="button cancel-button">Cancel</button>
<button class="button confirm-button button--primary" type="submit">OK</button>
</div>
</sm-form>
</sm-popup>

59
scripts/std_ui.js
View File

@ -78,15 +78,15 @@ let zIndex = 50
function openPopup(popupId, pinned) {
zIndex++
getRef(popupId).setAttribute('style', `z-index: ${zIndex}`)
getRef(popupId).show({ pinned })
return getRef(popupId);
return getRef(popupId).show({ pinned })
}
// hides the popup or modal
function closePopup() {
function closePopup(options = {}) {
if (popupStack.peek() === undefined)
return;
popupStack.peek().popup.hide()
popupStack.peek().popup.hide(options)
zIndex--
}
document.addEventListener('popupopened', async e => {
@ -145,53 +145,62 @@ document.addEventListener('popupclosed', e => {
getRef('main_card').removeAttribute('inert')
}
})
// displays a popup for asking permission. Use this instead of JS confirm
const getConfirmation = (title, options = {}) => {
return new Promise(resolve => {
const { message = '', cancelText = 'Cancel', confirmText = 'OK' } = options
openPopup('confirmation_popup', true)
const { message = '', cancelText = 'Cancel', confirmText = 'OK', danger = false } = options
getRef('confirm_title').innerText = title;
getRef('confirm_message').innerText = message;
let cancelButton = getRef('confirmation_popup').children[2].children[0],
submitButton = getRef('confirmation_popup').children[2].children[1]
submitButton.textContent = confirmText
const cancelButton = getRef('confirmation_popup').querySelector('.cancel-button');
const confirmButton = getRef('confirmation_popup').querySelector('.confirm-button')
confirmButton.textContent = confirmText
cancelButton.textContent = cancelText
submitButton.onclick = () => {
closePopup()
resolve(true);
if (danger)
confirmButton.classList.add('button--danger')
else
confirmButton.classList.remove('button--danger')
const { opened, closed } = openPopup('confirmation_popup')
confirmButton.onclick = () => {
closePopup({ payload: true })
}
cancelButton.onclick = () => {
closePopup()
resolve(false);
}
closed.then((payload) => {
confirmButton.onclick = null
cancelButton.onclick = null
if (payload)
resolve(true)
else
resolve(false)
})
})
}
// displays a popup for asking user input. Use this instead of JS prompt
function getPromptInput(title, message = '', options = {}) {
let { placeholder = '', isPassword = false, cancelText = 'Cancel', confirmText = 'OK' } = options
openPopup('prompt_popup', true)
getRef('prompt_title').innerText = title;
getRef('prompt_message').innerText = message;
let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
const cancelButton = getRef('prompt_popup').querySelector('.cancel-button');
const confirmButton = getRef('prompt_popup').querySelector('.confirm-button')
if (isPassword) {
placeholder = 'Password'
getRef('prompt_input').setAttribute("type", "password")
}
getRef('prompt_input').setAttribute("placeholder", placeholder)
getRef('prompt_input').focusIn()
buttons[0].textContent = cancelText;
buttons[1].textContent = confirmText;
cancelButton.textContent = cancelText;
confirmButton.textContent = confirmText;
openPopup('prompt_popup', true)
return new Promise((resolve, reject) => {
buttons[0].onclick = () => {
cancelButton.addEventListener('click', () => {
closePopup()
return (null);
}
buttons[1].onclick = () => {
const value = getRef('prompt_input').value;
return null
}, { once: true })
confirmButton.addEventListener('click', () => {
closePopup()
resolve(value)
}
resolve(getRef('prompt_input').value)
}, { once: true })
})
}