diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css index b8e5337d40..4c44f2fe87 100644 --- a/assets/css/browser-solidity.css +++ b/assets/css/browser-solidity.css @@ -407,18 +407,6 @@ body { bottom: 0; } -#dragbar { - background-color: transparent; - position: absolute; - width: 0.5em; - right: -3px; - top: 3em; - bottom: 0; - cursor: col-resize; - z-index: 999; - border-right: 2px solid hsla(215, 81%, 79%, .3); -} - input[readonly] { display: block; width: 100%; diff --git a/src/app.js b/src/app.js index 97c680b1a2..c3daafc814 100644 --- a/src/app.js +++ b/src/app.js @@ -31,12 +31,9 @@ var examples = require('./app/example-contracts') var css = csjs` .browsersolidity { - position : absolute; - top : 0; - left : 0; - width : auto; - bottom : 0; - right : 37em; + position : relative; + width : 100vw; + height : 100vh; } .editor-container { display : flex; @@ -51,6 +48,16 @@ var css = csjs` display : flex; width : 200px; } + .dragbar2 { + background-color : transparent; + position : absolute; + width : 0.5em; + top : 3em; + bottom : 0; + cursor : col-resize; + z-index : 999; + border-right : 2px solid hsla(215, 81%, 79%, .3); + } ` class App { @@ -66,6 +73,13 @@ class App { var self = this if (self._view.el) return self._view.el /***************************************************************************/ + self._view.rightpanel = yo`
` + self._view.centerpanel = yo` +
+
+
+
+ ` self._view.el = yo`
@@ -74,11 +88,9 @@ class App {
-
-
-
-
-
+ ${self._view.centerpanel} +
+ ${self._view.rightpanel}
` return self._view.el @@ -672,7 +684,8 @@ function run () { config: config, setEditorSize (delta) { $('#righthand-panel').css('width', delta) - self._view.el.style.right = delta + 'px' + self._view.centerpanel.style.right = delta + 'px' + document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px' onResize() }, reAdjust: reAdjust, @@ -694,7 +707,10 @@ function run () { app: self.event, udapp: udapp.event } - var righthandPanel = new RighthandPanel(document.body, rhpAPI, rhpEvents, {}) // eslint-disable-line + var righthandPanel = new RighthandPanel(rhpAPI, rhpEvents, {}) // eslint-disable-line + self._view.rightpanel.appendChild(righthandPanel.render()) + righthandPanel.init() + // ----------------- editor resize --------------- function onResize () { diff --git a/src/app/righthand-panel.js b/src/app/righthand-panel.js index e8438ed975..9ebc705911 100644 --- a/src/app/righthand-panel.js +++ b/src/app/righthand-panel.js @@ -27,23 +27,26 @@ var css = csjs` module.exports = RighthandPanel -function RighthandPanel (container, appAPI, events, opts) { +function RighthandPanel (appAPI, events, opts) { var self = this self._api = appAPI var optionViews = yo`
` + var options = yo` + + ` var element = yo`
@@ -54,72 +57,73 @@ function RighthandPanel (container, 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 - self._api.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) - }) + self.render = function () { return element } - // ----------------- tabbed menu ----------------- - var tabbedMenuAPI = { - warnCompilerLoading: appAPI.warnCompilerLoading - } - // 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 = $('
', { - css: { - top: main.offset().top, - left: main.offset().left - } - }).prependTo('body') + self.init = function () { + ;[...options.children].forEach((el) => { el.classList.add(css.options) }) + // ----------------- toggle right hand panel ----------------- - $(document).mousemove(function (e) { - ghostbar.css('left', e.pageX + 2) + var hidingRHP = false + $('.toggleRHP').click(function () { + hidingRHP = !hidingRHP + self._api.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) }) - }) - var $body = $('body') + // ----------------- tabbed menu ----------------- + var tabbedMenuAPI = { + warnCompilerLoading: appAPI.warnCompilerLoading + } + // load tabbed menu component + var tabEvents = {compiler: events.compiler, app: events.app} + tabbedMenu(options, 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 = $('
', { + css: { + top: main.offset().top, + left: main.offset().left + } + }).prependTo('body') + + $(document).mousemove(function (e) { + ghostbar.css('left', e.pageX + 2) + }) + }) - function getEditorSize () { - return $('#righthand-panel').width() - } + var $body = $('body') - $(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 - self._api.setEditorSize(delta) - appAPI.config.set(EDITOR_WINDOW_SIZE, delta) - appAPI.reAdjust() + function getEditorSize () { + return $('#righthand-panel').width() } - }) - if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) { - self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE)) - } else { - appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize()) + $(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 + self._api.setEditorSize(delta) + appAPI.config.set(EDITOR_WINDOW_SIZE, delta) + appAPI.reAdjust() + } + }) + + if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) { + self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE)) + } else { + appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize()) + } } } diff --git a/src/app/tabbed-menu.js b/src/app/tabbed-menu.js index 8959e4e709..86383c7acc 100644 --- a/src/app/tabbed-menu.js +++ b/src/app/tabbed-menu.js @@ -4,17 +4,16 @@ var loadingSpinner = require('./loading-spinner') module.exports = tabbedMenu function tabbedMenu (container, appAPI, events, opts) { - $('#options li').click(function (ev) { - var $el = $(this) - selectTab($el) + container.querySelectorAll('li').forEach(function (el) { + el.onclick = function (ev) { selectTab(this) } }) events.app.register('debuggingRequested', () => { - selectTab($('ul#options li.debugView')) + selectTab(container.querySelector('li.debugView')) }) // initialize tabbed menu - selectTab($('#options .envView')) + selectTab(container.querySelector('.envView')) // add event listeners for loading spinner events.compiler.register('loadingCompiler', function start () { @@ -34,6 +33,7 @@ function tabbedMenu (container, appAPI, events, opts) { // select tab function selectTab (el) { + el = $(el) var match = /[a-z]+View/.exec(el.get(0).className) if (!match) return var cls = match[0]