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

update to runtab - cards in multiparam are a problem

Browse Source
pull/1/head
Rob Stupay 6 years ago committed by yann300
parent 30ab483fba
commit 7f3b4c2fab
9 changed files with 45 additions and 56 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      src/app/tabs/run-tab.js
  2. 2
      src/app/tabs/runTab/contractDropdown.js
  3. 4
      src/app/tabs/runTab/settings.js
  4. 35
      src/app/tabs/styles/run-tab-styles.js
  5. 9
      src/app/ui/card.js
  6. 18
      src/app/ui/styles/renderer-styles.js
  7. 4
      src/multiParamManager.js
  8. 25
      src/universal-dapp-styles.js
  9. 2
      src/universal-dapp-ui.js

2
src/app/tabs/run-tab.js
Unescape View File

@ -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()}

2
src/app/tabs/runTab/contractDropdown.js
Unescape View File

@ -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>`

4
src/app/tabs/runTab/settings.js
Unescape View File

@ -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 {
<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>

35
src/app/tabs/styles/run-tab-styles.js
Unescape View File

@ -1,5 +1,4 @@
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`
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`
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`
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`
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`
} }
.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`
.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 {

9
src/app/ui/card.js
Unescape View File

@ -1,7 +1,5 @@
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 {
// 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 {
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`
.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};
} }
` `

18
src/app/ui/styles/renderer-styles.js
Unescape View File

@ -1,8 +1,5 @@
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>
} }
.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

4
src/multiParamManager.js
Unescape View File

@ -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}

25
src/universal-dapp-styles.js
Unescape View File

@ -1,6 +1,4 @@
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`
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`
} }
.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`
} }
.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`
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`
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`
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`
} }
.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`
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;

2
src/universal-dapp-ui.js
Unescape View File

@ -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)

Write Preview
Loading…
Cancel
Save