diff --git a/index.html b/index.html index 1393633d3a..88af3241e9 100644 --- a/index.html +++ b/index.html @@ -38,18 +38,5 @@ - - diff --git a/src/app.js b/src/app.js index e3e48f78fc..5063808636 100644 --- a/src/app.js +++ b/src/app.js @@ -1,4 +1,4 @@ -/* global alert, confirm, Option, Worker, chrome */ +/* global confirm, Option, Worker, chrome */ 'use strict' var async = require('async') @@ -29,6 +29,7 @@ var FilePanel = require('./app/file-panel') var EditorPanel = require('./app/editor-panel') var RighthandPanel = require('./app/righthand-panel') var examples = require('./app/example-contracts') +var modalDialogCustom = require('./app/modal-dialog-custom') // var Txlistener = require('./app/txListener') var css = csjs` @@ -241,7 +242,7 @@ function run () { success: function (response) { if (response.data) { if (!response.data.files) { - alert('Gist load error: ' + response.data.message) + modalDialogCustom.alert('Gist load error: ' + response.data.message) return } loadFiles(response.data.files) @@ -253,7 +254,7 @@ function run () { // insert ballot contract if there are no files available if (!loadingFromGist && Object.keys(filesProviders['browser'].list()).length === 0) { if (!filesProviders['browser'].set(examples.ballot.name, examples.ballot.content)) { - alert('Failed to store example contract in browser. Remix will not work properly. Please ensure Remix has access to LocalStorage. Safari in Private mode is known not to work.') + modalDialogCustom.alert('Failed to store example contract in browser. Remix will not work properly. Please ensure Remix has access to LocalStorage. Safari in Private mode is known not to work.') } } @@ -611,9 +612,9 @@ function run () { udapp.event.register('publishContract', this, function (contract) { publishOnSwarm(contract, function (err) { if (err) { - alert('Failed to publish metadata: ' + err) + modalDialogCustom.alert('Failed to publish metadata: ' + err) } else { - alert('Metadata published successfully') + modalDialogCustom.alert('Metadata published successfully') } }) }) diff --git a/src/app/file-explorer.js b/src/app/file-explorer.js index 930ce00f46..d660fb5bc4 100755 --- a/src/app/file-explorer.js +++ b/src/app/file-explorer.js @@ -1,8 +1,9 @@ -/* global FileReader, confirm, alert */ +/* global FileReader, confirm */ var yo = require('yo-yo') var csjs = require('csjs-inject') var Treeview = require('ethereum-remix').ui.TreeView var modalDialog = require('./modaldialog') +var modalDialogCustom = require('./modal-dialog-custom') var EventManager = require('ethereum-remix').lib.EventManager @@ -133,7 +134,7 @@ function fileExplorer (appAPI, files) { var fileReader = new FileReader() fileReader.onload = function (event) { var success = files.set(name, event.target.result) - if (!success) alert('Failed to create file ' + name) + if (!success) modalDialogCustom.alert('Failed to create file ' + name) else events.trigger('focus', [name]) } fileReader.readAsText(file) @@ -219,12 +220,12 @@ function fileExplorer (appAPI, files) { newPath[newPath.length - 1] = label.innerText newPath = newPath.join('/') if (label.innerText.match(/(\/|:|\*|\?|"|<|>|\\|\||')/) !== null) { - alert('special characters are not allowsed') + modalDialogCustom.alert('special characters are not allowsed') label.innerText = textUnderEdit } else if (!files.exists(newPath)) { files.rename(label.dataset.path, newPath, isFolder) } else { - alert('File already exists.') + modalDialogCustom.alert('File already exists.') label.innerText = textUnderEdit } } else label.innerText = textUnderEdit @@ -253,7 +254,7 @@ function fileExplorer (appAPI, files) { } } if (err) { - alert(`couldn't rename - ${err}`) + modalDialogCustom.alert(`could not rename - ${err}`) label.innerText = textUnderEdit } else { textUnderEdit = label.innerText @@ -305,7 +306,7 @@ function fileExplorer (appAPI, files) { } function fileRenamedError (error) { - alert(error) + modalDialogCustom.alert(error) } function fileAdded (filepath) { diff --git a/src/app/file-panel.js b/src/app/file-panel.js index 316441d37e..2728929ecb 100644 --- a/src/app/file-panel.js +++ b/src/app/file-panel.js @@ -1,10 +1,11 @@ -/* global alert */ + var csjs = require('csjs-inject') var yo = require('yo-yo') var EventManager = require('ethereum-remix').lib.EventManager var FileExplorer = require('./file-explorer') var modalDialog = require('./modaldialog') +var modalDialogCustom = require('./modal-dialog-custom') module.exports = filepanel @@ -214,7 +215,7 @@ function filepanel (appAPI, filesProvider) { function createNewFile () { var newName = filesProvider['browser'].type + '/' + appAPI.createName('Untitled.sol') if (!filesProvider['browser'].set(newName, '')) { - alert('Failed to create file ' + newName) + modalDialogCustom.alert('Failed to create file ' + newName) } else { appAPI.switchToFile(newName) } diff --git a/src/app/files-tab.js b/src/app/files-tab.js index f23befcc0a..2b0c993f19 100644 --- a/src/app/files-tab.js +++ b/src/app/files-tab.js @@ -1,6 +1,7 @@ -/* global alert, confirm, prompt */ +/* global confirm, prompt */ var yo = require('yo-yo') var $ = require('jquery') +var modalDialogCustom = require('./modal-dialog-custom') var QueryParams = require('./query-params') var queryParams = new QueryParams() @@ -70,7 +71,7 @@ function filesTab (container, appAPI, events, opts) { } }).fail(function (xhr, text, err) { console.log('fail', text) - alert('Failed to create gist: ' + (err || 'Unknown transport error')) + modalDialogCustom.alert('Failed to create gist: ' + (err || 'Unknown transport error')) }) } }) diff --git a/src/app/modal-dialog-custom.js b/src/app/modal-dialog-custom.js new file mode 100644 index 0000000000..aad4586a85 --- /dev/null +++ b/src/app/modal-dialog-custom.js @@ -0,0 +1,7 @@ +var modal = require('./modaldialog.js') +var yo = require('yo-yo') +module.exports = { + alert: function (text) { + modal('', yo`
${text}
`, null, { label: null }) + } +} diff --git a/src/app/modaldialog.js b/src/app/modaldialog.js index 0ec9182371..5048e8b9e7 100644 --- a/src/app/modaldialog.js +++ b/src/app/modaldialog.js @@ -1,28 +1,98 @@ +var yo = require('yo-yo') +var csjs = require('csjs-inject') + +var css = csjs` + .modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1000; /* Sit on top of everything including the dragbar */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } + .modalHeader { + padding: 2px 16px; + background-color: orange; + color: white; + } + .modalBody { + padding: 1.5em; + line-height: 1.5em; + } + .modalFooter { + padding: 10px 30px; + background-color: orange; + color: white; + text-align: right; + font-weight: 700; + cursor: pointer; + } + .modalContent { + position: relative; + background-color: #fefefe; + margin: auto; + padding: 0; + line-height: 18px; + font-size: 13px; + border: 1px solid #888; + width: 50%; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); + -webkit-animation-name: animatetop; + -webkit-animation-duration: 0.4s; + animation-name: animatetop; + animation-duration: 0.4s + } + .modalFooterOk { + cursor: pointer; + } + .modalFooterCancel { + cursor: pointer; + } + @-webkit-keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} + } + @keyframes animatetop { + from {top: -300px; opacity: 0} + to {top: 0; opacity: 1} + } +` + module.exports = (title, content, ok, cancel) => { + var container = document.querySelector(`.${css.modal}`) + if (!container) { + document.querySelector('body').appendChild(html()) + container = document.querySelector(`.${css.modal}`) + } + var okDiv = document.getElementById('modal-footer-ok') - var cancelDiv = document.getElementById('modal-footer-cancel') okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' + + var cancelDiv = document.getElementById('modal-footer-cancel') cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel' - var modal = document.querySelector('.modal-body') - var modaltitle = document.querySelector('.modal-header h2') + var modal = document.querySelector(`.${css.modalBody}`) + var modalTitle = document.querySelector(`.${css.modalHeader} h2`) - modaltitle.innerHTML = ' - ' - if (title) modaltitle.innerHTML = title + modalTitle.innerHTML = '' + if (title) modalTitle.innerHTML = title modal.innerHTML = '' if (content) modal.appendChild(content) - var container = document.querySelector('.modal') container.style.display = container.style.display === 'block' ? hide() : show() - function okListenner () { + function okListener () { hide() if (ok && ok.fn) ok.fn() removeEventListener() } - function cancelListenner () { + function cancelListener () { hide() if (cancel && cancel.fn) cancel.fn() removeEventListener() @@ -37,10 +107,26 @@ module.exports = (title, content, ok, cancel) => { } function removeEventListener () { - okDiv.removeEventListener('click', okListenner) - cancelDiv.removeEventListener('click', cancelListenner) + okDiv.removeEventListener('click', okListener) + cancelDiv.removeEventListener('click', cancelListener) } - okDiv.addEventListener('click', okListenner) - cancelDiv.addEventListener('click', cancelListenner) + okDiv.addEventListener('click', okListener) + cancelDiv.addEventListener('click', cancelListener) +} + +function html () { + return yo` + ` }