Skip to content

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

Merge pull request #592 from ethereum/rhpTab

Refactoring: right hand panel
parents c3347896 d93e2c50
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 193 deletions
index.html
View file @ 89625549
......@@ -52,25 +52,6 @@
<div id="dragbar"></div>
</div>
<div id="righthand-panel">
<div id="header">
<div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
<ul id="options">
<li class="envView" title="Environment">Contract</li>
<li class="settingsView" title="Settings">Settings</li>
<li class="publishView" title="Publish" >Files</li>
<li class="debugView" title="Debugger">Debugger</li>
<li class="staticanalysisView" title="Static Analysis">Analysis</li>
<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul>
</div>
<div id="optionViews" class="settingsView">
<!-- contract-tab.js, settings-tab.js, debugger-tab.js, analysis-tab.js, files-tab.js -->
</div>
</div>
</div>
<script src="build/app.js"></script>
</body>
......
src/app.js
View file @ 89625549
......@@ -25,15 +25,9 @@ var EventManager = require('ethereum-remix').lib.EventManager
var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
var FilePanel = require('./app/file-panel')
var tabbedMenu = require('./app/tabbed-menu')
var RighthandPanel = require('./app/righthand-panel')
var examples = require('./app/example-contracts')
var contractTab = require('./app/contract-tab.js')
var SettingsTab = require('./app/settings-tab.js')
var analysisTab = require('./app/analysis-tab.js')
var debuggerTab = require('./app/debugger-tab.js')
var filesTab = require('./app/files-tab.js')
// The event listener needs to be registered as early as possible, because the
// parent will send the message upon the "load" event.
var filesToLoad = null
......@@ -50,26 +44,7 @@ var run = function () {
var fileStorage = new Storage('sol:')
var files = new Files(fileStorage)
var config = new Config(fileStorage)
var compiler = new Compiler(handleImportCall)
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
/* ----------------------------------------------
TABS - Righthand pannel
------------------------------------------------ */
var contractView = contractTab()
document.querySelector('#optionViews').appendChild(contractView)
var settingsView = new SettingsTab('#optionViews', {}, {compiler: compiler.event}, {})
var analysisView = analysisTab()
document.querySelector('#optionViews').appendChild(analysisView)
var debuggerView = debuggerTab()
document.querySelector('#optionViews').appendChild(debuggerView)
var filesView = filesTab()
document.querySelector('#optionViews').appendChild(filesView)
var executionContext = new ExecutionContext()
// return all the files, except the temporary/readonly ones
function packageFiles () {
var ret = {}
......@@ -174,9 +149,6 @@ var run = function () {
window.syncStorage = chromeCloudSync
chromeCloudSync()
// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))
// ---------------- FilePanel --------------------
// TODO: All FilePanel related CSS should move into file-panel.js
// app.js provides file-panel.js with a css selector or a DOM element
......@@ -281,6 +253,9 @@ var run = function () {
}).appendTo('body')
})
// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))
// --------------------Files tabs-----------------------------
var $filesEl = $('#files')
var FILE_SCROLL_DELTA = 300
......@@ -444,68 +419,80 @@ var run = function () {
})
})
// ----------------- resizeable ui ---------------
var EDITOR_WINDOW_SIZE = 'editorWindowSize'
var compiler = new Compiler(handleImportCall)
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
var dragging = false
$('#dragbar').mousedown(function (e) {
e.preventDefault()
dragging = true
var main = $('#righthand-panel')
var ghostbar = $('<div id="ghostbar">', {
css: {
top: main.offset().top,
left: main.offset().left
// ----------------- Renderer -----------------
var transactionContextAPI = {
getAddress: (cb) => {
cb(null, $('#txorigin').val())
},
getValue: (cb) => {
try {
var comp = $('#value').val().split(' ')
cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
} catch (e) {
cb(e)
}
}).prependTo('body')
$(document).mousemove(function (e) {
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
function setEditorSize (delta) {
$('#righthand-panel').css('width', delta)
$('#editor').css('right', delta)
onResize()
}
function getEditorSize () {
return $('#righthand-panel').width()
},
getGasLimit: (cb) => {
cb(null, $('#gasLimit').val())
}
}
$(document).mouseup(function (e) {
if (dragging) {
var delta = $body.width() - e.pageX + 2
$('#ghostbar').remove()
$(document).unbind('mousemove')
dragging = false
delta = (delta < 50) ? 50 : delta
setEditorSize(delta)
config.set(EDITOR_WINDOW_SIZE, delta)
reAdjust()
var rendererAPI = {
error: (file, error) => {
if (file === config.get('currentFile')) {
editor.addAnnotation(error)
}
},
errorClick: (errFile, errLine, errCol) => {
if (errFile !== config.get('currentFile') && files.exists(errFile)) {
switchToFile(errFile)
}
editor.gotoLine(errLine, errCol)
},
currentCompiledSourceCode: () => {
if (compiler.lastCompilationResult.source) {
return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
}
return ''
},
resetDapp: (udappContracts, renderOutputModifier) => {
udapp.reset(udappContracts, transactionContextAPI, renderOutputModifier)
},
renderDapp: () => {
return udapp.render()
},
getAccounts: (callback) => {
udapp.getAccounts(callback)
},
getBalance: (address, callback) => {
udapp.getBalance(address, (error, balance) => {
if (error) {
callback(error)
} else {
callback(null, executionContext.web3().fromWei(balance, 'ether'))
}
})
}
})
if (config.exists(EDITOR_WINDOW_SIZE)) {
setEditorSize(config.get(EDITOR_WINDOW_SIZE))
} else {
config.set(EDITOR_WINDOW_SIZE, getEditorSize())
}
var renderer = new Renderer(rendererAPI, compiler.event)
// ----------------- toggle right hand panel -----------------
var hidingRHP = false
$('.toggleRHP').click(function () {
hidingRHP = !hidingRHP
setEditorSize(hidingRHP ? 0 : config.get(EDITOR_WINDOW_SIZE))
$('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
$('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
})
// ---------------- Righthand-panel --------------------
var rhpAPI = {
config: config,
onResize: onResize,
reAdjust: reAdjust,
renderer: renderer
}
var rhpEvents = {
compiler: compiler.event,
app: self.event
}
var righthandPanel = new RighthandPanel(document.body, rhpAPI, rhpEvents, {}) // eslint-disable-line
// ------------------------------------------------------------
var executionContext = new ExecutionContext()
// ----------------- editor resize ---------------
function onResize () {
......@@ -518,10 +505,6 @@ var run = function () {
document.querySelector('#editor').addEventListener('change', onResize)
document.querySelector('#editorWrap').addEventListener('change', onResize)
// ----------------- compiler output renderer ----------------------
$('.asmOutput button').click(function () { $(this).parent().find('pre').toggle() })
// ----------------- compiler ----------------------
function handleGithubCall (root, path, cb) {
......@@ -725,63 +708,6 @@ var run = function () {
})
})
// ----------------- Renderer -----------------
var transactionContextAPI = {
getAddress: (cb) => {
cb(null, $('#txorigin').val())
},
getValue: (cb) => {
try {
var comp = $('#value').val().split(' ')
cb(null, executionContext.web3().toWei(comp[0], comp.slice(1).join(' ')))
} catch (e) {
cb(e)
}
},
getGasLimit: (cb) => {
cb(null, $('#gasLimit').val())
}
}
var rendererAPI = {
error: (file, error) => {
if (file === config.get('currentFile')) {
editor.addAnnotation(error)
}
},
errorClick: (errFile, errLine, errCol) => {
if (errFile !== config.get('currentFile') && files.exists(errFile)) {
switchToFile(errFile)
}
editor.gotoLine(errLine, errCol)
},
currentCompiledSourceCode: () => {
if (compiler.lastCompilationResult.source) {
return compiler.lastCompilationResult.source.sources[compiler.lastCompilationResult.source.target]
}
return ''
},
resetDapp: (udappContracts, renderOutputModifier) => {
udapp.reset(udappContracts, transactionContextAPI, renderOutputModifier)
},
renderDapp: () => {
return udapp.render()
},
getAccounts: (callback) => {
udapp.getAccounts(callback)
},
getBalance: (address, callback) => {
udapp.getBalance(address, (error, balance) => {
if (error) {
callback(error)
} else {
callback(null, executionContext.web3().fromWei(balance, 'ether'))
}
})
}
}
var renderer = new Renderer(rendererAPI, compiler.event)
// ----------------- StaticAnalysis -----------------
var staticAnalysisAPI = {
renderWarning: (label, warningContainer, type) => {
......@@ -995,17 +921,6 @@ var run = function () {
loadVersion('builtin')
})
var tabbedMenuAPI = {
warnCompilerLoading: function (msg) {
renderer.clear()
if (msg) {
renderer.error(msg, $('#output'), {type: 'warning'})
}
}
}
// load tabbed menu component
tabbedMenu(tabbedMenuAPI, compiler.event, self.event)
}
module.exports = {
......
src/app/analysis-tab.js
View file @ 89625549
......@@ -21,9 +21,10 @@ var css = csjs`
module.exports = analysisTab
function analysisTab () {
return yo`
function analysisTab (container, appAPI, events, opts) {
var el = yo`
<div class="${css.analysisTabView} "id="staticanalysisView">
</div>
`
container.appendChild(el)
}
src/app/contract-tab.js
View file @ 89625549
......@@ -54,7 +54,7 @@ var css = csjs`
module.exports = contractTab
function contractTab () {
function contractTab (container, appAPI, appEvents, opts) {
function copyAddress () {
copy(document.querySelector('#envView #txorigin').value)
}
......@@ -105,5 +105,5 @@ function contractTab () {
<div id="output" class="${css.contract}"></div>
</div>
`
return el
container.appendChild(el)
}
src/app/debugger-tab.js
View file @ 89625549
......@@ -11,6 +11,7 @@ var css = csjs`
module.exports = debuggerTab
function debuggerTab () {
return yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
function debuggerTab (container, appAPI, events, opts) {
var el = yo` <div class="${css.debuggerTabView} "id="debugView"><div id="debugger"></div></div>`
container.appendChild(el)
}
src/app/files-tab.js
View file @ 89625549
......@@ -20,8 +20,8 @@ var css = csjs`
module.exports = filesTab
function filesTab () {
return yo`
function filesTab (container, appAPI, events, opts) {
var el = yo`
<div class="${css.filesTabView}" id="publishView">
<div class="${css.crow}">
<button id="gist" title="Publish all files as public gist on github.com">
......@@ -42,4 +42,5 @@ function filesTab () {
</div>
</div>
`
container.appendChild(el)
}
src/app/righthand-panel.js 0 → 100644
View file @ 89625549
var yo = require('yo-yo')
var $ = require('jquery')
var tabbedMenu = require('./tabbed-menu')
var contractTab = require('./contract-tab')
var settingsTab = require('./settings-tab')
var analysisTab = require('./analysis-tab')
var debuggerTab = require('./debugger-tab')
var filesTab = require('./files-tab')
var csjs = require('csjs-inject')
var css = csjs`
.options {
float: left;
padding: 0.7em 0.3em;
font-size: 0.9em;
cursor: pointer;
background-color: transparent;
margin-right: 0.5em;
font-size: 1em;
}
`
// ------------------------------------------------------------------
module.exports = RighthandPanel
function RighthandPanel (container, appAPI, events, opts) {
var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
var element = yo`
<div id="righthand-panel">
<div id="header">
<div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
<ul id="options">
<li class="envView" title="Environment">Contract</li>
<li class="settingsView" title="Settings">Settings</li>
<li class="publishView" title="Publish" >Files</li>
<li class="debugView" title="Debugger">Debugger</li>
<li class="staticanalysisView" title="Static Analysis">Analysis</li>
<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul>
</div>
${optionViews}
</div>
</div>
`
contractTab(optionViews, appAPI, events, opts)
settingsTab(optionViews, appAPI, events, opts)
analysisTab(optionViews, appAPI, events, opts)
debuggerTab(optionViews, appAPI, events, opts)
filesTab(optionViews, appAPI, events, opts)
container.appendChild(element)
;[...container.querySelectorAll('#header #options li')].forEach((el) => { el.classList.add(css.options) })
// ----------------- toggle right hand panel -----------------
var hidingRHP = false
$('.toggleRHP').click(function () {
hidingRHP = !hidingRHP
setEditorSize(hidingRHP ? 0 : appAPI.config.get(EDITOR_WINDOW_SIZE))
$('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP)
$('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP)
})
// ----------------- tabbed menu -----------------
var tabbedMenuAPI = {
warnCompilerLoading: function (msg) {
appAPI.renderer.clear()
if (msg) {
appAPI.renderer.error(msg, $('#output'), {type: 'warning'})
}
}
}
// load tabbed menu component
var tabContainer // @TODO
var tabEvents = {compiler: events.compiler, app: events.app}
tabbedMenu(tabContainer, tabbedMenuAPI, tabEvents, {})
// ----------------- resizeable ui ---------------
var EDITOR_WINDOW_SIZE = 'editorWindowSize'
var dragging = false
$('#dragbar').mousedown(function (e) {
e.preventDefault()
dragging = true
var main = $('#righthand-panel')
var ghostbar = $('<div id="ghostbar">', {
css: {
top: main.offset().top,
left: main.offset().left
}
}).prependTo('body')
$(document).mousemove(function (e) {
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
function setEditorSize (delta) {
$('#righthand-panel').css('width', delta)
$('#editor').css('right', delta)
appAPI.onResize()
}
function getEditorSize () {
return $('#righthand-panel').width()
}
$(document).mouseup(function (e) {
if (dragging) {
var delta = $body.width() - e.pageX + 2
$('#ghostbar').remove()
$(document).unbind('mousemove')
dragging = false
delta = (delta < 50) ? 50 : delta
setEditorSize(delta)
appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
appAPI.reAdjust()
}
})
if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
} else {
appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
}
}
src/app/tabbed-menu.js
View file @ 89625549
......@@ -3,13 +3,13 @@ var loadingSpinner = require('./loading-spinner')
module.exports = tabbedMenu
function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
function tabbedMenu (container, appAPI, events, opts) {
$('#options li').click(function (ev) {
var $el = $(this)
selectTab($el)
})
appEvent.register('debuggingRequested', () => {
events.app.register('debuggingRequested', () => {
selectTab($('ul#options li.debugView'))
})
......@@ -17,17 +17,17 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
selectTab($('#options .envView'))
// add event listeners for loading spinner
compilerEvent.register('loadingCompiler', function start () {
events.compiler.register('loadingCompiler', function start () {
var settingsTab = document.querySelector('.settingsView')
if (settingsTab.children.length) return
var spinner = loadingSpinner()
settingsTab.appendChild(spinner)
rendererAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
compilerEvent.register('compilerLoaded', finish)
appAPI.warnCompilerLoading('Solidity compiler is currently loading. Please wait a moment...')
events.compiler.register('compilerLoaded', finish)
function finish () {
compilerEvent.unregister('compilerLoaded', finish)
events.compiler.unregister('compilerLoaded', finish)
settingsTab.removeChild(spinner)
}
})
......@@ -42,6 +42,6 @@ function tabbedMenu (rendererAPI, compilerEvent, appEvent) {
$('#optionViews').attr('class', '').addClass(cls)
el.addClass('active')
}
appEvent.trigger('tabChanged', [cls])
events.app.trigger('tabChanged', [cls])
}
}
src/universal-dapp.js
View file @ 89625549
......@@ -106,9 +106,6 @@ var cssInstance = csjs`
}
`
;[...document.querySelectorAll('#header #options li')].forEach(addCss)
function addCss (el) { el.classList.add(css.options) }
/*
trigger debugRequested
*/
......
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