Skip to content

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

REFACTOR (5) put centerpanel's editor and tabs into editorpanel component

parent b712220f
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 212 deletions
assets/css/browser-solidity.css
View file @ a956e9ca
.scroller {
position: absolute;
z-index: 999;
text-align: center;
cursor: pointer;
display: none;
padding: 0 0.9em;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.8);
height: 100%;
font-size: 1.3em;
}
.scroller i {
line-height: 3em;
}
.scroller-right {
right: 0;
}
.scroller-left {
left: 0;
}
#files {
list-style: none;
margin: 0;
font-size: 15px;
height: 2.5em;
box-sizing: border-box;
line-height: 2em;
padding: 0.5em 0 0;
position: relative;
left: 40px;
top:0;
min-width:3000px;
border-bottom: 0 none;
}
#files .file {
padding: 0 0.6em;
box-sizing: border-box;
......@@ -51,22 +11,6 @@
color: #999;
}
.toggleRHP {
display: block;
float: left;
margin-top: 0.5em;
padding: 0.6em;
font-weight: bold;
cursor: pointer;
color: black;
}
.toggleRHP {
float: right;
position: absolute;
right: 0;
}
#files .file.active {
color: black;
font-weight: bold;
......
src/app.js
View file @ a956e9ca
......@@ -26,6 +26,7 @@ var ExecutionContext = require('./app/execution-context')
var Debugger = require('./app/debugger')
var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
var FilePanel = require('./app/file-panel')
var EditorPanel = require('./app/editor-panel')
var RighthandPanel = require('./app/righthand-panel')
var examples = require('./app/example-contracts')
......@@ -53,9 +54,6 @@ var css = csjs`
right : 0;
bottom : 0;
}
.tabsbar {
overflow : hidden;
}
.leftpanel {
display : flex;
position : absolute;
......@@ -81,6 +79,7 @@ class App {
constructor (opts = {}) {
var self = this
self._view = {}
self._components = {}
}
init () {
var self = this
......@@ -89,28 +88,33 @@ class App {
render () {
var self = this
if (self._view.el) return self._view.el
/***************************************************************************/
self._view.leftpanel = yo`<div id="filepanel" class=${css.leftpanel}></div>`
self._view.rightpanel = yo`<div></div>`
self._view.tabsbar = yo`
<div class=${css.tabsbar}>
<div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
<div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
<ul id="files" class="nav nav-tabs"></ul>
/*************************************************************************/
// ----------------- 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._view.leftpanel = yo`
<div id="filepanel" class=${css.leftpanel}>
${''}
</div>
`
self._view.centerpanel = yo`
<div id="editor-container" class=${css.centerpanel}>
${self._view.tabsbar}
<div id="input"></div>
${self._components.editorpanel.render()}
</div>
`
self._view.rightpanel = yo`
<div>
<div id="dragbar" class=${css.dragbar2}></div>
${''}
</div>
`
self._view.el = yo`
<div class=${css.browsersolidity}>
${self._view.leftpanel}
<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
${self._view.centerpanel}
<div id="dragbar" class=${css.dragbar2}></div>
${self._view.rightpanel}
</div>
`
......@@ -126,6 +130,7 @@ function run () {
var queryParams = new QueryParams()
var gistHandler = new GistHandler()
var editor = self._components.editor
// 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
......@@ -271,9 +276,6 @@ function run () {
createName: createNonClashingName,
switchToFile: switchToFile,
event: this.event,
editorFontSize: function (incr) {
editor.editorFontSize(incr)
},
currentFile: function () {
return config.get('currentFile')
},
......@@ -288,26 +290,9 @@ function run () {
// TODO this should happen inside file-panel.js
var filepanelContainer = document.querySelector('#filepanel')
filepanelContainer.appendChild(filePanel)
filePanel.events.register('ui-hidden', function changeLayout (isHidden) {
var value
if (isHidden) {
value = -parseInt(self._view.leftpanel.style.width)
value = (isNaN(value) ? -self._view.leftpanel.getBoundingClientRect().width : value)
self._view.leftpanel.style.position = 'absolute'
self._view.leftpanel.style.left = (value - 5) + 'px'
self._view.leftpanel.style.width = -value + 'px'
self._view.centerpanel.style.left = '45px'
} else {
value = -parseInt(self._view.leftpanel.style.left) + 'px'
self._view.leftpanel.style.position = 'static'
self._view.leftpanel.style.width = value
self._view.leftpanel.style.left = ''
self._view.centerpanel.style.left = value
}
})
filePanel.events.register('ui-resize', function changeLayout (width) {
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'
})
......@@ -411,12 +396,8 @@ function run () {
})
})
// ----------------- editor ----------------------
var editor = new Editor(document.getElementById('input'))
// --------------------Files tabs-----------------------------
var $filesEl = $('#files')
var FILE_SCROLL_DELTA = 300
// Switch tab
$filesEl.on('click', '.file:not(.active)', function (ev) {
......@@ -497,7 +478,6 @@ function run () {
for (var file in tabbedFiles) {
$filesEl.append($('<li class="file"><span class="name">' + file + '</span><span class="remove"><i class="fa fa-close"></i></span></li>'))
}
var currentFileOpen = !!config.get('currentFile')
if (currentFileOpen) {
......@@ -506,57 +486,9 @@ function run () {
}
$('#input').toggle(currentFileOpen)
$('#output').toggle(currentFileOpen)
self._components.editorpanel.refresh()
}
var $scrollerRight = $('.scroller-right')
var $scrollerLeft = $('.scroller-left')
function widthOfList () {
var itemsWidth = 0
$('.file').each(function () {
var itemWidth = $(this).outerWidth()
itemsWidth += itemWidth
})
return itemsWidth
}
function widthOfVisible () {
return document.querySelector('#editor-container').offsetWidth
}
function getLeftPosi () {
return $filesEl.position().left
}
function reAdjust () {
if (widthOfList() + getLeftPosi() > widthOfVisible()) {
$scrollerRight.fadeIn('fast')
} else {
$scrollerRight.fadeOut('fast')
}
if (getLeftPosi() < 0) {
$scrollerLeft.fadeIn('fast')
} else {
$scrollerLeft.fadeOut('fast')
$filesEl.animate({ left: getLeftPosi() + 'px' }, 'slow')
}
}
$scrollerRight.click(function () {
var delta = (getLeftPosi() - FILE_SCROLL_DELTA)
$filesEl.animate({ left: delta + 'px' }, 'slow', function () {
reAdjust()
})
})
$scrollerLeft.click(function () {
var delta = Math.min((getLeftPosi() + FILE_SCROLL_DELTA), 0)
$filesEl.animate({ left: delta + 'px' }, 'slow', function () {
reAdjust()
})
})
var compiler = new Compiler(handleImportCall)
var offsetToLineColumnConverter = new OffsetToLineColumnConverter(compiler.event)
......@@ -709,7 +641,6 @@ function run () {
document.querySelector(`.${css.dragbar2}`).style.right = delta + 'px'
onResize()
},
reAdjust: reAdjust,
warnCompilerLoading: (msg) => {
renderer.clear()
if (msg) {
......@@ -736,7 +667,6 @@ function run () {
function onResize () {
editor.resize(document.querySelector('#editorWrap').checked)
reAdjust()
}
window.onresize = onResize
onResize()
......
src/app/editor-panel.js 0 → 100644
View file @ a956e9ca
var csjs = require('csjs-inject')
var yo = require('yo-yo')
var EventManager = require('ethereum-remix').lib.EventManager
var css = csjs`
.tabsbar {
display : flex;
overflow : hidden;
}
.tabs {
position : relative;
display : flex;
margin : 0;
left : 10px;
margin-right : 10px;
width : 100%;
overflow : hidden;
}
.files {
position : relative;
list-style : none;
margin : 0;
font-size : 15px;
height : 2.5em;
box-sizing : border-box;
line-height : 2em;
padding : 0.5em 0 0;
top : 0;
border-bottom : 0 none;
}
.changeeditorfontsize {
margin : 0;
}
.changeeditorfontsize i {
cursor : pointer;
display : block;
color : #111111;
}
.changeeditorfontsize i {
cursor : pointer;
}
.changeeditorfontsize i:hover {
color : orange;
}
.buttons {
display : flex;
flex-direction : row;
justify-content : space-around;
align-items : center;
min-width : 45px;
}
.toggleLHP {
display : flex;
padding : 10px;
width : 100%;
font-weight : bold;
color : black;
}
.toggleLHP i {
cursor : pointer;
}
.toggleLHP i:hover {
color : orange;
}
.scroller {
position : absolute;
z-index : 999;
text-align : center;
cursor : pointer;
padding : 0 0.9em;
vertical-align : middle;
background-color : rgba(255, 255, 255, 0.8);
height : 100%;
font-size : 1.3em;
}
.scroller i {
line-height : 3em;
}
.scrollerright {
right : 0;
margin-right : 15px;
}
.scrollerleft {
left : 0;
}
.toggleRHP {
margin-top : 0.5em;
padding : 0.6em;
font-weight : bold;
color : black;
right : 0;
}
.toggleRHP i {
cursor : pointer;
}
.toggleRHP i:hover {
color : orange;
}
.show {
opacity : 1;
transition : .3s opacity ease-in;
}
.hide {
opacity : 0;
pointer-events : none;
transition : .3s opacity ease-in;
}
`
class EditorPanel {
constructor (opts = {}) {
var self = this
self.data = {}
self._view = {}
self._api = { editor: opts.api.editor }
}
refresh () {
var self = this
self._view.tabs.onmouseenter()
}
render () {
var self = this
if (self._view.el) return self._view.el
self._view.el = [
self._renderTabsbar(),
self._api.editor.render()
]
return self._view.el
}
_renderTabsbar () {
var self = this
if (self._view.tabsbar) return self._view.tabsbar
self._view.tabs = yo`
<div class=${css.tabs} onmouseenter=${toggleScrollers} onmouseleave=${toggleScrollers}>
<div class="${css.scroller} ${css.hide} ${css.scrollerright}"><i class="fa fa-chevron-right "></i></div>
<ul id="files" class="${css.files} nav nav-tabs"></ul>
<div class="${css.scroller} ${css.hide} ${css.scrollerleft}"><i class="fa fa-chevron-left "></i></div>
</div>
`
self._view.tabsbar = yo`
<div class=${css.tabsbar}>
<div class=${css.buttons}>
<span class=${css.toggleLHP} onclick=${toggleLHP} title="Toggle left hand panel">
<i class="fa fa-angle-double-left"></i>
</span>
<span class=${css.changeeditorfontsize} >
<i class="increditorsize fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
<i class="decreditorsize fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
</span>
</div>
${self._view.tabs}
<span class="${css.toggleRHP}" onclick=${toggleRHP} title="Toggle right hand panel">
<i class="fa fa-angle-double-right"></i>
</span>
</div>
`
return self._view.tabsbar
function toggleScrollers (event = {}) {
if (event.type) self.data._focus = event.type
var isMouseEnter = self.data._focus === 'mouseenter'
if (isMouseEnter && this.children[1].offsetWidth > this.offsetWidth) {
this.children[0].classList.add(css.show)
this.children[2].classList.add(css.show)
this.children[0].classList.remove(css.hide)
this.children[2].classList.remove(css.hide)
} else {
this.children[0].classList.remove(css.show)
this.children[2].classList.remove(css.show)
this.children[0].classList.add(css.hide)
this.children[2].classList.add(css.hide)
}
}
function toggleLHP (event) {
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
}
function toggleRHP (event) {
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
}
function increase () { self._api.editor.editorFontSize(1) }
function decrease () { self._api.editor.editorFontSize(-1) }
}
}
module.exports = EditorPanel
src/app/editor.js
View file @ a956e9ca
......@@ -24,12 +24,15 @@ document.head.appendChild(yo`
</style>
`)
function Editor (editorElement) {
var editor = ace.edit(editorElement)
editorElement.editor = editor // required to access the editor during tests
editorElement.className += ' ' + css['ace-editor']
function Editor (opts = {}) {
var self = this
var el = yo`<div id="input"></div>`
var editor = ace.edit(el)
el.className += ' ' + css['ace-editor']
el.editor = editor // required to access the editor during tests
self.render = function () { return el }
var event = new EventManager()
this.event = event
self.event = event
var sessions = {}
var sourceAnnotations = []
var readOnlySessions = {}
......@@ -37,7 +40,6 @@ function Editor (editorElement) {
var emptySession = createSession('')
var self = this
editor.on('guttermousedown', function (e) {
var target = e.domEvent.target
if (target.className.indexOf('ace_gutter-cell') === -1) {
......
src/app/file-panel.js
View file @ a956e9ca
......@@ -28,29 +28,29 @@ var css = csjs`
.newFile {
padding : 10px;
}
.newFile i {
cursor : pointer;
}
.newFile i:hover {
color : orange;
}
.connectToLocalhost {
padding : 10px;
}
.uploadFile {
padding : 10px;
.connectToLocalhost i {
cursor : pointer;
}
.toggleLHP {
display : flex;
justify-content : flex-end;
.connectToLocalhost i:hover {
color : orange;
}
.uploadFile {
padding : 10px;
width : 100%;
font-weight : bold;
cursor : pointer;
color : black;
}
.isVisible {
position : absolute;
left : 35px;
.uploadFile label:hover {
color : orange;
}
.isHidden {
position : absolute;
height : 99%;
left : -101%;
.uploadFile label {
cursor : pointer;
}
.treeview {
background-color : white;
......@@ -73,13 +73,6 @@ var css = csjs`
top : 0;
bottom : 0;
}
.changeeditorfontsize {
padding: 10px;
}
.changeeditorfontsize i {
display: block;
color: #111111;
}
`
var limit = 60
......@@ -87,6 +80,7 @@ var canUpload = window.File || window.FileReader || window.FileList || window.Bl
var ghostbar = yo`<div class=${css.ghostbar}></div>`
function filepanel (appAPI, filesProvider) {
var self = this
var fileExplorer = new FileExplorer(appAPI, filesProvider['browser'])
var fileSystemExplorer = new FileExplorer(appAPI, filesProvider['localhost'])
var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
......@@ -119,13 +113,6 @@ function filepanel (appAPI, filesProvider) {
<span onclick=${connectToLocalhost} class="${css.connectToLocalhost}">
<i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
</span>
<span class=${css.changeeditorfontsize} >
<i class="increditorsize fa fa-plus" aria-hidden="true" title="increase editor font size"></i>
<i class="decreditorsize fa fa-minus" aria-hidden="true" title="decrease editor font size"></i>
</span>
<span class=${css.toggleLHP} onclick=${toggle} title="Toggle left hand panel">
<i class="fa fa-angle-double-left"></i>
</span>
</div>
<div class=${css.treeview}>${fileExplorer.init()}</div>
<div class="filesystemexplorer ${css.treeview}"></div>
......@@ -135,10 +122,10 @@ function filepanel (appAPI, filesProvider) {
`
}
var events = new EventManager()
var event = new EventManager()
self.event = event
var element = template()
element.querySelector('.increditorsize').addEventListener('click', () => { appAPI.editorFontSize(1) })
element.querySelector('.decreditorsize').addEventListener('click', () => { appAPI.editorFontSize(-1) })
var containerFileSystem = element.querySelector('.filesystemexplorer')
var websocketconn = element.querySelector('.websocketconn')
filesProvider['localhost'].remixd.event.register('connecting', (event) => {
......@@ -166,9 +153,7 @@ function filepanel (appAPI, filesProvider) {
containerFileSystem.removeChild(fileSystemExplorer.element)
}
})
// TODO please do not add custom javascript objects, which have no
// relation to the DOM to DOM nodes
element.events = events
fileExplorer.events.register('focus', function (path) {
appAPI.switchToFile(path)
})
......@@ -177,15 +162,7 @@ function filepanel (appAPI, filesProvider) {
appAPI.switchToFile(path)
})
return element
function toggle (event) {
var isHidden = element.classList.toggle(css.isHidden)
this.classList.toggle(css.isVisible)
this.children[0].classList.toggle('fa-angle-double-right')
this.children[0].classList.toggle('fa-angle-double-left')
events.trigger('ui-hidden', [isHidden])
}
self.render = function render () { return element }
function uploadFile (event) {
// TODO The file explorer is merely a view on the current state of
......@@ -227,7 +204,7 @@ function filepanel (appAPI, filesProvider) {
document.removeEventListener('keydown', cancelGhostbar)
var width = (event.pageX < limit) ? limit : event.pageX
element.style.width = width + 'px'
events.trigger('ui-resize', [width])
self.event.trigger('resize', [width])
}
function createNewFile () {
......
src/app/righthand-panel.js
View file @ a956e9ca
......@@ -62,15 +62,6 @@ function RighthandPanel (appAPI, events, opts) {
self.init = function () {
;[...options.children].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)
})
// ----------------- tabbed menu -----------------
var tabbedMenuAPI = {
......@@ -116,7 +107,6 @@ function RighthandPanel (appAPI, events, opts) {
delta = (delta < 50) ? 50 : delta
self._api.setEditorSize(delta)
appAPI.config.set(EDITOR_WINDOW_SIZE, delta)
appAPI.reAdjust()
}
})
......
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