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

split screen (swap panel / editor panel)

Browse Source
pull/1/head
yann300 6 years ago
parent ae24dd0ea0
commit 72120cdffa
5 changed files with 105 additions and 100 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. 52
      src/app.js
  2. 41
      src/app/panels/file-panel.js
  3. 22
      src/app/panels/styles/file-panel-styles.js
  4. 6
      src/app/staticanalysis/staticAnalysisView.js
  5. 84
      src/lib/panels-resize.js

52
src/app.js
Unescape View File

@ -52,6 +52,7 @@ const TestTab = require('./app/tabs/test-tab')
const RunTab = require('./app/tabs/run-tab')
const FilePanel = require('./app/panels/file-panel')
import PanelsResize from './lib/panels-resize'
import { EntityStore } from './lib/store'
import { RemixAppManager } from './remixAppManager'
@ -85,9 +86,8 @@ var css = csjs`
position : absolute;
top : 0;
bottom : 0;
left : 450px;
overflow : hidden;
width : 800px;
width : 82%;
}
.iconpanel {
background-color : ${styles.leftPanel.backgroundColor_Panel};
@ -98,18 +98,16 @@ var css = csjs`
bottom : 0;
left : 0;
overflow : hidden;
width : 50px;
width : 2%;
}
.swappanel {
display : flex;
flex-direction : column;
position : absolute;
top : 0;
left : 50px;
bottom : 0;
overflow : hidden;
width : 400px;
height : 100%;
width : 16%;
}
.highlightcode {
position:absolute;
@ -187,31 +185,13 @@ class App {
}
}
}
_adjustLayout (direction, delta) {
/* var self = this
var layout = self.data._layout[direction]
if (layout) {
if (delta === undefined) {
layout.show = !layout.show
if (layout.show) delta = layout.offset
else delta = 0
} else {
self._components.config.set(`${direction}-offset`, delta)
layout.offset = delta
}
}
if (direction === 'left') {
self._view.swappanel.style.width = delta + 'px'
self._view.mainpanel.style.left = delta + 'px'
}
if (direction === 'right') {
self._view.mainpanel.style.width = delta + 'px'
self._view.swappanel.style.right = delta + 'px'
}
*/
}
init () {
var self = this
self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': '300' })
run.apply(self)
}
@ -253,7 +233,7 @@ class App {
${self._view.swappanel}
${self._view.mainpanel}
</div>
`
`
// INIT
// self._adjustLayout('left', self.data._layout.left.offset)
// self._adjustLayout('right', self.data._layout.right.offset)
@ -432,7 +412,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
// ----------------- editor panel ----------------------
self._components.editorpanel = new EditorPanel()
registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
// ----------------- Renderer -----------------
var renderer = new Renderer()
registry.put({api: renderer, name: 'renderer'})
@ -449,6 +429,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
// TODOs those are instanciated before hand. should be instanciated on demand
const pluginManagerComponent = new PluginManagerComponent()
let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
const appManager = new RemixAppManager(appStore)
registry.put({api: appManager.proxy(), name: 'pluginmanager'})
@ -486,6 +467,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
{ profile: pluginManagerComponent.profile(), api: pluginManagerComponent }])
const swapPanelComponent = new SwapPanelComponent()
const verticalIconComponent = new VerticalIconsComponent()
const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager)
const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager)
@ -493,9 +475,13 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
self._components.editorpanel.init()
self._components.fileManager.init()
self._view.mainpanel.appendChild(self._components.editorpanel.render())
let mainEl = self._components.editorpanel.render()
self._view.mainpanel.appendChild(mainEl)
self._view.iconpanel.appendChild(verticalIconComponent.render())
self._view.swappanel.appendChild(swapPanelComponent.render())
let swapEl = swapPanelComponent.render()
self._view.swappanel.appendChild(swapEl)
appManager.activateOne('App')
appManager.activateOne('Udapp')

41
src/app/panels/file-panel.js
Unescape View File

