From 4e841874a3cf5636bfcfc4dd52d24c30d2816b35 Mon Sep 17 00:00:00 2001 From: LianaHus Date: Fri, 3 May 2019 15:45:07 +0200 Subject: [PATCH 1/4] -new style for modal using bootstrap classes. -fixes issue with title -add more titles --- src/app/files/file-explorer.js | 12 ++-- src/app/tabs/runTab/contractDropdown.js | 2 +- src/app/tabs/runTab/settings.js | 9 ++- src/app/ui/landing-page/landing-page.js | 10 +-- src/app/ui/modaldialog.js | 61 ++++++++++------- .../ui/styles/auto-complete-popup-styles.js | 2 +- src/app/ui/styles/modaldialog-styles.js | 66 +------------------ test/gist-handler-test.js | 2 +- 8 files changed, 57 insertions(+), 107 deletions(-) diff --git a/src/app/files/file-explorer.js b/src/app/files/file-explorer.js index 5405f392b4..bd59c03a9e 100644 --- a/src/app/files/file-explorer.js +++ b/src/app/files/file-explorer.js @@ -182,7 +182,7 @@ function fileExplorer (localRegistry, files, menuItems) { }, 'Delete': () => { if (self.files.readonly) { return tooltip('cannot delete folder. ' + self.files.type + ' is a read only explorer') } - modalDialogCustom.confirm(null, 'Do you want to delete this folder?', () => { files.remove(key) }, () => {}) + modalDialogCustom.confirm('Confirm to delete a folder', 'Are you sure you want to delete this folder?', () => { files.remove(key) }, () => {}) } }) }) @@ -198,7 +198,7 @@ function fileExplorer (localRegistry, files, menuItems) { }, 'Delete': () => { if (self.files.readonly) { return tooltip('cannot delete file. ' + self.files.type + ' is a read only explorer') } - modalDialogCustom.confirm(null, 'Do you want to delete this file?', () => { files.remove(key) }, () => {}) + modalDialogCustom.confirm('Delete a file', 'Are you sure you want to delete this file?', () => { files.remove(key) }, () => {}) } }) }) @@ -287,7 +287,7 @@ function fileExplorer (localRegistry, files, menuItems) { var isFolder = label.className.indexOf('folder') !== -1 var save = textUnderEdit !== label.innerText if (save) { - modalDialogCustom.confirm(null, 'Do you want to rename?', () => { rename() }, () => { label.innerText = textUnderEdit }) + modalDialogCustom.confirm('Confirm to rename a file', 'Are you sure you want to rename thi file?', () => { rename() }, () => { label.innerText = textUnderEdit }) } label.removeAttribute('contenteditable') label.classList.remove('bg-light') @@ -357,7 +357,7 @@ fileExplorer.prototype.uploadFile = function (event) { if (!exist) { loadFile() } else { - modalDialogCustom.confirm(null, `The file ${name} already exists! Would you like to overwrite it?`, () => { loadFile() }) + modalDialogCustom.confirm('Confirm to overrite', `The file ${name} already exists! Would you like to overwrite it?`, () => { loadFile() }) } }) }) @@ -369,7 +369,7 @@ fileExplorer.prototype.toGist = function (id) { modalDialogCustom.alert('Failed to manage gist: ' + error) } else { if (data.html_url) { - modalDialogCustom.confirm(null, `The gist is at ${data.html_url}. Would you like to open it in a new window?`, () => { + modalDialogCustom.confirm('Gist is ready', `The gist is at ${data.html_url}. Would you like to open it in a new window?`, () => { window.open(data.html_url, '_blank') }) } else { @@ -488,7 +488,7 @@ fileExplorer.prototype.updateGist = function () { fileExplorer.prototype.createNewFile = function () { let self = this - modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => { + modalDialogCustom.prompt('Create new file', 'File Name', 'Untitled.sol', (input) => { helper.createNonClashingName(input, self.files, (error, newName) => { if (error) return modalDialogCustom.alert('Failed to create file ' + newName + ' ' + error) if (!self.files.set(newName, '')) { diff --git a/src/app/tabs/runTab/contractDropdown.js b/src/app/tabs/runTab/contractDropdown.js index 3fee13356c..7eb922d2f7 100644 --- a/src/app/tabs/runTab/contractDropdown.js +++ b/src/app/tabs/runTab/contractDropdown.js @@ -182,7 +182,7 @@ class ContractDropdownUI { var address = this.atAddressButtonInput.value this.dropdownLogic.loadContractFromAddress(address, (cb) => { - modalDialogCustom.confirm(null, 'Do you really want to interact with ' + address + ' using the current ABI definition ?', cb) + modalDialogCustom.confirm(null, 'Do you really want to interact with ' + address + ' using the current ABI definition?', cb) }, (error, loadType, abi) => { if (error) { diff --git a/src/app/tabs/runTab/settings.js b/src/app/tabs/runTab/settings.js index b5f0126f6c..ad2ac92d81 100644 --- a/src/app/tabs/runTab/settings.js +++ b/src/app/tabs/runTab/settings.js @@ -150,9 +150,12 @@ class SettingsUI { this.settings.event.register('addProvider', (network) => { selectExEnv.appendChild(yo``) + title="Manually added environment: ${network.url}" + value="${network.name}" + name="executionContext" + > + ${network.name} + `) addTooltip(`${network.name} [${network.url}] added`) }) diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js index 97651c63e9..32bb2c0ac7 100644 --- a/src/app/ui/landing-page/landing-page.js +++ b/src/app/ui/landing-page/landing-page.js @@ -89,10 +89,10 @@ export class LandingPage extends BaseApi { } render () { - let load = function (item) { + let load = function (service, item) { let compilerImport = new CompilerImport() let fileProviders = globalRegistry.get('fileproviders').api - modalDialogCustom.prompt(null, 'Enter the ' + item + ' you would like to load.', null, (target) => { + modalDialogCustom.prompt(`Import from ${service}`, 'Enter the ' + item + ' you would like to load.', null, (target) => { if (target !== '') { compilerImport.import( target, @@ -211,9 +211,9 @@ export class LandingPage extends BaseApi {

Import From:

- - - + + +
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js index 8483cf43ba..40afdf6921 100644 --- a/src/app/ui/modaldialog.js +++ b/src/app/ui/modaldialog.js @@ -3,11 +3,12 @@ var css = require('./styles/modaldialog-styles') module.exports = (title, content, ok, cancel, focusSelector, opts) => { let agreed = true + let footerIsActive = true opts = opts || {} - var container = document.querySelector(`.${css.modal}`) + var container = document.querySelector(`.modal`) if (!container) { document.querySelector('body').appendChild(html(opts)) - container = document.querySelector(`.${css.modal}`) + container = document.querySelector(`.modal`) } var closeDiv = document.getElementById('modal-close') @@ -21,11 +22,11 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' cancelDiv.style.display = cancelDiv.innerHTML === '' ? 'none' : 'inline-block' - var modal = document.querySelector(`.${css.modalBody}`) - var modalTitle = document.querySelector(`.${css.modalHeader} h3`) + var modal = document.querySelector(`.modal-body`) + var modalTitle = document.querySelector(`.modal-header h6`) modalTitle.innerHTML = '' - if (title) modalTitle.innerHTML = title + if (title) modalTitle.innerText = title modal.innerHTML = '' if (content) modal.appendChild(content) @@ -57,22 +58,22 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { hide() if (cancel && cancel.fn) cancel.fn() if (container) { - container.class = css.modal + container.class = `modal` container = null } } function modalKeyEvent (e) { - if (e.keyCode === 27) { + if (e.keyCode === 27) { // Esc cancelListener() - } else if (e.keyCode === 13) { + } else if (e.keyCode === 13) { // Enter e.preventDefault() okListener() - } else if (e.keyCode === 37) { + } else if (e.keyCode === 37 && footerIsActive) { // Arrow Left e.preventDefault() agreed = true setFocusOn('ok') - } else if (e.keyCode === 39) { + } else if (e.keyCode === 39 && footerIsActive) { // Arrow Right e.preventDefault() agreed = false setFocusOn('cancel') @@ -87,7 +88,7 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { if (!container) return container.style.display = 'block' if (focusSelector) { - const focusTarget = document.querySelector(`.${css.modal} ${focusSelector}`) + const focusTarget = document.querySelector(`.modal ${focusSelector}`) if (focusTarget) { focusTarget.focus() if (typeof focusTarget.setSelectionRange === 'function') { @@ -110,25 +111,35 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => { cancelDiv.addEventListener('click', cancelListener) closeDiv.addEventListener('click', cancelListener) document.addEventListener('keydown', modalKeyEvent) - if (document.getElementById('modal-background')) { - document.getElementById('modal-background').addEventListener('click', cancelListener) + + let 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 } } function html (opts) { - return yo`