diff --git a/src/app/tabs/compile-tab.js b/src/app/tabs/compile-tab.js index 50a73b19ec..e5cb75a7ac 100644 --- a/src/app/tabs/compile-tab.js +++ b/src/app/tabs/compile-tab.js @@ -76,7 +76,21 @@ class CompileTab extends CompilerApi { */ listenToEvents () { - this.compiler.event.register('compilationStarted', () => { + let onContentChanged = () => { + this.events.emit('statusChanged', {key: 'code', title: 'the content has changed, needs recompilation', type: 'info'}) + } + this.editor.event.register('contentChanged', onContentChanged) + this.editor.event.register('sessionSwitched', onContentChanged) + + this.compiler.event.register('loadingCompiler', () => { + this.events.emit('statusChanged', {key: 'spinner', title: 'loading compiler...', type: 'info'}) + }) + + this.compiler.event.register('compilerLoaded', () => { + this.events.emit('statusChanged', {key: '', title: '', type: ''}) + }) + + this.compileTabLogic.event.on('startingCompilation', () => { if (this._view.errorContainer) { this._view.errorContainer.innerHTML = '' } @@ -85,10 +99,12 @@ class CompileTab extends CompilerApi { this.fileManager.events.on('currentFileChanged', (name) => { this.compilerContainer.currentFile = name + onContentChanged() }) this.fileManager.events.on('noFileSelected', () => { this.compilerContainer.currentFile = '' + onContentChanged() }) this.compiler.event.register('compilationFinished', (success, data, source) => { @@ -352,8 +368,6 @@ class CompileTab extends CompilerApi { this._view.errorContainer = yo`
` this._view.contractSelection = this.contractSelection() this._view.compilerContainer = this.compilerContainer.render() - const currentFile = this.fileManager.currentFile() - if (currentFile) this.compilerContainer.currentFile = currentFile this._view.el = yo`
diff --git a/src/app/tabs/compileTab/compileTab.js b/src/app/tabs/compileTab/compileTab.js index cb5f155261..ca5cd9ce8a 100644 --- a/src/app/tabs/compileTab/compileTab.js +++ b/src/app/tabs/compileTab/compileTab.js @@ -1,4 +1,5 @@ const async = require('async') +const EventEmitter = require('events') var remixTests = require('remix-tests') var Compiler = require('remix-solidity').Compiler var CompilerImport = require('../../compiler/compiler-imports') @@ -9,6 +10,7 @@ const addTooltip = require('../../ui/tooltip') class CompileTab { constructor (queryParams, fileManager, editor, config, fileProviders) { + this.event = new EventEmitter() this.queryParams = queryParams this.compilerImport = new CompilerImport() this.compiler = new Compiler((url, cb) => this.importFileCb(url, cb)) @@ -45,7 +47,11 @@ class CompileTab { provider.get(target, (error, content) => { if (error) return console.log(error) sources[target] = { content } - this.compiler.compile(sources, target) + this.event.emit('startingCompilation') + setTimeout(() => { + // setTimeout fix the animation on chrome... (animation triggered by 'staringCompilation') + this.compiler.compile(sources, target) + }, 100) }) } diff --git a/src/app/tabs/compileTab/compilerContainer.js b/src/app/tabs/compileTab/compilerContainer.js index 9eb9d1561a..5ed1bf7bae 100644 --- a/src/app/tabs/compileTab/compilerContainer.js +++ b/src/app/tabs/compileTab/compilerContainer.js @@ -47,6 +47,13 @@ class CompilerContainer { this.editor.event.register('contentChanged', this.scheduleCompilation.bind(this)) this.editor.event.register('sessionSwitched', this.scheduleCompilation.bind(this)) + this.compileTabLogic.event.on('startingCompilation', () => { + if (!this._view.compileIcon) return + this._view.compileIcon.setAttribute('title', 'compiling...') + this._view.compileIcon.classList.remove(`${css.bouncingIcon}`) + this._view.compileIcon.classList.add(`${css.spinningIcon}`) + }) + this.compileTabLogic.compiler.event.register('compilationDuration', (speed) => { if (!this._view.warnCompilationSlow) return if (speed > 1000) { @@ -65,29 +72,22 @@ class CompilerContainer { this.compileTabLogic.compiler.event.register('loadingCompiler', () => { if (!this._view.compileIcon) return - this._view.compileIcon.classList.add(`${css.spinningIcon}`) - this._view.warnCompilationSlow.style.visibility = 'hidden' this._view.compileIcon.setAttribute('title', 'compiler is loading, please wait a few moments.') - }) - - this.compileTabLogic.compiler.event.register('compilationStarted', () => { - if (!this._view.compileIcon) return - this._view.compileIcon.classList.remove(`${css.bouncingIcon}`) this._view.compileIcon.classList.add(`${css.spinningIcon}`) - this._view.compileIcon.setAttribute('title', 'compiling...') + this._view.warnCompilationSlow.style.visibility = 'hidden' }) this.compileTabLogic.compiler.event.register('compilerLoaded', () => { if (!this._view.compileIcon) return - this._view.compileIcon.classList.remove(`${css.spinningIcon}`) this._view.compileIcon.setAttribute('title', '') + this._view.compileIcon.classList.remove(`${css.spinningIcon}`) }) this.compileTabLogic.compiler.event.register('compilationFinished', (success, data, source) => { if (!this._view.compileIcon) return + this._view.compileIcon.setAttribute('title', 'idle') this._view.compileIcon.classList.remove(`${css.spinningIcon}`) this._view.compileIcon.classList.remove(`${css.bouncingIcon}`) - this._view.compileIcon.setAttribute('title', 'idle') }) } diff --git a/src/app/tabs/styles/compile-tab-styles.js b/src/app/tabs/styles/compile-tab-styles.js index d14ca2df52..17a7fb8b3a 100644 --- a/src/app/tabs/styles/compile-tab-styles.js +++ b/src/app/tabs/styles/compile-tab-styles.js @@ -141,32 +141,78 @@ const css = csjs` .icon { margin-right: 0.3em; } - .spinningIcon { - margin-right: .3em; - animation: spin 2s linear infinite; - } - .bouncingIcon { - margin-right: .3em; - animation: bounce 2s infinite; - } .errorBlobs { padding-left: 5px; padding-right: 5px; } + + .spinningIcon { + display: inline-block; + position: relative; + animation: spin 2s infinite linear; + -moz-animation: spin 2s infinite linear; + -o-animation: spin 2s infinite linear; + -webkit-animation: spin 2s infinite linear; + } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + @-webkit-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + @-moz-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + @-o-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + @-ms-keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } + } + + .bouncingIcon { + display: inline-block; + position: relative; + -moz-animation: bounce 2s infinite linear; + -o-animation: bounce 2s infinite linear; + -webkit-animation: bounce 2s infinite linear; + animation: bounce 2s infinite linear; + } + @-webkit-keyframes bounce { - 0% { - margin-bottom: 0; - } - 70% { - margin-bottom: 0; - } - 100% { - margin-bottom: 0; - } + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } + } + @-moz-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } + } + @-o-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } + } + @-ms-keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } + } + @keyframes bounce { + 0% { top: 0; } + 50% { top: -0.2em; } + 70% { top: -0.3em; } + 100% { top: 0; } } ` diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js index 6510889222..340c6cb76b 100644 --- a/src/app/ui/landing-page/landing-page.js +++ b/src/app/ui/landing-page/landing-page.js @@ -125,14 +125,12 @@ export class LandingPage extends BaseApi { this.appManager.ensureActivated('run') this.appManager.ensureActivated('solidityStaticAnalysis') this.appManager.ensureActivated('solidityUnitTesting') - globalRegistry.get('filemanager').api.switchFile() globalRegistry.get('verticalicon').api.select('solidity') } let startVyper = () => { closeAll() this.appManager.ensureActivated('vyper') this.appManager.ensureActivated('run') - globalRegistry.get('filemanager').api.switchFile() globalRegistry.get('verticalicon').api.select('vyper') }