Skip to content

Commit

Permalink
Merge pull request #2118 from ethereum/styleFixes_l
Browse files Browse the repository at this point in the history 
Style fixes for landing and deploy&run
  • Loading branch information
@yann300
yann300 committed Jun 27, 2019
2 parents 2772c4a + 26a3d75 commit b257444
Show file tree
Hide file tree
Showing 7 changed files with 92 additions and 43 deletions.
66 changes: 47 additions & 19 deletions src/app/debugger/debuggerUI/TxBrowser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,30 +84,47 @@ TxBrowser.prototype.setState = function (state) {

TxBrowser.prototype.render = function () {
var self = this
let action = yo`<button class='btn btn-primary btn-sm ${css.txbutton}' id='load' title='${this.state.debugging ? 'Stop' : 'Start'} debugging' onclick=${function () { self.submit() }}>${this.state.debugging ? 'Stop' : 'Start'} debugging</button>`
var view = yo`<div class="${css.container}">
<div class="${css.txContainer}">
<div class="${css.txinputs} p-1 input-group">
<input
value="${this.state.txNumber || ''}"
class="form-control m-0 ${css.txinput}"
id='txinput'
onkeyup=${function () { self.updateTxN(arguments[0]) }}
type='text'
placeholder=${'Transaction hash'}
/>
</div>
<div class="${css.txbuttons} btn-group p-1">
${action}
</div>
this.state.txNumberInput = yo`
<input
value="${this.state.txNumber || ''}"
class="form-control m-0 ${css.txinput}"
id='txinput'
onkeyup=${function () { self.updateTxN(arguments[0]) }}
type='text'
oninput=${this.txInputChanged.bind(this)}
placeholder=${'Transaction hash, should start with 0x'}
/>
`
let txButton = yo`
<button
class='btn btn-primary btn-sm ${css.txbutton}'
id='load'
title='${this.state.debugging ? 'Stop' : 'Start'} debugging'
onclick=${function () { self.submit() }}
>
${this.state.debugging ? 'Stop' : 'Start'} debugging
</button>
`
var view = yo`
<div class="${css.container}">
<div class="${css.txContainer}">
<div class="${css.txinputs} p-1 input-group">
${this.state.txNumberInput}
</div>
<span id='error'></span>
</div>`
<div class="${css.txbuttons} btn-group p-1">
${txButton}
</div>
</div>
<span id='error'></span>
</div>
`
if (this.state.debugging) {
view.querySelectorAll('input').forEach(element => { element.setAttribute('disabled', '') })
}
if (!this.state.txNumber) {
action.setAttribute('disabled', 'disabled')
view.querySelector("button[id='load']").setAttribute('disabled', '')
} else {
this.state.txNumberInput.removeAttribute('diabled', '')
}
if (!this.view) {
this.view = view
Expand All @@ -116,4 +133,15 @@ TxBrowser.prototype.render = function () {
return view
}

TxBrowser.prototype.txInputChanged = function (event) {
// todo check validation of txnumber in the input element, use
// required
// oninvalid="setCustomValidity('Please provide a valid transaction number, must start with 0x and have length of 22')"
// pattern="^0[x,X]+[0-9a-fA-F]{22}"
// this.state.txNumberInput.setCustomValidity('')

this.state.txNumber = event.target.value
yo.update(this.view, this.render())
}

module.exports = TxBrowser
15 changes: 8 additions & 7 deletions src/app/files/file-explorer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,15 +157,16 @@ function fileExplorer (localRegistry, files, menuItems) {
var isRoot = data.path === self.files.type
return yo`
<div class="${css.items}">
<label
<span
title="${data.path}"
class="${css.label} ${!isRoot ? css.leaf : ''}"
data-path="${data.path}"
style="${isRoot ? 'font-weight:bold;' : ''}"
onkeydown=${editModeOff}
onblur=${editModeOff}
>${key.split('/').pop()}
</label>
>
${key.split('/').pop()}
</span>
${isRoot ? self.renderMenuItems() : ''}
</div>
`
Expand All @@ -179,7 +180,7 @@ function fileExplorer (localRegistry, files, menuItems) {
MENU_HANDLE = contextMenu(event, {
'Rename': () => {
if (self.files.readonly) { return tooltip('cannot rename folder. ' + self.files.type + ' is a read only explorer') }
var name = label.querySelector('label[data-path="' + key + '"]')
var name = label.querySelector('span[data-path="' + key + '"]')
if (name) editModeOn(name)
},
'Delete': () => {
Expand All @@ -196,7 +197,7 @@ function fileExplorer (localRegistry, files, menuItems) {
if (!self.files.readonly) {
actions['Rename'] = () => {
if (self.files.readonly) { return tooltip('cannot rename file. ' + self.files.type + ' is a read only explorer') }
var name = label.querySelector('label[data-path="' + key + '"]')
var name = label.querySelector('span[data-path="' + key + '"]')
if (name) editModeOn(name)
}
actions['Delete'] = () => {
Expand Down Expand Up @@ -522,12 +523,12 @@ fileExplorer.prototype.renderMenuItems = function () {
items = this.menuItems.map(({action, title, icon}) => {
if (action === 'uploadFile') {
return yo`
<span class="${icon} ${css.newFile}" title="${title}">
<label class="${icon} ${css.newFile}" title="${title}">
<input type="file" onchange=${(event) => {
event.stopPropagation()
this.uploadFile(event)
}} multiple />
</span>
</label>
`
} else {
return yo`
Expand Down
2 changes: 1 addition & 1 deletion src/app/panels/file-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ module.exports = class Filepanel extends BaseApi {
return yo`
<div class=${css.container}>
<div class="${css.fileexplorer}">
<div>
<div class="${css.fileExplorerTree}">
<div class=${css.treeview}>${fileExplorer.init()}</div>
<div class="filesystemexplorer ${css.treeview}">${fileSystemExplorer.init()}</div>
<div class="swarmexplorer ${css.treeview}">${swarmExplorer.init()}</div>
Expand Down
3 changes: 3 additions & 0 deletions src/app/panels/styles/file-panel-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ var css = csjs`
padding-left : 6px;
padding-top : 6px;
}
.fileExplorerTree {
cursor : default;
}
.gist {
padding : 10px;
}
Expand Down
18 changes: 15 additions & 3 deletions src/app/tabs/runTab/contractDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,13 @@ class ContractDropdownUI {
this.compFails = yo`<i title="No contract compiled yet or compilation failed. Please check the compile tab for more information." class="fas fa-times-circle ${css.errorIcon}" ></i>`
var info = yo`<i class="fas 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} ${css.ataddressinput} ataddressinput form-control" placeholder="Load contract from Address" title="atAddress" />`
this.atAddress = yo`<button class="${css.atAddress} btn btn-sm btn-info" disabled id="runAndDeployAtAdressButton" onclick=${this.loadFromAddress.bind(this)}>At Address</button>`
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.orLabel = yo`<div class="${css.orLabel}">or</div>`
var el = yo`
let el = yo`
<div class="${css.container}">
<div class="${css.subcontainer}">
${this.selectContractNames} ${this.compFails} ${info}
Expand All @@ -61,17 +62,28 @@ class ContractDropdownUI {
${this.createPanel}
${this.orLabel}
<div class="${css.button} ${css.atAddressSect}">
<div class="${css.atAddress} btn btn-sm btn-info" onclick=${this.loadFromAddress.bind(this)}>At Address</div>
${this.atAddress}
${this.atAddressButtonInput}
</div>
</div>
</div>
`
this.selectContractNames.addEventListener('change', this.setInputParamsPlaceHolder.bind(this))
this.setInputParamsPlaceHolder()
if (!this.el) {
this.el = el
}
return el
}

atAddressChanged (event) {
if (!this.atAddressButtonInput.value) {
this.atAddress.setAttribute('disabled', 'true')
} else {
this.atAddress.removeAttribute('disabled')
}
}

changeCurrentFile (currentFile) {
if (!document.querySelector(`.${css.contractNames}`)) return
document.querySelector(`.${css.contractNames}`).classList.remove(css.contractNamesError)
Expand Down
29 changes: 17 additions & 12 deletions src/app/ui/landing-page/landing-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,23 +38,24 @@ let css = csjs`
.jumboBtnContainer {
float: left;
padding-top: 15px;
display: flex;
white-space: nowrap;
}
.headlineContainer {
float: left;
padding-top: 17px;
margin: 0 50px 0 70px;
}
.hpSections {
min-width: 640px;
margin: 0 60px;
}
.solidityBtn {
margin-right: 40px;
}
.labelIt {
margin-bottom: 0;
}
.seeAll {
margin-top: 7px;
white-space: nowrap;
}
.importFrom p {
margin-right: 10px;
Expand All @@ -66,10 +67,9 @@ let css = csjs`
.logoContainer img{
height: 65px;
}
.learnmore {
margin-right: 20px;
.enviroments {
display: flex;
}
}
`

Expand Down Expand Up @@ -193,18 +193,18 @@ export class LandingPage extends BaseApi {
<div class="${css.headlineContainer}">
<h2 class="">The new layout has arrived</h2>
</div>
<div class="${css.jumboBtnContainer}">
<button class="btn btn-primary btn-lg ${css.learnmore}" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
<div class="${css.jumboBtnContainer} px-5">
<button class="btn btn-primary btn-lg mx-3" href="#" onclick=${() => { learnMore() }} role="button">Learn more</button>
<button class="btn btn-secondary btn-lg" onclick=${() => { switchToPreviousVersion() }}>Use previous version</button>
</div>
</div><!-- end of jumbotron -->
</div><!-- end of jumbotron container -->
<div class="row ${css.hpSections}">
<div id="col1" class="col-sm-6">
<div class="environment mb-5">
<div class="mb-5">
<h4>Environments</h4>
<div>
<button class="btn btn-lg btn-secondary ${css.solidityBtn}" onclick=${() => { startSolidity() }}>Solidity</button>
<div class="${css.enviroments} pt-2">
<button class="btn btn-lg btn-secondary mr-3" onclick=${() => { startSolidity() }}>Solidity</button>
<button class="btn btn-lg btn-secondary" onclick=${() => { startVyper() }}>Vyper</button>
</div>
</div>
Expand Down Expand Up @@ -240,7 +240,12 @@ export class LandingPage extends BaseApi {
<h4>Featured Plugins</h4>
<p class="mb-1 ${css.text}" onclick=${() => { startPipeline() }}>Pipeline</p>
<p class="mb-1 ${css.text}" onclick=${() => { startDebugger() }}>Debugger</p>
<p class="mb-1"><button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">See all Plugins <i class="fas fa-plug" ></i></button></p>
<p class="mb-1">
<button onclick=${() => { startPluginManager() }} class="btn btn-sm btn-secondary ${css.seeAll}">
See all Plugins
<i class="fas fa-plug p-1" ></i>
</button>
</p>
</div>
<div class="resources">
<h4>Resources</h4>
Expand Down
2 changes: 1 addition & 1 deletion test-browser/commands/addAtAddressInstance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ class addAtAddressInstance extends EventEmitter {

function addInstance (browser, address, isValidFormat, isValidChecksum, callback) {
browser.clickLaunchIcon('run').clearValue('.ataddressinput').setValue('.ataddressinput', address, function () {
browser.click('div[class^="atAddress"]')
browser.click('button[id^="runAndDeployAtAdressButton"]')
.execute(function () {
var ret = document.querySelector('div[class^="modal-body"] div').innerHTML
document.querySelector('#modal-footer-ok').click()
Expand Down

0 comments on commit b257444

Please sign in to comment.