Skip to content

B
baas-ide
Commit 46a5ab53 authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #637 from ethereum/alert-rob

Alert rob - updating modal alert
parents ae316cdb bda92411
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 40 deletions
index.html
View file @ 46a5ab53
...@@ -38,18 +38,5 @@ ...@@ -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>
src/app.js
View file @ 46a5ab53
/* 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') ...@@ -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 () { ...@@ -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 () { ...@@ -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 () { ...@@ -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')
} }
}) })
}) })
......
src/app/file-explorer.js
View file @ 46a5ab53
/* 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) { ...@@ -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) { ...@@ -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) { ...@@ -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) { ...@@ -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) {
......
src/app/file-panel.js
View file @ 46a5ab53
/* 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) { ...@@ -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)
} }
......
src/app/files-tab.js
View file @ 46a5ab53
/* 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) { ...@@ -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'))
}) })
} }
}) })
......
src/app/modal-dialog-custom.js 0 → 100644
View file @ 46a5ab53
var modal = require('./modaldialog.js')
var yo = require('yo-yo')
module.exports = {
alert: function (text) {
modal('', yo`<div>${text}</div>`, null, { label: null })
}
}
src/app/modaldialog.js
View file @ 46a5ab53
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) => { ...@@ -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>`
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment