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

showing ToggleMenuBar

Browse Source
pull/1342/head
tizah 4 years ago committed by davidzagi93@gmail.com
parent 4ca8590f92
commit 9a1b7c2305
3 changed files with 742 additions and 545 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. 262
      apps/remix-ide/src/app/panels/terminal.js
  2. 133
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
  3. 66
      libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

262
apps/remix-ide/src/app/panels/terminal.js
Unescape View File

@ -1,10 +1,10 @@
/* global Node, requestAnimationFrame */ /* global Node, requestAnimationFrame */
import React from 'react' // eslint-disable-line
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import { RemixUiTerminal } from '@remix-ui/terminal'
import { Plugin } from '@remixproject/engine' import { Plugin } from '@remixproject/engine'
import * as packageJson from '../../../../../package.json' import * as packageJson from '../../../../../package.json'
import * as remixBleach from '../../lib/remixBleach' import * as remixBleach from '../../lib/remixBleach'
import { RemixUiTerminal } from '@remix-ui/terminal'
var yo = require('yo-yo') var yo = require('yo-yo')
var javascriptserialize = require('javascript-serialize') var javascriptserialize = require('javascript-serialize')
@ -98,63 +98,67 @@ class Terminal extends Plugin {
} }
onActivation () { onActivation () {
this.on('scriptRunner', 'log', (msg) => { this.renderComponent()
this.commands.log.apply(this.commands, msg.data)
})
this.on('scriptRunner', 'info', (msg) => {
this.commands.info.apply(this.commands, msg.data)
})
this.on('scriptRunner', 'warn', (msg) => {
this.commands.warn.apply(this.commands, msg.data)
})
this.on('scriptRunner', 'error', (msg) => {
this.commands.error.apply(this.commands, msg.data)
})
} }
onDeactivation () { // onActivation () {
this.off('scriptRunner', 'log') // this.on('scriptRunner', 'log', (msg) => {
this.off('scriptRunner', 'info') // this.commands.log.apply(this.commands, msg.data)
this.off('scriptRunner', 'warn') // })
this.off('scriptRunner', 'error') // this.on('scriptRunner', 'info', (msg) => {
} // this.commands.info.apply(this.commands, msg.data)
// })
// this.on('scriptRunner', 'warn', (msg) => {
// this.commands.warn.apply(this.commands, msg.data)
// })
// this.on('scriptRunner', 'error', (msg) => {
// this.commands.error.apply(this.commands, msg.data)
// })
// }
log (message) { // onDeactivation () {
var command = this.commands[message.type] // this.off('scriptRunner', 'log')
if (typeof command === 'function') { // this.off('scriptRunner', 'info')
if (typeof message.value === 'string' && message.type === 'html') { // this.off('scriptRunner', 'warn')
var el = document.createElement('div') // this.off('scriptRunner', 'error')
el.innerHTML = remixBleach.sanitize(message.value, { // }
list: [
'a', // log (message) {
'b', // var command = this.commands[message.type]
'p', // if (typeof command === 'function') {
'em', // if (typeof message.value === 'string' && message.type === 'html') {
'strong', // var el = document.createElement('div')
'div', // el.innerHTML = remixBleach.sanitize(message.value, {
'span', // list: [
'ul', // 'a',
'li', // 'b',
'ol', // 'p',
'hr' // 'em',
] // 'strong',
}) // 'div',
message.value = el // 'span',
} // 'ul',
command(message.value) // 'li',
}; // 'ol',
} // 'hr'
// ]
// })
// message.value = el
// }
// command(message.value)
// };
// }
logHtml (html) { // logHtml (html) {
var command = this.commands.html // var command = this.commands.html
if (typeof command === 'function') command(html) // if (typeof command === 'function') command(html)
} // }
focus () { // focus () {
if (this._view.input) this._view.input.focus() // if (this._view.input) this._view.input.focus()
} // }
// render () { render () {
// var self = this // var self = this
// if (self._view.el) return self._view.el // if (self._view.el) return self._view.el
//self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>` //self._view.journal = yo`<div id="journal" class=${css.journal} data-id="terminalJournal"></div>`
@ -441,7 +445,7 @@ class Terminal extends Plugin {
// refocus() // refocus()
// self._view.journal.innerHTML = '' // self._view.journal.innerHTML = ''
// } // }
// // ----------------- resizeable ui --------------- // ----------------- resizeable ui ---------------
//function mousedown (event) { //function mousedown (event) {
// event.preventDefault() // event.preventDefault()
// if (event.which === 1) { // if (event.which === 1) {
@ -515,7 +519,7 @@ class Terminal extends Plugin {
// }) // })
// return self._view.el // return self._view.el
return this.element
// function wrapScript (script) { // function wrapScript (script) {
// const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix)) // const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix))
// if (isKnownScript) return script // if (isKnownScript) return script
@ -575,84 +579,84 @@ class Terminal extends Plugin {
// self._cmdTemp = self._view.input.innerText // self._cmdTemp = self._view.input.innerText
// } // }
//} //}
// }
render () {
return this.element
} }
renderComponent () { renderComponent () {
ReactDOM.render(<RemixUiTerminal/>, this.element) ReactDOM.render(
<RemixUiTerminal />,
this.element
)
} }
putCursor2End (editable) { // putCursor2End (editable) {
var range = document.createRange() // var range = document.createRange()
range.selectNode(editable) // range.selectNode(editable)
var child = editable // var child = editable
var chars // var chars
while (child) { // while (child) {
if (child.lastChild) child = child.lastChild // if (child.lastChild) child = child.lastChild
else break // else break
if (child.nodeType === Node.TEXT_NODE) { // if (child.nodeType === Node.TEXT_NODE) {
chars = child.textContent.length // chars = child.textContent.length
} else { // } else {
chars = child.innerHTML.length // chars = child.innerHTML.length
} // }
} // }
range.setEnd(child, chars) // range.setEnd(child, chars)
var toStart = true // var toStart = true
var toEnd = !toStart // var toEnd = !toStart
range.collapse(toEnd) // range.collapse(toEnd)
var sel = window.getSelection() // var sel = window.getSelection()
sel.removeAllRanges() // sel.removeAllRanges()
sel.addRange(range) // sel.addRange(range)
editable.focus() // editable.focus()
} // }
updateJournal (filterEvent) { //updateJournal (filterEvent) {
var self = this // var self = this
var commands = self.data.activeFilters.commands // var commands = self.data.activeFilters.commands
var value = filterEvent.value // var value = filterEvent.value
if (filterEvent.type === 'select') { // if (filterEvent.type === 'select') {
commands[value] = true // commands[value] = true
if (!self._INDEX.commandsMain[value]) return // if (!self._INDEX.commandsMain[value]) return
self._INDEX.commandsMain[value].forEach(item => { // self._INDEX.commandsMain[value].forEach(item => {
item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item }) // item.root.steps.forEach(item => { self._JOURNAL[item.gidx] = item })
self._JOURNAL[item.gidx] = item // self._JOURNAL[item.gidx] = item
}) // })
} else if (filterEvent.type === 'deselect') { // }
commands[value] = false // else if (filterEvent.type === 'deselect') {
if (!self._INDEX.commandsMain[value]) return // commands[value] = false
self._INDEX.commandsMain[value].forEach(item => { // if (!self._INDEX.commandsMain[value]) return
item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true }) // self._INDEX.commandsMain[value].forEach(item => {
self._JOURNAL[item.gidx].hide = true // item.root.steps.forEach(item => { self._JOURNAL[item.gidx].hide = true })
}) // self._JOURNAL[item.gidx].hide = true
} else if (filterEvent.type === 'search') { // })
if (value !== self.data.activeFilters.input) { // } else if (filterEvent.type === 'search') {
var query = self.data.activeFilters.input = value // if (value !== self.data.activeFilters.input) {
var items = self._JOURNAL // var query = self.data.activeFilters.input = value
for (var gidx = 0, len = items.length; gidx < len; gidx++) { // var items = self._JOURNAL
var item = items[gidx] // for (var gidx = 0, len = items.length; gidx < len; gidx++) {
if (item && self.data.filterFns[item.cmd]) { // var item = items[gidx]
var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true // if (item && self.data.filterFns[item.cmd]) {
item.hide = !show // var show = query.length ? self.data.filterFns[item.cmd](item.args, query) : true
} // item.hide = !show
} // }
} // }
} // }
var df = document.createDocumentFragment() // }
self._JOURNAL.forEach(item => { // var df = document.createDocumentFragment()
if (item && item.el && !item.hide) df.appendChild(item.el) // self._JOURNAL.forEach(item => {
}) // if (item && item.el && !item.hide) df.appendChild(item.el)
self._view.journal.innerHTML = '' // })
requestAnimationFrame(function updateDOM () { // self._view.journal.innerHTML = ''
self._view.journal.appendChild(df) // requestAnimationFrame(function updateDOM () {
}) // self._view.journal.appendChild(df)
} // })
//}
_appendItem (item) { _appendItem (item) {
var self = this var self = this
@ -805,11 +809,11 @@ class Terminal extends Plugin {
} }
} }
function domTerminalFeatures (self, scopedCommands, blockchain) { // function domTerminalFeatures (self, scopedCommands, blockchain) {
return { // return {
remix: self._components.cmdInterpreter // remix: self._components.cmdInterpreter
} // }
} // }
function blockify (el) { return yo`<div class="px-4 ${css.block}" data-id="block_${el.getAttribute ? el.getAttribute('id') : ''}">${el}</div>` } function blockify (el) { return yo`<div class="px-4 ${css.block}" data-id="block_${el.getAttribute ? el.getAttribute('id') : ''}">${el}</div>` }

