From 19c6b37d20314576c335685c1c72c4ff6c390408 Mon Sep 17 00:00:00 2001 From: serapath Date: Tue, 1 Aug 2017 01:05:47 +0200 Subject: [PATCH] REFACTOR (7) fix toggle and resize of panels --- assets/css/browser-solidity.css | 23 ------ src/app.js | 126 ++++++++++++++++++-------------- src/app/editor-panel.js | 4 +- src/app/file-panel.js | 24 +++--- src/app/righthand-panel.js | 108 +++++++++++++++------------ 5 files changed, 152 insertions(+), 133 deletions(-) diff --git a/assets/css/browser-solidity.css b/assets/css/browser-solidity.css index 848fcf7cd7..7c897d33e7 100644 --- a/assets/css/browser-solidity.css +++ b/assets/css/browser-solidity.css @@ -42,18 +42,6 @@ display: inline-block; } -#righthand-panel { - position: absolute; - top: 0; - width: 37em; - max-width: 80vw; - right: 0; - bottom: 0; - overflow: auto; - box-sizing: border-box; - overflow: hidden; -} - #header { font-size: 13px; height: 100%; @@ -322,17 +310,6 @@ border: .2em dotted #ffbd01; } -#ghostbar { - width: 1px; - background-color: red; - opacity: 0.5; - position: absolute; - cursor: col-resize; - z-index: 9999; - top: 0; - bottom: 0; -} - input[readonly] { display: block; width: 100%; diff --git a/src/app.js b/src/app.js index 868820dfa5..c9a47eb700 100644 --- a/src/app.js +++ b/src/app.js @@ -44,42 +44,89 @@ var css = csjs` position : relative; width : 100vw; height : 100vh; + overflow : hidden; } .centerpanel { display : flex; flex-direction : column; position : absolute; top : 0; - left : 200px; - right : 0; bottom : 0; + overflow : hidden; } .leftpanel { display : flex; + flex-direction : column; position : absolute; top : 0; - left : 0; - right : 0; bottom : 0; - width : 200px; + left : 0; + overflow : hidden; } - .dragbar2 { - background-color : transparent; + .rightpanel { + display : flex; + flex-direction : column; position : absolute; - width : 0.5em; - top : 3em; + top : 0; + right : 0; bottom : 0; - cursor : col-resize; - z-index : 999; - border-right : 2px solid hsla(215, 81%, 79%, .3); + overflow : hidden; } ` class App { constructor (opts = {}) { var self = this + self._api = {} + var fileStorage = new Storage('sol:') + self._api.config = new Config(fileStorage) + self._api.filesProviders = {} + self._api.filesProviders['browser'] = new Browserfiles(fileStorage) + self._api.filesProviders['localhost'] = new SharedFolder(new Remixd()) self._view = {} self._components = {} + self.data = { + _layout: { + right: { + offset: self._api.config.get('right-offset') || 200, + show: true + }, // @TODO: adapt sizes proportionally to browser window size + left: { + offset: self._api.config.get('left-offset') || 200, + show: true + } + } + } + // ----------------- editor ---------------------------- + self._components.editor = new Editor({}) // @TODO: put into editorpanel + // ----------------- editor panel ---------------------- + self._components.editorpanel = new EditorPanel({ + api: { editor: self._components.editor }, + data: { _layout: self.data._layout } + }) + self._components.editorpanel.event.register('resize', direction => self._adjustLayout(direction)) + } + _adjustLayout (direction, delta) { + var self = this + var layout = self.data._layout[direction] + if (layout) { + if (delta === undefined) { + layout.show = !layout.show + if (layout.show) delta = layout.offset + else delta = 0 + } else { + self._api.config.set(`${direction}-offset`, delta) + layout.offset = delta + } + } + if (direction === 'left') { + self._view.leftpanel.style.width = delta + 'px' + self._view.centerpanel.style.left = delta + 'px' + } + if (direction === 'right') { + self._view.rightpanel.style.width = delta + 'px' + self._view.centerpanel.style.right = delta + 'px' + } } init () { var self = this @@ -88,22 +135,6 @@ class App { render () { var self = this if (self._view.el) return self._view.el - /*************************************************************************/ - // ----------------- editor ---------------------------- - self._components.editor = new Editor({}) // @TODO: put into editorpanel - // ----------------- editor panel ---------------------- - var opts = { api: { editor: self._components.editor } } - self._components.editorpanel = new EditorPanel(opts) - /*************************************************************************/ - // self._api = opts.api - // self.data = { - // _layout: { - // seperator1: self._api.config.get('seperator1') || 200, - // seperator2: self._api.config.get('seperator2') || 200, - // editorsize: self._api.config.get('editorWindowSize') || 400 - // } - // } - /*************************************************************************/ self._view.leftpanel = yo`
${''} @@ -115,8 +146,7 @@ class App {
` self._view.rightpanel = yo` -
-
+
${''}
` @@ -127,6 +157,9 @@ class App { ${self._view.rightpanel}
` + // INIT + self._adjustLayout('left', self.data._layout.left.offset) + self._adjustLayout('right', self.data._layout.right.offset) return self._view.el } } @@ -152,12 +185,9 @@ function run () { }, false) this.event = new EventManager() - var fileStorage = new Storage('sol:') - var config = new Config(fileStorage) - var remixd = new Remixd() - var filesProviders = {} - filesProviders['browser'] = new Browserfiles(fileStorage) - filesProviders['localhost'] = new SharedFolder(remixd) + + var config = self._api.config + var filesProviders = self._api.filesProviders var tabbedFiles = {} // list of files displayed in the tabs bar @@ -301,10 +331,7 @@ function run () { var filepanelContainer = document.querySelector('#filepanel') filepanelContainer.appendChild(filePanel.render()) - filePanel.event.register('resize', function changeLayout (width) { - self._view.leftpanel.style.width = width + 'px' - self._view.centerpanel.style.left = width + 'px' - }) + filePanel.event.register('resize', delta => self._adjustLayout('left', delta)) function fileRenamedEvent (oldName, newName, isFolder) { // TODO please never use 'window' when it is possible to use a variable @@ -644,17 +671,9 @@ function run () { // ---------------- Righthand-panel -------------------- var rhpAPI = { config: config, - setEditorSize (delta) { - $('#righthand-panel').css('width', delta) - self._view.centerpanel.style.right = delta + 'px' - document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px' - onResize() - }, warnCompilerLoading: (msg) => { renderer.clear() - if (msg) { - renderer.error(msg, $('#output'), {type: 'warning'}) - } + if (msg) renderer.error(msg, $('#output'), {type: 'warning'}) }, executionContextChange: (context) => { return executionContext.executionContextChange(context) @@ -668,16 +687,17 @@ function run () { app: self.event, udapp: udapp.event } - var righthandPanel = new RighthandPanel(rhpAPI, rhpEvents, {}) // eslint-disable-line - self._view.rightpanel.appendChild(righthandPanel.render()) - righthandPanel.init() + self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, {}) + self._view.rightpanel.appendChild(self._components.righthandpanel.render()) + self._components.righthandpanel.init() + self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta)) // ----------------- editor resize --------------- function onResize () { editor.resize(document.querySelector('#editorWrap').checked) } - window.onresize = onResize + self._onResize = window.onresize = onResize onResize() self._view.el.addEventListener('change', onResize) diff --git a/src/app/editor-panel.js b/src/app/editor-panel.js index 690f350d47..f644a52d45 100644 --- a/src/app/editor-panel.js +++ b/src/app/editor-panel.js @@ -191,12 +191,12 @@ class EditorPanel { function toggleLHP (event) { this.children[0].classList.toggle('fa-angle-double-right') this.children[0].classList.toggle('fa-angle-double-left') - self.event.trigger('resize', []) + self.event.trigger('resize', ['left']) } function toggleRHP (event) { this.children[0].classList.toggle('fa-angle-double-right') this.children[0].classList.toggle('fa-angle-double-left') - self.event.trigger('resize', []) + self.event.trigger('resize', ['right']) } function increase () { self._api.editor.editorFontSize(1) } function decrease () { self._api.editor.editorFontSize(-1) } diff --git a/src/app/file-panel.js b/src/app/file-panel.js index cf9063e44a..316441d37e 100644 --- a/src/app/file-panel.js +++ b/src/app/file-panel.js @@ -13,6 +13,7 @@ var css = csjs` display : flex; flex-direction : row; width : 100%; + height : 100%; box-sizing : border-box; } .fileexplorer { @@ -56,9 +57,11 @@ var css = csjs` background-color : white; } .dragbar { - position : relative; - top : 36px; - left : 2px; + position : absolute; + top : 37px; + width : 0.5em; + right : 0; + bottom : 0; cursor : col-resize; z-index : 999; border-right : 2px solid hsla(215, 81%, 79%, .3); @@ -172,6 +175,7 @@ function filepanel (appAPI, filesProvider) { ;[...this.files].forEach(fileExplorer.api.addFile) } + // ----------------- resizeable ui --------------- function mousedown (event) { event.preventDefault() if (event.which === 1) { @@ -190,21 +194,21 @@ function filepanel (appAPI, filesProvider) { document.removeEventListener('keydown', cancelGhostbar) } } - function moveGhostbar (event) { - var rhp = window['righthand-panel'].offsetLeft + function getPosition (event) { + var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth var newpos = (event.pageX < limit) ? limit : event.pageX newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit) - ghostbar.style.left = newpos + 'px' + return newpos + } + function moveGhostbar (event) { + ghostbar.style.left = getPosition(event) + 'px' } - function removeGhostbar (event) { document.body.removeChild(ghostbar) document.removeEventListener('mousemove', moveGhostbar) document.removeEventListener('mouseup', removeGhostbar) document.removeEventListener('keydown', cancelGhostbar) - var width = (event.pageX < limit) ? limit : event.pageX - element.style.width = width + 'px' - self.event.trigger('resize', [width]) + self.event.trigger('resize', [getPosition(event)]) } function createNewFile () { diff --git a/src/app/righthand-panel.js b/src/app/righthand-panel.js index b885e2476f..c06b085a56 100644 --- a/src/app/righthand-panel.js +++ b/src/app/righthand-panel.js @@ -1,5 +1,6 @@ +var csjs = require('csjs-inject') var yo = require('yo-yo') -var $ = require('jquery') +var EventManager = require('ethereum-remix').lib.EventManager var tabbedMenu = require('./tabbed-menu') var contractTab = require('./contract-tab') @@ -8,8 +9,6 @@ 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; @@ -21,6 +20,25 @@ var css = csjs` margin-right: 0.5em; font-size: 1em; } + .dragbar { + position : absolute; + width : 0.5em; + top : 3em; + bottom : 0; + cursor : col-resize; + z-index : 999; + border-left : 2px solid hsla(215, 81%, 79%, .3); + } + .ghostbar { + width : 3px; + background-color : #C6CFF7; + opacity : 0.5; + position : absolute; + cursor : col-resize; + z-index : 9999; + top : 0; + bottom : 0; + } ` // ------------------------------------------------------------------ @@ -30,6 +48,9 @@ module.exports = RighthandPanel function RighthandPanel (appAPI, events, opts) { var self = this self._api = appAPI + self.event = new EventManager() + self._view = {} + var optionViews = yo`
` var options = yo` ` - var element = yo` + self._view.dragbar = yo`
` + self._view.element = yo`
+ ${self._view.dragbar}