Skip to content

B
baas-ide
Commit 4f498e5d authored by alexcherman's avatar alexcherman Committed by Rob Stupay
Browse files
Options

Style deploy & run tab

parent 8beaf905
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 131 deletions
src/app/tabs/runTab/contractDropdown.js
View file @ 4f498e5d
...@@ -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} module-section">
<div class="${css.settingsLabel} form-control-label">Contract</div>
<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 @ 4f498e5d
...@@ -56,10 +56,10 @@ class SettingsUI { ...@@ -56,10 +56,10 @@ class SettingsUI {
var environmentEl = yo` var environmentEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}"> <div id="selectExEnv" class="${css.settingsLabel} form-control-label">
Environment Environment
</div> </div>
<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}">
<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."
...@@ -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,13 +90,13 @@ class SettingsUI { ...@@ -90,13 +90,13 @@ class SettingsUI {
` `
const accountEl = yo` const accountEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}"> <div class="${css.settingsLabel} form-control-label">
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> </div>
<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}" 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>
...@@ -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> <div class="${css.settingsLabel} form-control-label">Gas limit</div>
<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> <div class="${css.settingsLabel} form-control-label">Value</div>
<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} run-unit-input" 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>
...@@ -127,7 +127,7 @@ class SettingsUI { ...@@ -127,7 +127,7 @@ class SettingsUI {
` `
const el = yo` const el = yo`
<div class="${css.settings}"> <div class="${css.settings} module-section">
${environmentEl} ${environmentEl}
${networkEl} ${networkEl}
${accountEl} ${accountEl}
......
src/app/tabs/styles/run-tab-styles.js
View file @ 4f498e5d
...@@ -6,17 +6,16 @@ var css = csjs` ...@@ -6,17 +6,16 @@ var css = csjs`
flex-direction: column; flex-direction: column;
} }
.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: 16px 24px;
padding: 10px 0px 15px 15px;
} }
.recorderCount { .recorderCount {
/* margin-right: 30px; */ /* margin-right: 30px; */
...@@ -27,33 +26,34 @@ var css = csjs` ...@@ -27,33 +26,34 @@ var css = csjs`
/* font-size: 10px; */ /* 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 +74,7 @@ var css = csjs` ...@@ -74,7 +74,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: 16px 14px;
} }
.pendingTxsContainer { .pendingTxsContainer {
display: flex; display: flex;
...@@ -84,8 +84,7 @@ var css = csjs` ...@@ -84,8 +84,7 @@ var css = csjs`
text-align: center; text-align: center;
} }
.container { .container {
margin-bottom: 4%; padding: 16px 24px;
padding-left: 15px;
} }
.recorderCollapsedView, .recorderCollapsedView,
.recorderExpandedView { .recorderExpandedView {
...@@ -104,7 +103,14 @@ var css = csjs` ...@@ -104,7 +103,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 +133,13 @@ var css = csjs` ...@@ -127,13 +133,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 +147,7 @@ var css = csjs` ...@@ -141,7 +147,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 +215,11 @@ var css = csjs` ...@@ -209,10 +215,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 +228,17 @@ var css = csjs` ...@@ -221,18 +228,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 @ 4f498e5d
...@@ -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 @ 4f498e5d
...@@ -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} run-instance-section"></div>`
const instanceContainerTitle = yo` const instanceContainerTitle = yo`
<div class=${css.instanceContainerTitle} <div class="${css.instanceContainerTitle} run-instance-title"
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', [])}
......
src/app/ui/TreeView.js
View file @ 4f498e5d
...@@ -13,6 +13,9 @@ var css = csjs` ...@@ -13,6 +13,9 @@ var css = csjs`
} }
.ul_tv { .ul_tv {
list-style-type: none; list-style-type: none;
margin: 0;
padding: 0;
border: none;
-webkit-margin-before: 0px; -webkit-margin-before: 0px;
-webkit-margin-after: 0px; -webkit-margin-after: 0px;
-webkit-margin-start: 0px; -webkit-margin-start: 0px;
...@@ -74,7 +77,7 @@ class TreeView { ...@@ -74,7 +77,7 @@ class TreeView {
var children = Object.keys(json).map((innerkey) => { var children = Object.keys(json).map((innerkey) => {
return this.renderObject(json[innerkey], json, innerkey, expand, innerkey) return this.renderObject(json[innerkey], json, innerkey, expand, innerkey)
}) })
return yo`<ul key=${key} class="${css.ul_tv}">${children}</ul>` return yo`<ul key=${key} class="${css.ul_tv} run-instance-list">${children}</ul>`
} }
formatData (key, data, children, expand, keyPath) { formatData (key, data, children, expand, keyPath) {
......
src/app/ui/card.js
View file @ 4f498e5d
...@@ -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} px-4 py-3 list-group-item">
${self._view.cardHeader} ${self._view.cardHeader}
${self._view.cardBody} ${self._view.cardBody}
</div>` </div>`
...@@ -55,12 +55,13 @@ module.exports = class Card { ...@@ -55,12 +55,13 @@ module.exports = class Card {
const css = csjs` const css = csjs`
.cardContainer { .cardContainer {
padding : 10px 15px 15px 0; padding : 16px 24px;
margin-bottom : 2%; margin : 0;
} }
.cardHeader { .cardHeader {
display : flex; display : flex;
justify-content : space-between; justify-content : space-between;
align-items : center;
} }
.statusBar {} .statusBar {}
.cardBody {} .cardBody {}
...@@ -70,9 +71,10 @@ const css = csjs` ...@@ -70,9 +71,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/multiParamManager.js
View file @ 4f498e5d
...@@ -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} run-instance-multi-arg"><label for="${inp.name}"> ${inp.name}: </label><input class="form-control" placeholder="${inp.type}" title="${inp.name}"></div>`
})} })}
</div>` </div>`
} }
...@@ -116,17 +116,16 @@ class MultiParamManager { ...@@ -116,17 +116,16 @@ 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)
} }
let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">${title}</button>` let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">${title}</button>`
this.contractActionsContainerSingle = yo` this.contractActionsContainerSingle = yo`
<div class="${css.contractActionsContainerSingle}" > <div class="${css.contractActionsContainerSingle} run-instance-dropdown-top" >
${funcButton} ${funcButton}
${this.basicInputField} ${this.basicInputField}
<i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i> <i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i>
...@@ -146,14 +145,13 @@ class MultiParamManager { ...@@ -146,14 +145,13 @@ class MultiParamManager {
var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>` var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
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 run-instance-dropdown-content" >
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}"> <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader} run-instance-multi-header">
<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,12 +168,13 @@ class MultiParamManager { ...@@ -170,12 +168,13 @@ 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>`
var contractProperty = yo` var contractProperty = yo`
<div class="${css.contractProperty}"> <div class="${css.contractProperty} run-instance-dropdown">
${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti} ${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
</div> </div>
` `
......
src/app/ui/universal-dapp-ui.js
View file @ 4f498e5d
...@@ -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 ${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 run-instance-header">
<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>
...@@ -87,7 +87,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address ...@@ -87,7 +87,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
title.querySelector('.btn-group').appendChild(close) title.querySelector('.btn-group').appendChild(close)
var contractActionsWrapper = yo` var contractActionsWrapper = yo`
<div class="${css.cActionsWrapper}"> <div class="${css.cActionsWrapper} run-instance-content">
</div> </div>
` `
...@@ -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} expanded`)
// 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`)
...@@ -223,7 +223,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) { ...@@ -223,7 +223,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
self.blockchain.getInputs(args.funABI) self.blockchain.getInputs(args.funABI)
) )
const contractActionsContainer = yo`<div class="${css.contractActionsContainer}" >${multiParamManager.render()}</div>` const contractActionsContainer = yo`<div class="${css.contractActionsContainer} run-instance-container" >${multiParamManager.render()}</div>`
contractActionsContainer.appendChild(outputOverride) contractActionsContainer.appendChild(outputOverride)
return contractActionsContainer return contractActionsContainer
......
src/universal-dapp-styles.js
View file @ 4f498e5d
...@@ -9,31 +9,26 @@ var css = csjs` ...@@ -9,31 +9,26 @@ 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; margin-bottom: 8px;
padding-left: 0px; padding: 8px 10px;
padding-right: 10px;
}
.noInstancesText {
} }
.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; min-width: 170px;
width: 100%; width: 100%;
} }
.spanTitleText { .spanTitleText {
/* font-size: .8rem; */ line-height: 12px;
padding: 0;
font-size: 11px; font-size: 11px;
width:100%; width:100%;
} }
...@@ -44,7 +39,6 @@ var css = csjs` ...@@ -44,7 +39,6 @@ var css = csjs`
color: var(--primary); color: var(--primary);
} }
.titleExpander { .titleExpander {
/* margin-right: 10px; */
padding: 5px 7px; padding: 5px 7px;
} }
.nameNbuts { .nameNbuts {
...@@ -54,9 +48,7 @@ var css = csjs` ...@@ -54,9 +48,7 @@ var css = csjs`
} }
.instance { .instance {
display: block; display: block;
/* display: flex; */
flex-direction: column; flex-direction: column;
/* padding: 5px 0 0 10px; */
margin-bottom: 10px; margin-bottom: 10px;
} }
.instance.hidesub .title { .instance.hidesub .title {
...@@ -69,19 +61,21 @@ var css = csjs` ...@@ -69,19 +61,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: 0 10px 7px;
} }
.group:after { .group:after {
content: ""; content: "";
...@@ -93,11 +87,9 @@ var css = csjs` ...@@ -93,11 +87,9 @@ 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;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -107,14 +99,12 @@ var css = csjs` ...@@ -107,14 +99,12 @@ 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: 0 0 8px;
margin-top: 1em;
width:100%; width:100%;
} }
.contractProperty.hasArgs input { .contractProperty.hasArgs input {
...@@ -126,10 +116,8 @@ var css = csjs` ...@@ -126,10 +116,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 +127,6 @@ var css = csjs` ...@@ -139,7 +127,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,9 +136,6 @@ var css = csjs` ...@@ -149,9 +136,6 @@ 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;
...@@ -164,42 +148,44 @@ var css = csjs` ...@@ -164,42 +148,44 @@ var css = csjs`
border-bottom: 4px solid var(--light); border-bottom: 4px solid var(--light);
} }
.contractActionsContainer { .contractActionsContainer {
width: 98%; width: 100%;
} }
.contractActionsContainerSingle { .contractActionsContainerSingle {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.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); background-color: var(--light);
width: 99%;
border-radius: 3px; border-radius: 3px;
} }
.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 +205,26 @@ var css = csjs` ...@@ -219,26 +205,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 +238,12 @@ var css = csjs` ...@@ -252,12 +238,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;
...@@ -271,9 +257,7 @@ var css = csjs` ...@@ -271,9 +257,7 @@ var css = csjs`
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