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 {
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>
......
src/app/tabs/runTab/settings.js
View file @ 4f498e5d
......@@ -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}
......
src/app/tabs/styles/run-tab-styles.js
View file @ 4f498e5d
......@@ -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;
}
`
......
src/app/tabs/styles/settings-tab-styles.js
View file @ 4f498e5d
......@@ -49,8 +49,6 @@ const css = csjs`
margin-bottom: 3px;
}
input {
margin-right: 5px;
cursor: pointer;
width: inherit;
}
input[type=radio] {
......
src/app/udapp/run-tab.js
View file @ 4f498e5d
......@@ -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', [])}
......
src/app/ui/TreeView.js
View file @ 4f498e5d
......@@ -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) {
......
src/app/ui/card.js
View file @ 4f498e5d
......@@ -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 {
......
src/app/ui/multiParamManager.js
View file @ 4f498e5d
......@@ -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>
`
......
src/app/ui/universal-dapp-ui.js
View file @ 4f498e5d
......@@ -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
......
src/universal-dapp-styles.js
View file @ 4f498e5d
......@@ -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;
......
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