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

Updated components

Browse Source
This commit is contained in:
sairaj mote 2022-12-29 18:27:55 +05:30
parent 12dc45fad1
commit db44151223
5 changed files with 207 additions and 3003 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
docs/css/main.css
View File

@ -71,21 +71,8 @@ a:focus-visible {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
a.button { button,
display: flex; .button {
align-items: center;
padding: 0.4rem 0.6rem;
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--accent-color);
}
fieldset {
border: none;
}
button {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
@ -97,39 +84,63 @@ button {
color: inherit; color: inherit;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
align-items: center; align-items: center;
font-size: 0.9rem; font-size: inherit;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
padding: 0.8rem; padding: 0.8rem;
border-radius: 0.3rem; border-radius: 0.3rem;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
button:focus-visible { button:focus-visible,
.button:focus-visible {
outline: var(--accent-color) solid medium; outline: var(--accent-color) solid medium;
} }
button:not(:disabled) { button:not(:disabled),
.button:not(:disabled) {
cursor: pointer; cursor: pointer;
} }
.button { .button {
color: var(--accent-color); background-color: rgba(var(--text-color), 0.02);
background-color: rgba(var(--text-color), 0.06); border: solid thin rgba(var(--text-color), 0.06);
}
.button--primary, .button--danger {
color: rgba(var(--background-color), 1) !important;
}
.button--primary .icon, .button--danger .icon {
fill: rgba(var(--background-color), 1);
} }
.button--primary { .button--primary {
color: rgba(var(--background-color), 1);
background-color: var(--accent-color); background-color: var(--accent-color);
} }
.button--primary .icon {
fill: rgba(var(--background-color), 1);
}
.button--colored {
color: var(--accent-color);
}
.button--colored .icon {
fill: var(--accent-color);
}
.button--danger { .button--danger {
background-color: var(--danger-color); background-color: rgba(255, 115, 115, 0.062745098);
color: var(--danger-color);
}
.button--danger .icon {
fill: var(--danger-color);
} }
.button--small { .button--small {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
.button--outlined {
border: solid rgba(var(--text-color), 0.3) 0.1rem;
background-color: rgba(var(--foreground-color), 1);
}
.button--transparent {
background-color: transparent;
}
button:disabled {
opacity: 0.4;
cursor: not-allowed;
filter: saturate(0);
}
.cta { .cta {
text-transform: uppercase; text-transform: uppercase;
@ -496,32 +507,32 @@ details[open] summary .icon {
transform: rotate(180deg); transform: rotate(180deg);
} }
strip-select { sm-chips {
--gap: 0; --gap: 0;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
border-radius: 0.2rem; border-radius: 0.2rem;
} }
strip-option { sm-chip {
font-weight: 500; position: relative;
font-size: 0.9rem; font-size: 0.9rem;
--border-radius: 0.5rem;
--padding: 0.5rem 0.8rem;
--background: rgba(var(--text-color), 0.06);
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
user-select: none; user-select: none;
--border-radius: 0; font-weight: 500;
--active-option-color: rgba(var(--background-color), 1);
--active-option-background-color: var(--accent-color);
} }
strip-option:first-of-type { sm-chip[selected] {
--border-radius: 0.2rem 0 0 0.2rem; --background: var(--accent-color);
color: rgba(var(--background-color), 1);
} }
strip-option:last-of-type { sm-chip:first-of-type {
--border-radius: 0 0.2rem 0.2rem 0; --border-radius: 0.3rem 0 0 0.3rem;
} }
sm-chip:last-of-type {
sm-select, --border-radius: 0 0.3rem 0.3rem 0;
sm-option {
font-size: 0.9rem;
} }
sm-checkbox { sm-checkbox {

2
docs/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

85
docs/css/main.scss
View File

@ -71,19 +71,8 @@ a {
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
} }
} }
a.button { button,
display: flex; .button {
align-items: center;
padding: 0.4rem 0.6rem;
border-radius: 0.3rem;
font-size: 0.9rem;
font-weight: 500;
color: var(--accent-color);
}
fieldset {
border: none;
}
button {
user-select: none; user-select: none;
position: relative; position: relative;
display: inline-flex; display: inline-flex;
@ -93,39 +82,65 @@ button {
color: inherit; color: inherit;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
align-items: center; align-items: center;
font-size: 0.9rem; font-size: inherit;
font-weight: 500; font-weight: 500;
white-space: nowrap; white-space: nowrap;
padding: 0.8rem; padding: 0.8rem;
border-radius: 0.3rem; border-radius: 0.3rem;
justify-content: center; justify-content: center;
flex-shrink: 0;
&:focus-visible { &:focus-visible {
outline: var(--accent-color) solid medium; outline: var(--accent-color) solid medium;
} }
&:not(:disabled) { &:not(:disabled) {
cursor: pointer; cursor: pointer;
} }
} }
.button { .button {
color: var(--accent-color); background-color: rgba(var(--text-color), 0.02);
background-color: rgba(var(--text-color), 0.06); border: solid thin rgba(var(--text-color), 0.06);
&--primary, &--primary {
&--danger { color: rgba(var(--background-color), 1);
color: rgba(var(--background-color), 1) !important; background-color: var(--accent-color);
.icon { .icon {
fill: rgba(var(--background-color), 1); fill: rgba(var(--background-color), 1);
} }
} }
&--primary { &--colored {
background-color: var(--accent-color); color: var(--accent-color);
.icon {
fill: var(--accent-color);
}
} }
&--danger { &--danger {
background-color: var(--danger-color); background-color: #ff737310;
color: var(--danger-color);
.icon {
fill: var(--danger-color);
} }
}
&--small { &--small {
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
} }
&--outlined {
border: solid rgba(var(--text-color), 0.3) 0.1rem;
background-color: rgba(var(--foreground-color), 1);
} }
&--transparent {
background-color: transparent;
}
}
button:disabled {
opacity: 0.4;
cursor: not-allowed;
filter: saturate(0);
}
.cta { .cta {
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8rem; font-size: 0.8rem;
@ -471,29 +486,31 @@ details {
} }
} }
} }
strip-select { sm-chips {
--gap: 0; --gap: 0;
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
border-radius: 0.2rem; border-radius: 0.2rem;
} }
strip-option {
font-weight: 500; sm-chip {
position: relative;
font-size: 0.9rem; font-size: 0.9rem;
--border-radius: 0.5rem;
--padding: 0.5rem 0.8rem;
--background: rgba(var(--text-color), 0.06);
user-select: none; user-select: none;
--border-radius: 0; font-weight: 500;
--active-option-color: rgba(var(--background-color), 1); &[selected] {
--active-option-background-color: var(--accent-color); --background: var(--accent-color);
color: rgba(var(--background-color), 1);
}
&:first-of-type { &:first-of-type {
--border-radius: 0.2rem 0 0 0.2rem; --border-radius: 0.3rem 0 0 0.3rem;
} }
&:last-of-type { &:last-of-type {
--border-radius: 0 0.2rem 0.2rem 0; --border-radius: 0 0.3rem 0.3rem 0;
} }
} }
sm-select,
sm-option {
font-size: 0.9rem;
}
sm-checkbox { sm-checkbox {
--height: 1rem; --height: 1rem;
--width: 1rem; --width: 1rem;

185
docs/index.html
View File

@ -37,9 +37,9 @@
<sm-popup id="confirmation_popup"> <sm-popup id="confirmation_popup">
<h4 id="confirm_title"></h4> <h4 id="confirm_title"></h4>
<p id="confirm_message"></p> <p id="confirm_message"></p>
<div class="flex align-center"> <div class="flex align-center gap-0-5 margin-left-auto">
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button> <button class="button cancel-button">Cancel</button>
<sm-button variant="no-outline" class="submit-btn">OK</sm-button> <button class="button button--primary confirm-button">OK</button>
</div> </div>
</sm-popup> </sm-popup>
<sm-popup id="prompt_popup"> <sm-popup id="prompt_popup">
@ -47,9 +47,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">
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button> <button class="button cancel-button">Cancel</button>
<sm-button variant="no-outline" class="submit-btn" type="submit">OK</sm-button> <button class="button confirm-button button--primary" type="submit">OK</button>
</div> </div>
</sm-form> </sm-form>
</sm-popup> </sm-popup>
@ -60,7 +60,7 @@
<h4>RanchiMall Exchange</h4> <h4>RanchiMall Exchange</h4>
<p>Getting everything ready</p> <p>Getting everything ready</p>
</div> </div>
<sm-button onclick="floExchangeAPI.clearAllLocalData()">Reset</sm-button> <button class="button" onclick="floExchangeAPI.clearAllLocalData()">Reset</button>
</div> </div>
</div> </div>
<article id="home" class="page hide"> <article id="home" class="page hide">
@ -102,13 +102,13 @@
</span> </span>
</sm-checkbox> </sm-checkbox>
<div id="login_button_wrapper" class="stateful-button-wrapper"> <div id="login_button_wrapper" class="stateful-button-wrapper">
<sm-button variant="primary" onclick="UI_evt.login();">Log in</sm-button> <button class="button button--primary" onclick="UI_evt.login();" type="submit">Log in</button>
</div> </div>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<p>Don't have FLO credentials?</p> <p>Don't have FLO credentials?</p>
<sm-button id="sign_up_button">Generate FLO credentials</sm-button> <button class="button" id="sign_up_button">Generate FLO credentials</button>
</div> </div>
<sm-button onclick="floExchangeAPI.clearAllLocalData()">Reset</sm-button> <button class="button" onclick="floExchangeAPI.clearAllLocalData()">Reset</button>
</sm-form> </sm-form>
<section id="exchange_wrapper" class="hide user-content"> <section id="exchange_wrapper" class="hide user-content">
<div id="asset_list_wrapper" class="grid gap-1 align-start"> <div id="asset_list_wrapper" class="grid gap-1 align-start">
@ -135,11 +135,11 @@
<div id="price_chart_container" class="flex flex-direction-column gap-0-5 hide-on-mobile"> <div id="price_chart_container" class="flex flex-direction-column gap-0-5 hide-on-mobile">
<div id="chart_header" class="flex align-center space-between"> <div id="chart_header" class="flex align-center space-between">
<H4 id="chart_asset"></H4> <H4 id="chart_asset"></H4>
<strip-select id="price_duration_selector"> <sm-chips id="price_duration_selector">
<strip-option value="hour" title="1 Hour price interval" selected>Hour <sm-chip value="hour" title="1 Hour price interval" selected>Hour
</strip-option> </sm-chip>
<strip-option value="day" title="1 Day price interval">Day</strip-option> <sm-chip value="day" title="1 Day price interval">Day</sm-chip>
</strip-select> </sm-chips>
</div> </div>
<div id="price_chart_wrapper" class="flex" style="position: relative; flex: 1"> <div id="price_chart_wrapper" class="flex" style="position: relative; flex: 1">
<div id="price_history_chart"></div> <div id="price_history_chart"></div>
@ -148,10 +148,10 @@
<sm-form id="trade_form"> <sm-form id="trade_form">
<div class="flex space-between align-center"> <div class="flex space-between align-center">
<h4 id="traded_asset">Trade FLO</h4> <h4 id="traded_asset">Trade FLO</h4>
<strip-select id="trade_type_selector" class="tab"> <sm-chips id="trade_type_selector" class="tab">
<strip-option value="buy" selected>Buy</strip-option> <sm-chip value="buy" selected>Buy</sm-chip>
<strip-option value="sell">Sell</strip-option> <sm-chip value="sell">Sell</sm-chip>
</strip-select> </sm-chips>
</div> </div>
<div id="get_price" class="flex align-center space-between"></div> <div id="get_price" class="flex align-center space-between"></div>
<sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001" <sm-input id="get_quantity" placeholder="Quantity" type="number" step="0.00000001"
@ -188,8 +188,8 @@
</div> </div>
<div id="trade_button_wrapper" <div id="trade_button_wrapper"
class="stateful-button-wrapper flex align-center justify-center"> class="stateful-button-wrapper flex align-center justify-center">
<sm-button id="trade_button" class="uppercase w-100" variant="primary">BUY FLO <button id="trade_button" class="uppercase w-100 button button--primary"
</sm-button> type="submit">BUY FLO </button>
</div> </div>
</sm-form> </sm-form>
</div> </div>
@ -235,10 +235,10 @@
<h4 id="my_orders__title"> <h4 id="my_orders__title">
My orders My orders
</h4> </h4>
<strip-select id="my_orders_category_selector" class="tab"> <sm-chips id="my_orders_category_selector" class="tab">
<strip-option value="open" selected>Live</strip-option> <sm-chip value="open" selected>Live</sm-chip>
<strip-option value="completed">Trades</strip-option> <sm-chip value="completed">Trades</sm-chip>
</strip-select> </sm-chips>
</div> </div>
<div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide"> <div id="orders_section__header--secondary" class="flex w-100 align-center space-between hide">
<button class="" onclick="clearSelection()" title="Clear all selection"> <button class="" onclick="clearSelection()" title="Clear all selection">
@ -292,10 +292,10 @@
d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /> d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
</svg> </svg>
</button> </button>
<strip-select id="market_orders_category_selector" class="tab justify-right"> <sm-chips id="market_orders_category_selector" class="tab justify-right">
<strip-option value="open" selected>Live</strip-option> <sm-chip value="open" selected>Live</sm-chip>
<strip-option value="completed">Trades</strip-option> <sm-chip value="completed">Trades</sm-chip>
</strip-select> </sm-chips>
</div> </div>
<div id="market_orders_wrapper"> <div id="market_orders_wrapper">
<div class="grid gap-1"> <div class="grid gap-1">
@ -331,10 +331,10 @@
<div id="portfolio" class="mobile-page hide"> <div id="portfolio" class="mobile-page hide">
<div class="grid gap-1-5"> <div class="grid gap-1-5">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<strip-select id="portfolio_pages_selector"> <sm-chips id="portfolio_pages_selector">
<strip-option value="exchange" selected>Exchange</strip-option> <sm-chip value="exchange" selected>Exchange</sm-chip>
<strip-option value="personal">On-chain</strip-option> <sm-chip value="personal">On-chain</sm-chip>
</strip-select> </sm-chips>
<div class="multi-state-button"> <div class="multi-state-button">
<button id="portfolio_balance_refresh_button" class="button button--small" <button id="portfolio_balance_refresh_button" class="button button--small"
onclick="refresh(false,this);" title="Refresh"> onclick="refresh(false,this);" title="Refresh">
@ -745,7 +745,7 @@
</header> </header>
<section class="grid gap-1-5"> <section class="grid gap-1-5">
<div id="confirm_trade__details" class="grid gap-1-5"></div> <div id="confirm_trade__details" class="grid gap-1-5"></div>
<sm-button variant="primary" onclick="tradeAsset()" autofocus>Confirm</sm-button> <button class="button button--primary" onclick="tradeAsset()" autofocus>Confirm</button>
</section> </section>
</sm-popup> </sm-popup>
<sm-popup id="user_popup"> <sm-popup id="user_popup">
@ -772,9 +772,9 @@
private key. private key.
</p> </p>
</div> </div>
<sm-button onclick="proxy.lock();">Add password</sm-button> <button class="button" onclick="proxy.lock();">Add password</button>
</div> </div>
<sm-button class="danger" onclick="UI_evt.logout();">Log out</sm-button> <button class="button button--danger" onclick="UI_evt.logout();">Log out</button>
</section> </section>
</sm-popup> </sm-popup>
<sm-popup id="sign_up_popup"> <sm-popup id="sign_up_popup">
@ -837,7 +837,7 @@
error-text="Invalid private key" data-private-key="" animate> error-text="Invalid private key" data-private-key="" animate>
</sm-input> </sm-input>
<div id="portfolio_popup__cta_wrapper" class="stateful-button-wrapper"> <div id="portfolio_popup__cta_wrapper" class="stateful-button-wrapper">
<sm-button id="portfolio_popup__cta" class="uppercase" variant="primary"></sm-button> <button id="portfolio_popup__cta" class="button button--primary uppercase" type="submit"></button>
</div> </div>
</sm-form> </sm-form>
<div id="portfolio_result" class="grid gap-2 hide"> <div id="portfolio_result" class="grid gap-2 hide">
@ -1103,25 +1103,16 @@
const relativeTime = new RelativeTime('en', { style: 'short' }); const relativeTime = new RelativeTime('en', { style: 'short' });
//Checks for internet connection status //Checks for internet connection status
if (!navigator.onLine) { if (!navigator.onLine)
notify( floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
"There seems to be a problem connecting to the internet. Please check your internet connection.", window.addEventListener('offline', () => {
"error", floGlobals.connectionErrorNotification = notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error')
{ pinned: true } })
); window.addEventListener('online', () => {
} getRef('notification_drawer').remove(floGlobals.connectionErrorNotification)
window.addEventListener("offline", () => { notify('We are back online.', 'success')
notify(
"There seems to be a problem connecting to the internet. Please check your internet connection.",
"error",
{ pinned: true }
);
location.reload() location.reload()
}); })
window.addEventListener("online", () => {
getRef("notification_drawer").clearAll();
notify("We are back online.", "success");
});
// Use instead of document.getElementById // Use instead of document.getElementById
function getRef(elementId) { function getRef(elementId) {
@ -1187,72 +1178,82 @@
return Array.from(document.querySelectorAll(selector)); return Array.from(document.querySelectorAll(selector));
} }
let zIndex = 10 let zIndex = 50
// function required for popups or modals to appear // function required for popups or modals to appear
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)
} }
// 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').textContent = title; getRef('confirm_message').innerText = message;
getRef('confirm_message').textContent = message; const cancelButton = getRef('confirmation_popup').querySelector('.cancel-button');
let cancelButton = getRef('confirmation_popup').children[2].children[0], const confirmButton = getRef('confirmation_popup').querySelector('.confirm-button')
submitButton = getRef('confirmation_popup').children[2].children[1] confirmButton.textContent = confirmText
submitButton.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 = {}) {
const { isPassword = true, 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').textContent = title; getRef('prompt_message').innerText = message;
getRef('prompt_message').textContent = message; const cancelButton = getRef('prompt_popup').querySelector('.cancel-button');
let buttons = getRef('prompt_popup').querySelectorAll("sm-button"); const confirmButton = getRef('prompt_popup').querySelector('.confirm-button')
if (isPassword) if (isPassword) {
placeholder = 'Password'
getRef('prompt_input').setAttribute("type", "password") getRef('prompt_input').setAttribute("type", "password")
}
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 })
}) })
} }
//Function for displaying toast notifications. pass in error for mode param if you want to show an error. //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
function notify(message, mode, options = {}) { function notify(message, mode, options = {}) {
const { pinned = false, sound = false } = options
let icon let icon
switch (mode) { switch (mode) {
case 'success': case 'success':
@ -1260,14 +1261,14 @@
break; break;
case 'error': case 'error':
icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>` icon = `<svg class="icon icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>`
options.pinned = true
break; break;
} }
getRef("notification_drawer").push(message, { pinned, icon });
if (mode === 'error') { if (mode === 'error') {
console.error(message) console.error(message)
} }
return getRef("notification_drawer").push(message, { icon, ...options });
} }
function getFormattedTime(time, format) { function getFormattedTime(time, format) {
try { try {
let [day, month, date, year] = new Date(time).toString().split(' '), let [day, month, date, year] = new Date(time).toString().split(' '),
@ -1312,8 +1313,8 @@
notify('copied', 'success') notify('copied', 'success')
}) })
document.addEventListener("pointerdown", (e) => { document.addEventListener("pointerdown", (e) => {
if (e.target.closest("button:not([disabled]), sm-button:not([disabled]), .interact")) { if (e.target.closest("button:not([disabled]), .interact")) {
createRipple(e, e.target.closest("button, sm-button, .interact")); createRipple(e, e.target.closest("button, .interact"));
} }
}); });
document.querySelectorAll('.popup__header__close, .close-popup-on-click').forEach(elem => { document.querySelectorAll('.popup__header__close, .close-popup-on-click').forEach(elem => {

2845
docs/scripts/components.js
View File

File diff suppressed because one or more lines are too long