bunsenstraat
3 years ago
committed by
GitHub
commit
70f2c0fdaf
@ -1,147 +0,0 @@ |
|||||||
const yo = require('yo-yo') |
|
||||||
const csjs = require('csjs-inject') |
|
||||||
const modalDialog = require('../ui/modaldialog') |
|
||||||
|
|
||||||
const css = csjs` |
|
||||||
.remixui_permissions { |
|
||||||
position: sticky; |
|
||||||
bottom: 0; |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
align-items: center; |
|
||||||
padding: 5px 20px; |
|
||||||
} |
|
||||||
.permissions button { |
|
||||||
padding: 2px 5px; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.permissionForm h4 { |
|
||||||
font-size: 1.3rem; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
.permissionForm h6 { |
|
||||||
font-size: 1.1rem; |
|
||||||
} |
|
||||||
.permissionForm hr { |
|
||||||
width: 80%; |
|
||||||
} |
|
||||||
.permissionKey { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.permissionKey i { |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
.checkbox { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
.checkbox label { |
|
||||||
margin: 0; |
|
||||||
font-size: 1rem; |
|
||||||
} |
|
||||||
` |
|
||||||
|
|
||||||
export class PluginManagerSettings { |
|
||||||
constructor () { |
|
||||||
const fromLocal = window.localStorage.getItem('plugins/permissions') |
|
||||||
this.permissions = JSON.parse(fromLocal || '{}') |
|
||||||
} |
|
||||||
|
|
||||||
openDialog () { |
|
||||||
this.currentSetting = this.settings() |
|
||||||
modalDialog('Plugin Manager Permissions', this.currentSetting, |
|
||||||
{ fn: () => this.onValidation() } |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
onValidation () { |
|
||||||
const permissions = JSON.stringify(this.permissions) |
|
||||||
window.localStorage.setItem('plugins/permissions', permissions) |
|
||||||
} |
|
||||||
|
|
||||||
/** Clear one permission from a plugin */ |
|
||||||
clearPersmission (from, to, method) { |
|
||||||
// eslint-disable-next-line no-debugger
|
|
||||||
debugger |
|
||||||
if (this.permissions[to] && this.permissions[to][method]) { |
|
||||||
delete this.permissions[to][method][from] |
|
||||||
if (Object.keys(this.permissions[to][method]).length === 0) { |
|
||||||
delete this.permissions[to][method] |
|
||||||
} |
|
||||||
if (Object.keys(this.permissions[to]).length === 0) { |
|
||||||
delete this.permissions[to] |
|
||||||
} |
|
||||||
yo.update(this.currentSetting, this.settings()) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** Clear all persmissions from a plugin */ |
|
||||||
clearAllPersmission (to) { |
|
||||||
// eslint-disable-next-line no-debugger
|
|
||||||
debugger |
|
||||||
if (!this.permissions[to]) return |
|
||||||
delete this.permissions[to] |
|
||||||
yo.update(this.currentSetting, this.settings()) |
|
||||||
} |
|
||||||
|
|
||||||
settings () { |
|
||||||
const permissionByToPlugin = (toPlugin, funcObj) => { |
|
||||||
const permissionByMethod = (methodName, fromPlugins) => { |
|
||||||
const togglePermission = (fromPlugin) => { |
|
||||||
this.permissions[toPlugin][methodName][fromPlugin].allow = !this.permissions[toPlugin][methodName][fromPlugin].allow |
|
||||||
} |
|
||||||
return Object.keys(fromPlugins).map(fromName => { |
|
||||||
const fromPluginPermission = fromPlugins[fromName] |
|
||||||
const checkbox = fromPluginPermission.allow |
|
||||||
? yo`<input onchange=${() => togglePermission(fromName)} class="mr-2" type="checkbox" checked id="permission-checkbox-${toPlugin}-${methodName}-${toPlugin}" aria-describedby="module ${fromPluginPermission} asks permission for ${methodName}" />` |
|
||||||
: yo`<input onchange=${() => togglePermission(fromName)} class="mr-2" type="checkbox" id="permission-checkbox-${toPlugin}-${methodName}-${toPlugin}" aria-describedby="module ${fromPluginPermission} asks permission for ${methodName}" />` |
|
||||||
return yo` |
|
||||||
<div class="form-group ${css.permissionKey}"> |
|
||||||
<div class="${css.checkbox}"> |
|
||||||
${checkbox} |
|
||||||
<label for="permission-checkbox-${toPlugin}-${methodName}-${toPlugin}" data-id="permission-label-${toPlugin}-${methodName}-${toPlugin}">Allow <u>${fromName}</u> to call <u>${methodName}</u></label> |
|
||||||
</div> |
|
||||||
<i onclick="${() => this.clearPersmission(fromName, toPlugin, methodName)}" class="fa fa-trash-alt" data-id="pluginManagerSettingsRemovePermission-${toPlugin}-${methodName}-${toPlugin}"></i> |
|
||||||
</div> |
|
||||||
` |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
const permissionsByFunctions = Object |
|
||||||
.keys(funcObj) |
|
||||||
.map(methodName => permissionByMethod(methodName, funcObj[methodName])) |
|
||||||
|
|
||||||
return yo` |
|
||||||
<div border p-2> |
|
||||||
<div class="pb-2 ${css.permissionKey}"> |
|
||||||
<h3>${toPlugin} permissions:</h3> |
|
||||||
<i onclick="${() => this.clearAllPersmission(toPlugin)}" class="far fa-trash-alt" data-id="pluginManagerSettingsClearAllPermission-${toPlugin}"></i> |
|
||||||
</div> |
|
||||||
${permissionsByFunctions} |
|
||||||
</div>` |
|
||||||
} |
|
||||||
|
|
||||||
const byToPlugin = Object |
|
||||||
.keys(this.permissions) |
|
||||||
.map(toPlugin => permissionByToPlugin(toPlugin, this.permissions[toPlugin])) |
|
||||||
|
|
||||||
const title = byToPlugin.length === 0 |
|
||||||
? yo`<h4>No Permission requested yet.</h4>` |
|
||||||
: yo`<h4>Current Permission settings</h4>` |
|
||||||
|
|
||||||
return yo`<form class="${css.permissionForm}" data-id="pluginManagerSettingsPermissionForm">
|
|
||||||
${title} |
|
||||||
<hr/> |
|
||||||
${byToPlugin} |
|
||||||
</form>` |
|
||||||
} |
|
||||||
|
|
||||||
render () { |
|
||||||
return yo` |
|
||||||
<footer class="bg-light ${css.permissions} remix-bg-opacity"> |
|
||||||
<button onclick="${() => this.openDialog()}" class="btn btn-primary settings-button" data-id="pluginManagerPermissionsButton">Permissions</button> |
|
||||||
</footer>` |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,114 +0,0 @@ |
|||||||
var modal = require('./modaldialog.js') |
|
||||||
var yo = require('yo-yo') |
|
||||||
var css = require('./styles/modal-dialog-custom-styles') |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
alert: function (title, text) { |
|
||||||
if (text) return modal(title, yo`<div>${text}</div>`, null, { label: null }) |
|
||||||
return modal('Alert', yo`<div>${title}</div>`, null, { label: null }) |
|
||||||
}, |
|
||||||
prompt: function (title, text, inputValue, ok, cancel, focus) { |
|
||||||
return prompt(title, text, false, inputValue, ok, cancel, focus) |
|
||||||
}, |
|
||||||
promptPassphrase: function (title, text, inputValue, ok, cancel) { |
|
||||||
return prompt(title, text, true, inputValue, ok, cancel) |
|
||||||
}, |
|
||||||
promptPassphraseCreation: function (ok, cancel) { |
|
||||||
var text = 'Please provide a Passphrase for the account creation' |
|
||||||
var input = yo` |
|
||||||
<div> |
|
||||||
<input id="prompt1" type="password" name='prompt_text' class="${css.prompt_text}" oninput="${(e) => validateInput(e)}"> |
|
||||||
<br> |
|
||||||
<br> |
|
||||||
<input id="prompt2" type="password" name='prompt_text' class="${css.prompt_text}" oninput="${(e) => validateInput(e)}"> |
|
||||||
</div> |
|
||||||
` |
|
||||||
return modal(null, yo`<div>${text}<div>${input}</div></div>`, |
|
||||||
{ |
|
||||||
fn: () => { |
|
||||||
if (typeof ok === 'function') { |
|
||||||
if (input.querySelector('#prompt1').value === input.querySelector('#prompt2').value) { |
|
||||||
ok(null, input.querySelector('#prompt1').value) |
|
||||||
} else { |
|
||||||
ok('Passphase does not match') |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
fn: () => { |
|
||||||
if (typeof cancel === 'function') cancel() |
|
||||||
} |
|
||||||
} |
|
||||||
) |
|
||||||
}, |
|
||||||
promptMulti: function ({ title, text, inputValue }, ok, cancel) { |
|
||||||
if (!inputValue) inputValue = '' |
|
||||||
const input = yo` |
|
||||||
<textarea |
|
||||||
id="prompt_text" |
|
||||||
data-id="modalDialogCustomPromptText" |
|
||||||
class=${css.prompt_text} |
|
||||||
rows="4" |
|
||||||
cols="50" |
|
||||||
oninput="${(e) => validateInput(e)}" |
|
||||||
></textarea> |
|
||||||
` |
|
||||||
return modal(title, yo`<div>${text}<div>${input}</div></div>`, |
|
||||||
{ |
|
||||||
fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) } |
|
||||||
}, |
|
||||||
{ |
|
||||||
fn: () => { if (typeof cancel === 'function') cancel() } |
|
||||||
} |
|
||||||
) |
|
||||||
}, |
|
||||||
confirm: function (title, text, ok, cancel) { |
|
||||||
return modal(title, yo`<div>${text}</div>`, |
|
||||||
{ |
|
||||||
fn: () => { if (typeof ok === 'function') ok() } |
|
||||||
}, |
|
||||||
{ |
|
||||||
fn: () => { if (typeof cancel === 'function') cancel() } |
|
||||||
} |
|
||||||
) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const validateInput = (e) => { |
|
||||||
if (!document.getElementById('modal-footer-ok')) return |
|
||||||
|
|
||||||
if (e.target.value === '') { |
|
||||||
document.getElementById('modal-footer-ok').classList.add('disabled') |
|
||||||
document.getElementById('modal-footer-ok').style.pointerEvents = 'none' |
|
||||||
} else { |
|
||||||
document.getElementById('modal-footer-ok').classList.remove('disabled') |
|
||||||
document.getElementById('modal-footer-ok').style.pointerEvents = 'auto' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function prompt (title, text, hidden, inputValue, ok, cancel, focus) { |
|
||||||
if (!inputValue) inputValue = '' |
|
||||||
var type = hidden ? 'password' : 'text' |
|
||||||
var input = yo` |
|
||||||
<input |
|
||||||
type=${type} |
|
||||||
name='prompt_text' |
|
||||||
id='prompt_text' |
|
||||||
class="${css.prompt_text} form-control" |
|
||||||
value='${inputValue}' |
|
||||||
data-id="modalDialogCustomPromptText" |
|
||||||
oninput="${(e) => validateInput(e)}" |
|
||||||
> |
|
||||||
` |
|
||||||
|
|
||||||
modal(title, yo`<div>${text}<div>${input}</div></div>`, |
|
||||||
{ |
|
||||||
fn: () => { if (typeof ok === 'function') ok(document.getElementById('prompt_text').value) } |
|
||||||
}, |
|
||||||
{ |
|
||||||
fn: () => { if (typeof cancel === 'function') cancel() } |
|
||||||
}, |
|
||||||
focus ? '#prompt_text' : undefined |
|
||||||
) |
|
||||||
} |
|
||||||
@ -1,150 +0,0 @@ |
|||||||
var yo = require('yo-yo') |
|
||||||
var css = require('./styles/modaldialog-styles') |
|
||||||
|
|
||||||
let incomingModal = false // in case modals are queued, ensure we are not hiding the last one.
|
|
||||||
module.exports = (title, content, ok, cancel, focusSelector, opts) => { |
|
||||||
let agreed = true |
|
||||||
let footerIsActive = false |
|
||||||
opts = opts || {} |
|
||||||
var container = document.getElementById('modal-dialog') |
|
||||||
if (!container) { |
|
||||||
document.querySelector('body').appendChild(html(opts)) |
|
||||||
container = document.getElementById('modal-dialog') |
|
||||||
incomingModal = false |
|
||||||
} else incomingModal = true |
|
||||||
|
|
||||||
var closeDiv = document.getElementById('modal-close') |
|
||||||
if (opts.hideClose) closeDiv.style.display = 'none' |
|
||||||
|
|
||||||
var okDiv = document.getElementById('modal-footer-ok') |
|
||||||
okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' |
|
||||||
okDiv.style.display = okDiv.innerHTML === '' ? 'none' : 'inline-block' |
|
||||||
|
|
||||||
var cancelDiv = document.getElementById('modal-footer-cancel') |
|
||||||
cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' |
|
||||||
cancelDiv.style.display = cancelDiv.innerHTML === '' ? 'none' : 'inline-block' |
|
||||||
|
|
||||||
var modal = document.getElementById('modal-body-id') |
|
||||||
var modalTitle = document.getElementById('modal-title-h6') |
|
||||||
|
|
||||||
modalTitle.innerHTML = '' |
|
||||||
if (title) modalTitle.innerText = title |
|
||||||
|
|
||||||
modal.innerHTML = '' |
|
||||||
if (content) modal.appendChild(content) |
|
||||||
|
|
||||||
setFocusOn('ok') |
|
||||||
|
|
||||||
show() |
|
||||||
|
|
||||||
function setFocusOn (btn) { |
|
||||||
var okDiv = document.getElementById('modal-footer-ok') |
|
||||||
var cancelDiv = document.getElementById('modal-footer-cancel') |
|
||||||
if (btn === 'ok') { |
|
||||||
okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') |
|
||||||
cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') |
|
||||||
} else { |
|
||||||
cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark') |
|
||||||
okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function okListener () { |
|
||||||
removeEventListener() |
|
||||||
if (ok && ok.fn && agreed) ok.fn() |
|
||||||
if (!incomingModal) hide() |
|
||||||
incomingModal = false |
|
||||||
} |
|
||||||
|
|
||||||
function cancelListener () { |
|
||||||
removeEventListener() |
|
||||||
if (cancel && cancel.fn) cancel.fn() |
|
||||||
if (!incomingModal) hide() |
|
||||||
incomingModal = false |
|
||||||
} |
|
||||||
|
|
||||||
function modalKeyEvent (e) { |
|
||||||
if (e.keyCode === 27) { // Esc
|
|
||||||
cancelListener() |
|
||||||
} else if (e.keyCode === 13) { // Enter
|
|
||||||
e.preventDefault() |
|
||||||
okListener() |
|
||||||
} else if (e.keyCode === 37 && footerIsActive) { // Arrow Left
|
|
||||||
e.preventDefault() |
|
||||||
agreed = true |
|
||||||
setFocusOn('ok') |
|
||||||
} else if (e.keyCode === 39 && footerIsActive) { // Arrow Right
|
|
||||||
e.preventDefault() |
|
||||||
agreed = false |
|
||||||
setFocusOn('cancel') |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function hide () { |
|
||||||
if (!container) return |
|
||||||
container.style.display = 'none' |
|
||||||
if (container.parentElement) container.parentElement.removeChild(container) |
|
||||||
container = null |
|
||||||
incomingModal = false |
|
||||||
} |
|
||||||
|
|
||||||
function show () { |
|
||||||
if (!container) return |
|
||||||
container.style.display = 'block' |
|
||||||
if (focusSelector) { |
|
||||||
const focusTarget = document.querySelector(`.modal ${focusSelector}`) |
|
||||||
if (focusTarget) { |
|
||||||
focusTarget.focus() |
|
||||||
if (typeof focusTarget.setSelectionRange === 'function') { |
|
||||||
focusTarget.setSelectionRange(0, focusTarget.value.length) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function removeEventListener () { |
|
||||||
okDiv.removeEventListener('click', okListener) |
|
||||||
cancelDiv.removeEventListener('click', cancelListener) |
|
||||||
closeDiv.removeEventListener('click', cancelListener) |
|
||||||
document.removeEventListener('keydown', modalKeyEvent) |
|
||||||
if (document.getElementById('modal-background')) { |
|
||||||
document.getElementById('modal-background').removeEventListener('click', cancelListener) |
|
||||||
} |
|
||||||
} |
|
||||||
okDiv.addEventListener('click', okListener) |
|
||||||
cancelDiv.addEventListener('click', cancelListener) |
|
||||||
closeDiv.addEventListener('click', cancelListener) |
|
||||||
document.addEventListener('keydown', modalKeyEvent) |
|
||||||
|
|
||||||
const modalDialog = document.getElementById('modal-dialog') |
|
||||||
if (modalDialog) { |
|
||||||
modalDialog.addEventListener('click', (e) => { |
|
||||||
footerIsActive = document.activeElement === modalDialog |
|
||||||
if (e.toElement === modalDialog) { |
|
||||||
cancelListener() // click is outside of modal-content
|
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
return { container, okListener, cancelListener, hide } |
|
||||||
} |
|
||||||
|
|
||||||
function html (opts) { |
|
||||||
return yo` |
|
||||||
<div id="modal-dialog" data-id="modalDialogContainer" data-backdrop="static" data-keyboard="false" class="modal" tabindex="-1" role="dialog"> |
|
||||||
<div id="modal-background" class="modal-dialog" role="document"> |
|
||||||
<div class="modal-content ${css.modalContent} ${opts.class}"> |
|
||||||
<div class="modal-header"> |
|
||||||
<h6 id="modal-title-h6" class="modal-title" data-id="modalDialogModalTitle"></h6> |
|
||||||
<span class="modal-close"> |
|
||||||
<i id="modal-close" title="Close" class="fas fa-times" aria-hidden="true"></i> |
|
||||||
</span> |
|
||||||
</div> |
|
||||||
<div id="modal-body-id" class="modal-body ${css.modalBody}" data-id="modalDialogModalBody"> - </div> |
|
||||||
<div class="modal-footer" data-id="modalDialogModalFooter" autofocus> |
|
||||||
<span id="modal-footer-ok" class="${css.modalFooterOk} modal-ok btn btn-sm btn-light" tabindex='5'>OK</span> |
|
||||||
<span id="modal-footer-cancel" class="${css.modalFooterCancel} modal-cancel btn btn-sm btn-light" tabindex='10' data-dismiss="modal">Cancel</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div>` |
|
||||||
} |
|
||||||
@ -1,110 +0,0 @@ |
|||||||
/* global Element */ |
|
||||||
var yo = require('yo-yo') |
|
||||||
var css = require('./styles/tooltip-styles') |
|
||||||
var modal = require('./modal-dialog-custom') |
|
||||||
|
|
||||||
/** |
|
||||||
* Open a tooltip |
|
||||||
* @param {string} tooltipText The text shown by the tooltip |
|
||||||
* @param {function} [action] Returns An HTMLElement to display for action |
|
||||||
*/ |
|
||||||
module.exports = function addTooltip (tooltipText, action, opts) { |
|
||||||
action = action || function () { return yo`<div></div>` } |
|
||||||
const t = new Toaster() |
|
||||||
return t.render(tooltipText, action(t), opts) |
|
||||||
} |
|
||||||
|
|
||||||
class Toaster { |
|
||||||
hide () { |
|
||||||
if (this.id) clearTimeout(this.id) |
|
||||||
setTimeout(() => { |
|
||||||
// remove from body after the animation is finished
|
|
||||||
if (this.tooltip.parentElement) this.tooltip.parentElement.removeChild(this.tooltip) |
|
||||||
}, 2000) |
|
||||||
animation(this.tooltip, css.animateTop.className) |
|
||||||
} |
|
||||||
|
|
||||||
render (tooltipText, actionElement, opts) { |
|
||||||
opts = defaultOptions(opts) |
|
||||||
let canShorten = true |
|
||||||
if (tooltipText instanceof Element) { |
|
||||||
canShorten = false |
|
||||||
} else { |
|
||||||
if (typeof tooltipText === 'object') { |
|
||||||
if (tooltipText.message) { |
|
||||||
tooltipText = tooltipText.message |
|
||||||
} else { |
|
||||||
try { |
|
||||||
tooltipText = JSON.stringify(tooltipText) |
|
||||||
} catch (e) { |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
const shortTooltipText = (canShorten && tooltipText.length > 201) ? tooltipText.substring(0, 200) + '...' : tooltipText |
|
||||||
this.resolveFn = resolve |
|
||||||
|
|
||||||
function showFullMessage () { |
|
||||||
modal.alert(tooltipText) |
|
||||||
} |
|
||||||
|
|
||||||
function closeTheToaster (self) { |
|
||||||
self.hide() |
|
||||||
over() |
|
||||||
resolve() |
|
||||||
} |
|
||||||
const button = tooltipText.length > 201 ? yo` |
|
||||||
<button class="btn btn-secondary btn-sm mx-3" style="white-space: nowrap;" onclick=${() => showFullMessage()}>Show full message</button> |
|
||||||
` : ''
|
|
||||||
|
|
||||||
this.tooltip = yo` |
|
||||||
<div data-shared="tooltipPopup" class="${css.tooltip} alert alert-info p-2" onmouseenter=${() => { over() }} onmouseleave=${() => { out() }}> |
|
||||||
<span class="px-2"> |
|
||||||
${shortTooltipText} |
|
||||||
${button} |
|
||||||
${actionElement} |
|
||||||
</span> |
|
||||||
<span style="align-self: baseline;"> |
|
||||||
<button data-id="tooltipCloseButton" class="fas fa-times btn-info mx-1 p-0" onclick=${() => closeTheToaster(this)}></button> |
|
||||||
</span> |
|
||||||
</div>` |
|
||||||
const timeOut = () => { |
|
||||||
return setTimeout(() => { |
|
||||||
if (this.id) { |
|
||||||
this.hide() |
|
||||||
resolve() |
|
||||||
} |
|
||||||
}, opts.time) |
|
||||||
} |
|
||||||
const over = () => { |
|
||||||
if (this.id) { |
|
||||||
clearTimeout(this.id) |
|
||||||
this.id = null |
|
||||||
} |
|
||||||
} |
|
||||||
const out = () => { |
|
||||||
if (!this.id) this.id = timeOut() |
|
||||||
} |
|
||||||
this.id = timeOut() |
|
||||||
document.body.appendChild(this.tooltip) |
|
||||||
animation(this.tooltip, css.animateBottom.className) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const defaultOptions = (opts) => { |
|
||||||
opts = opts || {} |
|
||||||
return { |
|
||||||
time: opts.time || 7000 |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const animation = (tooltip, anim) => { |
|
||||||
tooltip.classList.remove(css.animateTop.className) |
|
||||||
tooltip.classList.remove(css.animateBottom.className) |
|
||||||
// eslint-disable-next-line
|
|
||||||
void tooltip.offsetWidth // trick for restarting the animation
|
|
||||||
tooltip.classList.add(anim) |
|
||||||
} |
|
||||||
@ -1 +1,2 @@ |
|||||||
export * from './lib/remix-ui-helper' |
export * from './lib/remix-ui-helper' |
||||||
|
export * from './lib/helper-components' |
||||||
|
|||||||
@ -0,0 +1,55 @@ |
|||||||
|
import React from 'react' |
||||||
|
|
||||||
|
export const fileChangedToastMsg = (from: string, path: string) => ( |
||||||
|
<div><i className="fas fa-exclamation-triangle text-danger mr-1"></i> |
||||||
|
<span> |
||||||
|
{from} |
||||||
|
<span className="font-weight-bold text-warning"> |
||||||
|
is modifying
|
||||||
|
</span>{path} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
export const compilerConfigChangedToastMsg = (from: string, value: string) => ( |
||||||
|
<div> |
||||||
|
<b>{ from }</b> is updating the <b>Solidity compiler configuration</b>. |
||||||
|
<pre className="text-left">{value}</pre> |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
export const compileToastMsg = (from: string, fileName: string) => ( |
||||||
|
<div> |
||||||
|
<b>{from}</b> is requiring to compile <b>{fileName}</b> |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
export const compilingToastMsg = (settings: string) => ( |
||||||
|
<div> |
||||||
|
<b>Recompiling and debugging with params</b> |
||||||
|
<pre className="text-left">{settings}</pre></div> |
||||||
|
) |
||||||
|
|
||||||
|
export const compilationFinishedToastMsg = () => ( |
||||||
|
<div> |
||||||
|
<b>Compilation failed...</b> continuing <i>without</i> source code debugging. |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
export const notFoundToastMsg = (address: string) => ( |
||||||
|
<div> |
||||||
|
<b>Contract {address} not found in source code repository</b> continuing <i>without</i> source code debugging. |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
export const localCompilationToastMsg = () => ( |
||||||
|
<div> |
||||||
|
<b>Using compilation result from Solidity module</b> |
||||||
|
</div> |
||||||
|
) |
||||||
|
|
||||||
|
export const sourceVerificationNotAvailableToastMsg = () => ( |
||||||
|
<div> |
||||||
|
<b>Source verification plugin not activated or not available.</b> continuing <i>without</i> source code debugging. |
||||||
|
</div> |
||||||
|
) |
||||||
Loading…
Reference in new issue