Skip to content

B
baas-ide
Commit 0ef4b568 authored by tizah's avatar tizah Committed by davidzagi93@gmail.com
Browse files
Options

showing ToggleMenuBar

parent 399b323f
Show whitespace changes
Inline Side-by-side
Showing with 353 additions and 155 deletions
apps/remix-ide/src/app/panels/terminal.js
View file @ 0ef4b568
/* 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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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 { ...@@ -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>` }
......
libs/remix-ui/terminal/src/lib/remix-ui-terminal.css
View file @ 0ef4b568
.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;
}
\ No newline at end of file
libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx
View file @ 0ef4b568
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>
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment