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>`
var el = yo`
<div>
<div class="list-group list-group-flush">
${this.settingsUI.render()}
${this.contractDropdownUI.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>`
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.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 class=${css.environment}>
${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"
title="Execution environment does not connect to any node, everything is local and in memory only."
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>
</div>
<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)}
<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>

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

@ -1,5 +1,4 @@
var csjs = require('csjs-inject')
const styles = require('../../ui/styles-guide/theme-chooser').chooser()
var css = csjs`
.runTabView {
@ -19,20 +18,18 @@ var css = csjs`
padding: 10px 15px 15px 15px;
}
.recorderCount {
border-radius: 50%;
margin-right: 30px;
min-width: 13px;
height: 13px;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
/* margin-right: 30px; */
/* min-width: 13px; */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
/* font-size: 10px; */
}
.crow {
margin-top: .5em;
display: flex;
align-items: center;
width: 500px;
/*width: 500px;*/
}
.col1 {
width: 30%;
@ -78,7 +75,7 @@ var css = csjs`
margin-bottom: 2%;
border: none;
text-align: center;
padding: 10px 0px 15px 15px;
padding: 10px 0px 15px 0px;
}
.pendingTxsContainer {
display: flex;
@ -133,6 +130,9 @@ var css = csjs`
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ataddressinput {
padding: .25rem;
}
.create {
}
.input {
@ -155,15 +155,15 @@ var css = csjs`
align-items: center;
}
.transact {
color: ${styles.colors.lightRed};
color: var(--warning);
margin-right: .3em;
}
.payable {
color: ${styles.colors.red};
color: var(--warning);
margin-right: .3em;
}
.call {
color: ${styles.colors.lightBlue};
color: var(--info);
margin-right: .3em;
}
.pendingContainer {
@ -185,14 +185,14 @@ var css = csjs`
}
.icon:hover {
font-size: 12px;
color: ${styles.rightPanel.runTab.icon_HoverColor};
color: var(--warning);
}
.errorIcon {
color: ${styles.appProperties.errorText_Color};
color: var(--danger);
margin-left: 15px;
}
.failDesc {
color: ${styles.appProperties.errorText_Color};
color: var(--warning);
padding-left: 10px;
display: inline;
}
@ -216,7 +216,6 @@ var css = csjs`
.transactionActions {
display: flex;
justify-content: space-evenly;
${styles.rightPanel.runTab.box_Info_RunTab};
width: 145px;
}
.orLabel {

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

@ -1,7 +1,5 @@
var yo = require('yo-yo')
var csjs = require('csjs-inject')
var styleGuide = require('./styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var EventManager = require('../../lib/events')
module.exports = class Card {
@ -45,7 +43,7 @@ module.exports = class Card {
// HTML
self._view.el = yo`
<div class=${css.cardContainer}>
<div class="list-group-item ${css.cardContainer}">
${self._view.cardHeader}
${self._view.cardBody}
</div>`
@ -57,7 +55,7 @@ module.exports = class Card {
const css = csjs`
.cardContainer {
${styles.remix.solidBox};
padding: 10px 15px 15px 0;
margin-bottom : 2%;
}
.cardHeader {
@ -74,18 +72,15 @@ const css = csjs`
.cardTitle {
font-size : 13px;
font-weight : bold;
color : ${styles.appProperties.mainText_Color};
margin-right : 5px;
}
.expandCollapseButton {}
.arrow {
color : ${styles.appProperties.icon_Color};
font-weight : bold;
cursor : pointer;
font-size : 14px;
}
.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 styleGuide = require('../styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = yo`<style>
.sol.success,
.sol.error,
@ -43,25 +40,20 @@ var css = yo`<style>
}
.sol.error {
background-color: ${styles.rightPanel.message_Error_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Error_BorderColor};
color: ${styles.rightPanel.message_Error_Color};
background-color: var(--danger);
color: var(--white);
}
.sol.warning {
background-color: ${styles.rightPanel.message_Warning_BackgroundColor};
color: ${styles.rightPanel.message_Warning_Color};
background-color: var(--warning);
}
.sol.staticAnalysisWarning {
background-color: ${styles.colors.lightViolet};
color: ${styles.colors.black};
background-color: var(--info);
}
.sol.success {
background-color: ${styles.rightPanel.message_Success_BackgroundColor};
border: .2em dotted ${styles.rightPanel.message_Success_BorderColor};
color: ${styles.rightPanel.message_Success_Color};
/* background-color: // styles.rightPanel.message_Success_BackgroundColor; */
}</style>`
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>`
this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
<div class="${css.contractActionsContainerMultiInner}" >
<div class="card ${css.contractActionsContainerMultiInner}" >
<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>
</div>
${this.multiFields}

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

@ -1,6 +1,4 @@
var csjs = require('csjs-inject')
var styleGuide = require('./app/ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.instanceTitleContainer {
@ -8,7 +6,6 @@ var css = csjs`
align-items: center;
}
.title {
${styles.rightPanel.runTab.titlebox_RunTab}
display: flex;
justify-content: space-between;
align-items: center;
@ -35,20 +32,24 @@ var css = csjs`
}
.title .copy {
color: ${styles.rightPanel.runTab.icon_AltColor_Instance_CopyToClipboard};
color: var(--primary);
}
.instance {
min-width: 310px;
display: flex;
flex-direction: column;
padding: 5px 0 0 10px;
margin-bottom: 10px;
}
.instance .title:before {
content: "\\25BE";
margin-right: 5%;
font-size: 2rem
}
.instance.hidesub .title:before {
content: "\\25B8";
margin-right: 5%;
font-size: 2rem;
}
.instance.hidesub > * {
display: none;
@ -80,7 +81,6 @@ var css = csjs`
}
.instanceButton {
border-radius: 3px;
border: .3px solid hsla(0, 82%, 82%, .5);
}
.closeIcon {
font-size: 12px;
@ -108,7 +108,7 @@ var css = csjs`
border-bottom-left-radius: 0;
}
.contractProperty button {
${styles.rightPanel.runTab.button_Create}
background-color: var(--warning);
min-width: 100px;
width: 100px;
font-size: 10px;
@ -121,7 +121,7 @@ var css = csjs`
border-color: lightgray;
}
.contractProperty.constant button {
${styles.rightPanel.runTab.button_Constant}
background-color:var(--info);
min-width: 100px;
width: 100px;
font-size: 10px;
@ -136,13 +136,12 @@ var css = csjs`
box-sizing: border-box;
float: left;
align-self: center;
color: ${styles.appProperties.mainText_Color};
margin-left: 4px;
}
.value ul {
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
border-bottom: 1px solid var(--info);
}
.contractActionsContainer {
width: 98%;
@ -157,9 +156,9 @@ var css = csjs`
}
.contractActionsContainerMultiInner {
margin-bottom: 10px;
border: 1px solid ${styles.appProperties.solidBorderBox_BorderColor};
border: 1px solid var(--info);
padding: 0px 5px 5px 0px;
background-color: ${styles.appProperties.primary_BackgroundColor};
background-color: var(--light);
width: 99%;
border-radius: 3px;
}
@ -240,6 +239,10 @@ var css = csjs`
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
height: 25px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hasArgs .contractActionsContainerMulti button {
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) {
var self = this
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 shortAddress = helper.shortenAddress(address)

Write Preview
Loading…
Cancel
Save