mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

REFACTOR (7) fix toggle and resize of panels

Browse Source
pull/1/head
serapath 7 years ago committed by yann300
parent 8d2f24979b
commit 19c6b37d20
5 changed files with 152 additions and 133 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. 23
      assets/css/browser-solidity.css
  2. 126
      src/app.js
  3. 4
      src/app/editor-panel.js
  4. 24
      src/app/file-panel.js
  5. 106
      src/app/righthand-panel.js

23
assets/css/browser-solidity.css
Unescape View File

@ -42,18 +42,6 @@
display: inline-block; 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 { #header {
font-size: 13px; font-size: 13px;
height: 100%; height: 100%;
@ -322,17 +310,6 @@
border: .2em dotted #ffbd01; 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] { input[readonly] {
display: block; display: block;
width: 100%; width: 100%;

126
src/app.js
Unescape View File

@ -44,42 +44,89 @@ var css = csjs`
position : relative; position : relative;
width : 100vw; width : 100vw;
height : 100vh; height : 100vh;
overflow : hidden;
} }
.centerpanel { .centerpanel {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
position : absolute; position : absolute;
top : 0; top : 0;
left : 200px;
right : 0;
bottom : 0; bottom : 0;
overflow : hidden;
} }
.leftpanel { .leftpanel {
display : flex; display : flex;
flex-direction : column;
position : absolute; position : absolute;
top : 0; top : 0;
left : 0;
right : 0;
bottom : 0; bottom : 0;
width : 200px; left : 0;
overflow : hidden;
} }
.dragbar2 { .rightpanel {
background-color : transparent; display : flex;
flex-direction : column;
position : absolute; position : absolute;
width : 0.5em; top : 0;
top : 3em; right : 0;
bottom : 0; bottom : 0;
cursor : col-resize; overflow : hidden;
z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3);
} }
` `
class App { class App {
constructor (opts = {}) { constructor (opts = {}) {
var self = this 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._view = {}
self._components = {} 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 () { init () {
var self = this var self = this
@ -88,22 +135,6 @@ class App {
render () { render () {
var self = this var self = this
if (self._view.el) return self._view.el 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` self._view.leftpanel = yo`
<div id="filepanel" class=${css.leftpanel}> <div id="filepanel" class=${css.leftpanel}>
${''} ${''}
@ -115,8 +146,7 @@ class App {
</div> </div>
` `
self._view.rightpanel = yo` self._view.rightpanel = yo`
<div> <div class=${css.rightpanel}>
<div id="dragbar" class=${css.dragbar2}></div>
${''} ${''}
</div> </div>
` `
@ -127,6 +157,9 @@ class App {
${self._view.rightpanel} ${self._view.rightpanel}
</div> </div>
` `
// INIT
self._adjustLayout('left', self.data._layout.left.offset)
self._adjustLayout('right', self.data._layout.right.offset)
return self._view.el return self._view.el
} }
} }
@ -152,12 +185,9 @@ function run () {
}, false) }, false)
this.event = new EventManager() this.event = new EventManager()
var fileStorage = new Storage('sol:')
var config = new Config(fileStorage) var config = self._api.config
var remixd = new Remixd() var filesProviders = self._api.filesProviders
var filesProviders = {}
filesProviders['browser'] = new Browserfiles(fileStorage)
filesProviders['localhost'] = new SharedFolder(remixd)
var tabbedFiles = {} // list of files displayed in the tabs bar var tabbedFiles = {} // list of files displayed in the tabs bar
@ -301,10 +331,7 @@ function run () {
var filepanelContainer = document.querySelector('#filepanel') var filepanelContainer = document.querySelector('#filepanel')
filepanelContainer.appendChild(filePanel.render()) filepanelContainer.appendChild(filePanel.render())
filePanel.event.register('resize', function changeLayout (width) { filePanel.event.register('resize', delta => self._adjustLayout('left', delta))
self._view.leftpanel.style.width = width + 'px'
self._view.centerpanel.style.left = width + 'px'
})
function fileRenamedEvent (oldName, newName, isFolder) { function fileRenamedEvent (oldName, newName, isFolder) {
// TODO please never use 'window' when it is possible to use a variable // TODO please never use 'window' when it is possible to use a variable
@ -644,17 +671,9 @@ function run () {
// ---------------- Righthand-panel -------------------- // ---------------- Righthand-panel --------------------
var rhpAPI = { var rhpAPI = {
config: config, 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) => { warnCompilerLoading: (msg) => {
renderer.clear() renderer.clear()
if (msg) { if (msg) renderer.error(msg, $('#output'), {type: 'warning'})
renderer.error(msg, $('#output'), {type: 'warning'})
}
}, },
executionContextChange: (context) => { executionContextChange: (context) => {
return executionContext.executionContextChange(context) return executionContext.executionContextChange(context)
@ -668,16 +687,17 @@ function run () {
app: self.event, app: self.event,
udapp: udapp.event udapp: udapp.event
} }
var righthandPanel = new RighthandPanel(rhpAPI, rhpEvents, {}) // eslint-disable-line self._components.righthandpanel = new RighthandPanel(rhpAPI, rhpEvents, {})
self._view.rightpanel.appendChild(righthandPanel.render()) self._view.rightpanel.appendChild(self._components.righthandpanel.render())
righthandPanel.init() self._components.righthandpanel.init()
self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta))
// ----------------- editor resize --------------- // ----------------- editor resize ---------------
function onResize () { function onResize () {
editor.resize(document.querySelector('#editorWrap').checked) editor.resize(document.querySelector('#editorWrap').checked)
} }
window.onresize = onResize self._onResize = window.onresize = onResize
onResize() onResize()
self._view.el.addEventListener('change', onResize) self._view.el.addEventListener('change', onResize)

4
src/app/editor-panel.js
Unescape View File

@ -191,12 +191,12 @@ class EditorPanel {
function toggleLHP (event) { function toggleLHP (event) {
this.children[0].classList.toggle('fa-angle-double-right') this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left') this.children[0].classList.toggle('fa-angle-double-left')
self.event.trigger('resize', []) self.event.trigger('resize', ['left'])
} }
function toggleRHP (event) { function toggleRHP (event) {
this.children[0].classList.toggle('fa-angle-double-right') this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left') 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 increase () { self._api.editor.editorFontSize(1) }
function decrease () { self._api.editor.editorFontSize(-1) } function decrease () { self._api.editor.editorFontSize(-1) }

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

@ -13,6 +13,7 @@ var css = csjs`
display : flex; display : flex;
flex-direction : row; flex-direction : row;
width : 100%; width : 100%;
height : 100%;
box-sizing : border-box; box-sizing : border-box;
} }
.fileexplorer { .fileexplorer {
@ -56,9 +57,11 @@ var css = csjs`
background-color : white; background-color : white;
} }
.dragbar { .dragbar {
position : relative; position : absolute;
top : 36px; top : 37px;
left : 2px; width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize; cursor : col-resize;
z-index : 999; z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3); border-right : 2px solid hsla(215, 81%, 79%, .3);
@ -172,6 +175,7 @@ function filepanel (appAPI, filesProvider) {
;[...this.files].forEach(fileExplorer.api.addFile) ;[...this.files].forEach(fileExplorer.api.addFile)
} }
// ----------------- resizeable ui ---------------
function mousedown (event) { function mousedown (event) {
event.preventDefault() event.preventDefault()
if (event.which === 1) { if (event.which === 1) {
@ -190,21 +194,21 @@ function filepanel (appAPI, filesProvider) {
document.removeEventListener('keydown', cancelGhostbar) document.removeEventListener('keydown', cancelGhostbar)
} }
} }
function moveGhostbar (event) { function getPosition (event) {
var rhp = window['righthand-panel'].offsetLeft var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth
var newpos = (event.pageX < limit) ? limit : event.pageX var newpos = (event.pageX < limit) ? limit : event.pageX
newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit) 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) { function removeGhostbar (event) {
document.body.removeChild(ghostbar) document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar) document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar) document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar) document.removeEventListener('keydown', cancelGhostbar)
var width = (event.pageX < limit) ? limit : event.pageX self.event.trigger('resize', [getPosition(event)])
element.style.width = width + 'px'
self.event.trigger('resize', [width])
} }
function createNewFile () { function createNewFile () {

106
src/app/righthand-panel.js
Unescape View File

@ -1,5 +1,6 @@
var csjs = require('csjs-inject')
var yo = require('yo-yo') var yo = require('yo-yo')
var $ = require('jquery') var EventManager = require('ethereum-remix').lib.EventManager
var tabbedMenu = require('./tabbed-menu') var tabbedMenu = require('./tabbed-menu')
var contractTab = require('./contract-tab') var contractTab = require('./contract-tab')
@ -8,8 +9,6 @@ var analysisTab = require('./analysis-tab')
var debuggerTab = require('./debugger-tab') var debuggerTab = require('./debugger-tab')
var filesTab = require('./files-tab') var filesTab = require('./files-tab')
var csjs = require('csjs-inject')
var css = csjs` var css = csjs`
.options { .options {
float: left; float: left;
@ -21,6 +20,25 @@ var css = csjs`
margin-right: 0.5em; margin-right: 0.5em;
font-size: 1em; 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) { function RighthandPanel (appAPI, events, opts) {
var self = this var self = this
self._api = appAPI self._api = appAPI
self.event = new EventManager()
self._view = {}
var optionViews = yo`<div id="optionViews" class="settingsView"></div>` var optionViews = yo`<div id="optionViews" class="settingsView"></div>`
var options = yo` var options = yo`
<ul id="options"> <ul id="options">
@ -41,8 +62,10 @@ function RighthandPanel (appAPI, events, opts) {
<li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li> <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
</ul> </ul>
` `
var element = yo` self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
self._view.element = yo`
<div id="righthand-panel"> <div id="righthand-panel">
${self._view.dragbar}
<div id="header"> <div id="header">
<div id="menu"> <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"> <img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/remix_logo_512x512.svg" alt="Solidity realtime compiler and runtime">
@ -58,7 +81,7 @@ function RighthandPanel (appAPI, events, opts) {
debuggerTab(optionViews, appAPI, events, opts) debuggerTab(optionViews, appAPI, events, opts)
filesTab(optionViews, appAPI, events, opts) filesTab(optionViews, appAPI, events, opts)
self.render = function () { return element } self.render = function () { return self._view.element }
self.init = function () { self.init = function () {
;[...options.children].forEach((el) => { el.classList.add(css.options) }) ;[...options.children].forEach((el) => { el.classList.add(css.options) })
@ -72,48 +95,43 @@ function RighthandPanel (appAPI, events, opts) {
tabbedMenu(options, tabbedMenuAPI, tabEvents, {}) tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
// ----------------- resizeable ui --------------- // ----------------- resizeable ui ---------------
var limit = 60
var EDITOR_WINDOW_SIZE = 'editorWindowSize' self._view.dragbar.addEventListener('mousedown', mousedown)
var ghostbar = yo`<div class=${css.ghostbar}></div>`
var dragging = false function mousedown (event) {
$('#dragbar').mousedown(function (e) { event.preventDefault()
e.preventDefault() if (event.which === 1) {
dragging = true moveGhostbar(event)
var main = $('#righthand-panel') document.body.appendChild(ghostbar)
var ghostbar = $('<div id="ghostbar">', { document.addEventListener('mousemove', moveGhostbar)
css: { document.addEventListener('mouseup', removeGhostbar)
top: main.offset().top, document.addEventListener('keydown', cancelGhostbar)
left: main.offset().left
} }
}).prependTo('body')
$(document).mousemove(function (e) {
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
function getEditorSize () {
return $('#righthand-panel').width()
} }
function cancelGhostbar (event) {
$(document).mouseup(function (e) { if (event.keyCode === 27) {
if (dragging) { document.body.removeChild(ghostbar)
var delta = $body.width() - e.pageX + 2 document.removeEventListener('mousemove', moveGhostbar)
$('#ghostbar').remove() document.removeEventListener('mouseup', removeGhostbar)
$(document).unbind('mousemove') document.removeEventListener('keydown', cancelGhostbar)
dragging = false
delta = (delta < 50) ? 50 : delta
self._api.setEditorSize(delta)
appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
} }
}) }
function getPosition (event) {
if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) { var lhp = window['filepanel'].offsetWidth
self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE)) var max = document.body.offsetWidth - limit
} else { var newpos = (event.pageX > max) ? max : event.pageX
appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize()) newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit
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)
self.event.trigger('resize', [document.body.offsetWidth - getPosition(event)])
} }
} }
} }

Write Preview
Loading…
Cancel
Save