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

Merge pull request #1233 from ethereum/refactor_rhp

Browse Source 
refactor rhp (wip)
pull/3094/head
yann300 7 years ago committed by GitHub
parent 5e857a8abe ad923774bf
commit f04c1c4980
4 changed files with 147 additions and 204 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. 194
      src/app/panels/righthand-panel.js
  2. 102
      src/app/panels/styles/righthand-panel-styles.js
  3. 12
      src/app/tabs/support-tab.js
  4. 39
      src/app/tabs/tabbed-menu.js

194
src/app/panels/righthand-panel.js
Unescape View File

@ -1,89 +1,94 @@
var yo = require('yo-yo')
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager
var TabbedMenu = require('../tabs/tabbed-menu')
var CompileTab = require('../tabs/compile-tab')
var RunTab = require('../tabs/run-tab')
var SettingsTab = require('../tabs/settings-tab')
var AnalysisTab = require('../tabs/analysis-tab')
var DebuggerTab = require('../tabs/debugger-tab')
var SupportTab = require('../tabs/support-tab')
var PluginTab = require('../tabs/plugin-tab')
var TestTab = require('../tabs/test-tab')
var PluginManager = require('../plugin/pluginManager')
const yo = require('yo-yo')
const csjs = require('csjs-inject')
const remixLib = require('remix-lib')
var css = require('./styles/righthand-panel-styles')
const styleguide = require('../ui/styles-guide/theme-chooser')
const PluginManager = require('../plugin/pluginManager')
const TabbedMenu = require('../tabs/tabbed-menu')
const CompileTab = require('../tabs/compile-tab')
const SettingsTab = require('../tabs/settings-tab')
const AnalysisTab = require('../tabs/analysis-tab')
const DebuggerTab = require('../tabs/debugger-tab')
const SupportTab = require('../tabs/support-tab')
const PluginTab = require('../tabs/plugin-tab')
const TestTab = require('../tabs/test-tab')
const RunTab = require('../tabs/run-tab')
function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
var self = this
self._api = appAPI
const EventManager = remixLib.EventManager
const styles = styleguide.chooser()
module.exports = class RighthandPanel {
constructor (api = {}, events = {}, opts = {}) {
const self = this
self.event = new EventManager()
self._view = {}
self._api = api
self._api.switchTab = x => { // @TODO: refactor
if (self._components.tabbedMenu) self._components.tabbedMenu.selectTabByClassName(x)
}
self._events = events
self._events.rhp = self.event // @TODO: refactor
self._opts = opts
self._view = {
element: null,
tabbedMenu: null,
tabbedMenuViewport: null,
dragbar: null
}
self._components = {
pluginManager: new PluginManager(self._opts.pluginAPI, self._events),
tabbedMenu: new TabbedMenu(self._api, self._events),
compile: new CompileTab(self._api, self._events, self._opts),
run: new RunTab(self._api, self._events, self._opts),
settings: new SettingsTab(self._api, self._events, self._opts),
analysis: new AnalysisTab(self._api, self._events, self._opts),
debug: new DebuggerTab(self._api, self._events, self._opts),
support: new SupportTab(self._api, self._events, self._opts),
test: new TestTab(self._api, self._events, self._opts)
}
self.event.register('plugin-loadRequest', json => {
const tab = new PluginTab({}, self._events, json)
const content = tab.render()
self._components.tabbedMenu.addTab(json.title, 'plugin', content)
self._components.pluginManager.register(json, content)
})
var optionViews = yo`<div id="optionViews"></div>`
self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
// load tabbed menu component
var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
self._view.tabbedMenu = new TabbedMenu(appAPI, tabEvents)
var options = self._view.tabbedMenu.render()
options.classList.add(css.opts)
self._view.element = yo`
<div id="righthand-panel" class=${css.panel}>
<div id="righthand-panel" class=${css.righthandpanel}>
${self._view.dragbar}
<div id="header" class=${css.header}>
<div class=${css.menu}>
${options}
${self._components.tabbedMenu.render()}
${self._components.tabbedMenu.renderViewport()}
</div>
${optionViews}
</div>
</div>
`
// selectTabByClassName
appAPI.switchTab = tabClass => self._view.tabbedMenu.selectTabByClassName(tabClass)
events.rhp = self.event
var compileTab = new CompileTab(appAPI, events, opts)
optionViews.appendChild(compileTab.render())
var runTab = new RunTab(appAPI, events, opts)
optionViews.appendChild(runTab.render())
var settingsTab = new SettingsTab(appAPI, events, opts)
optionViews.appendChild(settingsTab.render())
var analysisTab = new AnalysisTab(appAPI, events, opts)
optionViews.appendChild(analysisTab.render())
var debuggerTab = new DebuggerTab(appAPI, events, opts)
optionViews.appendChild(debuggerTab.render())
var supportTab = new SupportTab(appAPI, events, opts)
optionViews.appendChild(supportTab.render())
var testTab = new TestTab(appAPI, events, opts)
optionViews.appendChild(testTab.render())
this._view.tabbedMenu.addTab('Compile', 'compileView', optionViews.querySelector('#compileTabView'))
this._view.tabbedMenu.addTab('Run', 'runView', optionViews.querySelector('#runTabView'))
this._view.tabbedMenu.addTab('Settings', 'settingsView', optionViews.querySelector('#settingsView'))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', optionViews.querySelector('#staticanalysisView'))
this._view.tabbedMenu.addTab('Debugger', 'debugView', optionViews.querySelector('#debugView'))
this._view.tabbedMenu.addTab('Support', 'supportView', optionViews.querySelector('#supportView'))
this._view.tabbedMenu.addTab('Test', 'testView', optionViews.querySelector('#testView'))
this._view.tabbedMenu.selectTabByTitle('Compile')
</div>`
self.pluginManager = new PluginManager(opts.pluginAPI, events)
events.rhp.register('plugin-loadRequest', (json) => {
var tab = new PluginTab({}, events, json)
var content = tab.render()
optionViews.appendChild(content)
this._view.tabbedMenu.addTab(json.title, 'plugin', content)
self.pluginManager.register(json, content)
})
self.render = function () { return self._view.element }
self.init = function () {
;[...options.children].forEach((el) => { el.classList.add(css.options) })
// ----------------- resizeable ui ---------------
var limit = 60
const { compile, run, settings, analysis, debug, support, test } = self._components
self._components.tabbedMenu.addTab('Compile', 'compileView', compile.render())
self._components.tabbedMenu.addTab('Run', 'runView', run.render())
self._components.tabbedMenu.addTab('Settings', 'settingsView', settings.render())
self._components.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysis.render())
self._components.tabbedMenu.addTab('Debugger', 'debugView', debug.render())
self._components.tabbedMenu.addTab('Support', 'supportView', support.render())
self._components.tabbedMenu.addTab('Test', 'testView', test.render())
self._components.tabbedMenu.selectTabByTitle('Compile')
}
// showDebugger () {
// const self = this
// if (!self._components.tabbedMenu) return
// self._components.tabbedMenu.selectTab(self._view.el.querySelector('li.debugView'))
// }
render () {
const self = this
if (self._view.element) return self._view.element
return self._view.element
}
init () {
// @TODO: init is for resizable drag bar only and should be refactored in the future
const self = this
const limit = 60
self._view.dragbar.addEventListener('mousedown', mousedown)
var ghostbar = yo`<div class=${css.ghostbar}></div>`
const ghostbar = yo`<div class=${css.ghostbar}></div>`
function mousedown (event) {
event.preventDefault()
if (event.which === 1) {
@ -103,8 +108,8 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
}
}
function getPosition (event) {
var lhp = window['filepanel'].offsetWidth
var max = document.body.offsetWidth - limit
const lhp = window['filepanel'].offsetWidth
const max = document.body.offsetWidth - limit
var newpos = (event.pageX > max) ? max : event.pageX
newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit
return newpos
@ -122,4 +127,37 @@ function RighthandPanel (appAPI = {}, events = {}, opts = {}) {
}
}
module.exports = RighthandPanel
const css = csjs`
.righthandpanel {
display : flex;
flex-direction : column;
top : 0;
right : 0;
bottom : 0;
box-sizing : border-box;
overflow : hidden;
height : 100%;
}
.header {
height : 100%;
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid ${styles.rightPanel.bar_Dragging};
}
.ghostbar {
width : 3px;
background-color : ${styles.rightPanel.bar_Ghost};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
`

102
src/app/panels/styles/righthand-panel-styles.js
Unescape View File

@ -1,102 +0,0 @@
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
#righthand-panel {
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
overflow: hidden;
}
#optionViews {
background-color: ${styles.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
#optionViews > div {
display: none;
}
#optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
#optionViews .hide {
display: none;
}
a {
color: ${styles.rightPanel.text_link};
}
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
}
.options {
float: left;
padding-top: 0.7em;
min-width: 60px;
font-size: 0.9em;
cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary};
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary};
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel};
}
.dragbar {
position : absolute;
width : 0.5em;
top : 3em;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-left : 2px solid ${styles.rightPanel.bar_Dragging};
}
.ghostbar {
width : 3px;
background-color : ${styles.rightPanel.bar_Ghost};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
.panel {
height : 100%;
}
.header {
height : 100%;
}
.solIcon {
margin-left: 10px;
margin-right: 30px;
display: flex;
align-self: center;
height: 29px;
width: 20px;
background-color: ${styles.colors.transparent};
}
`
module.exports = css

12
src/app/tabs/support-tab.js
Unescape View File

@ -18,15 +18,18 @@ module.exports = class SupportTab {
self._components = {}
self._events.app.register('tabChanged', (tabName) => {
if (tabName !== 'Support' || self.data.gitterIsLoaded) return
if (!self._view.gitterIframe) self._view.gitterIframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
yo.update(self._view.el, self.render())
const iframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
self._view.gitterIframe.parentNode.replaceChild(iframe, self._view.gitterIframe)
self._view.gitterIframe = iframe
self._view.el.style.display = 'block'
self.data.gitterIsLoaded = true
})
}
render () {
const self = this
var el = yo`
if (self._view.el) return self._view.el
self._view.gitterIframe = yo`<div></div>`
self._view.el = yo`
<div class="${css.supportTabView}" id="supportView">
<div class="${css.infoBox}">
Have a question, found a bug or want to propose a feature? Have a look at the
@ -41,8 +44,7 @@ module.exports = class SupportTab {
${self._view.gitterIframe}
</div>
</div>`
if (!self._view.el) self._view.el = el
return el
return self._view.el
function openLink () { window.open('https://gitter.im/ethereum/remix') }
}
}

39
src/app/tabs/tabbed-menu.js
Unescape View File

@ -68,7 +68,14 @@ module.exports = class TabbedMenu {
}
const css = csjs`
li.active {
.menu {
display: flex;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
list-style: none;
margin: 0;
padding: 0;
}
.active {
background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color}
}
@ -81,21 +88,19 @@ const css = csjs`
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary}
}
.opts_li.active {
color: ${styles.rightPanel.text_Primary}
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
.optionViews {
background-color: ${styles.rightPanel.backgroundColor_Tab};
overflow: scroll;
height: 100%;
}
.optionViews > div {
display: none;
}
.optionViews .pre {
word-wrap: break-word;
background-color: ${styles.rightPanel.BackgroundColor_Pre};
border-radius: 3px;
display: inline-block;
padding: 0 0.6em;
}
`

Write Preview
Loading…
Cancel
Save