diff --git a/src/app.js b/src/app.js
index 7fd016466d..69373f7a29 100644
--- a/src/app.js
+++ b/src/app.js
@@ -388,13 +388,18 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
// TODO: There are still a lot of dep between editorpanel and filemanager
+ let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
+ const appManager = new RemixAppManager(appStore)
+
+ const mainPanelComponent = new SwapPanelComponent('mainPanel', appStore, appManager, { default: false })
+
// ----------------- file manager ----------------------------
self._components.fileManager = new FileManager()
var fileManager = self._components.fileManager
registry.put({api: fileManager, name: 'filemanager'})
// ----------------- editor panel ----------------------
- self._components.editorpanel = new EditorPanel()
+ self._components.editorpanel = new EditorPanel(appStore, appManager, mainPanelComponent)
registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
// ----------------- Renderer -----------------
@@ -412,12 +417,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
// TODOs those are instanciated before hand. should be instanciated on demand
- let appStore = new EntityStore('module')
const pluginManagerComponent = new PluginManagerComponent()
- const appManager = new RemixAppManager(appStore)
const swapPanelComponent = new SwapPanelComponent('swapPanel', appStore, appManager, { default: true })
- const mainPanelComponent = new SwapPanelComponent('mainPanel', appStore, appManager, { default: false })
- const verticalIconsComponent = new VerticalIconsComponent(appStore)
+ const verticalIconsComponent = new VerticalIconsComponent('swapPanel', appStore)
const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line
const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
@@ -430,7 +432,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
self._components.editorpanel.init()
self._components.fileManager.init()
- self._view.mainpanel.appendChild(mainPanelComponent.render())
+ self._view.mainpanel.appendChild(self._components.editorpanel.render())
self._view.iconpanel.appendChild(verticalIconsComponent.render())
self._view.swappanel.appendChild(swapPanelComponent.render())
@@ -464,7 +466,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
{ profile: sourceHighlighters.profile(), api: sourceHighlighters },
{ profile: configProvider.profile(), api: configProvider },
{ profile: txListenerModuleProxy.profile(), api: txListenerModuleProxy },
- { profile: self._components.editorpanel.profile(), api: self._components.editorpanel },
{ profile: filePanel.profile(), api: filePanel },
// { profile: support.profile(), api: support },
{ profile: settings.profile(), api: settings },
diff --git a/src/app/components/vertical-icons-component.js b/src/app/components/vertical-icons-component.js
index c29821d713..ff2c3d5326 100644
--- a/src/app/components/vertical-icons-component.js
+++ b/src/app/components/vertical-icons-component.js
@@ -6,15 +6,19 @@ const EventEmmitter = require('events')
// Component
class VerticalIconComponent {
- constructor (appStore) {
+ constructor (name, appStore) {
this.store = appStore
this.event = new EventEmmitter()
this.icons = {}
this.iconKind = {}
+ this.name = name
this.store.event.on('activate', (name) => {
- const item = this.store.getOne(name)
- if (item && item.profile.icon && name !== 'code editor') this.addIcon(item.profile)
+ const { profile } = this.store.getOne(name)
+ if (!profile.icon) return
+ if (profile.prefferedLocation === this.name || !profile.prefferedLocation) {
+ this.addIcon(profile)
+ }
})
this.store.event.on('deactivate', (name) => {
const item = this.store.getOne(name)
diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js
index d4ec83fa07..1878572937 100644
--- a/src/app/panels/editor-panel.js
+++ b/src/app/panels/editor-panel.js
@@ -13,24 +13,17 @@ var cssTabs = styles.cssTabs
var css = styles.css
class EditorPanel {
- constructor (localRegistry) {
+ constructor (appStore, appManager, mainPanelComponent) {
var self = this
self.event = new EventManager()
self._view = {}
self._components = {}
- self._components.registry = localRegistry || globalRegistry
+ self._components.registry = globalRegistry
self._components.editor = new Editor({})
self._components.registry.put({api: self._components.editor, name: 'editor'})
- }
- profile () {
- return {
- name: 'code editor',
- methods: [],
- events: [],
- icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjk2IDM4NHE0MCAwIDY4IDI4dDI4IDY4djEyMTZxMCA0MC0yOCA2OHQtNjggMjhoLTk2MHEtNDAgMC02OC0yOHQtMjgtNjh2LTI4OGgtNTQ0cS00MCAwLTY4LTI4dC0yOC02OHYtNjcycTAtNDAgMjAtODh0NDgtNzZsNDA4LTQwOHEyOC0yOCA3Ni00OHQ4OC0yMGg0MTZxNDAgMCA2OCAyOHQyOCA2OHYzMjhxNjgtNDAgMTI4LTQwaDQxNnptLTU0NCAyMTNsLTI5OSAyOTloMjk5di0yOTl6bS02NDAtMzg0bC0yOTkgMjk5aDI5OXYtMjk5em0xOTYgNjQ3bDMxNi0zMTZ2LTQxNmgtMzg0djQxNnEwIDQwLTI4IDY4dC02OCAyOGgtNDE2djY0MGg1MTJ2LTI1NnEwLTQwIDIwLTg4dDQ4LTc2em05NTYgODA0di0xMTUyaC0zODR2NDE2cTAgNDAtMjggNjh0LTY4IDI4aC00MTZ2NjQwaDg5NnoiLz48L3N2Zz4=',
- description: ' - ',
- prefferedLocation: 'mainPanel'
- }
+ self.appStore = appStore
+ self.appManager = appManager
+ self.mainPanelComponent = mainPanelComponent
}
init () {
var self = this
@@ -41,7 +34,29 @@ class EditorPanel {
udapp: self._components.registry.get('udapp').api,
pluginManager: self._components.registry.get('pluginmanager').api
}
- self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor)
+ self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor, self.appStore, self.appManager)
+ /*
+ We listen here on event from the tab component to display / hide the editor and mainpanel
+ depending on the content that should be displayed
+ */
+ self.tabProxy.event.on('switchFile', (file) => {
+ self._view.editor.style.display = 'block'
+ self._components.contextView.show()
+ self._view.mainPanel.style.display = 'none'
+ })
+ self.tabProxy.event.on('closeFile', (file) => {
+ })
+ self.tabProxy.event.on('switchApp', (name) => {
+ self.mainPanelComponent.showContent(name)
+ self._view.editor.style.display = 'none'
+ self._components.contextView.hide()
+ self._view.mainPanel.style.display = 'block'
+ })
+ self.tabProxy.event.on('closeApp', (name) => {
+ self._view.editor.style.display = 'block'
+ self._components.contextView.hide()
+ self._view.mainPanel.style.display = 'none'
+ })
self.data = {
_FILE_SCROLL_DELTA: 200,
_layout: {
@@ -108,6 +123,7 @@ class EditorPanel {
var height = containerHeight - delta
height = height < 0 ? 0 : height
self._view.editor.style.height = `${delta}px`
+ self._view.mainPanel.style.height = `${delta}px`
self._view.terminal.style.height = `${height}px` // - menu bar height
self._components.editor.resize((document.querySelector('#editorWrap') || {}).checked)
self._components.terminal.scroll2bottom()
@@ -138,6 +154,8 @@ class EditorPanel {
var self = this
if (self._view.el) return self._view.el
self._view.editor = self._components.editor.render()
+ self._view.mainPanel = self.mainPanelComponent.render()
+ self._view.mainPanel.style.display = 'none'
self._view.terminal = self._components.terminal.render()
self._view.content = yo`
@@ -146,6 +164,7 @@ class EditorPanel {
${self._components.contextView.render()}
${self._view.editor}
+ ${self._view.mainPanel}
${self._view.terminal}
`
diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js
index e02fc986ba..2a268f3ea9 100644
--- a/src/app/panels/tab-proxy.js
+++ b/src/app/panels/tab-proxy.js
@@ -1,38 +1,41 @@
var yo = require('yo-yo')
var $ = require('jquery')
+const EventEmitter = require('events')
var styles = require('./styles/editor-panel-styles')
var css = styles.css
export class TabProxy {
- constructor (fileManager, editor) {
+ constructor (fileManager, editor, appStore, appManager) {
+ this.event = new EventEmitter()
this.fileManager = fileManager
+ this.appManager = appManager
this.editor = editor
this.activeEntity
this.entities = {}
this.data = {}
this._view = {}
+ this._handlers = {}
fileManager.event.register('fileRemoved', (name) => {
- const filesEl = document.querySelector('#files')
- var file = filesEl.querySelector(`li[path="${name}"]`)
- if (file) {
- filesEl.removeChild(file)
- }
+ this.removeTab(name)
})
fileManager.event.register('fileClosed', (name) => {
- const filesEl = document.querySelector('#files')
- var file = filesEl.querySelector(`li[path="${name}"]`)
- if (file) {
- filesEl.removeChild(file)
- }
+ this.removeTab(name)
})
fileManager.event.register('currentFileChanged', (file) => {
const filesEl = document.querySelector('#files')
if (!filesEl.querySelector(`li[path="${file}"]`)) {
- filesEl.appendChild(yo`${file}`)
+ this.addTab(file, () => {
+ this.fileManager.switchFile(file)
+ this.event.emit('switchFile', file)
+ },
+ () => {
+ this.fileManager.closeFile(file)
+ this.event.emit('closeFile', file)
+ })
}
this.active(file)
})
@@ -45,6 +48,37 @@ export class TabProxy {
file.querySelector(`.name`).innerHTML = newName
}
})
+
+ appStore.event.on('activate', (name) => {
+ const { profile } = appStore.get(name)
+ if (profile.prefferedLocation === 'mainPanel') {
+ this.addTab(name, () => {
+ this.event.emit('switchApp', name)
+ }, () => {
+ this.event.emit('closeApp', name)
+ this.appManager.deactivateOne(name)
+ })
+ }
+ })
+
+ appStore.event.on('deactivate', (name) => {
+ this.removeTab(name)
+ })
+ }
+
+ addTab (name, switchTo, close, kind) {
+ const filesEl = document.querySelector('#files')
+ filesEl.appendChild(yo`${name}`)
+ this._handlers[name] = { switchTo, close }
+ }
+
+ removeTab (name) {
+ const filesEl = document.querySelector('#files')
+ var file = filesEl.querySelector(`li[path="${name}"]`)
+ if (file) {
+ filesEl.removeChild(file)
+ delete this._handlers[name]
+ }
}
active (name) {
@@ -97,7 +131,9 @@ export class TabProxy {
var self = this
$filesEl.on('click', '.file:not(.active)', function (ev) {
ev.preventDefault()
- self.fileManager.switchFile($(this).find('.name').text())
+ var name = $(this).find('.name').text()
+ self._handlers[name].switchTo()
+ self.active(name)
return false
})
@@ -105,7 +141,7 @@ export class TabProxy {
$filesEl.on('click', '.file .remove', function (ev) {
ev.preventDefault()
var name = $(this).parent().find('.name').text()
- self.fileManager.closeFile(name)
+ self._handlers[name].close()
return false
})