From 60afaf8dbbf64984511e2b9ca6540064ae5b5588 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 13 Feb 2019 15:31:27 +0100 Subject: [PATCH 1/6] display plugins as tab --- src/app.js | 15 +++-- .../components/vertical-icons-component.js | 10 ++- src/app/panels/editor-panel.js | 45 +++++++++---- src/app/panels/tab-proxy.js | 64 +++++++++++++++---- 4 files changed, 97 insertions(+), 37 deletions(-) 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 }) From a74b18e45dfda26a4d235b5960825e9bc269c07a Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 13 Feb 2019 15:31:43 +0100 Subject: [PATCH 2/6] change context viewer styling --- src/app/panels/styles/editor-panel-styles.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/panels/styles/editor-panel-styles.js b/src/app/panels/styles/editor-panel-styles.js index 5f8baa4cbf..06144f8e41 100644 --- a/src/app/panels/styles/editor-panel-styles.js +++ b/src/app/panels/styles/editor-panel-styles.js @@ -167,9 +167,12 @@ var css = csjs` width : 100%; } .contextviewcontainer{ - width : 100%; - height : 20px; + position : absolute; + top : 29px; + z-index : 50; background-color : ${styles.editor.backgroundColor_Tabs_Highlights}; + left : 350px; + border-radius : 1px; } ` From 59cb0394860c4c644d0db40a7026bfde14a262de Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 14 Feb 2019 18:02:41 +0100 Subject: [PATCH 3/6] check upstream for file changed --- src/app/panels/editor-panel.js | 6 ++++++ src/app/panels/tab-proxy.js | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js index 1878572937..604c15d5e7 100644 --- a/src/app/panels/editor-panel.js +++ b/src/app/panels/editor-panel.js @@ -39,6 +39,12 @@ class EditorPanel { 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._deps.fileManager.event.register('currentFileChanged', (file) => { + // we check upstream for "fileChanged" + self._view.editor.style.display = 'block' + self._components.contextView.show() + self._view.mainPanel.style.display = 'none' + }) self.tabProxy.event.on('switchFile', (file) => { self._view.editor.style.display = 'block' self._components.contextView.show() diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js index 2a268f3ea9..0161a91da1 100644 --- a/src/app/panels/tab-proxy.js +++ b/src/app/panels/tab-proxy.js @@ -37,7 +37,7 @@ export class TabProxy { this.event.emit('closeFile', file) }) } - this.active(file) + this.active(file) // this put the css class "active" }) fileManager.event.register('fileRenamed', (oldName, newName) => { From 2f0b8d9220f24615b3281431b7dd7c26fd6deb65 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 14 Feb 2019 18:12:15 +0100 Subject: [PATCH 4/6] apply filter after activaiton --- src/app/components/plugin-manager-component.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/app/components/plugin-manager-component.js b/src/app/components/plugin-manager-component.js index 056acd7fc8..fce979f919 100644 --- a/src/app/components/plugin-manager-component.js +++ b/src/app/components/plugin-manager-component.js @@ -63,7 +63,7 @@ class PluginManagerComponent { ` - searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event) }) + searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event.target) }) var modulesActiveNotReq = this.store.getActives().filter(({profile}) => !profile.required) this.sortObject(modulesActiveNotReq) @@ -90,6 +90,13 @@ class PluginManagerComponent { return rootView } + searchBox () { + if (this.views.root) { + return this.views.root.querySelector('#filter_plugins') + } + return null + } + sortObject (obj) { obj.sort((a, b) => { var textA = a.profile.name.toUpperCase() @@ -128,11 +135,13 @@ class PluginManagerComponent { reRender () { if (this.views.root) { yo.update(this.views.root, this.render()) + this.filterPlugins(this.searchBox()) } } - filterPlugins (event) { - let filterOn = event.target.value.toUpperCase() + filterPlugins (target) { + if (!target) return + let filterOn = target.value.toUpperCase() var nodes = this.views.root.querySelectorAll(`.${css.plugin}`) nodes.forEach((node) => { let h = node.querySelector('h3') From f27b46109bd43697996b29c6b5bf9a2e39179012 Mon Sep 17 00:00:00 2001 From: yann300 Date: Thu, 21 Feb 2019 11:04:35 +0100 Subject: [PATCH 5/6] fix yo template --- src/app/tabs/support-tab.js | 2 +- src/app/ui/renderer.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js index 72ca284d56..8fba428377 100644 --- a/src/app/tabs/support-tab.js +++ b/src/app/tabs/support-tab.js @@ -12,7 +12,7 @@ class SupportTab { __showing () { if (this.gitterIsLoaded) return - const iframe = yo`` this.gitterIframe.parentNode.replaceChild(iframe, this.gitterIframe) this.gitterIframe = iframe this.el.style.display = 'block' diff --git a/src/app/ui/renderer.js b/src/app/ui/renderer.js index b5b968c72c..b840ee0e4d 100644 --- a/src/app/ui/renderer.js +++ b/src/app/ui/renderer.js @@ -87,7 +87,7 @@ Renderer.prototype.error = function (message, container, opt) { }) } - var $pre = $(opt.useSpan ? yo`` : yo`
    `).html(message)
+  var $pre = $(opt.useSpan ? yo`` : yo`
    `).html(message)
 
   var $error = $(yo`
    `).prepend($pre)
   $(container).append($error)

From a8d8230a6d21ed4b5c5d9e996be3748304bc22ce Mon Sep 17 00:00:00 2001
From: yann300 
Date: Thu, 21 Feb 2019 11:04:46 +0100
Subject: [PATCH 6/6] typo

---
 src/app/panels/tab-proxy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js
index 0161a91da1..fdcb1eb0fd 100644
--- a/src/app/panels/tab-proxy.js
+++ b/src/app/panels/tab-proxy.js
@@ -50,7 +50,7 @@ export class TabProxy {
     })
 
     appStore.event.on('activate', (name) => {
-      const { profile } = appStore.get(name)
+      const { profile } = appStore.getOne(name)
       if (profile.prefferedLocation === 'mainPanel') {
         this.addTab(name, () => {
           this.event.emit('switchApp', name)