Skip to content

B
baas-ide
Commit f1400dd4 authored by LianaHus's avatar LianaHus
Browse files
Options

compile tab resizing

parent 680f3e85
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 32 deletions
src/app/tabs/compile-tab.js
View file @ f1400dd4
...@@ -181,7 +181,7 @@ class CompileTab extends CompilerApi { ...@@ -181,7 +181,7 @@ class CompileTab extends CompilerApi {
Compilation Details Compilation Details
</button> </button>
<!-- Copy to Clipboard --> <!-- Copy to Clipboard -->
<div class="${css.contractHelperButtons}"> <div class="${css.contractHelperButtons} btn-secondary">
<div class="input-group"> <div class="input-group">
<div class="input-group-prepend"> <div class="input-group-prepend">
<span class="input-group-text">Copy to clipboard</span> <span class="input-group-text">Copy to clipboard</span>
......
src/app/tabs/compileTab/compilerContainer.js
View file @ f1400dd4
...@@ -141,7 +141,7 @@ class CompilerContainer { ...@@ -141,7 +141,7 @@ class CompilerContainer {
<article> <article>
<header class="navbar navbar-light bg-light input-group mb-3"> <header class="navbar navbar-light bg-light input-group mb-3">
<div class="input-group-prepend"> <div class="input-group-prepend">
<label class="input-group-text" for="versionSelector">Compiler</label> <label class="input-group-text border-0" for="versionSelector">Compiler</label>
</div> </div>
${this._view.versionSelector} ${this._view.versionSelector}
</header> </header>
......
src/app/tabs/runTab/contractDropdown.js
View file @ f1400dd4
...@@ -61,14 +61,15 @@ class ContractDropdownUI { ...@@ -61,14 +61,15 @@ class ContractDropdownUI {
${this.createPanel} ${this.createPanel}
${this.orLabel} ${this.orLabel}
<div class="${css.button} ${css.atAddressSect}"> <div class="${css.button} ${css.atAddressSect}">
<div class="${css.atAddress} btn btn-sm btn-info" onclick=${this.loadFromAddress.bind(this)}>At Address</div> <div class="${css.atAddress} btn btn-sm btn-primary" onclick=${this.loadFromAddress.bind(this)}>At Address</div>
${this.atAddressButtonInput} ${this.atAddressButtonInput}
</div> </div>
</div> </div>
</div> </div>
` `
this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this)) this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
this.setInputParamsPlaceHolder()
return el return el
} }
...@@ -88,7 +89,7 @@ class ContractDropdownUI { ...@@ -88,7 +89,7 @@ class ContractDropdownUI {
this.orLabel.style.display = 'block' this.orLabel.style.display = 'block'
} }
} }
setInputParamsPlaceHolder () { setInputParamsPlaceHolder () {
this.createPanel.innerHTML = '' this.createPanel.innerHTML = ''
if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) { if (this.selectContractNames.selectedIndex < 0 || this.selectContractNames.children.length <= 0) {
......
src/app/tabs/runTab/settings.js
View file @ f1400dd4
...@@ -93,13 +93,15 @@ class SettingsUI { ...@@ -93,13 +93,15 @@ class SettingsUI {
var valueEl = yo` var valueEl = yo`
<div class="${css.crow}"> <div class="${css.crow}">
<div class="${css.col1_1}">Value</div> <div class="${css.col1_1}">Value</div>
<input type="text" class="form-control ${css.gasNval} ${css.col2_1}" id="value" value="0" title="Enter the value and choose the unit"> <div class="${css.gasValueContainer}">
<select name="unit" class="form-control ${css.gasNval} ${css.col2_2}" id="unit"> <input type="text" class="form-control ${css.gasNval} ${css.col2}" id="value" value="0" title="Enter the value and choose the unit">
<option data-unit="wei">wei</option> <select name="unit" class="form-control ${css.gasNvalUnit} ${css.col2_2}" id="unit">
<option data-unit="gwei">gwei</option> <option data-unit="wei">wei</option>
<option data-unit="finney">finney</option> <option data-unit="gwei">gwei</option>
<option data-unit="ether">ether</option> <option data-unit="finney">finney</option>
</select> <option data-unit="ether">ether</option>
</select>
</div>
</div> </div>
` `
......
src/app/tabs/styles/run-tab-styles.js
View file @ f1400dd4
...@@ -16,7 +16,7 @@ var css = csjs` ...@@ -16,7 +16,7 @@ var css = csjs`
} }
.settings { .settings {
margin-bottom: 2%; margin-bottom: 2%;
padding: 10px 15px 15px 15px; padding: 10px 0px 15px 15px;
} }
.recorderCount { .recorderCount {
/* margin-right: 30px; */ /* margin-right: 30px; */
...@@ -39,7 +39,6 @@ var css = csjs` ...@@ -39,7 +39,6 @@ var css = csjs`
} }
.col1_1 { .col1_1 {
font-size: 12px; font-size: 12px;
width: 15%;
min-width: 75px; min-width: 75px;
float: left; float: left;
align-self: center; align-self: center;
...@@ -48,12 +47,13 @@ var css = csjs` ...@@ -48,12 +47,13 @@ var css = csjs`
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
width: 259px; width: 100%;
padding-right: 25px;
} }
.account { .account {
display: flex; display: flex;
align-items: center; align-items: center;
width: 266px; width: 90%;
} }
.col2 { .col2 {
border-radius: 3px; border-radius: 3px;
...@@ -63,12 +63,14 @@ var css = csjs` ...@@ -63,12 +63,14 @@ var css = csjs`
min-width: 164px; min-width: 164px;
} }
.col2_2 { .col2_2 {
width: 82px; width: 100px;
min-width: 82px; min-width: 82px;
position: absolute;
margin-left: 100px;
} }
.select { .select {
font-weight: normal; font-weight: normal;
width: 250px; width: 100%;
} }
.instanceContainer { .instanceContainer {
display: flex; display: flex;
...@@ -86,7 +88,8 @@ var css = csjs` ...@@ -86,7 +88,8 @@ var css = csjs`
text-align: center; text-align: center;
} }
.container { .container {
margin-bottom: 2%; margin-bottom: 4%;
padding-left: 15px;
} }
.recorderCollapsedView, .recorderCollapsedView,
.recorderExpandedView { .recorderExpandedView {
...@@ -190,7 +193,7 @@ var css = csjs` ...@@ -190,7 +193,7 @@ var css = csjs`
color: var(--warning); color: var(--warning);
} }
.errorIcon { .errorIcon {
color: var(--danger); color: var(--warning);
margin-left: 15px; margin-left: 15px;
} }
.failDesc { .failDesc {
...@@ -206,7 +209,7 @@ var css = csjs` ...@@ -206,7 +209,7 @@ var css = csjs`
color: grey; color: grey;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-right: 28px; padding-right: 53px;
pointer-events: none; pointer-events: none;
} }
.networkItem { .networkItem {
...@@ -228,10 +231,20 @@ var css = csjs` ...@@ -228,10 +231,20 @@ var css = csjs`
font-size: 13px; font-size: 13px;
color: var(--info); color: var(--info);
} }
.gasValueContainer {
flex-direction: row;
display: flex;
}
.gasNval { .gasNval {
transform: scale(0.7); transform: scale(0.7);
transform-origin: left; transform-origin: left;
margin-right: 10px; margin-right: 10px;
width: 120px;
}
.gasNvalUnit {
transform: scale(0.7);
transform-origin: left;
margin-right: 10px;
} }
` `
......
src/multiParamManager.js
View file @ f1400dd4
...@@ -145,7 +145,7 @@ class MultiParamManager { ...@@ -145,7 +145,7 @@ 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="${css.contractActionsContainerMultiInner} text-dark" >
<div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}"> <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
<div class="${css.multiTitle}">${title}</div> <div class="${css.multiTitle}">${title}</div>
<i class='fa fa-angle-up ${css.methCaret}'></i> <i class='fa fa-angle-up ${css.methCaret}'></i>
...@@ -183,9 +183,9 @@ class MultiParamManager { ...@@ -183,9 +183,9 @@ class MultiParamManager {
this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-info') this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-info')
button.classList.add('btn-info') button.classList.add('btn-info')
} else { } else {
this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-warning') this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).classList.add('btn-primary')
button.innerHTML = 'transact' button.innerHTML = 'transact'
button.classList.add('btn-warning') button.classList.add('btn-primary')
} }
if (this.funABI.inputs && this.funABI.inputs.length > 0) { if (this.funABI.inputs && this.funABI.inputs.length > 0) {
......
src/universal-dapp-styles.js
View file @ f1400dd4
...@@ -101,13 +101,12 @@ var css = csjs` ...@@ -101,13 +101,12 @@ var css = csjs`
.contractProperty { .contractProperty {
overflow: auto; overflow: auto;
margin-bottom: 0.4em; margin-bottom: 0.4em;
margin-top: 1em;
width:100%; width:100%;
} }
.contractProperty.hasArgs input { .contractProperty.hasArgs input {
min-width: 200px;
padding: .36em; padding: .36em;
border-radius: 5px; border-radius: 5px;
width: 70%;
} }
.contractProperty .contractActionsContainerSingle input{ .contractProperty .contractActionsContainerSingle input{
border-top-left-radius: 0; border-top-left-radius: 0;
...@@ -136,7 +135,7 @@ var css = csjs` ...@@ -136,7 +135,7 @@ var css = csjs`
outline: none; outline: none;
} }
.contractProperty input { .contractProperty input {
width: 75% /* width: 75% */
} }
.contractProperty > .value { .contractProperty > .value {
box-sizing: border-box; box-sizing: border-box;
...@@ -187,7 +186,7 @@ var css = csjs` ...@@ -187,7 +186,7 @@ var css = csjs`
cursor: default; cursor: default;
} }
.contractProperty .contractActionsContainerMultiInner .multiArg label{ .contractProperty .contractActionsContainerMultiInner .multiArg label{
text-align: center; text-align: right;
} }
.multiHeader .methCaret { .multiHeader .methCaret {
float: right; float: right;
...@@ -205,6 +204,7 @@ var css = csjs` ...@@ -205,6 +204,7 @@ var css = csjs`
} }
.multiArg { .multiArg {
margin-bottom: 8px; margin-bottom: 8px;
display: flex;
} }
.multiArg input{ .multiArg input{
padding: 5px; padding: 5px;
...@@ -214,12 +214,12 @@ var css = csjs` ...@@ -214,12 +214,12 @@ var css = csjs`
float: left; float: left;
margin-right: 6px; margin-right: 6px;
font-size: 10px; font-size: 10px;
width: 20%; min-width: 30%;
} }
.multiArg button { .multiArg button {
border-radius: 3px; border-radius: 3px;
float: right; float: right;
margin-right: 5%; margin-right: 2%;
font-size: 10px; font-size: 10px;
border-width: 1px; border-width: 1px;
width: inherit; width: inherit;
...@@ -230,6 +230,7 @@ var css = csjs` ...@@ -230,6 +230,7 @@ var css = csjs`
} }
.hasArgs .multiArg input { .hasArgs .multiArg input {
border-left: 1px solid #dddddd; border-left: 1px solid #dddddd;
width: 100%;
} }
.hasArgs input { .hasArgs input {
display: block; display: block;
...@@ -244,7 +245,7 @@ var css = csjs` ...@@ -244,7 +245,7 @@ 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; */ height: 25px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -253,7 +254,7 @@ var css = csjs` ...@@ -253,7 +254,7 @@ var css = csjs`
border-radius: 3px; border-radius: 3px;
} }
.contractActionsContainerMultiInner .multiArg i { .contractActionsContainerMultiInner .multiArg i {
padding-right: 26px; padding-right: 15px;
padding-top: 5px; padding-top: 5px;
float: right; float: right;
}, },
......
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