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

Merge pull request #2247 from ethereum/toasterIssue

Browse Source 
use flexbox instead of fixed positions
pull/1/head
yann300 5 years ago committed by GitHub
parent 2ab213b2ff 97cd3b3b99
commit 2b48c31c8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 24 additions and 47 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. 21
      src/app.js
  2. 13
      src/app/components/side-panel.js
  3. 8
      src/app/components/vertical-icons.js
  4. 3
      src/app/tabs/runTab/model/dropdownlogic.js
  5. 1
      src/app/tabs/styles/run-tab-styles.js
  6. 4
      src/app/udapp/run-tab.js
  7. 21
      src/lib/panels-resize.js

21
src/app.js
Unescape View File

@ -62,38 +62,29 @@ var css = csjs`
overflow-x: auto; overflow-x: auto;
} }
.browsersolidity { .browsersolidity {
position : relative;
width : 100vw; width : 100vw;
height : 100vh; height : 100vh;
overflow : hidden; overflow : hidden;
flex-direction : row;
display : flex;
} }
.mainpanel { .mainpanel {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
position : absolute;
top : 0;
bottom : 0;
overflow : hidden; overflow : hidden;
flex : 1;
} }
.iconpanel { .iconpanel {
display : flex; display : flex;
flex-direction : column; flex-direction : column;
position : absolute;
top : 0;
bottom : 0;
left : 0;
overflow : hidden; overflow : hidden;
width : 50px; width : 50px;
user-select : none; user-select : none;
/* border-right : 1px solid var(--primary); */
} }
.sidepanel { .sidepanel {
display : flex; display : flex;
flex-direction : column; flex-direction : row-reverse;
position : absolute; width : 320px;
top : 0;
left : 50px;
bottom : 0;
} }
.highlightcode { .highlightcode {
position:absolute; position:absolute;
@ -150,7 +141,7 @@ class App {
init () { init () {
var self = this 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) run.apply(self)
} }

13
src/app/components/side-panel.js
Unescape View File

@ -8,6 +8,7 @@ const css = csjs`
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: auto;
} }
.swapitTitle { .swapitTitle {
margin: 0; margin: 0;
@ -22,7 +23,6 @@ const css = csjs`
} }
.swapitHeader { .swapitHeader {
height: 35px; height: 35px;
padding: 15px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -32,7 +32,6 @@ const css = csjs`
} }
.pluginsContainer { .pluginsContainer {
height: 100%; height: 100%;
flex: 1;
overflow-y: auto; overflow-y: auto;
} }
.titleInfo { .titleInfo {
@ -131,10 +130,10 @@ export class SidePanel extends AbstractPanel {
} }
return yo` return yo`
<header class="${css.swapitHeader}"> <header class="${css.swapitHeader} px-3">
<h6 class="${css.swapitTitle}">${name}</h6> <h6 class="${css.swapitTitle}">${name}</h6>
${docLink} ${docLink}
${versionWarning} ${versionWarning}
</header> </header>
` `
} }
@ -143,7 +142,7 @@ export class SidePanel extends AbstractPanel {
return yo` return yo`
<section class="${css.panel}"> <section class="${css.panel}">
${this.header} ${this.header}
<div class="${css.pluginsContainer}"> <div class="${css.pluginsContainer} py-1">
${this.view} ${this.view}
</div> </div>
</section>` </section>`

8
src/app/components/vertical-icons.js
Unescape View File

@ -160,9 +160,9 @@ export class VerticalIcons extends Plugin {
}) })
// remove active // remove active
const currentActive = this.view.querySelector(`.${css.active}`) const currentActive = this.view.querySelector(`.active`)
if (currentActive) { if (currentActive) {
currentActive.classList.remove(css.active) currentActive.classList.remove(`active`)
} }
} }
@ -176,7 +176,7 @@ export class VerticalIcons extends Plugin {
const nextActive = this.view.querySelector(`[plugin="${name}"]`) const nextActive = this.view.querySelector(`[plugin="${name}"]`)
if (nextActive) { if (nextActive) {
let image = nextActive.querySelector('.image') let image = nextActive.querySelector('.image')
nextActive.classList.add(css.active) nextActive.classList.add(`active`)
image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(0%)`) image.style.setProperty('filter', `invert(${invert}) grayscale(1) brightness(0%)`)
} }
} }
@ -210,7 +210,7 @@ export class VerticalIcons extends Plugin {
onThemeChanged (themeType) { onThemeChanged (themeType) {
const invert = themeType === 'dark' ? 1 : 0 const invert = themeType === 'dark' ? 1 : 0
const active = this.view.querySelector(`.${css.active}`) const active = this.view.querySelector(`.active`)
if (active) { if (active) {
let image = active.querySelector('.image') let image = active.querySelector('.image')
image.style.setProperty('filter', `invert(${invert})`) image.style.setProperty('filter', `invert(${invert})`)

3
src/app/tabs/runTab/model/dropdownlogic.js
Unescape View File

@ -54,8 +54,9 @@ class DropdownLogic {
} }
cb(null, 'abi', abi) cb(null, 'abi', abi)
}) })
} else {
cb(null, 'instance')
} }
cb(null, 'instance')
} }
getCompiledContracts (compiler, compilerFullName) { getCompiledContracts (compiler, compilerFullName) {

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

@ -2,7 +2,6 @@ var csjs = require('csjs-inject')
var css = csjs` var css = csjs`
.runTabView { .runTabView {
padding: 2%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

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

@ -74,7 +74,7 @@ export class RunTab extends LibraryPlugin {
} }
renderContainer () { 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` var el = yo`
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
@ -133,7 +133,7 @@ export class RunTab extends LibraryPlugin {
if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) } if (noInstancesText.parentNode) { noInstancesText.parentNode.removeChild(noInstancesText) }
}) })
this.contractDropdownUI.event.register('newContractABIAdded', (abi, address) => { 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.contractDropdownUI.event.register('newContractInstanceAdded', (contractObject, address, value) => {
this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value)) this.instanceContainer.appendChild(udappUI.renderInstance(contractObject, address, value))

21
src/lib/panels-resize.js
Unescape View File

@ -3,11 +3,8 @@ const csjs = require('csjs-inject')
const css = csjs` const css = csjs`
.dragbar { .dragbar {
position : absolute; width : 4px;
top : 0px; height : 100%;
width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize; cursor : col-resize;
z-index : 999; z-index : 999;
/* border-right : 2px solid var(--primary); */ /* border-right : 2px solid var(--primary); */
@ -102,20 +99,10 @@ export default class PanelsResize {
} }
minimize () { minimize () {
let panel1Width = 0 this.panel1.style.display = 'none'
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'
} }
maximise () { maximise () {
let panel1Width = this.opt.minWidth this.panel1.style.display = 'flex'
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'
} }
} }

Write Preview
Loading…
Cancel
Save