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 3 years ago committed by davidzagi93@gmail.com
parent 399b323fc7
commit 0ef4b56817
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. 308
      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

308
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')
@ -40,7 +40,7 @@ class Terminal extends Plugin {
constructor (opts, api) { constructor (opts, api) {
super(profile) super(profile)
this.element = document.createElement('div') this.element = document.createElement('div')
this.element.setAttribute('id', 'terminalView ') this.element.setAttribute('id', 'terminalView')
var self = this var self = this
self.event = new EventManager() self.event = new EventManager()
self.blockchain = opts.blockchain self.blockchain = opts.blockchain
@ -98,66 +98,70 @@ 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>`
// self._view.input = yo` // self._view.input = yo`
// <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span> // <span class=${css.input} onload=${() => { this.focus() }} onpaste=${paste} onkeydown=${change}></span>
// ` // `
@ -255,7 +259,7 @@ class Terminal extends Plugin {
// function listenOnNetwork (ev) { // function listenOnNetwork (ev) {
// self.event.trigger('listenOnNetWork', [ev.currentTarget.checked]) // self.event.trigger('listenOnNetWork', [ev.currentTarget.checked])
// } // }
// function paste (event) { //function paste (event) {
// const selection = window.getSelection() // const selection = window.getSelection()
// if (!selection.rangeCount) return false // if (!selection.rangeCount) return false
// event.preventDefault() // event.preventDefault()
@ -270,8 +274,8 @@ class Terminal extends Plugin {
// selection.empty() // selection.empty()
// self.scroll2bottom() // self.scroll2bottom()
// placeCaretAtEnd(event.currentTarget) // placeCaretAtEnd(event.currentTarget)
// } //}
// function placeCaretAtEnd (el) { //function placeCaretAtEnd (el) {
// el.focus() // el.focus()
// var range = document.createRange() // var range = document.createRange()
// range.selectNodeContents(el) // range.selectNodeContents(el)
@ -332,7 +336,7 @@ class Terminal extends Plugin {
// self.event.trigger('resize', []) // self.event.trigger('resize', [])
// }) // })
// function focusinput (event) { //function focusinput (event) {
// if ( // if (
// event.altKey || // event.altKey ||
// event.ctrlKey || // event.ctrlKey ||
@ -351,7 +355,7 @@ class Terminal extends Plugin {
// ) return // ) return
// refocus() // refocus()
// } //}
// function refocus () { // function refocus () {
// self._view.input.focus() // self._view.input.focus()
@ -359,7 +363,7 @@ class Terminal extends Plugin {
// delete self.scroll2bottom // delete self.scroll2bottom
// self.scroll2bottom() // self.scroll2bottom()
// } // }
// function reattach (event) { //function reattach (event) {
// var el = event.currentTarget // var el = event.currentTarget
// var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30 // var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30
// if (isBottomed) { // if (isBottomed) {
@ -392,8 +396,8 @@ class Terminal extends Plugin {
// } // }
// } // }
// } // }
// } //}
// function check () { //function check () {
// var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15) // var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15)
// var pos2 = placeholder.offsetTop // var pos2 = placeholder.offsetTop
// if ((pos1 - pos2) > 0) { // if ((pos1 - pos2) > 0) {
@ -415,9 +419,9 @@ class Terminal extends Plugin {
// check() // check()
// } // }
// } // }
// } //}
// function hover (event) { event.currentTarget.classList.toggle(css.hover) } //function hover (event) { event.currentTarget.classList.toggle(css.hover) }
// function minimize (event) { //function minimize (event) {
// event.preventDefault() // event.preventDefault()
// event.stopPropagation() // event.stopPropagation()
// if (event.button === 0) { // if (event.button === 0) {
@ -426,9 +430,9 @@ class Terminal extends Plugin {
// classList.toggle('fa-angle-double-up') // classList.toggle('fa-angle-double-up')
// self.event.trigger('resize', []) // self.event.trigger('resize', [])
// } // }
// } //}
// var filtertimeout = null // var filtertimeout = null
// function filter (event) { //function filter (event) {
// if (filtertimeout) { // if (filtertimeout) {
// clearTimeout(filtertimeout) // clearTimeout(filtertimeout)
// } // }
@ -441,8 +445,8 @@ 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) {
// moveGhostbar(event) // moveGhostbar(event)
@ -451,8 +455,8 @@ class Terminal extends Plugin {
// document.addEventListener('mouseup', removeGhostbar) // document.addEventListener('mouseup', removeGhostbar)
// document.addEventListener('keydown', cancelGhostbar) // document.addEventListener('keydown', cancelGhostbar)
// } // }
// } //}
// function cancelGhostbar (event) { //function cancelGhostbar (event) {
// if (event.keyCode === 27) { // if (event.keyCode === 27) {
// document.body.removeChild(ghostbar) // document.body.removeChild(ghostbar)
// document.removeEventListener('mousemove', moveGhostbar) // document.removeEventListener('mousemove', moveGhostbar)
@ -503,10 +507,10 @@ class Terminal extends Plugin {
// </div> // </div>
// ` // `
// self._shell('remix.help()', self.commands, () => {}) //self._shell('remix.help()', self.commands, () => {})
// self.commands.html(intro) //self.commands.html(intro)
// self._components.txLogger = new TxLogger(this, self.blockchain) //self._components.txLogger = new TxLogger(this, self.blockchain)
// self._components.txLogger.event.register('debuggingRequested', async (hash) => { // self._components.txLogger.event.register('debuggingRequested', async (hash) => {
// // TODO should probably be in the run module // // TODO should probably be in the run module
// if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger') // if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger')
@ -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
@ -532,7 +536,7 @@ class Terminal extends Plugin {
// } // }
// ` // `
// } // }
// function change (event) { //function change (event) {
// if (self._components.autoCompletePopup.handleAutoComplete( // if (self._components.autoCompletePopup.handleAutoComplete(
// event, // event,
// self._view.input.innerText)) return // self._view.input.innerText)) return
@ -574,85 +578,85 @@ class Terminal extends Plugin {
// } else { // } else {
// 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