Skip to content

B
baas-ide
Unverified Commit 78f71733 authored by Rob's avatar Rob Committed by GitHub
Browse files
Options

Merge pull request #2673 from ethereum/ethWorkSC

Eth work Compiler Plugin UI update
parents e8104d93 31d88bbd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 71 deletions
src/app/components/side-panel.js
View file @ 78f71733
...@@ -23,9 +23,9 @@ const css = csjs` ...@@ -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 { ...@@ -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}
......
src/app/tabs/compile-tab.js
View file @ 78f71733
This diff is collapsed.
src/app/tabs/compileTab/compilerContainer.js
View file @ 78f71733
...@@ -121,16 +121,11 @@ class CompilerContainer { ...@@ -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 { ...@@ -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 { ...@@ -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
......
src/app/tabs/styles/compile-tab-styles.js
View file @ 78f71733
...@@ -37,8 +37,6 @@ const css = csjs` ...@@ -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` ...@@ -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` ...@@ -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;
......
src/app/tabs/theme-module.js
View file @ 78f71733
...@@ -4,8 +4,8 @@ import * as packageJson from '../../../package.json' ...@@ -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'},
......
test-browser/commands/verifyContracts.js
View file @ 78f71733
...@@ -16,9 +16,9 @@ function getCompiledContracts (browser, opts, callback) { ...@@ -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 {
......
test-browser/helpers/init.js
View file @ 78f71733
...@@ -7,7 +7,11 @@ module.exports = function (browser, callback, url, preloadPlugins = true) { ...@@ -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()
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment