From d8bcd00902b2af2a883135921a285a2338e6530c Mon Sep 17 00:00:00 2001 From: yann300 Date: Fri, 17 Aug 2018 10:00:56 +0200 Subject: [PATCH 1/6] move solidity version selector to compile tab --- src/app/tabs/compile-tab.js | 151 ++++++++++++++++++++++++++++++++++- src/app/tabs/settings-tab.js | 123 ++-------------------------- 2 files changed, 153 insertions(+), 121 deletions(-) diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js index d128c99cc3..42ff92f449 100644 --- a/src/app/tabs/compile-tab.js +++ b/src/app/tabs/compile-tab.js @@ -1,7 +1,10 @@ +/* global Worker */ const yo = require('yo-yo') const csjs = require('csjs-inject') const copy = require('clipboard-copy') - +var minixhr = require('minixhr') +var tooltip = require('../ui/tooltip') +var QueryParams = require('../../lib/query-params') var globalRegistry = require('../../global/registry') const TreeView = require('../ui/TreeView') const modalDialog = require('../ui/modaldialog') @@ -11,6 +14,7 @@ const styleGuide = require('../ui/styles-guide/theme-chooser') const parseContracts = require('../contract/contractParser') const publishOnSwarm = require('../contract/publishOnSwarm') const addTooltip = require('../ui/tooltip') +var helper = require('../../lib/helper') const styles = styleGuide.chooser() @@ -27,10 +31,15 @@ module.exports = class CompileTab { errorContainer: null, errorContainerHead: null, contractNames: null, - contractEl: null + contractEl: null, + config: { + solidity: null + }, + optimize: null } self._components = {} self._components.registry = localRegistry || globalRegistry + self._components.queryParams = new QueryParams() // dependencies self._deps = { app: self._components.registry.get('app').api, @@ -47,8 +56,15 @@ module.exports = class CompileTab { compileTimeout: null, contractsDetails: {}, maxTime: 1000, - timeout: 300 + timeout: 300, + allversions: null, + selectedVersion: null, + baseurl: 'https://solc-bin.ethereum.org/bin' } + self.data.optimize = !!self._components.queryParams.get().optimize + self._components.queryParams.update({ optimize: self.data.optimize }) + self._deps.compiler.setOptimize(self.data.optimize) + self._deps.editor.event.register('contentChanged', scheduleCompilation) self._deps.editor.event.register('sessionSwitched', scheduleCompilation) function scheduleCompilation () { @@ -149,6 +165,44 @@ module.exports = class CompileTab { render () { const self = this if (self._view.el) return self._view.el + + function onchangeLoadVersion (event) { + self.data.selectedVersion = self._view.versionSelector.value + self._updateVersionSelector() + } + + function onchangeOptimize (event) { + self.data.optimize = !!self._view.optimize.checked + self._components.queryParams.update({ optimize: self.data.optimize }) + self._deps.compiler.setOptimize(self.data.optimize) + self._deps.app.runCompiler() + } + + self._deps.compiler.event.register('compilerLoaded', (version) => self.setVersionText(version)) + self.fetchAllVersion((allversions, selectedVersion) => { + self.data.allversions = allversions + self.data.selectedVersion = selectedVersion + if (self._view.versionSelector) self._updateVersionSelector() + }) + + self._view.optimize = yo`` + if (self.data.optimize) self._view.optimize.setAttribute('checked', '') + + self._view.versionSelector = yo` + ` + if (self.data.allversions && self.data.selectedVersion) self._updateVersionSelector() + self._view.version = yo`` + + self._view.config.solidity = yo` +
+ Current version: ${self._view.version} +
+ ${self._view.versionSelector} +
+
` + self._view.warnCompilationSlow = yo`` self._view.compileIcon = yo`` self._view.compileButton = yo`
${self._view.compileIcon} Start to compile
` @@ -158,13 +212,18 @@ module.exports = class CompileTab { if (self.data.hideWarnings) self._view.hideWarningsBox.setAttribute('checked', '') self._view.compileContainer = yo`
+ ${self._view.config.solidity}
${self._view.compileButton} + ${self._view.warnCompilationSlow}
${self._view.autoCompile} Auto compile
- ${self._view.warnCompilationSlow} +
+
${self._view.optimize}
+ Enable Optimization +
${self._view.hideWarningsBox} Hide warnings @@ -324,9 +383,93 @@ module.exports = class CompileTab { } return self._view.el } + setVersionText (text) { + const self = this + self.data.version = text + if (self._view.version) self._view.version.innerText = text + } + _updateVersionSelector () { + const self = this + self._view.versionSelector.innerHTML = '' + self._view.versionSelector.appendChild(yo``) + self.data.allversions.forEach(build => self._view.versionSelector.appendChild(yo``)) + self._view.versionSelector.removeAttribute('disabled') + self._components.queryParams.update({ version: self.data.selectedVersion }) + var url + if (self.data.selectedVersion === 'builtin') { + var location = window.document.location + location = location.protocol + '//' + location.host + '/' + location.pathname + if (location.endsWith('index.html')) location = location.substring(0, location.length - 10) + if (!location.endsWith('/')) location += '/' + url = location + 'soljson.js' + } else { + if (self.data.selectedVersion.indexOf('soljson') !== 0 || helper.checkSpecialChars(self.data.selectedVersion)) { + return console.log('loading ' + self.data.selectedVersion + ' not allowed') + } + url = `${self.data.baseurl}/${self.data.selectedVersion}` + } + var isFirefox = typeof InstallTrigger !== 'undefined' + if (document.location.protocol !== 'file:' && Worker !== undefined && isFirefox) { + // Workers cannot load js on "file:"-URLs and we get a + // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium, + // resort to non-worker version in that case. + self._deps.compiler.loadVersion(true, url) + self.setVersionText('(loading using worker)') + } else { + self._deps.compiler.loadVersion(false, url) + self.setVersionText('(loading)') + } + } + fetchAllVersion (callback) { + var self = this + minixhr(`${self.data.baseurl}/list.json`, function (json, event) { + // @TODO: optimise and cache results to improve app loading times + var allversions, selectedVersion + if (event.type !== 'error') { + try { + const data = JSON.parse(json) + allversions = data.builds.slice().reverse() + selectedVersion = data.releases[data.latestRelease] + if (self._components.queryParams.get().version) selectedVersion = self._components.queryParams.get().version + } catch (e) { + tooltip('Cannot load compiler version list. It might have been blocked by an advertisement blocker. Please try deactivating any of them from this page and reload.') + } + } else { + allversions = [{ path: 'builtin', longVersion: 'latest local version' }] + selectedVersion = 'builtin' + } + callback(allversions, selectedVersion) + }) + } } const css = csjs` + .crow { + display: flex; + overflow: auto; + clear: both; + padding: .2em; + } + .checkboxText { + font-weight: normal; + } + .crow label { + cursor:pointer; + } + .crowNoFlex { + overflow: auto; + clear: both; + } + .select { + font-weight: bold; + margin-top: 1em; + ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}; + } + .info { + ${styles.rightPanel.settingsTab.box_SolidityVersionInfo} + margin-bottom: 1em; + word-break: break-word; + } .compileTabView { padding: 2%; } diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index 24cb2f8814..6bb220ba4a 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -1,12 +1,8 @@ -/* global Worker */ var yo = require('yo-yo') var csjs = require('csjs-inject') -var minixhr = require('minixhr') var remixLib = require('remix-lib') var globalRegistry = require('../../global/registry') -var QueryParams = require('../../lib/query-params') -var helper = require('../../lib/helper') var modal = require('../ui/modal-dialog-custom') var tooltip = require('../ui/tooltip') var copyToClipboard = require('../ui/copy-to-clipboard') @@ -31,33 +27,18 @@ module.exports = class SettingsTab { } self._view = { /* eslint-disable */ el: null, - optionVM: null, personal: null, optimize: null, warnPersonalMode: null, + optionVM: null, personal: null, warnPersonalMode: null, pluginInput: null, versionSelector: null, version: null, theme: { dark: null, light: null }, config: { - solidity: null, general: null, themes: null, + general: null, themes: null, plugin: null, remixd: null, localremixd: null } } /* eslint-enable */ - self.data = { - allversions: null, - selectedVersion: null, - baseurl: 'https://solc-bin.ethereum.org/bin' - } + self.data = {} self.event = new EventManager() - self._components.queryParams = new QueryParams() self._components.themeStorage = new Storage('style:') - self.data.optimize = !!self._components.queryParams.get().optimize - self._components.queryParams.update({ optimize: self.data.optimize }) - self._deps.compiler.setOptimize(self.data.optimize) self.data.currentTheme = self._components.themeStorage.get('theme') || 'light' - - self._deps.compiler.event.register('compilerLoaded', (version) => self.setVersionText(version)) - self.fetchAllVersion((allversions, selectedVersion) => { - self.data.allversions = allversions - self.data.selectedVersion = selectedVersion - if (self._view.versionSelector) self._updateVersionSelector() - }) } render () { const self = this @@ -75,8 +56,6 @@ module.exports = class SettingsTab { if (self._deps.config.get('settings/always-use-vm')) self._view.optionVM.setAttribute('checked', '') self._view.personal = yo`` if (self._deps.config.get('settings/personal-mode')) self._view.personal.setAttribute('checked', '') - self._view.optimize = yo`` - if (self.data.optimize) self._view.optimize.setAttribute('checked', '') var warnText = `Transaction sent over Web3 will use the web3.personal API - be sure the endpoint is opened before enabling it. This mode allows to provide the passphrase in the Remix interface without having to unlock the account. Although this is very convenient, you should completely trust the backend you are connected to (Geth, Parity, ...). @@ -84,23 +63,11 @@ module.exports = class SettingsTab { Remix never persist any passphrase.`.split('\n').map(s => s.trim()).join(' ') self._view.warnPersonalMode = yo`` self._view.pluginInput = yo`` - self._view.versionSelector = yo` - ` - if (self.data.allversions && self.data.selectedVersion) self._updateVersionSelector() - self._view.version = yo`` + self._view.theme.light = yo`` self._view.theme.dark = yo`` self._view.theme[self.data.currentTheme].setAttribute('checked', 'checked') - self._view.config.solidity = yo` -
-
Solidity version
- Current version: ${self._view.version} -
- ${self._view.versionSelector} -
-
` + self._view.config.general = yo`
General settings
@@ -112,10 +79,6 @@ module.exports = class SettingsTab {
Text Wrap
-
-
${self._view.optimize}
- Enable Optimization -
${self._view.personal}>
Enable Personal Mode ${self._view.warnPersonalMode}> @@ -184,7 +147,6 @@ module.exports = class SettingsTab {
` self._view.el = yo`
- ${self._view.config.solidity} ${self._view.config.general} ${self._view.gistToken} ${self._view.config.themes} @@ -216,79 +178,11 @@ module.exports = class SettingsTab { styleGuide.switchTheme('light') window.location.reload() } - function onchangeOptimize (event) { - self.data.optimize = !!self._view.optimize.checked - self._components.queryParams.update({ optimize: self.data.optimize }) - self._deps.compiler.setOptimize(self.data.optimize) - self._deps.app.runCompiler() - } - function onchangeLoadVersion (event) { - self.data.selectedVersion = self._view.versionSelector.value - self._updateVersionSelector() - } function onchangePersonal (event) { self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode')) } return self._view.el } - setVersionText (text) { - const self = this - self.data.version = text - if (self._view.version) self._view.version.innerText = text - } - _updateVersionSelector () { - const self = this - self._view.versionSelector.innerHTML = '' - self._view.versionSelector.appendChild(yo``) - self.data.allversions.forEach(build => self._view.versionSelector.appendChild(yo``)) - self._view.versionSelector.removeAttribute('disabled') - self._components.queryParams.update({ version: self.data.selectedVersion }) - var url - if (self.data.selectedVersion === 'builtin') { - var location = window.document.location - location = location.protocol + '//' + location.host + '/' + location.pathname - if (location.endsWith('index.html')) location = location.substring(0, location.length - 10) - if (!location.endsWith('/')) location += '/' - url = location + 'soljson.js' - } else { - if (self.data.selectedVersion.indexOf('soljson') !== 0 || helper.checkSpecialChars(self.data.selectedVersion)) { - return console.log('loading ' + self.data.selectedVersion + ' not allowed') - } - url = `${self.data.baseurl}/${self.data.selectedVersion}` - } - var isFirefox = typeof InstallTrigger !== 'undefined' - if (document.location.protocol !== 'file:' && Worker !== undefined && isFirefox) { - // Workers cannot load js on "file:"-URLs and we get a - // "Uncaught RangeError: Maximum call stack size exceeded" error on Chromium, - // resort to non-worker version in that case. - self._deps.compiler.loadVersion(true, url) - self.setVersionText('(loading using worker)') - } else { - self._deps.compiler.loadVersion(false, url) - self.setVersionText('(loading)') - } - } - fetchAllVersion (callback) { - var self = this - minixhr(`${self.data.baseurl}/list.json`, function (json, event) { - // @TODO: optimise and cache results to improve app loading times - var allversions, selectedVersion - if (event.type !== 'error') { - try { - const data = JSON.parse(json) - allversions = data.builds.slice().reverse() - selectedVersion = data.releases[data.latestRelease] - if (self._components.queryParams.get().version) selectedVersion = self._components.queryParams.get().version - } catch (e) { - tooltip('Cannot load compiler version list. It might have been blocked by an advertisement blocker. Please try deactivating any of them from this page and reload.') - } - } else { - allversions = [{ path: 'builtin', longVersion: 'latest local version' }] - selectedVersion = 'builtin' - } - callback(allversions, selectedVersion) - }) - } } const css = csjs` @@ -297,7 +191,7 @@ const css = csjs` display: flex; } .info { - ${styles.rightPanel.settingsTab.box_SolidityVersionInfo} + ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}; margin-bottom: 1em; word-break: break-word; } @@ -327,11 +221,6 @@ const css = csjs` padding: .5em; font-weight: bold; } - .select { - font-weight: bold; - margin-top: 1em; - ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}; - } .heading { margin-bottom: 0; } From fbc80fdb7c1078f8d6d09574c6cd3dbb6fb61e34 Mon Sep 17 00:00:00 2001 From: yann300 Date: Fri, 17 Aug 2018 10:02:23 +0200 Subject: [PATCH 2/6] move plugin panel up --- src/app/tabs/settings-tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index 6bb220ba4a..8101bc72c6 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -148,9 +148,9 @@ module.exports = class SettingsTab { self._view.el = yo`
${self._view.config.general} + ${self._view.config.plugin} ${self._view.gistToken} ${self._view.config.themes} - ${self._view.config.plugin} ${self._view.config.remixd} ${self._view.config.localremixd}
` From 17718648a8702ec3037451f39d176fe5c578dabe Mon Sep 17 00:00:00 2001 From: yann300 Date: Fri, 17 Aug 2018 10:44:11 +0200 Subject: [PATCH 3/6] move remix, remixd info to setttings tab --- src/app/tabs/settings-tab.js | 34 +------------------- src/app/tabs/support-tab.js | 60 ++++++++++++++++++++++++++++++++++-- 2 files changed, 59 insertions(+), 35 deletions(-) diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index 8101bc72c6..fbb1557774 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -32,7 +32,7 @@ module.exports = class SettingsTab { theme: { dark: null, light: null }, config: { general: null, themes: null, - plugin: null, remixd: null, localremixd: null + plugin: null } } /* eslint-enable */ self.data = {} @@ -120,39 +120,12 @@ module.exports = class SettingsTab {
` - self._view.config.remixd = yo` -
-
Remixd
-
- Remixd is a tool which allow Remix IDE to access files located in your local computer. - it can also be used to setup a development environment. -
-
More infos:
-
https://github.com/ethereum/remixd
-
http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html
-
Installation: 
npm install remixd -g
-
` - self._view.config.localremixd = yo` -
-
Running Remix locally
-
- as a NPM module: -
- https://www.npmjs.com/package/remix-ide - 
npm install remix-ide -g
-
- as an electron app: -
- https://github.com/horizon-games/remix-app -
` self._view.el = yo`
${self._view.config.general} ${self._view.config.plugin} ${self._view.gistToken} ${self._view.config.themes} - ${self._view.config.remixd} - ${self._view.config.localremixd}
` function onchangeOption (event) { self._deps.config.set('settings/always-use-vm', !self._deps.config.get('settings/always-use-vm')) @@ -251,11 +224,6 @@ const css = csjs` .icon { margin-right: .5em; } - .remixdinstallation { - padding: 3px; - border-radius: 2px; - margin-left: 5px; - } .savegisttoken { margin-left: 5px; } diff --git a/src/app/tabs/support-tab.js b/src/app/tabs/support-tab.js index 042f94f29c..e98edbe56d 100644 --- a/src/app/tabs/support-tab.js +++ b/src/app/tabs/support-tab.js @@ -11,7 +11,7 @@ module.exports = class SupportTab { constructor (localRegistry) { const self = this self.event = new EventManager() - self._view = { el: null, gitterIframe: '' } + self._view = { el: null, gitterIframe: '', config: {} } self.data = { gitterIsLoaded: false } self._components = {} self._components.registry = localRegistry || globalRegistry @@ -33,6 +33,31 @@ module.exports = class SupportTab { const self = this if (self._view.el) return self._view.el self._view.gitterIframe = yo`
` + self._view.config.remixd = yo` +
+
Accessing local files
+
+ Remixd is a tool which allow Remix IDE to access files located in your local computer. + it can also be used to setup a development environment. +
+
More infos:
+
https://github.com/ethereum/remixd
+
http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html
+
Installation: 
npm install remixd -g
+
` + self._view.config.localremixd = yo` +
+
Running Remix locally
+
+ as a NPM module: +
+ https://www.npmjs.com/package/remix-ide + 
npm install remix-ide -g
+
+ as an electron app: +
+ https://github.com/horizon-games/remix-app +
` self._view.el = yo`
@@ -47,6 +72,8 @@ module.exports = class SupportTab {
${self._view.gitterIframe}
+ ${self._view.config.remixd} + ${self._view.config.localremixd}
` return self._view.el function openLink () { window.open('https://gitter.im/ethereum/remix') } @@ -55,12 +82,13 @@ module.exports = class SupportTab { const css = csjs` .supportTabView { - height: 100vh; + height: 100%; padding: 2%; padding-bottom: 3em; display: flex; flex-direction: column; overflow: hidden; + overflow-y: auto; } .chat { ${styles.rightPanel.supportTab.box_IframeContainer} @@ -102,4 +130,32 @@ const css = csjs` .infoBox { ${styles.rightPanel.supportTab.box_SupportInfo} } + .remixdinstallation { + padding: 3px; + border-radius: 2px; + margin-left: 5px; + } + .info { + ${styles.rightPanel.settingsTab.box_SolidityVersionInfo}; + margin-top: 1em; + word-break: break-word; + } + .title { + font-size: 1.1em; + font-weight: bold; + margin-bottom: 1em; + } + .crow { + display: flex; + overflow: auto; + clear: both; + padding: .2em; + } + .crow label { + cursor:pointer; + } + .crowNoFlex { + overflow: auto; + clear: both; + } ` From 8bfd802f087dc7770d38fd12bd4e170d1c2b8dc3 Mon Sep 17 00:00:00 2001 From: yann300 Date: Fri, 17 Aug 2018 12:44:25 +0200 Subject: [PATCH 4/6] refactor plugin loading/removing --- src/app/panels/righthand-panel.js | 17 +-------- src/app/tabs/settings-tab.js | 60 +++++++++++++++++++++++++------ 2 files changed, 51 insertions(+), 26 deletions(-) diff --git a/src/app/panels/righthand-panel.js b/src/app/panels/righthand-panel.js index e1852c9b5d..077f0d4334 100644 --- a/src/app/panels/righthand-panel.js +++ b/src/app/panels/righthand-panel.js @@ -15,10 +15,8 @@ const SupportTab = require('../tabs/support-tab') const PluginTab = require('../tabs/plugin-tab') const TestTab = require('../tabs/test-tab') const RunTab = require('../tabs/run-tab') -const plugins = require('../plugin/plugins') const DraggableContent = require('../ui/draggableContent') -var toolTip = require('../ui/tooltip') const EventManager = remixLib.EventManager const styles = styleguide.chooser() @@ -71,23 +69,10 @@ module.exports = class RighthandPanel { test: new TestTab(self._components.registry) } - self.event.register('plugin-loadRequest', json => { + self._components.settings.event.register('plugin-loadRequest', json => { self.loadPlugin(json) }) - self.event.register('plugin-name-loadRequest', name => { - var plugin = plugins[name] - if (plugin) { - if (!self._components.pluginManager.plugins[plugin.title]) { - self.loadPlugin(plugin) - } else { - toolTip(name + ' already loaded') - } - } else { - toolTip('unknown plugin ' + name) - } - }) - self.loadPlugin = function (json) { var modal = new DraggableContent(() => { self._components.pluginManager.unregister(json) diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index fbb1557774..4978d7e8f5 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -2,8 +2,8 @@ var yo = require('yo-yo') var csjs = require('csjs-inject') var remixLib = require('remix-lib') +const defaultPlugins = require('../plugin/plugins') var globalRegistry = require('../../global/registry') -var modal = require('../ui/modal-dialog-custom') var tooltip = require('../ui/tooltip') var copyToClipboard = require('../ui/copy-to-clipboard') var styleGuide = require('../ui/styles-guide/theme-chooser') @@ -30,6 +30,7 @@ module.exports = class SettingsTab { optionVM: null, personal: null, warnPersonalMode: null, pluginInput: null, versionSelector: null, version: null, theme: { dark: null, light: null }, + plugins: {}, config: { general: null, themes: null, plugin: null @@ -109,15 +110,15 @@ module.exports = class SettingsTab {
` + self._view.config.plugins = yo`
` self._view.config.plugin = yo`
Plugin
- { onLoadPlugin('oraclize') }} type="button" value="Oraclize" class="${css.pluginLoad}"> - { onLoadPlugin('etherscan-general') }} type="button" value="Etherscan-general" class="${css.pluginLoad}">
Load plugin from JSON description:
${self._view.pluginInput} + ${self._view.config.plugins}
` self._view.el = yo` @@ -127,21 +128,57 @@ module.exports = class SettingsTab { ${self._view.gistToken} ${self._view.config.themes} ` - function onchangeOption (event) { - self._deps.config.set('settings/always-use-vm', !self._deps.config.get('settings/always-use-vm')) + + function loadPlugins (plugins, opt) { + for (var k in plugins) { + var plugin = plugins[k] + if (!self._view.plugins[plugin.title]) self._view.plugins[plugin.title] = {} + self._view.plugins[plugin.title].json = plugin + self._view.plugins[plugin.title].el = yo`
+
{ onLoadPlugin(plugin.title) }}>${plugin.title}
+ ${opt.removable ? yo` { onRemovePlugin(plugin.title) }}>` : yo``} +
` + self._view.config.plugins.appendChild(self._view.plugins[plugin.title].el) + } } + + function getSavedPlugin () { + var savedPlugin = self._deps.config.get('settings/plugins-list') + return savedPlugin ? JSON.parse(savedPlugin) : {} + } + function setSavedPlugin (savedPlugins) { + self._deps.config.set('settings/plugins-list', JSON.stringify(savedPlugins)) + } + loadPlugins(defaultPlugins, {removable: false}) + loadPlugins(getSavedPlugin(), {removable: true}) + function onLoadPlugin (name) { - // @TODO: BAD! REFACTOR: no module should trigger events of another modules emitter - self._deps.righthandpanel.event.trigger('plugin-name-loadRequest', [name]) + self.event.trigger('plugin-loadRequest', [self._view.plugins[name].json]) + } + function onRemovePlugin (name) { + var savedPlugin = getSavedPlugin() + delete savedPlugin[name] + setSavedPlugin(savedPlugin) + if (self._view.plugins[name]) { + self._view.plugins[name].el.parentNode.removeChild(self._view.plugins[name].el) + delete self._view.plugins[name] + } } function onloadPluginJson (event) { try { var json = JSON.parse(self._view.pluginInput.value) } catch (e) { - return modal.alert('cannot parse the plugin definition to JSON') + return tooltip('cannot parse the plugin definition to JSON') } - // @TODO: BAD! REFACTOR: no module should trigger events of another modules emitter - self._deps.righthandpanel.event.trigger('plugin-loadRequest', [json]) + var savedPlugin = getSavedPlugin() + if (self._view.plugins[json.title]) return tooltip('Plugin already loaded') + savedPlugin[json.title] = json + setSavedPlugin(savedPlugin) + loadPlugins([json], {removable: true}) + } + + function onchangeOption (event) { + self._deps.config.set('settings/always-use-vm', !self._deps.config.get('settings/always-use-vm')) } function onswitch2darkTheme (event) { styleGuide.switchTheme('dark') @@ -218,6 +255,9 @@ const css = csjs` width: inherit; display: inline-block; } + .removePlugin { + cursor: pointer; + } i.warnIt { color: ${styles.appProperties.warningText_Color}; } From 9b539e9951dae79b61439e7798c2cb799bc69383 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 22 Aug 2018 13:30:02 +0200 Subject: [PATCH 5/6] UX update for buttons for plugin tab --- src/app/tabs/settings-tab.js | 41 ++++++++++++++++++++--- src/app/ui/styles-guide/style-guide.js | 5 +++ src/app/ui/styles-guide/styleGuideDark.js | 12 +++++++ 3 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index 4978d7e8f5..a1bd4d0dcb 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -7,7 +7,6 @@ var globalRegistry = require('../../global/registry') var tooltip = require('../ui/tooltip') var copyToClipboard = require('../ui/copy-to-clipboard') var styleGuide = require('../ui/styles-guide/theme-chooser') - var styles = styleGuide.chooser() var Storage = remixLib.Storage var EventManager = remixLib.EventManager @@ -117,12 +116,12 @@ module.exports = class SettingsTab {
Load plugin from JSON description:
${self._view.pluginInput} - + ${self._view.config.plugins}
` self._view.el = yo` -
+
${self._view.config.general} ${self._view.config.plugin} ${self._view.gistToken} @@ -135,8 +134,8 @@ module.exports = class SettingsTab { if (!self._view.plugins[plugin.title]) self._view.plugins[plugin.title] = {} self._view.plugins[plugin.title].json = plugin self._view.plugins[plugin.title].el = yo`
-
{ onLoadPlugin(plugin.title) }}>${plugin.title}
- ${opt.removable ? yo` { onRemovePlugin(plugin.title) }}>` : yo``} +
{ onLoadPlugin(plugin.title) }}>${plugin.title}
+ ${opt.removable ? yo` { onRemovePlugin(plugin.title) }}>` : yo``}
` self._view.config.plugins.appendChild(self._view.plugins[plugin.title].el) } @@ -255,6 +254,15 @@ const css = csjs` width: inherit; display: inline-block; } + .initPlugin { + vertical-align: top; + ${styles.rightPanel.settingsTab.button_initPlugin}; + width: inherit; + display: block; + max-height: inherit; + padding:7px; + } + .removePlugin { cursor: pointer; } @@ -267,4 +275,27 @@ const css = csjs` .savegisttoken { margin-left: 5px; } + .aPlugin { + display: inline-block; + padding-left: 10px; + padding-top: 4px; + padding-bottom: 6px; + max-width: 100px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + vertical-align: middle; + } + .pluginLoad { + vertical-align: top; + max-height: inherit; + margin: 2px; + + } + .removePlugin{ + padding-left: 7px; + padding-right: 7px; + border-left: 2px solid ${styles.appProperties.primary_BackgroundColor}; + margin-left: 10px; + } ` diff --git a/src/app/ui/styles-guide/style-guide.js b/src/app/ui/styles-guide/style-guide.js index 07e9899e72..9c8a1ea8d5 100644 --- a/src/app/ui/styles-guide/style-guide.js +++ b/src/app/ui/styles-guide/style-guide.js @@ -701,6 +701,11 @@ function styleGuide () { BackgroundColor: appProperties.secondaryButton_BackgroundColor, BorderColor: appProperties.secondaryButton_BorderColor, Color: appProperties.secondaryButton_TextColor + }), + button_initPlugin: appProperties.uiElements.button({ + BackgroundColor: appProperties.transactButton_BackgroundColor, + BorderColor: appProperties.transactButton_BorderColor, + Color: appProperties.secondaryButton_TextColor }) }, diff --git a/src/app/ui/styles-guide/styleGuideDark.js b/src/app/ui/styles-guide/styleGuideDark.js index 8e2ca1aa3b..adc48801f6 100644 --- a/src/app/ui/styles-guide/styleGuideDark.js +++ b/src/app/ui/styles-guide/styleGuideDark.js @@ -684,6 +684,18 @@ function styleGuideDark () { BackgroundColor: appProperties.dropdown_BackgroundColor, BorderColor: appProperties.dropdown_BorderColor, Color: appProperties.dropdown_TextColor + }), + + button_LoadPlugin: appProperties.uiElements.button({ + BackgroundColor: appProperties.secondaryButton_BackgroundColor, + BorderColor: appProperties.secondaryButton_BorderColor, + Color: appProperties.secondaryButton_TextColor + }), + + button_initPlugin: appProperties.uiElements.button({ + BackgroundColor: appProperties.transactButton_BackgroundColor, + BorderColor: appProperties.transactButton_BorderColor, + Color: appProperties.secondaryButton_TextColor }) }, From 953ec99c816a3a3a35f0a39467afb2475f2678d8 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 22 Aug 2018 15:40:06 +0200 Subject: [PATCH 6/6] add title in pluging --- src/app/tabs/settings-tab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index a1bd4d0dcb..71cf9757f8 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -133,7 +133,7 @@ module.exports = class SettingsTab { var plugin = plugins[k] if (!self._view.plugins[plugin.title]) self._view.plugins[plugin.title] = {} self._view.plugins[plugin.title].json = plugin - self._view.plugins[plugin.title].el = yo`
+ self._view.plugins[plugin.title].el = yo`
{ onLoadPlugin(plugin.title) }}>${plugin.title}
${opt.removable ? yo` { onRemovePlugin(plugin.title) }}>` : yo``}
`