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: 0.5rem;
} }
.margin-left-auto {
margin-left: auto;
}
.margin-top-1 { .margin-top-1 {
margin-top: 1rem; margin-top: 1rem;
} }
@ -608,20 +612,10 @@ ol li::before {
#prompt_popup h4 { #prompt_popup h4 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
#confirmation_popup sm-button,
#prompt_popup sm-button {
margin: 0;
}
#confirmation_popup .flex, #confirmation_popup .flex,
#prompt_popup .flex { #prompt_popup .flex {
padding: 0;
margin-top: 1rem; 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 { #prompt_message {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
@ -865,6 +859,7 @@ ol li::before {
display: grid; display: grid;
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-items: center;
} }
.multi-state-button > * { .multi-state-button > * {
grid-area: 1/1/2/2; 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-5 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.margin-left-auto {
margin-left: auto;
}
.margin-top-1 { .margin-top-1 {
margin-top: 1rem; margin-top: 1rem;
} }
@ -551,19 +554,13 @@ ol {
#confirmation_popup, #confirmation_popup,
#prompt_popup { #prompt_popup {
flex-direction: column; flex-direction: column;
h4 { h4 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
sm-button {
margin: 0;
}
.flex { .flex {
padding: 0;
margin-top: 1rem; margin-top: 1rem;
sm-button:first-of-type {
margin-right: 0.6rem;
margin-left: auto;
}
} }
} }
#prompt_message { #prompt_message {
@ -798,6 +795,7 @@ ol {
display: grid; display: grid;
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-items: center;
& > * { & > * {
grid-area: 1/1/2/2; grid-area: 1/1/2/2;
} }

10
index.html
View File

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

59
scripts/std_ui.js
View File

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