mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #637 from ethereum/alert-rob

Browse Source 
Alert rob - updating modal alert
pull/1/head
yann300 7 years ago committed by GitHub
parent ae316cdbca bda92411a9
commit 46a5ab53a1
7 changed files with 124 additions and 40 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 13
      index.html
  2. 11
      src/app.js
  3. 13
      src/app/file-explorer.js
  4. 5
      src/app/file-panel.js
  5. 5
      src/app/files-tab.js
  6. 7
      src/app/modal-dialog-custom.js
  7. 110
      src/app/modaldialog.js

13
index.html
Unescape View File

@ -38,18 +38,5 @@
</head> </head>
<body> <body>
<script src="build/app.js"></script> <script src="build/app.js"></script>
<div id="modaldialog" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2></h2>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<span id="modal-footer-ok">OK</span><span id="modal-footer-cancel">Cancel</span>
</div>
</div>
</div>
</body> </body>
</html> </html>

11
src/app.js
Unescape View File

@ -1,4 +1,4 @@
/* global alert, confirm, Option, Worker, chrome */ /* global confirm, Option, Worker, chrome */
'use strict' 'use strict'
var async = require('async') var async = require('async')
@ -29,6 +29,7 @@ var FilePanel = require('./app/file-panel')
var EditorPanel = require('./app/editor-panel') var EditorPanel = require('./app/editor-panel')
var RighthandPanel = require('./app/righthand-panel') var RighthandPanel = require('./app/righthand-panel')
var examples = require('./app/example-contracts') var examples = require('./app/example-contracts')
var modalDialogCustom = require('./app/modal-dialog-custom')
// var Txlistener = require('./app/txListener') // var Txlistener = require('./app/txListener')
var css = csjs` var css = csjs`
@ -241,7 +242,7 @@ function run () {
success: function (response) { success: function (response) {
if (response.data) { if (response.data) {
if (!response.data.files) { if (!response.data.files) {
alert('Gist load error: ' + response.data.message) modalDialogCustom.alert('Gist load error: ' + response.data.message)
return return
} }
loadFiles(response.data.files) loadFiles(response.data.files)
@ -253,7 +254,7 @@ function run () {
// insert ballot contract if there are no files available // insert ballot contract if there are no files available
if (!loadingFromGist && Object.keys(filesProviders['browser'].list()).length === 0) { if (!loadingFromGist && Object.keys(filesProviders['browser'].list()).length === 0) {
if (!filesProviders['browser'].set(examples.ballot.name, examples.ballot.content)) { 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) { udapp.event.register('publishContract', this, function (contract) {
publishOnSwarm(contract, function (err) { publishOnSwarm(contract, function (err) {
if (err) { if (err) {
alert('Failed to publish metadata: ' + err) modalDialogCustom.alert('Failed to publish metadata: ' + err)
} else { } else {
alert('Metadata published successfully') modalDialogCustom.alert('Metadata published successfully')
} }
}) })
}) })

13
src/app/file-explorer.js
Unescape View File

@ -1,8 +1,9 @@
/* global FileReader, confirm, alert */ /* global FileReader, confirm */
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var Treeview = require('ethereum-remix').ui.TreeView var Treeview = require('ethereum-remix').ui.TreeView
var modalDialog = require('./modaldialog') var modalDialog = require('./modaldialog')
var modalDialogCustom = require('./modal-dialog-custom')
var EventManager = require('ethereum-remix').lib.EventManager var EventManager = require('ethereum-remix').lib.EventManager
@ -133,7 +134,7 @@ function fileExplorer (appAPI, files) {
var fileReader = new FileReader() var fileReader = new FileReader()
fileReader.onload = function (event) { fileReader.onload = function (event) {
var success = files.set(name, event.target.result) 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]) else events.trigger('focus', [name])
} }
fileReader.readAsText(file) fileReader.readAsText(file)
@ -219,12 +220,12 @@ function fileExplorer (appAPI, files) {
newPath[newPath.length - 1] = label.innerText newPath[newPath.length - 1] = label.innerText
newPath = newPath.join('/') newPath = newPath.join('/')
if (label.innerText.match(/(\/|:|\*|\?|"|<|>|\\|\||')/) !== null) { if (label.innerText.match(/(\/|:|\*|\?|"|<|>|\\|\||')/) !== null) {
alert('special characters are not allowsed') modalDialogCustom.alert('special characters are not allowsed')
label.innerText = textUnderEdit label.innerText = textUnderEdit
} else if (!files.exists(newPath)) { } else if (!files.exists(newPath)) {
files.rename(label.dataset.path, newPath, isFolder) files.rename(label.dataset.path, newPath, isFolder)
} else { } else {
alert('File already exists.') modalDialogCustom.alert('File already exists.')
label.innerText = textUnderEdit label.innerText = textUnderEdit
} }
} else label.innerText = textUnderEdit } else label.innerText = textUnderEdit
@ -253,7 +254,7 @@ function fileExplorer (appAPI, files) {
} }
} }
if (err) { if (err) {
alert(`couldn't rename - ${err}`) modalDialogCustom.alert(`could not rename - ${err}`)
label.innerText = textUnderEdit label.innerText = textUnderEdit
} else { } else {
textUnderEdit = label.innerText textUnderEdit = label.innerText
@ -305,7 +306,7 @@ function fileExplorer (appAPI, files) {
} }
function fileRenamedError (error) { function fileRenamedError (error) {
alert(error) modalDialogCustom.alert(error)
} }
function fileAdded (filepath) { function fileAdded (filepath) {

5
src/app/file-panel.js
Unescape View File

@ -1,10 +1,11 @@
/* global alert */
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var yo = require('yo-yo') var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager var EventManager = require('ethereum-remix').lib.EventManager
var FileExplorer = require('./file-explorer') var FileExplorer = require('./file-explorer')
var modalDialog = require('./modaldialog') var modalDialog = require('./modaldialog')
var modalDialogCustom = require('./modal-dialog-custom')
module.exports = filepanel module.exports = filepanel
@ -214,7 +215,7 @@ function filepanel (appAPI, filesProvider) {
function createNewFile () { function createNewFile () {
var newName = filesProvider['browser'].type + '/' + appAPI.createName('Untitled.sol') var newName = filesProvider['browser'].type + '/' + appAPI.createName('Untitled.sol')
if (!filesProvider['browser'].set(newName, '')) { if (!filesProvider['browser'].set(newName, '')) {
alert('Failed to create file ' + newName) modalDialogCustom.alert('Failed to create file ' + newName)
} else { } else {
appAPI.switchToFile(newName) appAPI.switchToFile(newName)
} }

5
src/app/files-tab.js
Unescape View File

@ -1,6 +1,7 @@
/* global alert, confirm, prompt */ /* global confirm, prompt */
var yo = require('yo-yo') var yo = require('yo-yo')
var $ = require('jquery') var $ = require('jquery')
var modalDialogCustom = require('./modal-dialog-custom')
var QueryParams = require('./query-params') var QueryParams = require('./query-params')
var queryParams = new QueryParams() var queryParams = new QueryParams()
@ -70,7 +71,7 @@ function filesTab (container, appAPI, events, opts) {
} }
}).fail(function (xhr, text, err) { }).fail(function (xhr, text, err) {
console.log('fail', text) console.log('fail', text)
alert('Failed to create gist: ' + (err || 'Unknown transport error')) modalDialogCustom.alert('Failed to create gist: ' + (err || 'Unknown transport error'))
}) })
} }
}) })

