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

Style deploy & run tab

Browse Source
pull/5370/head
alexcherman 5 years ago committed by Rob Stupay
parent d1eed8dfc9
commit 6d49f6db35
10 changed files with 124 additions and 131 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. 5
      src/app/tabs/runTab/contractDropdown.js
  2. 18
      src/app/tabs/runTab/settings.js
  3. 80
      src/app/tabs/styles/run-tab-styles.js
  4. 2
      src/app/tabs/styles/settings-tab-styles.js
  5. 6
      src/app/udapp/run-tab.js
  6. 5
      src/app/ui/TreeView.js
  7. 16
      src/app/ui/card.js
  8. 17
      src/app/ui/multiParamManager.js
  9. 10
      src/app/ui/universal-dapp-ui.js
  10. 96
      src/universal-dapp-styles.js

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

@ -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.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>`
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}">
${this.selectContractNames} ${this.compFails} ${info}
</div>

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

@ -56,10 +56,10 @@ class SettingsUI {
var environmentEl = yo`
<div class="${css.crow}">
<div id="selectExEnv" class="${css.col1_1}">
<div id="selectExEnv" class="${css.settingsLabel} form-control-label">
Environment
</div>
<div class=${css.environment}>
<div class="${css.environment}">
<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."
@ -81,7 +81,7 @@ class SettingsUI {
`
const networkEl = yo`
<div class="${css.crow}">
<div class="${css.col1_1}">
<div class="${css.settingsLabel}">
</div>
<div class="${css.environment}">
${this.netUI}
@ -90,13 +90,13 @@ class SettingsUI {
`
const accountEl = yo`
<div class="${css.crow}">
<div class="${css.col1_1}">
<div class="${css.settingsLabel} form-control-label">
Account
<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>
</span>
</div>
<div class=${css.account}>
<div class="${css.account}">
<select name="txorigin" class="form-control ${css.select}" id="txorigin"></select>
${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>
@ -106,17 +106,17 @@ class SettingsUI {
const gasPriceEl = yo`
<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">
</div>
`
const valueEl = yo`
<div class="${css.crow}">
<div class="${css.col1_1}">Value</div>
<div class="${css.settingsLabel} form-control-label">Value</div>
<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">
<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="gwei">gwei</option>
<option data-unit="finney">finney</option>
@ -127,7 +127,7 @@ class SettingsUI {
`
const el = yo`
<div class="${css.settings}">
<div class="${css.settings} module-section">
${environmentEl}
${networkEl}
${accountEl}

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

@ -6,17 +6,16 @@ var css = csjs`
flex-direction: column;
}
.instanceContainerTitle {
font-weight: bold;
margin-bottom: 25px;
font-size: 12px;
display: flex;
justify-content: space-between;
padding-left: 15px;
height: 0px;
align-items: center;
padding-left: 10px;
margin: 0 0 16px;
font-size: 14px;
line-height: 19px;
}
.settings {
margin-bottom: 2%;
padding: 10px 0px 15px 15px;
padding: 16px 24px;
}
.recorderCount {
/* margin-right: 30px; */
@ -27,33 +26,34 @@ var css = csjs`
/* font-size: 10px; */
}
.crow {
margin-top: .5em;
display: flex;
align-items: center;
/*width: 500px;*/
display: block;
margin-top: 8px;
}
.col1 {
width: 30%;
float: left;
align-self: center;
}
.col1_1 {
font-size: 12px;
min-width: 75px;
float: left;
align-self: center;
.settingsLabel {
font-size: 11px;
margin-bottom: 4px;
text-transform: uppercase;
}
.environment {
display: flex;
align-items: center;
position: relative;
width: 100%;
padding-right: 25px;
}
.environment a {
margin-left: 7px;
}
.account {
display: flex;
align-items: center;
width: 90%;
}
.account i {
margin-left: 12px;
}
.col2 {
border-radius: 3px;
@ -74,7 +74,7 @@ var css = csjs`
margin-bottom: 2%;
border: none;
text-align: center;
padding: 10px 0px 15px 0px;
padding: 16px 14px;
}
.pendingTxsContainer {
display: flex;
@ -84,8 +84,7 @@ var css = csjs`
text-align: center;
}
.container {
margin-bottom: 4%;
padding-left: 15px;
padding: 16px 24px;
}
.recorderCollapsedView,
.recorderExpandedView {
@ -104,7 +103,14 @@ var css = csjs`
.subcontainer {
display: flex;
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{
flex: none;
@ -127,13 +133,13 @@ var css = csjs`
border-right: 0;
}
.atAddressSect {
margin-top: 6px;
margin-top: 8px;
height: 32px;
}
.atAddressSect input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
height: 100%;
height: 32px;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.ataddressinput {
padding: .25rem;
@ -141,7 +147,7 @@ var css = csjs`
.create {
}
.input {
font-size: 10px;
font-size: 10px !important;
}
.noInstancesText {
font-style: italic;
@ -209,10 +215,11 @@ var css = csjs`
width: 145px;
}
.orLabel {
margin-left: 44px;
text-align: center;
text-transform: uppercase;
}
.infoDeployAction {
margin-left: 5px;
margin-left: 1px;
font-size: 13px;
color: var(--info);
}
@ -221,18 +228,17 @@ var css = csjs`
display: flex;
}
.gasNval {
/* transform: scale(0.7); */
/* transform-origin: left; */
margin-right: 10px;
width: 100px;
width: 55%;
font-size: 0.8rem;
}
.gasNvalUnit {
/* transform: scale(0.7); */
/* transform-origin: left; */
margin-right: 10px;
width: 41%;
margin-left: 10px;
font-size: 0.8rem;
width: 70px;
}
.deployDropdown {
text-align: center;
text-transform: uppercase;
}
`

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

@ -49,8 +49,6 @@ const css = csjs`
margin-bottom: 3px;
}
input {
margin-right: 5px;
cursor: pointer;
width: inherit;
}
input[type=radio] {

6
src/app/udapp/run-tab.js
Unescape View File

@ -47,7 +47,7 @@ export class RunTab extends LibraryPlugin {
}
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`
<div class="list-group list-group-flush">
@ -62,10 +62,10 @@ export class RunTab extends LibraryPlugin {
}
renderInstanceContainer () {
this.instanceContainer = yo`<div class="${css.instanceContainer}"></div>`
this.instanceContainer = yo`<div class="${css.instanceContainer} run-instance-section"></div>`
const instanceContainerTitle = yo`
<div class=${css.instanceContainerTitle}
<div class="${css.instanceContainerTitle} run-instance-title"
title="Autogenerated generic user interfaces for interaction with deployed contracts">
Deployed Contracts
<i class="${css.clearinstance} ${css.icon} far fa-trash-alt" onclick=${() => this.event.trigger('clearInstance', [])}

5
src/app/ui/TreeView.js
Unescape View File

@ -13,6 +13,9 @@ var css = csjs`
}
.ul_tv {
list-style-type: none;
margin: 0;
padding: 0;
border: none;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
@ -74,7 +77,7 @@ class TreeView {
var children = Object.keys(json).map((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) {

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

@ -24,7 +24,7 @@ module.exports = class Card {
self._view.statusBar = yo`<div class=${css.statusBar}>${self._opts.collapsedView}</div>`
self._view.cardHeader = yo`
<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>
${self._view.statusBar}
</div>
@ -43,7 +43,7 @@ module.exports = class Card {
// HTML
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.cardBody}
</div>`
@ -55,12 +55,13 @@ module.exports = class Card {
const css = csjs`
.cardContainer {
padding : 10px 15px 15px 0;
margin-bottom : 2%;
padding : 16px 24px;
margin : 0;
}
.cardHeader {
display : flex;
justify-content : space-between;
align-items : center;
}
.statusBar {}
.cardBody {}
@ -70,9 +71,10 @@ const css = csjs`
align-items : center;
}
.cardTitle {
font-size : 13px;
font-weight : bold;
margin-right : 5px;
font-size : 14px;
font-weight : 400;
margin-right : 8px;
line-height : 19px;
}
.expandCollapseButton {}
.arrow {

17
src/app/ui/multiParamManager.js
Unescape View File

@ -100,7 +100,7 @@ class MultiParamManager {
if (this.funABI.inputs) {
return yo`<div>
${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>`
}
@ -116,17 +116,16 @@ class MultiParamManager {
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('title', this.inputs)
this.basicInputField.setAttribute('style', 'flex: 4')
var onClick = () => {
this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
}
let funcButton = yo`<button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">${title}</button>`
this.contractActionsContainerSingle = yo`
<div class="${css.contractActionsContainerSingle}" >
<div class="${css.contractActionsContainerSingle} run-instance-dropdown-top" >
${funcButton}
${this.basicInputField}
<i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i>
@ -146,14 +145,13 @@ class MultiParamManager {
var expandedButton = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
<div class="${css.contractActionsContainerMultiInner} text-dark" >
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
<div class="${css.multiTitle}">${title}</div>
<div class="${css.contractActionsContainerMultiInner} text-dark run-instance-dropdown-content" >
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader} run-instance-multi-header">
<div class="${css.multiTitle} run-instance-multi-title">${title}</div>
<i class='fas fa-angle-up ${css.methCaret}'></i>
</div>
${this.multiFields}
<div class="${css.group} ${css.multiArg}" >
${expandedButton}
${copyToClipboard(
() => {
var multiString = this.getMultiValsString()
@ -170,12 +168,13 @@ class MultiParamManager {
return encodeObj.data
}
}, 'Encode values of input fields & copy to clipboard', 'fa-clipboard')}
${expandedButton}
</div>
</div>
</div>`
var contractProperty = yo`
<div class="${css.contractProperty}">
<div class="${css.contractProperty} run-instance-dropdown">
${this.contractActionsContainerSingle} ${this.contractActionsContainerMulti}
</div>
`

10
src/app/ui/universal-dapp-ui.js
Unescape View File

@ -54,12 +54,12 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
let self = this
address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
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()
var shortAddress = helper.shortenAddress(address)
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) }}">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
@ -87,7 +87,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
title.querySelector('.btn-group').appendChild(close)
var contractActionsWrapper = yo`
<div class="${css.cActionsWrapper}">
<div class="${css.cActionsWrapper} run-instance-content">
</div>
`
@ -97,7 +97,7 @@ UniversalDAppUI.prototype.renderInstanceFromABI = function (contractABI, address
}
function toggleClass (e) {
$(instance).toggleClass(`${css.hidesub}`)
$(instance).toggleClass(`${css.hidesub} expanded`)
// e.currentTarget.querySelector('i')
e.currentTarget.querySelector('i').classList.toggle(`fa-angle-right`)
e.currentTarget.querySelector('i').classList.toggle(`fa-angle-down`)
@ -223,7 +223,7 @@ UniversalDAppUI.prototype.getCallButton = function (args) {
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)
return contractActionsContainer

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

@ -9,31 +9,26 @@ var css = csjs`
display: flex;
justify-content: space-between;
font-size: 11px;
/* height: 30px; */
width: 100%;
overflow: hidden;
word-break: break-word;
line-height: initial;
overflow: visible;
margin-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
}
.noInstancesText {
margin-bottom: 8px;
padding: 8px 10px;
}
.titleLine {
display: flex;
align-items: baseline;
}
.titleText {
/* margin-right: 1em; */
word-break: break-word;
min-width: 170px;
width: 100%;
}
.spanTitleText {
/* font-size: .8rem; */
line-height: 12px;
padding: 0;
font-size: 11px;
width:100%;
}
@ -44,7 +39,6 @@ var css = csjs`
color: var(--primary);
}
.titleExpander {
/* margin-right: 10px; */
padding: 5px 7px;
}
.nameNbuts {
@ -54,9 +48,7 @@ var css = csjs`
}
.instance {
display: block;
/* display: flex; */
flex-direction: column;
/* padding: 5px 0 0 10px; */
margin-bottom: 10px;
}
.instance.hidesub .title {
@ -69,19 +61,21 @@ var css = csjs`
display: none;
}
.methCaret {
margin-right: 5px;
min-width: 12px;
width: 12px;
margin-left: 4px;
cursor: pointer;
font-size: 16px;
padding-top: 5px;
vertical-align: top;
line-height: 0.6;
vertical-align: middle;
padding: 0;
}
.cActionsWrapper {
padding: 0px 0 10px 10px;
border: 1px solid rgba(0,0,0,0.125);
border-top-left-radius: 0;
border-bottom-left-radius: 0.25rem;
border-top-rightt-radius: 0;
border-bottom-right-radius: 0.25rem;
padding: 0 10px 7px;
}
.group:after {
content: "";
@ -93,11 +87,9 @@ var css = csjs`
display: flex;
overflow: hidden;
}
.contractActions {
}
.instanceButton {
height: 32px;
border-radius: 3px;
flex: 3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@ -107,14 +99,12 @@ var css = csjs`
cursor: pointer;
margin-left: 5px;
}
.udapp {}
.udappClose {
display: flex;
justify-content: flex-end;
}
.contractProperty {
margin-bottom: 0.4em;
margin-top: 1em;
margin: 0 0 8px;
width:100%;
}
.contractProperty.hasArgs input {
@ -126,10 +116,8 @@ var css = csjs`
border-bottom-left-radius: 0;
}
.contractProperty button {
/* background-color: var(--warning); */
min-width: 100px;
width: 100px;
/* font-size: 10px; */
margin:0;
word-break: inherit;
}
@ -139,7 +127,6 @@ var css = csjs`
border-color: lightgray;
}
.contractProperty.constant button {
/* background-color:var(--info); */
min-width: 100px;
width: 100px;
margin:0;
@ -149,9 +136,6 @@ var css = csjs`
overflow: hidden;
text-overflow: ellipsis;
}
.contractProperty input {
/* width: 75% */
}
.contractProperty > .value {
box-sizing: border-box;
float: left;
@ -164,42 +148,44 @@ var css = csjs`
border-bottom: 4px solid var(--light);
}
.contractActionsContainer {
width: 98%;
width: 100%;
}
.contractActionsContainerSingle {
display: flex;
width: 100%;
}
.contractActionsContainerSingle i {
line-height: 2;
}
.contractActionsContainerMulti {
display:none;
width: 100%;
}
.contractActionsContainerMultiInner {
margin-bottom: 10px;
padding: 0px 5px 5px 5px;
width: 100%;
padding: 16px 8px 16px 14px;
background-color: var(--light);
width: 99%;
border-radius: 3px;
}
.multiHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
text-align: left;
font-size: 10px;
margin-bottom: 5px;
font-weight: bold;
}
.contractActionsContainerMultiInner .multiTitle {
padding-left: 10px;
}
.contractProperty .multiTitle {
padding: 0;
line-height: 16px;
display: inline-block;
width: 90%;
font-size: 12px;
height: 25px;
padding-left: 20px;
font-weight: bold;
line-height: 25px;
cursor: default;
padding-top: 5px;
}
.contractProperty .contractActionsContainerMultiInner .multiArg label{
text-align: right;
@ -219,26 +205,26 @@ var css = csjs`
cursor: default;
}
.multiArg {
margin-bottom: 8px;
/* display: flex; */
clear:both;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 4px;
}
.multiArg input{
padding: 5px;
}
.multiArg label {
float: left;
margin-right: 6px;
font-size: 10px;
width: 30%;
padding-top: 5px;
word-break: break-all;
width: auto;
padding: 0;
margin: 0 4px 0 0;
font-size: 10px;
line-height: 12px;
text-align: right;
word-break: initial;
}
.multiArg button {
max-width: 100px;
border-radius: 3px;
float: right;
margin-right: 2%;
border-width: 1px;
width: inherit;
}
@ -252,12 +238,12 @@ var css = csjs`
}
.hasArgs input {
display: block;
height: 32px;
border: 1px solid #dddddd;
padding: .36em;
border-left: none;
padding: 8px 8px 8px 10px;
font-size: 10px;
/* height: 25px; */
font-size: 10px !important;
}
.hasArgs button {
border-top-right-radius: 0;
@ -271,9 +257,7 @@ var css = csjs`
border-radius: 3px;
}
.contractActionsContainerMultiInner .multiArg i {
padding-right: 15px;
padding-top: 5px;
float: right;
padding-right: 10px;
},
.hideWarningsContainer {
display: flex;

Write Preview
Loading…
Cancel
Save