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

0.0.95

Browse Source
This commit is contained in:
sairaj mote 2020-11-05 12:19:49 +05:30
parent 3ac6aae655
commit 56049082c9
2 changed files with 62 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components.js
View File

@ -40,6 +40,7 @@ smButton.innerHTML = `
border-radius: 10rem;
}
.button {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
@ -65,6 +66,13 @@ smButton.innerHTML = `
background: rgba(var(--text-color), 0.1);
-webkit-tap-highlight-color: transparent;
outline: none;
overflow: hidden;
}
span.ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
border: 1.5rem solid rgba(var(--text-color), 0.2);
}
:host(:not([disabled])) .button:focus{
-webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
@ -75,14 +83,6 @@ smButton.innerHTML = `
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
@media (hover: hover){
:host(:not([disabled])) .button:active{
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
:host([variant='outlined']) .button:active{
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
}
:host(:not([disabled])) .button:hover{
-webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
@ -91,9 +91,6 @@ smButton.innerHTML = `
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
}
:host([variant="primary"]:not([disabled])) .button:active{
background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)) !important;
}
:host([variant="primary"]:not([disabled])) .button:hover{
background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
}
@ -149,6 +146,33 @@ customElements.define('sm-button',
}))
}
}
createRipple(event){
const target = this.shadowRoot.querySelector('.button')
const ripple = target.querySelector('.ripple');
const circle = document.createElement("span");
const diameter = Math.max(target.clientWidth, target.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - (target.offsetLeft + radius)}px`;
circle.style.top = `${event.clientY - (target.offsetTop + radius)}px`;
circle.classList.add("ripple");
const rippleAnimation = circle.animate([
{
transform: 'scale(4)',
opacity: 0
}
],
{
duration: 400,
fill: "forwards",
easing: 'ease-in'
})
target.append(circle);
rippleAnimation.onfinish = () => {
circle.remove()
}
}
connectedCallback() {
this.isDisabled = false
@ -156,6 +180,7 @@ customElements.define('sm-button',
if (this.hasAttribute('disabled') && !this.isDisabled)
this.isDisabled = true
this.addEventListener('click', (e) => {
this.createRipple(e)
this.dispatch()
})
this.addEventListener('keyup', (e) => {
@ -234,6 +259,7 @@ border: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
cursor: text;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
@ -246,7 +272,6 @@ border: none;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
background: rgba(var(--text-color), 0.06);
font-family: var(--font-family);
width: 100%;
outline: none;
min-width: 0;
@ -263,8 +288,7 @@ input:focus{
caret-color: var(--accent-color);
}
.input:focus-within:not(.readonly){
-webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset;
box-shadow: 0 0 0 0.1em var(--accent-color) inset;
background: rgba(var(--text-color), 0.1);
}
.disabled{
pointer-events: none;
@ -340,6 +364,7 @@ input{
color: var(--error-color);
background: rgba(var(--foreground-color), 1);
padding: 0.6rem 1rem;
text-align: left;
}
.feedback-text:empty{
padding: 0;
@ -606,8 +631,9 @@ smTextarea.innerHTML = `
-webkit-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
background: rgba(var(--text-color), 0.1);
font-family: var(--font-family);
-webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
background: rgba(var(--text-color), 0.06);
width: 100%;
outline: none;
min-width: 0;
@ -617,8 +643,7 @@ textarea:focus{
caret-color: var(--accent-color);
}
.input:focus-within{
-webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset;
box-shadow: 0 0 0 0.1em var(--accent-color) inset;
background: rgba(var(--text-color), 0.1);
}
.label {
@ -1195,6 +1220,8 @@ customElements.define('sm-switch', class extends HTMLElement {
connectedCallback() {
if (this.hasAttribute('disabled'))
this.switch.classList.add('disabled')
if (this.hasAttribute('checked'))
this.input.checked = true
this.addEventListener('keyup', e => {
if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
this.input.click()
@ -1323,7 +1350,7 @@ smSelect.innerHTML = `
<polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
</svg>
</div>
<div class="options hide">
<div part="options" class="options hide">
<slot></slot>
</div>
</div>`;
@ -2093,7 +2120,6 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popup.style.transform = 'translateY(100%)';
else
this.popup.style.transform = 'translateY(1rem)';
this.click()
this.popupContainer.classList.add('hide')
this.removeAttribute('open')
if (typeof this.popupStack !== 'undefined') {
@ -2207,7 +2233,7 @@ customElements.define('sm-popup', class extends HTMLElement {
setTimeout(() => {
this.threshold = this.popup.getBoundingClientRect().height * 0.3
}, 200);
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio')
this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
})
this.popupHeader.addEventListener('touchstart', (e) => {
@ -2651,10 +2677,11 @@ smNotifications.innerHTML = `
}
@media screen and (min-width: 640px){
.notification-panel{
width: 40vw;
max-width: 40vw;
width: max-content;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
justify-content: flex-end;
}
.notification{
-ms-grid-column-align: end;

22
index.html
View File

@ -634,7 +634,7 @@
<div class="user-panel">
<div class="flex align-center space-between">
<h4>My Balances</h4>
<button id="refresh_balance_btn" onclick="refresh_balance(this)" class="action expand"
<button onclick="refreshBalance(this)" class="action expand"
type="submit">
<h4 class="primary-btn expand">
Refresh Balance
@ -883,7 +883,7 @@
<div class="user-panel">
<div class="flex align-center space-between">
<h4>My Balances</h4>
<button id="refresh_balance_btn" onclick="refresh_balance(this)" class="action expand"
<button onclick="refreshBalance(this)" class="action expand"
type="submit">
<h4 class="primary-btn expand">
Refresh Balance
@ -1082,7 +1082,6 @@
floDapps.launchStartUp().then(async result => {
console.log(`Welcome ${myFloID}`)
clearElements(['my_qr_code'])
refresh_balance()
userFloIdContainers.forEach(container => container.textContent = myFloID)
await token_app.actions.doShreeGanesh();
@ -2206,7 +2205,7 @@
.amount))
console.log(depositRequest)
if (status) {
refresh_balance()
refreshBalance()
depositRequest.remove()
}
}
@ -2219,7 +2218,7 @@
.dataset.userFloId, withdrawRequest.dataset.upi, parseInt(withdrawRequest.dataset
.amount))
if (status) {
refresh_balance()
refreshBalance()
withdrawRequest.remove()
notify('Withdraw request confirmed', 'success')
}
@ -2232,7 +2231,7 @@
.dataset.receiverFloId, payRequest.dataset.txid, payRequest.dataset
.amount)
if (status) {
refresh_balance()
refreshBalance()
payRequest.remove()
}
}
@ -2244,7 +2243,7 @@
/*,
status = await process_unconfirmed_balance_claim_requests(unconfirmedRequestsStore[payRequest.dataset.vectorClock])
if (status) {
refresh_balance()
refreshBalance()
payRequest.remove()
}*/
}
@ -12303,6 +12302,7 @@
allHelplineOptions.forEach(option => {
option.classList.add('hide-completely')
})
refreshBalance()
hideLoader()
showDepositRequests()
showWithdrawRequests()
@ -12325,6 +12325,7 @@
allUserOptions.forEach(option => {
option.classList.add('hide-completely')
})
document.getElementById('activity_page_btn').classList.add('hide-completely')
hideLoader()
let cashierList = ``,
cashierSelect = document.getElementById('select_cashier')
@ -12349,6 +12350,7 @@
allUserOptions.forEach(option => {
option.classList.remove('hide-completely')
})
refreshBalance()
userType.forEach(user => user.textContent = 'Me')
defaultUPI = localStorage.getItem(`defaultUPI${myFloID}`)
if(mobileCheck())
@ -12902,7 +12904,7 @@
});
notify(`Transfer successful: ${flo_txid}`, 'success', true, true);
refresh_balance()
refreshBalance()
return true;
}
} catch (error) {
@ -13045,7 +13047,7 @@
hidePopup()
showTransactionStatus('success', 'Rupee Sent', 'It may take upto 48 working hours for transaction to be completed.', flo_txid);
sentActivityContainer.prepend(render.activityCard({ type: 'sent', processed: false, amount: token_amount, timeStamp: `${Date.now()}_${myFloID}`, tokenTxId: flo_txid, receiver: token_receiver }))
refresh_balance()
refreshBalance()
return true;
}
}
@ -13056,7 +13058,7 @@
}
}
async function refresh_balance(refreshButton) {
async function refreshBalance(refreshButton) {
try {
if (refreshButton)
btnLoading(refreshButton, 'start')