Skip to content

B
baas-ide
Unverified Commit 1042c276 authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #2615 from ethereum/dev2master

EthWorks update for deploy & run module for the dark theme
parents 2edd3eee 643293ed
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 152 deletions
src/app/tabs/compileTab/compilerContainer.js
View file @ 1042c276
...@@ -241,7 +241,7 @@ class CompilerContainer { ...@@ -241,7 +241,7 @@ class CompilerContainer {
<div class="row w-100 no-gutters mb-2"> <div class="row w-100 no-gutters mb-2">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="d-flex flex-row justify-content-end"> <div class="d-flex flex-row justify-content-end">
<label class="${css.compilerLabel} input-group-text pr-0 border-0 w-100" for="versionSelector"> <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>
Compiler Compiler
</label> </label>
...@@ -250,14 +250,14 @@ class CompilerContainer { ...@@ -250,14 +250,14 @@ class CompilerContainer {
<div class="col-sm-8"> <div class="col-sm-8">
${this._view.versionSelector} ${this._view.versionSelector}
<div class="pt-0 ${css.nightlyBuilds}"> <div class="pt-0 ${css.nightlyBuilds}">
<label for="nightlies" class="text-dark p-0 m-0">Include nightly builds</label> <label for="nightlies" class="text-dark p-0 m-0 form-check-label">Include nightly builds</label>
${this._view.includeNightlies} ${this._view.includeNightlies}
</div> </div>
</div> </div>
</div> </div>
<div class="row w-100 no-gutters mb-2"> <div class="row w-100 no-gutters mb-2">
<div class="col-sm-4"> <div class="col-sm-4">
<label class="${css.compilerLabel} input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label> <label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="compilierLanguageSelector">Language</label>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
${this._view.languageSelector} ${this._view.languageSelector}
...@@ -265,7 +265,7 @@ class CompilerContainer { ...@@ -265,7 +265,7 @@ class CompilerContainer {
</div> </div>
<div class="row w-100 no-gutters"> <div class="row w-100 no-gutters">
<div class="col-sm-4"> <div class="col-sm-4">
<label class="${css.compilerLabel} input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label> <label class="${css.compilerLabel} form-check-label input-group-text pl-0 border-0" for="evmVersionSelector">EVM Version</label>
</div> </div>
<div class="col-sm-8"> <div class="col-sm-8">
${this._view.evmVersionSelector} ${this._view.evmVersionSelector}
...@@ -280,15 +280,15 @@ class CompilerContainer { ...@@ -280,15 +280,15 @@ class CompilerContainer {
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item form-group ${css.compilerConfig}"> <li class="list-group-item form-group ${css.compilerConfig}">
${this._view.autoCompile} ${this._view.autoCompile}
<label for="autoCompile">Auto compile</label> <label class="form-check-label" for="autoCompile">Auto compile</label>
</li> </li>
<li class="list-group-item form-group ${css.compilerConfig}"> <li class="list-group-item form-group ${css.compilerConfig}">
${this._view.optimize} ${this._view.optimize}
<label for="optimize">Enable optimization</label> <label class="form-check-label" for="optimize">Enable optimization</label>
</li> </li>
<li class="list-group-item form-group ${css.compilerConfig}"> <li class="list-group-item form-group ${css.compilerConfig}">
${this._view.hideWarningsBox} ${this._view.hideWarningsBox}
<label for="hideWarningsBox">Hide warnings</label> <label class="form-check-label" for="hideWarningsBox">Hide warnings</label>
</li> </li>
</ul> </ul>
</article> </article>
......
src/app/tabs/runTab/contractDropdown.js
View file @ 1042c276
...@@ -51,10 +51,11 @@ class ContractDropdownUI { ...@@ -51,10 +51,11 @@ class ContractDropdownUI {
this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />` this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="address of contract" oninput=${this.atAddressChanged.bind(this)} />`
this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>` this.selectContractNames = yo`<select class="${css.contractNames} custom-select" disabled></select>`
this.createPanel = yo`<div class="${css.button}"></div>` this.createPanel = yo`<div class="${css.deployDropdown}"></div>`
this.orLabel = yo`<div class="${css.orLabel}">or</div>` this.orLabel = yo`<div class="${css.orLabel}">or</div>`
let el = yo` let el = yo`
<div class="${css.container}"> <div class="${css.container}">
<label class="${css.settingsLabel}">Contract</label>
<div class="${css.subcontainer}"> <div class="${css.subcontainer}">
${this.selectContractNames} ${this.compFails} ${info} ${this.selectContractNames} ${this.compFails} ${info}
</div> </div>
......
src/app/tabs/runTab/settings.js
View file @ 1042c276
...@@ -56,11 +56,11 @@ class SettingsUI { ...@@ -56,11 +56,11 @@ class SettingsUI {
var environmentEl = yo` var environmentEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}"> <label id="selectExEnv" class="${css.settingsLabel}">
Environment Environment
</div> </label>
<div class=${css.environment}> <div class="${css.environment}">
<select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select}"> <select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="form-control ${css.select} custom-select">
<option id="vm-mode" <option id="vm-mode"
title="Execution environment does not connect to any node, everything is local and in memory only." title="Execution environment does not connect to any node, everything is local and in memory only."
value="vm" name="executionContext"> JavaScript VM value="vm" name="executionContext"> JavaScript VM
...@@ -81,7 +81,7 @@ class SettingsUI { ...@@ -81,7 +81,7 @@ class SettingsUI {
` `
const networkEl = yo` const networkEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}"> <div class="${css.settingsLabel}">
</div> </div>
<div class="${css.environment}"> <div class="${css.environment}">
${this.netUI} ${this.netUI}
...@@ -90,14 +90,14 @@ class SettingsUI { ...@@ -90,14 +90,14 @@ class SettingsUI {
` `
const accountEl = yo` const accountEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}"> <label class="${css.settingsLabel}">
Account Account
<span id="remixRunPlusWraper" title="Create a new account" onload=${this.updatePlusButton.bind(this)}> <span id="remixRunPlusWraper" title="Create a new account" onload=${this.updatePlusButton.bind(this)}>
<i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i> <i id="remixRunPlus" class="fas fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)}"></i>
</span> </span>
</div> </label>
<div class=${css.account}> <div class="${css.account}">
<select name="txorigin" class="form-control ${css.select}" id="txorigin"></select> <select name="txorigin" class="form-control ${css.select} custom-select" id="txorigin"></select>
${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)} ${copyToClipboard(() => document.querySelector('#runTabView #txorigin').value)}
<i id="remixRunSignMsg" class="fas fa-edit ${css.icon}" aria-hidden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i> <i id="remixRunSignMsg" class="fas fa-edit ${css.icon}" aria-hidden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
</div> </div>
...@@ -106,17 +106,17 @@ class SettingsUI { ...@@ -106,17 +106,17 @@ class SettingsUI {
const gasPriceEl = yo` const gasPriceEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}">Gas limit</div> <label class="${css.settingsLabel}">Gas limit</label>
<input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000"> <input type="number" class="form-control ${css.gasNval} ${css.col2}" id="gasLimit" value="3000000">
</div> </div>
` `
const valueEl = yo` const valueEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}">Value</div> <label class="${css.settingsLabel}">Value</label>
<div class="${css.gasValueContainer}"> <div class="${css.gasValueContainer}">
<input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit"> <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
<select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2}" id="unit"> <select name="unit" class="form-control p-1 ${css.gasNvalUnit} ${css.col2_2} custom-select" id="unit">
<option data-unit="wei">wei</option> <option data-unit="wei">wei</option>
<option data-unit="gwei">gwei</option> <option data-unit="gwei">gwei</option>
<option data-unit="finney">finney</option> <option data-unit="finney">finney</option>
......
src/app/tabs/staticanalysis/staticAnalysisView.js
View file @ 1042c276
...@@ -158,7 +158,7 @@ staticAnalysisView.prototype.renderModules = function () { ...@@ -158,7 +158,7 @@ staticAnalysisView.prototype.renderModules = function () {
var category = groupedModules[categoryId] var category = groupedModules[categoryId]
var entriesDom = category.map((item, i) => { var entriesDom = category.map((item, i) => {
return yo` return yo`
<label class="${css.label}"> <label class="${css.label} form-check-label">
<input id="staticanalysismodule_${categoryId}_${i}" <input id="staticanalysismodule_${categoryId}_${i}"
type="checkbox" type="checkbox"
class="staticAnalysisItem" class="staticAnalysisItem"
......
src/app/tabs/styles/run-tab-styles.js
View file @ 1042c276
...@@ -5,55 +5,50 @@ var css = csjs` ...@@ -5,55 +5,50 @@ var css = csjs`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.runTabView::-webkit-scrollbar {
display: none;
}
.instanceContainerTitle { .instanceContainerTitle {
font-weight: bold;
margin-bottom: 25px;
font-size: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 15px; align-items: center;
height: 0px; padding-left: 10px;
margin: 0 0 16px;
font-size: 14px;
line-height: 19px;
} }
.settings { .settings {
margin-bottom: 2%; padding: 0 24px 16px;
padding: 10px 0px 15px 15px;
}
.recorderCount {
/* margin-right: 30px; */
/* min-width: 13px; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* font-size: 10px; */
} }
.crow { .crow {
margin-top: .5em; display: block;
display: flex; margin-top: 8px;
align-items: center;
/*width: 500px;*/
} }
.col1 { .col1 {
width: 30%; width: 30%;
float: left; float: left;
align-self: center; align-self: center;
} }
.col1_1 { .settingsLabel {
font-size: 12px; font-size: 11px;
min-width: 75px; margin-bottom: 4px;
float: left; text-transform: uppercase;
align-self: center;
} }
.environment { .environment {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
width: 100%; width: 100%;
padding-right: 25px; }
.environment a {
margin-left: 7px;
} }
.account { .account {
display: flex; display: flex;
align-items: center; align-items: center;
width: 90%; }
.account i {
margin-left: 12px;
} }
.col2 { .col2 {
border-radius: 3px; border-radius: 3px;
...@@ -74,7 +69,7 @@ var css = csjs` ...@@ -74,7 +69,7 @@ var css = csjs`
margin-bottom: 2%; margin-bottom: 2%;
border: none; border: none;
text-align: center; text-align: center;
padding: 10px 0px 15px 0px; padding: 0 14px 16px;
} }
.pendingTxsContainer { .pendingTxsContainer {
display: flex; display: flex;
...@@ -84,8 +79,7 @@ var css = csjs` ...@@ -84,8 +79,7 @@ var css = csjs`
text-align: center; text-align: center;
} }
.container { .container {
margin-bottom: 4%; padding: 0 24px 16px;
padding-left: 15px;
} }
.recorderCollapsedView, .recorderCollapsedView,
.recorderExpandedView { .recorderExpandedView {
...@@ -104,7 +98,14 @@ var css = csjs` ...@@ -104,7 +98,14 @@ var css = csjs`
.subcontainer { .subcontainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: baseline; align-items: center;
margin-bottom: 8px;
}
.subcontainer i {
width: 16px;
display: flex;
justify-content: center;
margin-left: 1px;
} }
.button button{ .button button{
flex: none; flex: none;
...@@ -127,13 +128,13 @@ var css = csjs` ...@@ -127,13 +128,13 @@ var css = csjs`
border-right: 0; border-right: 0;
} }
.atAddressSect { .atAddressSect {
margin-top: 6px; margin-top: 8px;
height: 32px; height: 32px;
} }
.atAddressSect input { .atAddressSect input {
border-top-left-radius: 0; height: 32px;
border-bottom-left-radius: 0; border-top-left-radius: 0 !important;
height: 100%; border-bottom-left-radius: 0 !important;
} }
.ataddressinput { .ataddressinput {
padding: .25rem; padding: .25rem;
...@@ -141,7 +142,7 @@ var css = csjs` ...@@ -141,7 +142,7 @@ var css = csjs`
.create { .create {
} }
.input { .input {
font-size: 10px; font-size: 10px !important;
} }
.noInstancesText { .noInstancesText {
font-style: italic; font-style: italic;
...@@ -209,10 +210,11 @@ var css = csjs` ...@@ -209,10 +210,11 @@ var css = csjs`
width: 145px; width: 145px;
} }
.orLabel { .orLabel {
margin-left: 44px; text-align: center;
text-transform: uppercase;
} }
.infoDeployAction { .infoDeployAction {
margin-left: 5px; margin-left: 1px;
font-size: 13px; font-size: 13px;
color: var(--info); color: var(--info);
} }
...@@ -221,18 +223,17 @@ var css = csjs` ...@@ -221,18 +223,17 @@ var css = csjs`
display: flex; display: flex;
} }
.gasNval { .gasNval {
/* transform: scale(0.7); */ width: 55%;
/* transform-origin: left; */
margin-right: 10px;
width: 100px;
font-size: 0.8rem; font-size: 0.8rem;
} }
.gasNvalUnit { .gasNvalUnit {
/* transform: scale(0.7); */ width: 41%;
/* transform-origin: left; */ margin-left: 10px;
margin-right: 10px;
font-size: 0.8rem; font-size: 0.8rem;
width: 70px; }
.deployDropdown {
text-align: center;
text-transform: uppercase;
} }
` `
......
src/app/tabs/styles/settings-tab-styles.js
View file @ 1042c276
...@@ -49,8 +49,6 @@ const css = csjs` ...@@ -49,8 +49,6 @@ const css = csjs`
margin-bottom: 3px; margin-bottom: 3px;
} }
input { input {
margin-right: 5px;
cursor: pointer;
width: inherit; width: inherit;
} }
input[type=radio] { input[type=radio] {
......
src/app/udapp/run-tab.js
View file @ 1042c276
...@@ -47,7 +47,7 @@ export class RunTab extends LibraryPlugin { ...@@ -47,7 +47,7 @@ export class RunTab extends LibraryPlugin {
} }
renderContainer () { renderContainer () {
this.container = yo`<div class="${css.runTabView} py-0 px-2" id="runTabView" ></div>` this.container = yo`<div class="${css.runTabView} run-tab" id="runTabView" ></div>`
var el = yo` var el = yo`
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
...@@ -62,10 +62,10 @@ export class RunTab extends LibraryPlugin { ...@@ -62,10 +62,10 @@ export class RunTab extends LibraryPlugin {
} }
renderInstanceContainer () { renderInstanceContainer () {
this.instanceContainer = yo`<div class="${css.instanceContainer}"></div>` this.instanceContainer = yo`<div class="${css.instanceContainer} border-0 list-group-item"></div>`
const instanceContainerTitle = yo` const instanceContainerTitle = yo`
<div class=${css.instanceContainerTitle} <div class="${css.instanceContainerTitle}"
title="Autogenerated generic user interfaces for interaction with deployed contracts"> title="Autogenerated generic user interfaces for interaction with deployed contracts">
Deployed Contracts Deployed Contracts
<i class="${css.clearinstance} ${css.icon} far fa-trash-alt" onclick=${() => this.event.trigger('clearInstance', [])} <i class="${css.clearinstance} ${css.icon} far fa-trash-alt" onclick=${() => this.event.trigger('clearInstance', [])}
...@@ -142,7 +142,7 @@ export class RunTab extends LibraryPlugin { ...@@ -142,7 +142,7 @@ export class RunTab extends LibraryPlugin {
const expandedView = yo` const expandedView = yo`
<div class=${css.recorderExpandedView}> <div class=${css.recorderExpandedView}>
<div class=${css.recorderDescription}> <div class="${css.recorderDescription} mt-2">
All transactions (deployed contracts and function executions) in this environment can be saved and replayed in All transactions (deployed contracts and function executions) in this environment can be saved and replayed in
another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3. another environment. e.g Transactions created in Javascript VM can be replayed in the Injected Web3.
</div> </div>
......
src/app/ui/card.js
View file @ 1042c276
...@@ -24,7 +24,7 @@ module.exports = class Card { ...@@ -24,7 +24,7 @@ module.exports = class Card {
self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>` self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
self._view.cardHeader = yo` self._view.cardHeader = yo`
<div class=${css.cardHeader} onclick=${() => trigger(self._view.arrow)}> <div class=${css.cardHeader} onclick=${() => trigger(self._view.arrow)}>
<div class="p-1 ${css.cardTitles}"> <div class="pr-1 ${css.cardTitles}">
<div class=${css.cardTitle}>${self._opts.title}</div> <div class=${css.cardTitle}>${self._opts.title}</div>
${self._view.statusBar} ${self._view.statusBar}
</div> </div>
...@@ -43,7 +43,7 @@ module.exports = class Card { ...@@ -43,7 +43,7 @@ module.exports = class Card {
// HTML // HTML
self._view.el = yo` self._view.el = yo`
<div class="${css.cardContainer} p-2 list-group-item"> <div class="${css.cardContainer} list-group-item border-0">
${self._view.cardHeader} ${self._view.cardHeader}
${self._view.cardBody} ${self._view.cardBody}
</div>` </div>`
...@@ -55,12 +55,14 @@ module.exports = class Card { ...@@ -55,12 +55,14 @@ module.exports = class Card {
const css = csjs` const css = csjs`
.cardContainer { .cardContainer {
padding : 10px 15px 15px 0; padding : 0 24px 16px;
margin-bottom : 2%; margin : 0;
background : none;
} }
.cardHeader { .cardHeader {
display : flex; display : flex;
justify-content : space-between; justify-content : space-between;
align-items : center;
} }
.statusBar {} .statusBar {}
.cardBody {} .cardBody {}
...@@ -70,9 +72,10 @@ const css = csjs` ...@@ -70,9 +72,10 @@ const css = csjs`
align-items : center; align-items : center;
} }
.cardTitle { .cardTitle {
font-size : 13px; font-size : 14px;
font-weight : bold; font-weight : 400;
margin-right : 5px; margin-right : 8px;
line-height : 19px;
} }
.expandCollapseButton {} .expandCollapseButton {}
.arrow { .arrow {
......
src/app/ui/copy-to-clipboard.js
View file @ 1042c276
...@@ -12,7 +12,7 @@ var css = csjs` ...@@ -12,7 +12,7 @@ var css = csjs`
} }
` `
module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-clipboard') { module.exports = function copyToClipboard (getContent, tip = 'Copy value to clipboard', icon = 'fa-copy') {
var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" aria-hidden="true"></i>` var copyIcon = yo`<i title="${tip}" class="${css.copyIcon} far ${icon}" aria-hidden="true"></i>`
copyIcon.onclick = (event) => { copyIcon.onclick = (event) => {
event.stopPropagation() event.stopPropagation()
......
src/app/ui/multiParamManager.js
View file @ 1042c276
...@@ -100,7 +100,7 @@ class MultiParamManager { ...@@ -100,7 +100,7 @@ class MultiParamManager {
if (this.funABI.inputs) { if (this.funABI.inputs) {
return yo`<div> return yo`<div>
${this.funABI.inputs.map(function (inp) { ${this.funABI.inputs.map(function (inp) {
return yo`<div class="${css.multiArg}"><label for="${inp.name}"> ${inp.name}: </label><input placeholder="${inp.type}" title="${inp.name}"></div>` return yo`<div class="${css.multiArg}"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}"></div>`
})} })}
</div>` </div>`
} }
...@@ -116,10 +116,9 @@ class MultiParamManager { ...@@ -116,10 +116,9 @@ class MultiParamManager {
title = this.funABI.type === 'receive' ? '(receive)' : '(fallback)' title = this.funABI.type === 'receive' ? '(receive)' : '(fallback)'
} }
this.basicInputField = yo`<input></input>` this.basicInputField = yo`<input class="form-control"></input>`
this.basicInputField.setAttribute('placeholder', this.inputs) this.basicInputField.setAttribute('placeholder', this.inputs)
this.basicInputField.setAttribute('title', this.inputs) this.basicInputField.setAttribute('title', this.inputs)
this.basicInputField.setAttribute('style', 'flex: 4')
var onClick = () => { var onClick = () => {
this.clickCallBack(this.funABI.inputs, this.basicInputField.value) this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
...@@ -148,12 +147,11 @@ class MultiParamManager { ...@@ -148,12 +147,11 @@ class MultiParamManager {
this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" > this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
<div class="${css.contractActionsContainerMultiInner} text-dark" > <div class="${css.contractActionsContainerMultiInner} text-dark" >
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}"> <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
<div class="${css.multiTitle}">${title}</div> <div class="${css.multiTitle} run-instance-multi-title">${title}</div>
<i class='fas fa-angle-up ${css.methCaret}'></i> <i class='fas fa-angle-up ${css.methCaret}'></i>
</div> </div>
${this.multiFields} ${this.multiFields}
<div class="${css.group} ${css.multiArg}" > <div class="${css.group} ${css.multiArg}" >
${expandedButton}
${copyToClipboard( ${copyToClipboard(
() => { () => {
var multiString = this.getMultiValsString() var multiString = this.getMultiValsString()
...@@ -170,6 +168,7 @@ class MultiParamManager { ...@@ -170,6 +168,7 @@ class MultiParamManager {
return encodeObj.data return encodeObj.data
} }
}, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')} }, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')}
${expandedButton}
</div> </div>
</div> </div>
</div>` </div>`
......
src/app/ui/universal-dapp-ui.js
View file @ 1042c276
...@@ -54,12 +54,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address ...@@ -54,12 +54,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
let self = this let self = this
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
address = ethJSUtil.toChecksumAddress(address) address = ethJSUtil.toChecksumAddress(address)
var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>` var instance = yo`<div class="instance run-instance border-dark ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
const context = this.blockchain.context() const context = this.blockchain.context()
var shortAddress = helper.shortenAddress(address) var shortAddress = helper.shortenAddress(address)
var title = yo` var title = yo`
<div class="${css.title} alert alert-secondary p-2"> <div class="${css.title} alert alert-secondary">
<button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}"> <button class="btn ${css.titleExpander}" onclick="${(e) => { toggleClass(e) }}">
<i class="fas fa-angle-right" aria-hidden="true"></i> <i class="fas fa-angle-right" aria-hidden="true"></i>
</button> </button>
...@@ -97,7 +97,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address ...@@ -97,7 +97,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
} }
function toggleClass (e) { function toggleClass (e) {
$(instance).toggleClass(`${css.hidesub}`) $(instance).toggleClass(`${css.hidesub} bg-light`)
// e.currentTarget.querySelector('i') // e.currentTarget.querySelector('i')
e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`) e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`) e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
...@@ -120,7 +120,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address ...@@ -120,7 +120,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
}) })
const calldataInput = yo` const calldataInput = yo`
<input id="deployAndRunLLTxCalldata" class="w-100 m-0" title="The Calldata to send to fallback function of the contract."> <input id="deployAndRunLLTxCalldata" class="w-100 m-0 form-control" title="The Calldata to send to fallback function of the contract.">
` `
const llIError = yo` const llIError = yo`
<label id="deployAndRunLLTxError" class="text-danger"></label> <label id="deployAndRunLLTxError" class="text-danger"></label>
......
src/universal-dapp-styles.js
View file @ 1042c276
...@@ -9,33 +9,37 @@ var css = csjs` ...@@ -9,33 +9,37 @@ var css = csjs`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 11px; font-size: 11px;
/* height: 30px; */
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
word-break: break-word; word-break: break-word;
line-height: initial; line-height: initial;
overflow: visible; overflow: visible;
margin-bottom: 0px; padding: 0 0 8px;
padding-left: 0px; margin: 0;
padding-right: 10px; background: none;
border: none;
} }
.noInstancesText { .title button {
background: none;
border: none;
} }
.titleLine { .titleLine {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
} }
.titleText { .titleText {
/* margin-right: 1em; */
word-break: break-word; word-break: break-word;
min-width: 170px;
width: 100%; width: 100%;
border: none;
} }
.spanTitleText { .spanTitleText {
/* font-size: .8rem; */ line-height: 12px;
padding: 0;
font-size: 11px; font-size: 11px;
width:100%; width:100%;
border: none;
background: none;
text-transform: uppercase;
} }
.inputGroupText { .inputGroupText {
width: 100%; width: 100%;
...@@ -44,7 +48,6 @@ var css = csjs` ...@@ -44,7 +48,6 @@ var css = csjs`
color: var(--primary); color: var(--primary);
} }
.titleExpander { .titleExpander {
/* margin-right: 10px; */
padding: 5px 7px; padding: 5px 7px;
} }
.nameNbuts { .nameNbuts {
...@@ -54,10 +57,13 @@ var css = csjs` ...@@ -54,10 +57,13 @@ var css = csjs`
} }
.instance { .instance {
display: block; display: block;
/* display: flex; */
flex-direction: column; flex-direction: column;
/* padding: 5px 0 0 10px; */ margin-bottom: 12px;
margin-bottom: 10px; background: none;
border-radius: 2px;
}
.instance.hidesub {
border-bottom: 1px solid;
} }
.instance.hidesub .title { .instance.hidesub .title {
display: flex; display: flex;
...@@ -69,19 +75,21 @@ var css = csjs` ...@@ -69,19 +75,21 @@ var css = csjs`
display: none; display: none;
} }
.methCaret { .methCaret {
margin-right: 5px; min-width: 12px;
width: 12px;
margin-left: 4px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
padding-top: 5px; line-height: 0.6;
vertical-align: top; vertical-align: middle;
padding: 0;
} }
.cActionsWrapper { .cActionsWrapper {
padding: 0px 0 10px 10px;
border: 1px solid rgba(0,0,0,0.125);
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;
border-top-rightt-radius: 0; border-top-rightt-radius: 0;
border-bottom-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
padding: 8px 10px 7px;
} }
.group:after { .group:after {
content: ""; content: "";
...@@ -93,12 +101,11 @@ var css = csjs` ...@@ -93,12 +101,11 @@ var css = csjs`
display: flex; display: flex;
overflow: hidden; overflow: hidden;
} }
.contractActions {
}
.instanceButton { .instanceButton {
height: 32px;
border-radius: 3px; border-radius: 3px;
flex: 3;
white-space: nowrap; white-space: nowrap;
font-size: 11px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
...@@ -107,14 +114,11 @@ var css = csjs` ...@@ -107,14 +114,11 @@ var css = csjs`
cursor: pointer; cursor: pointer;
margin-left: 5px; margin-left: 5px;
} }
.udapp {}
.udappClose { .udappClose {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.contractProperty { .contractProperty {
margin-bottom: 0.4em;
margin-top: 1em;
width:100%; width:100%;
} }
.contractProperty.hasArgs input { .contractProperty.hasArgs input {
...@@ -126,10 +130,8 @@ var css = csjs` ...@@ -126,10 +130,8 @@ var css = csjs`
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.contractProperty button { .contractProperty button {
/* background-color: var(--warning); */
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;
/* font-size: 10px; */
margin:0; margin:0;
word-break: inherit; word-break: inherit;
} }
...@@ -139,7 +141,6 @@ var css = csjs` ...@@ -139,7 +141,6 @@ var css = csjs`
border-color: lightgray; border-color: lightgray;
} }
.contractProperty.constant button { .contractProperty.constant button {
/* background-color:var(--info); */
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;
margin:0; margin:0;
...@@ -149,57 +150,53 @@ var css = csjs` ...@@ -149,57 +150,53 @@ var css = csjs`
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.contractProperty input {
/* width: 75% */
}
.contractProperty > .value { .contractProperty > .value {
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
align-self: center; align-self: center;
margin-left: 4px; margin-left: 4px;
} }
.value ul {
margin-bottom: 10px;
padding-top: 5px;
border-bottom: 4px solid var(--light);
}
.contractActionsContainer { .contractActionsContainer {
width: 98%; width: 100%;
margin-bottom: 8px;
} }
.contractActionsContainerSingle { .contractActionsContainerSingle {
display: flex; display: flex;
width: 100%; width: 100%;
margin-bottom: 8px;
}
.contractActionsContainerSingle i {
line-height: 2;
} }
.contractActionsContainerMulti { .contractActionsContainerMulti {
display:none; display:none;
width: 100%; width: 100%;
} }
.contractActionsContainerMultiInner { .contractActionsContainerMultiInner {
margin-bottom: 10px; width: 100%;
padding: 0px 5px 5px 5px; padding: 16px 8px 16px 14px;
background-color: var(--light);
width: 99%;
border-radius: 3px; border-radius: 3px;
margin-bottom: 8px;
} }
.multiHeader { .multiHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
text-align: left; text-align: left;
font-size: 10px; font-size: 10px;
margin-bottom: 5px;
font-weight: bold; font-weight: bold;
} }
.contractActionsContainerMultiInner .multiTitle { .contractActionsContainerMultiInner .multiTitle {
padding-left: 10px; padding-left: 10px;
} }
.contractProperty .multiTitle { .contractProperty .multiTitle {
padding: 0;
line-height: 16px;
display: inline-block; display: inline-block;
width: 90%;
font-size: 12px; font-size: 12px;
height: 25px;
padding-left: 20px;
font-weight: bold; font-weight: bold;
line-height: 25px;
cursor: default; cursor: default;
padding-top: 5px;
} }
.contractProperty .contractActionsContainerMultiInner .multiArg label{ .contractProperty .contractActionsContainerMultiInner .multiArg label{
text-align: right; text-align: right;
...@@ -219,26 +216,26 @@ var css = csjs` ...@@ -219,26 +216,26 @@ var css = csjs`
cursor: default; cursor: default;
} }
.multiArg { .multiArg {
margin-bottom: 8px; display: flex;
/* display: flex; */ align-items: center;
clear:both; justify-content: flex-end;
margin-top: 4px;
} }
.multiArg input{ .multiArg input{
padding: 5px; padding: 5px;
} }
.multiArg label { .multiArg label {
float: left; width: auto;
margin-right: 6px; padding: 0;
font-size: 10px; margin: 0 4px 0 0;
width: 30%; font-size: 10px;
padding-top: 5px; line-height: 12px;
word-break: break-all; text-align: right;
word-break: initial;
} }
.multiArg button { .multiArg button {
max-width: 100px;
border-radius: 3px; border-radius: 3px;
float: right;
margin-right: 2%;
border-width: 1px; border-width: 1px;
width: inherit; width: inherit;
} }
...@@ -252,12 +249,12 @@ var css = csjs` ...@@ -252,12 +249,12 @@ var css = csjs`
} }
.hasArgs input { .hasArgs input {
display: block; display: block;
height: 32px;
border: 1px solid #dddddd; border: 1px solid #dddddd;
padding: .36em; padding: .36em;
border-left: none; border-left: none;
padding: 8px 8px 8px 10px; padding: 8px 8px 8px 10px;
font-size: 10px; font-size: 10px !important;
/* height: 25px; */
} }
.hasArgs button { .hasArgs button {
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -266,14 +263,13 @@ var css = csjs` ...@@ -266,14 +263,13 @@ var css = csjs`
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 11px;
} }
.hasArgs .contractActionsContainerMulti button { .hasArgs .contractActionsContainerMulti button {
border-radius: 3px; border-radius: 3px;
} }
.contractActionsContainerMultiInner .multiArg i { .contractActionsContainerMultiInner .multiArg i {
padding-right: 15px; padding-right: 10px;
padding-top: 5px;
float: right;
}, },
.hideWarningsContainer { .hideWarningsContainer {
display: flex; display: flex;
......
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