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

Merge pull request #2673 from ethereum/ethWorkSC

Browse Source 
Eth work Compiler Plugin UI update
pull/1/head
Rob 5 years ago committed by GitHub
parent e8104d93ea 31d88bbdeb
commit 78f7173338
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 71 additions and 81 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. 4
      src/app/components/side-panel.js
  2. 20
      src/app/tabs/compile-tab.js
  3. 95
      src/app/tabs/compileTab/compilerContainer.js
  4. 19
      src/app/tabs/styles/compile-tab-styles.js
  5. 4
      src/app/tabs/theme-module.js
  6. 4
      test-browser/commands/verifyContracts.js
  7. 6
      test-browser/helpers/init.js

4
src/app/components/side-panel.js
Unescape View File

@ -23,9 +23,9 @@ const css = csjs`
font-size: 14px; font-size: 14px;
} }
.swapitHeader { .swapitHeader {
height: 35px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 16px 24px 15px;
} }
.icons i { .icons i {
height: 80%; height: 80%;
@ -128,7 +128,7 @@ export class SidePanel extends AbstractPanel {
} }
const header = yo` const header = yo`
<header class="${css.swapitHeader} px-3"> <header class="${css.swapitHeader}">
<h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6> <h6 class="${css.swapitTitle}" data-id="sidePanelSwapitTitle">${name}</h6>
${docLink} ${docLink}
${versionWarning} ${versionWarning}

20
src/app/tabs/compile-tab.js
View File

File diff suppressed because one or more lines are too long

95
src/app/tabs/compileTab/compilerContainer.js
Unescape View File

@ -121,16 +121,11 @@ class CompilerContainer {
compilationButton (name = '') { compilationButton (name = '') {
const displayed = name || '<no file selected>' const displayed = name || '<no file selected>'
const disabled = name && this.isSolFileSelected() ? '' : 'disabled' const disabled = name && this.isSolFileSelected() ? '' : 'disabled'
const compileBtn = yo` return yo`
<button id="compileBtn" data-id="compilerContainerCompileBtn" class="btn btn-primary btn-block ${disabled}" title="Compile" onclick="${this.compile.bind(this)}"> <button id="compileBtn" data-id="compilerContainerCompileBtn" class="btn btn-primary btn-block ${disabled} mt-3" title="Compile" onclick="${this.compile.bind(this)}">
<span>${this._view.compileIcon} Compile ${displayed}</span> <span>${this._view.compileIcon} Compile ${displayed}</span>
</button> </button>
` `
return yo`
<div class="px-2 mt-2 pb-0 d-flex">
${compileBtn}
</div>
`
} }
_disableCompileBtn (shouldDisable) { _disableCompileBtn (shouldDisable) {
@ -189,12 +184,12 @@ class CompilerContainer {
this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fas fa-exclamation-triangle" aria-hidden="true"></i>` this._view.warnCompilationSlow = yo`<i title="Compilation Slow" style="visibility:hidden" class="${css.warnCompilationSlow} fas fa-exclamation-triangle" aria-hidden="true"></i>`
this._view.compileIcon = yo`<i class="fas fa-sync ${css.icon}" aria-hidden="true"></i>` this._view.compileIcon = yo`<i class="fas fa-sync ${css.icon}" aria-hidden="true"></i>`
this._view.autoCompile = yo`<input class="${css.autocompile}" onchange=${this.updateAutoCompile.bind(this)} id="autoCompile" data-id="compilerContainerAutoCompile" type="checkbox" title="Auto compile">` this._view.autoCompile = yo`<input class="${css.autocompile} custom-control-input" onchange=${this.updateAutoCompile.bind(this)} data-id="compilerContainerAutoCompile" id="autoCompile" type="checkbox" title="Auto compile">`
this._view.hideWarningsBox = yo`<input class="${css.autocompile}" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">` this._view.hideWarningsBox = yo`<input class="${css.autocompile} custom-control-input" onchange=${this.hideWarnings.bind(this)} id="hideWarningsBox" type="checkbox" title="Hide warnings">`
if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '') if (this.data.autoCompile) this._view.autoCompile.setAttribute('checked', '')
if (this.data.hideWarnings) this._view.hideWarningsBox.setAttribute('checked', '') if (this.data.hideWarnings) this._view.hideWarningsBox.setAttribute('checked', '')
this._view.optimize = yo`<input onchange=${this.onchangeOptimize.bind(this)} id="optimize" type="checkbox">` this._view.optimize = yo`<input onchange=${this.onchangeOptimize.bind(this)} class="custom-control-input" id="optimize" type="checkbox">`
if (this.compileTabLogic.optimize) this._view.optimize.setAttribute('checked', '') if (this.compileTabLogic.optimize) this._view.optimize.setAttribute('checked', '')
this._view.versionSelector = yo` this._view.versionSelector = yo`
@ -238,67 +233,51 @@ class CompilerContainer {
this._view.compilationButton = this.compilationButton() this._view.compilationButton = this.compilationButton()
this._view.includeNightlies = yo` this._view.includeNightlies = yo`
<input class="mr-0 ml-1" id="nightlies" type="checkbox" onchange=${() => this._updateVersionSelector()}> <input class="mr-2 custom-control-input" id="nightlies" type="checkbox" onchange=${() => this._updateVersionSelector()}>
` `
this._view.compileContainer = yo` this._view.compileContainer = yo`
<section> <section>
<!-- Select Compiler Version --> <!-- Select Compiler Version -->
<article> <article>
<header class="navbar navbar-light p-2 bg-light"> <header class="${css.compilerSection} border-bottom">
<div class="row w-100 no-gutters mb-2"> <div class="mb-2">
<div class="col-sm-4"> <label class="${css.compilerLabel} form-check-label" for="versionSelector">
<div class="d-flex flex-row justify-content-end"> Compiler
<label class="${css.compilerLabel} form-check-label input-group-text pr-0 border-0 w-100" for="versionSelector"> <button class="far fa-plus-square border-0 p-0 mx-2 btn-sm" onclick="${(e) => this.promtCompiler(e)}" title="Add a custom compiler with URL"></button>
<button class="far fa-plus-square border-0 p-0 mx-2 btn-sm" onclick="${(e) => this.promtCompiler(e)}" title="Add a custom compiler with URL"></button> </label>
Compiler ${this._view.versionSelector}
</label>
</div>
</div>
<div class="col-sm-8">
${this._view.versionSelector}
<div class="pt-0 ${css.nightlyBuilds}">
<label for="nightlies" class="text-dark p-0 m-0 form-check-label">Include nightly builds</label>
${this._view.includeNightlies}
</div>
</div>
</div> </div>
<div class="row w-100 no-gutters mb-2"> <div class="mb-2 ${css.nightlyBuilds} custom-control custom-checkbox">
<div class="col-sm-4"> ${this._view.includeNightlies}
<label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label> <label for="nightlies" class="form-check-label custom-control-label">Include nightly builds</label>
</div> </div>
<div class="col-sm-8"> <div class="mb-2">
${this._view.languageSelector} <label class="${css.compilerLabel} form-check-label" for="compilierLanguageSelector">Language</label>
</div> ${this._view.languageSelector}
</div>
<div class="mb-2">
<label class="${css.compilerLabel} form-check-label" for="evmVersionSelector">EVM Version</label>
${this._view.evmVersionSelector}
</div> </div>
<div class="row w-100 no-gutters"> <div class="mt-3">
<div class="col-sm-4"> <p class="mt-2 ${css.compilerLabel}">Compiler Configuration</p>
<label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label> <div class="mt-2 ${css.compilerConfig} custom-control custom-checkbox">
${this._view.autoCompile}
<label class="form-check-label custom-control-label" for="autoCompile">Auto compile</label>
</div> </div>
<div class="col-sm-8"> <div class="mt-2 ${css.compilerConfig} custom-control custom-checkbox">
${this._view.evmVersionSelector} ${this._view.optimize}
<label class="form-check-label custom-control-label" for="optimize">Enable optimization</label>
</div>
<div class="mt-2 ${css.compilerConfig} custom-control custom-checkbox">
${this._view.hideWarningsBox}
<label class="form-check-label custom-control-label" for="hideWarningsBox">Hide warnings</label>
</div> </div>
</div> </div>
${this._view.compilationButton}
</header> </header>
${this._view.compilationButton}
</article> </article>
<!-- Config --> <!-- Config -->
<article class="p-2">
<small class="${css.compilerSm}">Compiler Configuration</small>
<ul class="list-group list-group-flush">
<li class="list-group-item form-group ${css.compilerConfig}">
${this._view.autoCompile}
<label class="form-check-label" for="autoCompile">Auto compile</label>
</li>
<li class="list-group-item form-group ${css.compilerConfig}">
${this._view.optimize}
<label class="form-check-label" for="optimize">Enable optimization</label>
</li>
<li class="list-group-item form-group ${css.compilerConfig}">
${this._view.hideWarningsBox}
<label class="form-check-label" for="hideWarningsBox">Hide warnings</label>
</li>
</ul>
</article>
</section>` </section>`
return this._view.compileContainer return this._view.compileContainer

19
src/app/tabs/styles/compile-tab-styles.js
Unescape View File

@ -37,8 +37,6 @@ const css = csjs`
.nightlyBuilds { .nightlyBuilds {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end;
align-content: center;
align-items: center; align-items: center;
} }
.autocompileContainer { .autocompileContainer {
@ -71,11 +69,20 @@ const css = csjs`
.compilerConfig label { .compilerConfig label {
margin: 0; margin: 0;
} }
.compilerSm { .compilerSection {
padding-left: 1.25rem; padding: 12px 24px 16px;
} }
.compilerLabel { .compilerLabel {
direction: rtl; margin-bottom: 2px;
font-size: 11px;
line-height: 12px;
text-transform: uppercase;
}
.copyButton {
padding: 6px;
font-weight: bold;
font-size: 11px;
line-height: 15px;
} }
.name { .name {
display: flex; display: flex;
@ -107,7 +114,7 @@ const css = csjs`
align-items: center; align-items: center;
} }
.contractHelperButtons { .contractHelperButtons {
margin-top: 10px; margin-top: 6px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;

4
src/app/tabs/theme-module.js
Unescape View File

@ -4,8 +4,8 @@ import * as packageJson from '../../../package.json'
import yo from 'yo-yo' import yo from 'yo-yo'
const themes = [ const themes = [
{name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1581586063/remix-dark-theme_w5nghe.css'}, {name: 'Dark', quality: 'dark', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584965247/remix-dark_tmkdla.css'},
{name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1581586063/light-theme_fswxxf.css'}, {name: 'Light', quality: 'light', url: 'https://res.cloudinary.com/dvtmp0niu/raw/upload/v1584966540/remix-light_t0c780.css'},
{name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'}, {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'},
{name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'}, {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},

4
test-browser/commands/verifyContracts.js
Unescape View File

@ -16,9 +16,9 @@ function getCompiledContracts (browser, opts, callback) {
browser browser
.clickLaunchIcon('solidity') .clickLaunchIcon('solidity')
.pause(opts.wait) .pause(opts.wait)
.waitForElementPresent('#compileTabView select#compiledContracts option') .waitForElementPresent('*[data-id="compiledContracts"] option')
.execute(function () { .execute(function () {
var contracts = document.querySelectorAll('#compileTabView select#compiledContracts option') var contracts = document.querySelectorAll('*[data-id="compiledContracts"] option')
if (!contracts) { if (!contracts) {
return null return null
} else { } else {

6
test-browser/helpers/init.js
Unescape View File

@ -7,7 +7,11 @@ module.exports = function (browser, callback, url, preloadPlugins = true) {
browser.resizeWindow(2560, 1440, () => { browser.resizeWindow(2560, 1440, () => {
if (preloadPlugins) { if (preloadPlugins) {
initModules(browser, () => { initModules(browser, () => {
browser.clickLaunchIcon('solidity').click('#autoCompile') browser.clickLaunchIcon('solidity')
.pause(2000)
.execute(() => {
document.getElementById('autoCompile').click()
})
.perform(function () { .perform(function () {
callback() callback()
}) })

Write Preview
Loading…
Cancel
Save