7
src/app/modal-dialog-custom.js
Unescape View File

@ -0,0 +1,7 @@
var modal = require('./modaldialog.js')
var yo = require('yo-yo')
module.exports = {
alert: function (text) {
modal('', yo`<div>${text}</div>`, null, { label: null })
}
}

110
src/app/modaldialog.js
Unescape View File

@ -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) => { 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 okDiv = document.getElementById('modal-footer-ok')
var cancelDiv = document.getElementById('modal-footer-cancel')
okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK' 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' cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel'
var modal = document.querySelector('.modal-body') var modal = document.querySelector(`.${css.modalBody}`)
var modaltitle = document.querySelector('.modal-header h2') var modalTitle = document.querySelector(`.${css.modalHeader} h2`)
modaltitle.innerHTML = ' - ' modalTitle.innerHTML = ''
if (title) modaltitle.innerHTML = title if (title) modalTitle.innerHTML = title
modal.innerHTML = '' modal.innerHTML = ''
if (content) modal.appendChild(content) if (content) modal.appendChild(content)
var container = document.querySelector('.modal')
container.style.display = container.style.display === 'block' ? hide() : show() container.style.display = container.style.display === 'block' ? hide() : show()
function okListenner () { function okListener () {
hide() hide()
if (ok && ok.fn) ok.fn() if (ok && ok.fn) ok.fn()
removeEventListener() removeEventListener()
} }
function cancelListenner () { function cancelListener () {
hide() hide()
if (cancel && cancel.fn) cancel.fn() if (cancel && cancel.fn) cancel.fn()
removeEventListener() removeEventListener()
@ -37,10 +107,26 @@ module.exports = (title, content, ok, cancel) => {
} }
function removeEventListener () { function removeEventListener () {
okDiv.removeEventListener('click', okListenner) okDiv.removeEventListener('click', okListener)
cancelDiv.removeEventListener('click', cancelListenner) cancelDiv.removeEventListener('click', cancelListener)
} }
okDiv.addEventListener('click', okListenner) okDiv.addEventListener('click', okListener)
cancelDiv.addEventListener('click', cancelListenner) cancelDiv.addEventListener('click', cancelListener)
}
function html () {
return yo`<div id="modal-dialog" class="${css.modal}" onclick="clickModal()" >
<div class="${css['modalContent']}">
<div class="${css['modalHeader']}">
<h2></h2>
</div>
<div class="${css['modalBody']}"> -
</div>
<div class="${css['modalFooter']}">
<span id="modal-footer-ok" class="modalFooterOk">OK</span><span id="modal-footer-cancel" class="modalFooterCancel">Cancel</span>
</div>
</div>
</div>
</div>`
} }

Write Preview
Loading…
Cancel
Save