133
libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
Unescape View File

@ -0,0 +1,133 @@
.panel {
position : relative;
display : flex;
flex-direction : column;
font-size : 12px;
min-height : 3em;
}
.bar {
display : flex;
z-index : 2;
}
.menu {
position : relative;
display : flex;
align-items : center;
width : 100%;
max-height : 35px;
min-height : 35px;
}
.toggleTerminal {
cursor : pointer;
}
.toggleTerminal:hover {
color : var(--secondary);
}
.terminal_container {
display : flex;
flex-direction : column;
height : 100%;
overflow-y : auto;
font-family : monospace;
margin : 0px;
background-repeat : no-repeat;
background-position : center 15%;
background-size : auto calc(75% - 1.7em);
}
.terminal {
position : relative;
display : flex;
flex-direction : column;
height : 100%;
}
.journal {
margin-top : auto;
font-family : monospace;
}
.block {
word-break : break-word;
white-space : pre-wrap;
line-height : 2ch;
padding : 1ch;
margin-top : 2ch;
}
.block > pre {
max-height : 200px;
}
.cli {
line-height : 1.7em;
font-family : monospace;
padding : .4em;
color : var(--primary);
border-top : solid 2px var(--secondary);
}
.prompt {
margin-right : 0.5em;
font-family : monospace;
font-weight : bold;
font-size : 14px;
}
.input {
word-break : break-word;
outline : none;
font-family : monospace;
}
.search {
display : flex;
align-items : center;
width : 330px;
padding-left : 20px;
height : 100%;
padding-top : 1px;
padding-bottom : 1px;
}
.filter {
height : 80%;
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
.searchIcon {
width : 25px;
border-top-left-radius : 3px;
border-bottom-left-radius : 3px;
display : flex;
align-items : center;
justify-content : center;
margin-right : 5px;
}
.listen {
margin-right : 30px;
min-width : 40px;
height : 13px;
display : flex;
align-items : center;
}
.listenLabel {
min-width: 50px;
}
.verticalLine {
border-left : 1px solid var(--secondary);
height : 65%;
}
.dragbarHorizontal {
position : absolute;
top : 0;
height : 0.5em;
right : 0;
left : 0;
cursor : ns-resize;
z-index : 999;
}
.listenOnNetwork {
min-height: auto;
}
.ghostbar {
position : absolute;
height : 6px;
opacity : 0.5;
cursor : row-resize;
z-index : 9999;
left : 0;
right : 0;
}

66
libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
Unescape View File

@ -1,14 +1,74 @@
import React from 'react' import React, { useState } from 'react' // eslint-disable-line
import './remix-ui-terminal.css' import './remix-ui-terminal.css'
/* eslint-disable-next-line */ /* eslint-disable-next-line */
export interface RemixUiTerminalProps {} export interface RemixUiTerminalProps {
propterties: any
}
export const RemixUiTerminal = (props: RemixUiTerminalProps) => { export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
const [toggleDownUp, setToggleDownUp] = useState('fa-angle-double-down')
const handleMinimizeTerminal = (event) => {
console.log('clikced')
if (toggleDownUp === 'fa-angle-double-down') {
console.log('clikced down')
setToggleDownUp('fa-angle-double-up')
} else {
console.log('clikced up')
// event.trigger('resize', [])
setToggleDownUp('fa-angle-double-down')
}
}
return ( return (
<div> <div>
Welcome to remix-ui-terminal {console.log({ toggleDownUp })}
<div className="bar">
{/* ${self._view.dragbar} */}
<div className="dragbarHorizontal"></div>
<div className="menu border-top border-dark bg-light" data-id="terminalToggleMenu">
{/* ${self._view.icon} */}
<i className={`mx-2 toggleTerminal fas ${toggleDownUp}`} data-id="terminalToggleIcon" onClick={ handleMinimizeTerminal }></i>
<div className="mx-2" id="clearConsole" data-id="terminalClearConsole" >
<i className="fas fa-ban" aria-hidden="true" title="Clear console"
></i>
</div>
{/* ${self._view.pendingTxCount} */}
<div className="mx-2" title='Pending Transactions'>0</div>
<div className="verticalLine"></div>
<div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork custom-control custom-checkbox">
<input
className="custom-control-input"
id="listenNetworkCheck"
// onChange=${listenOnNetwork}
type="checkbox"
title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
/>
<label
className="pt-1 form-check-label custom-control-label text-nowrap"
title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
htmlFor="listenNetworkCheck"
>
listen on network
</label>
</div>
<div className="search">
<i className="fas fa-search searchIcon bg-light" aria-hidden="true"></i>
{/* ${self._view.inputSearch} */}
<input
// spellcheck = "false"
type="text"
className="border filter form-control"
id="searchInput"
// onkeydown=${filter}
placeholder="Search with transaction hash or address"
data-id="terminalInputSearch" />
</div>
</div>
</div>
Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')}
</div> </div>
) )
} }

Write Preview
Loading…
Cancel
Save