Skip to content

B
baas-ide
Commit 19c6b37d authored by serapath's avatar serapath Committed by yann300
Browse files
Options

REFACTOR (7) fix toggle and resize of panels

parent 8d2f2497
Show whitespace changes
Inline Side-by-side
Showing with 151 additions and 132 deletions
assets/css/browser-solidity.css
View file @ 19c6b37d
......@@ -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%;
......
src/app.js
View file @ 19c6b37d
......@@ -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`
<div id="filepanel" class=${css.leftpanel}>
${''}
......@@ -115,8 +146,7 @@ class App {
</div>
`
self._view.rightpanel = yo`
<div>
<div id="dragbar" class=${css.dragbar2}></div>
<div class=${css.rightpanel}>
${''}
</div>
`
......@@ -127,6 +157,9 @@ class App {
${self._view.rightpanel}
</div>
`
// 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)
......
src/app/editor-panel.js
View file @ 19c6b37d
......@@ -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) }
......
src/app/file-panel.js
View file @ 19c6b37d
......@@ -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 () {
......
src/app/righthand-panel.js
View file @ 19c6b37d
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`<div id="optionViews" class="settingsView"></div>`
var options = yo`
<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>
</ul>
`
var element = yo`
self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
self._view.element = yo`
<div id="righthand-panel">
${self._view.dragbar}
<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">
......@@ -58,7 +81,7 @@ function RighthandPanel (appAPI, events, opts) {
debuggerTab(optionViews, appAPI, events, opts)
filesTab(optionViews, appAPI, events, opts)
self.render = function () { return element }
self.render = function () { return self._view.element }
self.init = function () {
;[...options.children].forEach((el) => { el.classList.add(css.options) })
......@@ -72,48 +95,43 @@ function RighthandPanel (appAPI, events, opts) {
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 = $('<div id="ghostbar">', {
css: {
top: main.offset().top,
left: main.offset().left
var limit = 60
self._view.dragbar.addEventListener('mousedown', mousedown)
var ghostbar = yo`<div class=${css.ghostbar}></div>`
function mousedown (event) {
event.preventDefault()
if (event.which === 1) {
moveGhostbar(event)
document.body.appendChild(ghostbar)
document.addEventListener('mousemove', moveGhostbar)
document.addEventListener('mouseup', removeGhostbar)
document.addEventListener('keydown', cancelGhostbar)
}
}).prependTo('body')
$(document).mousemove(function (e) {
ghostbar.css('left', e.pageX + 2)
})
})
var $body = $('body')
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
self._api.setEditorSize(delta)
appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
function cancelGhostbar (event) {
if (event.keyCode === 27) {
document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
}
})
if (appAPI.config.exists(EDITOR_WINDOW_SIZE)) {
self._api.setEditorSize(appAPI.config.get(EDITOR_WINDOW_SIZE))
} else {
appAPI.config.set(EDITOR_WINDOW_SIZE, getEditorSize())
}
function getPosition (event) {
var lhp = window['filepanel'].offsetWidth
var max = document.body.offsetWidth - limit
var newpos = (event.pageX > max) ? max : event.pageX
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)])
}
}
}
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