Skip to content

B
baas-ide
Commit 7f3b4c2f authored by Rob Stupay's avatar Rob Stupay Committed by yann300
Browse files
Options

update to runtab - cards in multiparam are a problem

parent 30ab483f
Show whitespace changes
Inline Side-by-side
Showing with 45 additions and 56 deletions
src/app/tabs/run-tab.js
View file @ 7f3b4c2f
...@@ -29,7 +29,7 @@ class RunTab { ...@@ -29,7 +29,7 @@ class RunTab {
this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>` this.container = yo`<div class="${css.runTabView}" id="runTabView" ></div>`
var el = yo` var el = yo`
<div> <div class="list-group list-group-flush">
${this.settingsUI.render()} ${this.settingsUI.render()}
${this.contractDropdownUI.render()} ${this.contractDropdownUI.render()}
${this.recorderCard.render()} ${this.recorderCard.render()}
......
src/app/tabs/runTab/contractDropdown.js
View file @ 7f3b4c2f
...@@ -47,7 +47,7 @@ class ContractDropdownUI { ...@@ -47,7 +47,7 @@ class ContractDropdownUI {
this.compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>` this.compFails = yo`<i title="Contract compilation failed. Please check the compile tab for more information." class="fa fa-times-circle ${css.errorIcon}" ></i>`
var info = yo`<i class="fa fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>` var info = yo`<i class="fa fa-info ${css.infoDeployAction}" aria-hidden="true" title="*.sol files allows deploying and accessing contracts. *.abi files only allows accessing contracts."></i>`
this.atAddressButtonInput = yo`<input class="${css.input} ataddressinput" placeholder="Load contract from Address" title="atAddress" />` this.atAddressButtonInput = yo`<input class="${css.input} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
this.selectContractNames = yo`<select class="${css.contractNames}" disabled></select>` this.selectContractNames = yo`<select class="${css.contractNames}" disabled></select>`
this.createPanel = yo`<div class="${css.button}"></div>` this.createPanel = yo`<div class="${css.button}"></div>`
......
src/app/tabs/runTab/settings.js
View file @ 7f3b4c2f
...@@ -49,7 +49,7 @@ class SettingsUI { ...@@ -49,7 +49,7 @@ class SettingsUI {
</div> </div>
<div class=${css.environment}> <div class=${css.environment}>
${this.netUI} ${this.netUI}
<select id="selectExEnvOptions" onchange=${() => { this.updateNetwork() }} class="${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."
value="vm" checked name="executionContext"> JavaScript VM value="vm" checked name="executionContext"> JavaScript VM
...@@ -76,7 +76,7 @@ class SettingsUI { ...@@ -76,7 +76,7 @@ class SettingsUI {
<i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i> <i class="fa fa-plus-circle ${css.icon}" aria-hidden="true" onclick=${this.newAccount.bind(this)} title="Create a new account"></i>
</div> </div>
<div class=${css.account}> <div class=${css.account}>
<select name="txorigin" class="${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 class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i> <i class="fa fa-pencil-square-o ${css.icon}" aria-hiden="true" onclick=${this.signMessage.bind(this)} title="Sign a message using this account key"></i>
</div> </div>
......
src/app/tabs/styles/run-tab-styles.js
View file @ 7f3b4c2f
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
const styles = require('../../ui/styles-guide/theme-chooser').chooser()
var css = csjs` var css = csjs`
.runTabView { .runTabView {
...@@ -19,20 +18,18 @@ var css = csjs` ...@@ -19,20 +18,18 @@ var css = csjs`
padding: 10px 15px 15px 15px; padding: 10px 15px 15px 15px;
} }
.recorderCount { .recorderCount {
border-radius: 50%; /* margin-right: 30px; */
margin-right: 30px; /* min-width: 13px; */
min-width: 13px; /* display: flex; */
height: 13px; /* justify-content: center; */
display: flex; /* align-items: center; */
justify-content: center; /* font-size: 10px; */
align-items: center;
font-size: 10px;
} }
.crow { .crow {
margin-top: .5em; margin-top: .5em;
display: flex; display: flex;
align-items: center; align-items: center;
width: 500px; /*width: 500px;*/
} }
.col1 { .col1 {
width: 30%; width: 30%;
...@@ -78,7 +75,7 @@ var css = csjs` ...@@ -78,7 +75,7 @@ var css = csjs`
margin-bottom: 2%; margin-bottom: 2%;
border: none; border: none;
text-align: center; text-align: center;
padding: 10px 0px 15px 15px; padding: 10px 0px 15px 0px;
} }
.pendingTxsContainer { .pendingTxsContainer {
display: flex; display: flex;
...@@ -133,6 +130,9 @@ var css = csjs` ...@@ -133,6 +130,9 @@ var css = csjs`
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.ataddressinput {
padding: .25rem;
}
.create { .create {
} }
.input { .input {
...@@ -155,15 +155,15 @@ var css = csjs` ...@@ -155,15 +155,15 @@ var css = csjs`
align-items: center; align-items: center;
} }
.transact { .transact {
color: ${styles.colors.lightRed}; color: var(--warning);
margin-right: .3em; margin-right: .3em;
} }
.payable { .payable {
color: ${styles.colors.red}; color: var(--warning);
margin-right: .3em; margin-right: .3em;
} }
.call { .call {
color: ${styles.colors.lightBlue}; color: var(--info);
margin-right: .3em; margin-right: .3em;
} }
.pendingContainer { .pendingContainer {
...@@ -185,14 +185,14 @@ var css = csjs` ...@@ -185,14 +185,14 @@ var css = csjs`
} }
.icon:hover { .icon:hover {
font-size: 12px; font-size: 12px;
color: ${styles.rightPanel.runTab.icon_HoverColor}; color: var(--warning);
} }
.errorIcon { .errorIcon {
color: ${styles.appProperties.errorText_Color}; color: var(--danger);
margin-left: 15px; margin-left: 15px;
} }
.failDesc { .failDesc {
color: ${styles.appProperties.errorText_Color}; color: var(--warning);
padding-left: 10px; padding-left: 10px;
display: inline; display: inline;
} }
...@@ -216,7 +216,6 @@ var css = csjs` ...@@ -216,7 +216,6 @@ var css = csjs`
.transactionActions { .transactionActions {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
${styles.rightPanel.runTab.box_Info_RunTab};
width: 145px; width: 145px;
} }
.orLabel { .orLabel {
......
src/app/ui/card.js
View file @ 7f3b4c2f
var yo = require('yo-yo') var yo = require('yo-yo')
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var EventManager = require('../../lib/events') var EventManager = require('../../lib/events')
module.exports = class Card { module.exports = class Card {
...@@ -45,7 +43,7 @@ module.exports = class Card { ...@@ -45,7 +43,7 @@ module.exports = class Card {
// HTML // HTML
self._view.el = yo` self._view.el = yo`
<div class=${css.cardContainer}> <div class="list-group-item ${css.cardContainer}">
${self._view.cardHeader} ${self._view.cardHeader}
${self._view.cardBody} ${self._view.cardBody}
</div>` </div>`
...@@ -57,7 +55,7 @@ module.exports = class Card { ...@@ -57,7 +55,7 @@ module.exports = class Card {
const css = csjs` const css = csjs`
.cardContainer { .cardContainer {
${styles.remix.solidBox}; padding: 10px 15px 15px 0;
margin-bottom : 2%; margin-bottom : 2%;
} }
.cardHeader { .cardHeader {
...@@ -74,18 +72,15 @@ const css = csjs` ...@@ -74,18 +72,15 @@ const css = csjs`
.cardTitle { .cardTitle {
font-size : 13px; font-size : 13px;
font-weight : bold; font-weight : bold;
color : ${styles.appProperties.mainText_Color};
margin-right : 5px; margin-right : 5px;
} }
.expandCollapseButton {} .expandCollapseButton {}
.arrow { .arrow {
color : ${styles.appProperties.icon_Color};
font-weight : bold; font-weight : bold;
cursor : pointer; cursor : pointer;
font-size : 14px; font-size : 14px;
} }
.arrow:hover { .arrow:hover {
color : ${styles.appProperties.icon_HoverColor};
} }
` `
src/app/ui/styles/renderer-styles.js
View file @ 7f3b4c2f
var yo = require('yo-yo') var yo = require('yo-yo')
var styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = yo`<style> var css = yo`<style>
.sol.success, .sol.success,
.sol.error, .sol.error,
...@@ -43,25 +40,20 @@ var css = yo`<style> ...@@ -43,25 +40,20 @@ var css = yo`<style>
} }
.sol.error { .sol.error {
background-color: ${styles.rightPanel.message_Error_BackgroundColor}; background-color: var(--danger);
border: .2em dotted ${styles.rightPanel.message_Error_BorderColor}; color: var(--white);
color: ${styles.rightPanel.message_Error_Color};
} }
.sol.warning { .sol.warning {
background-color: ${styles.rightPanel.message_Warning_BackgroundColor}; background-color: var(--warning);
color: ${styles.rightPanel.message_Warning_Color};
} }
.sol.staticAnalysisWarning { .sol.staticAnalysisWarning {
background-color: ${styles.colors.lightViolet}; background-color: var(--info);
color: ${styles.colors.black};
} }
.sol.success { .sol.success {
background-color: ${styles.rightPanel.message_Success_BackgroundColor}; /* background-color: // styles.rightPanel.message_Success_BackgroundColor; */
border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
color: ${styles.rightPanel.message_Success_Color};
}</style>` }</style>`
module.exports = css module.exports = css
src/multiParamManager.js
View file @ 7f3b4c2f
...@@ -142,9 +142,9 @@ class MultiParamManager { ...@@ -142,9 +142,9 @@ class MultiParamManager {
var button = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>` var button = 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}" > <div class="card ${css.contractActionsContainerMultiInner}" >
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}"> <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
<div class="${css.multiTitle}">${title}</div> <div class="card-title ${css.multiTitle}">${title}</div>
<i class='fa fa-angle-up ${css.methCaret}'></i> <i class='fa fa-angle-up ${css.methCaret}'></i>
</div> </div>
${this.multiFields} ${this.multiFields}
......
src/universal-dapp-styles.js
View file @ 7f3b4c2f
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
var styleGuide = require('./app/ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.instanceTitleContainer { .instanceTitleContainer {
...@@ -8,7 +6,6 @@ var css = csjs` ...@@ -8,7 +6,6 @@ var css = csjs`
align-items: center; align-items: center;
} }
.title { .title {
${styles.rightPanel.runTab.titlebox_RunTab}
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -35,20 +32,24 @@ var css = csjs` ...@@ -35,20 +32,24 @@ var css = csjs`
} }
.title .copy { .title .copy {
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard}; color: var(--primary);
} }
.instance { .instance {
min-width: 310px; min-width: 310px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 5px 0 0 10px;
margin-bottom: 10px;
} }
.instance .title:before { .instance .title:before {
content: "\\25BE"; content: "\\25BE";
margin-right: 5%; margin-right: 5%;
font-size: 2rem
} }
.instance.hidesub .title:before { .instance.hidesub .title:before {
content: "\\25B8"; content: "\\25B8";
margin-right: 5%; margin-right: 5%;
font-size: 2rem;
} }
.instance.hidesub > * { .instance.hidesub > * {
display: none; display: none;
...@@ -80,7 +81,6 @@ var css = csjs` ...@@ -80,7 +81,6 @@ var css = csjs`
} }
.instanceButton { .instanceButton {
border-radius: 3px; border-radius: 3px;
border: .3px solid hsla(0, 82%, 82%, .5);
} }
.closeIcon { .closeIcon {
font-size: 12px; font-size: 12px;
...@@ -108,7 +108,7 @@ var css = csjs` ...@@ -108,7 +108,7 @@ var css = csjs`
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.contractProperty button { .contractProperty button {
${styles.rightPanel.runTab.button_Create} background-color: var(--warning);
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;
font-size: 10px; font-size: 10px;
...@@ -121,7 +121,7 @@ var css = csjs` ...@@ -121,7 +121,7 @@ var css = csjs`
border-color: lightgray; border-color: lightgray;
} }
.contractProperty.constant button { .contractProperty.constant button {
${styles.rightPanel.runTab.button_Constant} background-color:var(--info);
min-width: 100px; min-width: 100px;
width: 100px; width: 100px;
font-size: 10px; font-size: 10px;
...@@ -136,13 +136,12 @@ var css = csjs` ...@@ -136,13 +136,12 @@ var css = csjs`
box-sizing: border-box; box-sizing: border-box;
float: left; float: left;
align-self: center; align-self: center;
color: ${styles.appProperties.mainText_Color};
margin-left: 4px; margin-left: 4px;
} }
.value ul { .value ul {
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor}; border-bottom: 1px solid var(--info);
} }
.contractActionsContainer { .contractActionsContainer {
width: 98%; width: 98%;
...@@ -157,9 +156,9 @@ var css = csjs` ...@@ -157,9 +156,9 @@ var css = csjs`
} }
.contractActionsContainerMultiInner { .contractActionsContainerMultiInner {
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor}; border: 1px solid var(--info);
padding: 0px 5px 5px 0px; padding: 0px 5px 5px 0px;
background-color: ${styles.appProperties.primary_BackgroundColor}; background-color: var(--light);
width: 99%; width: 99%;
border-radius: 3px; border-radius: 3px;
} }
...@@ -240,6 +239,10 @@ var css = csjs` ...@@ -240,6 +239,10 @@ var css = csjs`
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-right: 0; border-right: 0;
height: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.hasArgs .contractActionsContainerMulti button { .hasArgs .contractActionsContainerMulti button {
border-radius: 3px; border-radius: 3px;
......
src/universal-dapp-ui.js
View file @ 7f3b4c2f
...@@ -63,7 +63,7 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract ...@@ -63,7 +63,7 @@ UniversalDAppUI.prototype.renderInstance = function (contract, address, contract
UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) { UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address, contractName) {
var self = this var self = this
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex') address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
var instance = yo`<div class="instance ${css.instance} ${css.hidesub}" id="instance${address}"></div>` var instance = yo`<div class="instance card ${css.instance} ${css.hidesub}" id="instance${address}"></div>`
var context = self.udapp.context() var context = self.udapp.context()
var shortAddress = helper.shortenAddress(address) var shortAddress = helper.shortenAddress(address)
......
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