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>
<body>
<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>
</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'
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')
}
})
})

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 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) {

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

@ -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)
}

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 $ = 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'))
})
}
})

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) => {
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`<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