@ -20,9 +20,7 @@ var styles = styleGuide.chooser()
var css = require('./styles/file-panel-styles')
var limit = 60
var canUpload = window.File || window.FileReader || window.FileList || window.Blob
var ghostbar = yo`<div class=${css.ghostbar}></div>`
/*
Overview of APIs:
@ -71,8 +69,7 @@ function filepanel (localRegistry) {
self._compilerMetadata.syncContractMetadata()
self.compilerMetadata = () => { return self._compilerMetadata }
var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
function remixdDialog () {
return yo`
<div class=${css.dialog}>
@ -128,7 +125,6 @@ function filepanel (localRegistry) {
<div class="httpsexplorer ${css.treeview}">${httpsExplorer.init()}</div>
</div>
</div>
${dragbar}
</div>
`
}
@ -239,41 +235,6 @@ function filepanel (localRegistry) {
})
}
// ----------------- resizeable ui ---------------
function mousedown (event) {
event.preventDefault()
if (event.which === 1) {
moveGhostbar(event)
document.body.appendChild(ghostbar)
document.addEventListener('mousemove', moveGhostbar)
document.addEventListener('mouseup', removeGhostbar)
document.addEventListener('keydown', cancelGhostbar)
}
}
function cancelGhostbar (event) {
if (event.keyCode === 27) {
document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
}
}
function getPosition (event) {
var rhp = document.body.offsetWidth - window['righthand-panel'].offsetWidth
var newpos = (event.pageX < limit) ? limit : event.pageX
newpos = (newpos < (rhp - limit)) ? newpos : (rhp - limit)
return newpos
}
function moveGhostbar (event) { // @NOTE VERTICAL ghostbar
ghostbar.style.left = getPosition(event) + 'px'
}
function removeGhostbar (event) {
document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
}
function createNewFile () {
modalDialogCustom.prompt(null, 'File Name', 'Untitled.sol', (input) => {
helper.createNonClashingName(input, self._deps.fileProviders['browser'], (error, newName) => {

22
src/app/panels/styles/file-panel-styles.js
Unescape View File

@ -73,27 +73,7 @@ var css = csjs`
}
.treeviews {
overflow-y : auto;
}
.dragbar {
position : absolute;
top : 29px;
width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3);
}
.ghostbar {
width : 3px;
background-color : ${styles.colors.lightBlue};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
}
.dialog {
display: flex;
flex-direction: column;

6
src/app/staticanalysis/staticAnalysisView.js
Unescape View File

@ -122,12 +122,6 @@ staticAnalysisView.prototype.run = function () {
self._deps.renderer.error(msg, warningContainer, {type: 'staticAnalysisWarning', useSpan: true})
})
})
if (warningContainer.html() === '') {
$('#righthand-panel #menu .staticanalysisView').css('color', '')
warningContainer.html('No warning to report')
} else {
$('#righthand-panel #menu .staticanalysisView').css('color', styles.colors.red)
}
self.event.trigger('staticAnaysisWarning', [warningCount])
})
} else {

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

@ -0,0 +1,84 @@
const yo = require('yo-yo')
const csjs = require('csjs-inject')
const styleGuide = require('../app/ui/styles-guide/theme-chooser')
const styles = styleGuide.chooser()
const css = csjs`
.dragbar {
position : absolute;
top : 29px;
width : 0.5em;
right : 0;
bottom : 0;
cursor : col-resize;
z-index : 999;
border-right : 2px solid hsla(215, 81%, 79%, .3);
}
.ghostbar {
width : 3px;
background-color : ${styles.colors.lightBlue};
opacity : 0.5;
position : absolute;
cursor : col-resize;
z-index : 9999;
top : 0;
bottom : 0;
}
`
export default class PanelsResize {
constructor (idpanel1, idpanel2, opt) {
var panel1 = document.querySelector(idpanel1)
var panel2 = document.querySelector(idpanel2)
var ghostbar = yo`<div class=${css.ghostbar}></div>`
let mousedown = (event) => {
event.preventDefault()
if (event.which === 1) {
moveGhostbar(event)
document.body.appendChild(ghostbar)
document.addEventListener('mousemove', moveGhostbar)
document.addEventListener('mouseup', removeGhostbar)
document.addEventListener('keydown', cancelGhostbar)
}
}
let cancelGhostbar = (event) => {
if (event.keyCode === 27) {
document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
}
}
let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
let p = processWidth(event)
if (p.panel1Width < opt.minWidth || p.panel2Width < opt.minWidth) return
ghostbar.style.left = event.x + 'px'
}
let removeGhostbar = (event) => {
document.body.removeChild(ghostbar)
document.removeEventListener('mousemove', moveGhostbar)
document.removeEventListener('mouseup', removeGhostbar)
document.removeEventListener('keydown', cancelGhostbar)
let p = processWidth(event)
if (p.panel1Width < opt.minWidth || p.panel2Width < opt.minWidth) return
panel1.style.width = p.panel1Width + 'px'
panel2.style.left = p.panel2left + 'px'
panel2.style.width = p.panel2Width + 'px'
}
let processWidth = (event) => {
let panel1Width = event.x - panel1.offsetLeft
let panel2left = panel1.offsetLeft + panel1Width
let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
return { panel1Width, panel2left, panel2Width }
}
var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
panel1.appendChild(dragbar)
}
}
Write Preview
Loading…
Cancel
Save