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

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'
/* eslint-disable-next-line */
export interface RemixUiTerminalProps {}
export interface RemixUiTerminalProps {
propterties: any
}
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 (
<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>
)
}

Write Preview
Loading…
Cancel
Save