Skip to content

Commit

Permalink
Merge pull request ethereum#2247 from ethereum/toasterIssue
Browse files Browse the repository at this point in the history
use flexbox instead of fixed positions
  • Loading branch information
yann300 authored Aug 13, 2019
2 parents 2ab213b + 97cd3b3 commit 2b48c31
Show file tree
Hide file tree
Showing 7 changed files with 24 additions and 47 deletions.
21 changes: 6 additions & 15 deletions src/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,38 +62,29 @@ var css = csjs`
overflow-x: auto;
}
.browsersolidity {
position : relative;
width : 100vw;
height : 100vh;
overflow : hidden;
flex-direction : row;
display : flex;
}
.mainpanel {
display : flex;
flex-direction : column;
position : absolute;
top : 0;
bottom : 0;
overflow : hidden;
flex : 1;
}
.iconpanel {
display : flex;
flex-direction : column;
position : absolute;
top : 0;
bottom : 0;
left : 0;
overflow : hidden;
width : 50px;
user-select : none;
/* border-right : 1px solid var(--primary); */
}
.sidepanel {
display : flex;
flex-direction : column;
position : absolute;
top : 0;
left : 50px;
bottom : 0;
flex-direction : row-reverse;
width : 320px;
}
.highlightcode {
position:absolute;
Expand Down Expand Up @@ -150,7 +141,7 @@ class App {

init () {
var self = this
self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 300, x: 450 })
self._components.resizeFeature = new PanelsResize('#side-panel', '#editor-container', { 'minWidth': 330, x: 450 })
run.apply(self)
}

Expand Down
13 changes: 6 additions & 7 deletions src/app/components/side-panel.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const css = csjs`
height: 100%;
display: flex;
flex-direction: column;
flex: auto;
}
.swapitTitle {
margin: 0;
Expand All @@ -22,7 +23,6 @@ const css = csjs`
}
.swapitHeader {
height: 35px;
padding: 15px 20px;
display: flex;
align-items: center;
}
Expand All @@ -32,7 +32,6 @@ const css = csjs`
}
.pluginsContainer {
height: 100%;
flex: 1;
overflow-y: auto;
}
.titleInfo {
Expand Down Expand Up @@ -131,10 +130,10 @@ export class SidePanel extends AbstractPanel {
}

return yo`
<header class="${css.swapitHeader}">
<h6 class="${css.swapitTitle}">${name}</h6>
${docLink}
${versionWarning}
<header class="${css.swapitHeader} px-3">
<h6 class="${css.swapitTitle}">${name}</h6>
${docLink}
${versionWarning}
</header>
`
}
Expand All @@ -143,7 +142,7 @@ export class SidePanel extends AbstractPanel {
return yo`
<section class="${css.panel}">
${this.header}
<div class="${css.pluginsContainer}">
<div class="${css.pluginsContainer} py-1">
${this.view}
</div>
</section>`
Expand Down
8 changes: 4 additions & 4 deletions src/app/components/vertical-icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -160,9 +160,9 @@ export class VerticalIcons extends Plugin {
})

// remove active
const currentActive = this.view.querySelector(`.${css.active}`)
const currentActive = this.view.querySelector(`.active`)
if (currentActive) {
currentActive.classList.remove(css.active)
currentActive.classList.remove(`active`)
}
}

Expand All @@ -176,7 +176,7 @@ export class VerticalIcons extends Plugin {
const nextActive = this.view.querySelector(`[plugin="${name}"]`)
if (nextActive) {
let image = nextActive.querySelector('.image')
nextActive.classList.add(css.active)
nextActive.classList.add(`active`)
image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(0%)`)
}
}
Expand Down Expand Up @@ -210,7 +210,7 @@ export class VerticalIcons extends Plugin {

onThemeChanged (themeType) {
const invert = themeType === 'dark' ? 1 : 0
const active = this.view.querySelector(`.${css.active}`)
const active = this.view.querySelector(`.active`)
if (active) {
let image = active.querySelector('.image')
image.style.setProperty('filter', `invert(${invert})`)
Expand Down
3 changes: 2 additions & 1 deletion src/app/tabs/runTab/model/dropdownlogic.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,9 @@ class DropdownLogic {
}
cb(null, 'abi', abi)
})
} else {
cb(null, 'instance')
}
cb(null, 'instance')
}

getCompiledContracts (compiler, compilerFullName) {
Expand Down
1 change: 0 additions & 1 deletion src/app/tabs/styles/run-tab-styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ var csjs = require('csjs-inject')

var css = csjs`
.runTabView {
padding: 2%;
display: flex;
flex-direction: column;
}
Expand Down
4 changes: 2 additions & 2 deletions src/app/udapp/run-tab.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export class RunTab extends LibraryPlugin {
}

renderContainer () {
this.container = yo`<div class="${css.runTabView} p-3" id="runTabView" ></div>`
this.container = yo`<div class="${css.runTabView} py-0 px-3" id="runTabView" ></div>`

var el = yo`
<div class="list-group list-group-flush">
Expand Down Expand Up @@ -133,7 +133,7 @@ export class RunTab extends LibraryPlugin {
if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
})
this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => {
this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, address))
this.instanceContainer.appendChild(udappUI.renderInstanceFromABI(abi, address, '<at address>'))
})
this.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))
Expand Down
21 changes: 4 additions & 17 deletions src/lib/panels-resize.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,8 @@ const csjs = require('csjs-inject')

const css = csjs`
.dragbar {
position : absolute;
top : 0px;
width : 0.5em;
right : 0;
bottom : 0;
width : 4px;
height : 100%;
cursor : col-resize;
z-index : 999;
/* border-right : 2px solid var(--primary); */
Expand Down Expand Up @@ -102,20 +99,10 @@ export default class PanelsResize {
}

minimize () {
let panel1Width = 0
let panel2left = this.panel1.offsetLeft + panel1Width
let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
this.panel1.style.width = panel1Width + 'px'
this.panel2.style.left = panel2left + 'px'
this.panel2.style.width = panel2Width + 'px'
this.panel1.style.display = 'none'
}

maximise () {
let panel1Width = this.opt.minWidth
let panel2left = this.panel1.offsetLeft + panel1Width
let panel2Width = this.panel2.parentElement.clientWidth - this.panel1.offsetLeft - panel1Width
this.panel1.style.width = panel1Width + 'px'
this.panel2.style.left = panel2left + 'px'
this.panel2.style.width = panel2Width + 'px'
this.panel1.style.display = 'flex'
}
}

0 comments on commit 2b48c31

Please sign in to comment.