From 54d4c9677b652188d5321d8281b58807fb607eff Mon Sep 17 00:00:00 2001 From: tizah Date: Thu, 1 Jul 2021 12:55:08 +0100 Subject: [PATCH] showing ToggleMenuBar --- apps/remix-ide/src/app/panels/terminal.js | 1088 +++++++++-------- .../terminal/src/lib/remix-ui-terminal.css | 133 ++ .../terminal/src/lib/remix-ui-terminal.tsx | 66 +- 3 files changed, 742 insertions(+), 545 deletions(-) diff --git a/apps/remix-ide/src/app/panels/terminal.js b/apps/remix-ide/src/app/panels/terminal.js index a75f87187c..64404fe87f 100644 --- a/apps/remix-ide/src/app/panels/terminal.js +++ b/apps/remix-ide/src/app/panels/terminal.js @@ -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') @@ -40,7 +40,7 @@ class Terminal extends Plugin { constructor (opts, api) { super(profile) this.element = document.createElement('div') - this.element.setAttribute('id', 'terminalView ') + this.element.setAttribute('id', 'terminalView') var self = this self.event = new EventManager() self.blockchain = opts.blockchain @@ -98,561 +98,565 @@ 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) - }) - } - - 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) + this.renderComponent() } - focus () { - if (this._view.input) this._view.input.focus() - } - - // render () { - // var self = this - // if (self._view.el) return self._view.el - // self._view.journal = yo`
` - // self._view.input = yo` - // { this.focus() }} onpaste=${paste} onkeydown=${change}> - // ` - // self._view.input.setAttribute('spellcheck', 'false') - // self._view.input.setAttribute('contenteditable', 'true') - // self._view.input.setAttribute('id', 'terminalCliInput') - // self._view.input.setAttribute('data-id', 'terminalCliInput') - - // self._view.input.innerText = '\n' - // self._view.cli = yo` - //
- // ${'>'} - // ${self._view.input} - //
- // ` - - // self._view.icon = yo` - // ` - // self._view.dragbar = yo` - //
` - - // self._view.pendingTxCount = yo`
0
` - // self._view.inputSearch = yo` - // ` - // self._view.bar = yo` - //
- // ${self._view.dragbar} - //
- // ${self._view.icon} - //
- // - //
- // ${self._view.pendingTxCount} - //
- //
- // - // - //
- //
- // - // ${self._view.inputSearch} - //
- //
- //
- // ` - // self._view.term = yo` - //
- // ${self._components.autoCompletePopup.render()} - //
- //
- // ${self._view.journal} - // ${self._view.cli} - //
- //
- // ` - // self._view.el = yo` - //
- // ${self._view.bar} - // ${self._view.term} - //
- // ` - // setInterval(async () => { - // try { - // self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount') - // } catch (err) {} - // }, 1000) - - // function listenOnNetwork (ev) { - // self.event.trigger('listenOnNetWork', [ev.currentTarget.checked]) - // } - // function paste (event) { - // const selection = window.getSelection() - // if (!selection.rangeCount) return false - // event.preventDefault() - // event.stopPropagation() - // var clipboard = (event.clipboardData || window.clipboardData) - // var text = clipboard.getData('text/plain') - // text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters - // var temp = document.createElement('div') - // temp.innerHTML = text - // var textnode = document.createTextNode(temp.textContent) - // selection.getRangeAt(0).insertNode(textnode) - // selection.empty() - // self.scroll2bottom() - // placeCaretAtEnd(event.currentTarget) - // } - // function placeCaretAtEnd (el) { - // el.focus() - // var range = document.createRange() - // range.selectNodeContents(el) - // range.collapse(false) - // var sel = window.getSelection() - // sel.removeAllRanges() - // sel.addRange(range) - // } - // function throttle (fn, wait) { - // var time = Date.now() - // return function debounce () { - // if ((time + wait - Date.now()) < 0) { - // fn.apply(this, arguments) - // time = Date.now() - // } - // } - // } - // var css2 = csjs` - // .anchor { - // position : static; - // border-top : 2px dotted blue; - // height : 10px; - // } - // .overlay { - // position : absolute; - // width : 100%; - // display : flex; - // align-items : center; - // justify-content : center; - // bottom : 0; - // right : 15px; - // min-height : 20px; - // } - // .text { - // z-index : 2; - // color : black; - // font-weight : bold; - // pointer-events : none; - // } - // .background { - // z-index : 1; - // opacity : 0.8; - // background-color : #a6aeba; - // cursor : pointer; - // } - // .ul { - // padding-left : 20px; - // padding-bottom : 5px; - // } - // ` - // var text = yo`
` - // var background = yo`
` - // var placeholder = yo`
${background}${text}
` - // var inserted = false - - // window.addEventListener('resize', function (event) { - // self.event.trigger('resize', []) - // self.event.trigger('resize', []) + // 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) // }) + // } - // function focusinput (event) { - // if ( - // event.altKey || - // event.ctrlKey || - // event.metaKey || - // event.shiftKey || - // event.key === 'Down' || - // event.key === 'ArrowDown' || - // event.key === 'Up' || - // event.key === 'ArrowUp' || - // event.key === 'Left' || - // event.key === 'ArrowLeft' || - // event.key === 'Right' || - // event.key === 'ArrowRight' || - // event.key === 'Esc' || - // event.key === 'Escape' - // ) return - - // refocus() - // } + // onDeactivation () { + // this.off('scriptRunner', 'log') + // this.off('scriptRunner', 'info') + // this.off('scriptRunner', 'warn') + // this.off('scriptRunner', 'error') + // } - // function refocus () { - // self._view.input.focus() - // reattach({ currentTarget: self._view.term }) - // delete self.scroll2bottom - // self.scroll2bottom() - // } - // function reattach (event) { - // var el = event.currentTarget - // var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30 - // if (isBottomed) { - // if (inserted) { - // text.innerText = '' - // background.onclick = undefined - // if (placeholder.parentElement) self._view.journal.removeChild(placeholder) - // } - // inserted = false - // delete self.scroll2bottom - // } else { - // if (!inserted) self._view.journal.appendChild(placeholder) - // inserted = true - // check() - // if (!placeholder.nextElementSibling) { - // placeholder.style.display = 'none' - // } else { - // placeholder.style = '' - // } - // self.scroll2bottom = function () { - // var next = placeholder.nextElementSibling - // if (next) { - // placeholder.style = '' - // check() - // var messages = 1 - // while ((next = next.nextElementSibling)) messages += 1 - // text.innerText = `${messages} new unread log entries` - // } else { - // placeholder.style.display = 'none' - // } - // } - // } - // } - // function check () { - // var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15) - // var pos2 = placeholder.offsetTop - // if ((pos1 - pos2) > 0) { - // text.style.display = 'none' - // background.style.position = 'relative' - // background.style.opacity = 0.3 - // background.style.right = 0 - // background.style.borderBox = 'content-box' - // background.style.padding = '2px' - // background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px' - // background.onclick = undefined - // background.style.cursor = 'default' - // background.style.pointerEvents = 'none' - // } else { - // background.style = '' - // text.style = '' - // background.onclick = function (event) { - // placeholder.scrollIntoView() - // check() - // } - // } - // } - // function hover (event) { event.currentTarget.classList.toggle(css.hover) } - // function minimize (event) { - // event.preventDefault() - // event.stopPropagation() - // if (event.button === 0) { - // var classList = self._view.icon.classList - // classList.toggle('fa-angle-double-down') - // classList.toggle('fa-angle-double-up') - // self.event.trigger('resize', []) - // } - // } - // var filtertimeout = null - // function filter (event) { - // if (filtertimeout) { - // clearTimeout(filtertimeout) - // } - // filtertimeout = setTimeout(() => { - // self.updateJournal({ type: 'search', value: self._view.inputSearch.value }) - // self.scroll2bottom() - // }, 500) - // } - // function clear (event) { - // refocus() - // self._view.journal.innerHTML = '' - // } - // // ----------------- 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 moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar - // ghostbar.style.top = self._api.getPosition(event) + 'px' - // } - // function removeGhostbar (event) { - // if (self._view.icon.classList.contains('fa-angle-double-up')) { - // self._view.icon.classList.toggle('fa-angle-double-down') - // self._view.icon.classList.toggle('fa-angle-double-up') + // 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 // } - // document.body.removeChild(ghostbar) - // document.removeEventListener('mousemove', moveGhostbar) - // document.removeEventListener('mouseup', removeGhostbar) - // document.removeEventListener('keydown', cancelGhostbar) - // self.event.trigger('resize', [self._api.getPosition(event)]) - // } + // command(message.value) + // }; + // } - // self._cmdHistory = [] - // self._cmdIndex = -1 - // self._cmdTemp = '' - - // var intro = yo` - //
- Welcome to Remix ${packageJson.version} -

- //
You can use this terminal to:
- // - //
The following libraries are accessible:
- // - //
- // ` - - // self._shell('remix.help()', self.commands, () => {}) - // self.commands.html(intro) - - // self._components.txLogger = new TxLogger(this, self.blockchain) - // self._components.txLogger.event.register('debuggingRequested', async (hash) => { - // // TODO should probably be in the run module - // if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger') - // this.call('menuicons', 'select', 'debugger') - // this.call('debugger', 'debug', hash) - // }) + // logHtml (html) { + // var command = this.commands.html + // if (typeof command === 'function') command(html) + // } - // return self._view.el - - // function wrapScript (script) { - // const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix)) - // if (isKnownScript) return script - // return ` - // try { - // const ret = ${script}; - // if (ret instanceof Promise) { - // ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) }) - // } else { - // console.log(ret) - // } - // } catch (e) { - // console.log(e.message) - // } - // ` - // } - // function change (event) { - // if (self._components.autoCompletePopup.handleAutoComplete( - // event, - // self._view.input.innerText)) return - // if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n' - // if (event.which === 13) { - // if (event.ctrlKey) { // - // self._view.input.innerText += '\n' - // self.putCursor2End(self._view.input) - // self.scroll2bottom() - // self._components.autoCompletePopup.removeAutoComplete() - // } else { // - // self._cmdIndex = -1 - // self._cmdTemp = '' - // event.preventDefault() - // var script = self._view.input.innerText.trim() - // self._view.input.innerText = '\n' - // if (script.length) { - // self._cmdHistory.unshift(script) - // self.commands.script(wrapScript(script)) - // } - // self._components.autoCompletePopup.removeAutoComplete() - // } - // } else if (event.which === 38) { // - // var len = self._cmdHistory.length - // if (len === 0) return event.preventDefault() - // if (self._cmdHistory.length - 1 > self._cmdIndex) { - // self._cmdIndex++ - // } - // self._view.input.innerText = self._cmdHistory[self._cmdIndex] - // self.putCursor2End(self._view.input) - // self.scroll2bottom() - // } else if (event.which === 40) { // - // if (self._cmdIndex > -1) { - // self._cmdIndex-- - // } - // self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp - // self.putCursor2End(self._view.input) - // self.scroll2bottom() - // } else { - // self._cmdTemp = self._view.input.innerText - // } - // } + // focus () { + // if (this._view.input) this._view.input.focus() // } render () { + // var self = this + // if (self._view.el) return self._view.el + //self._view.journal = yo`
` + // self._view.input = yo` + // { this.focus() }} onpaste=${paste} onkeydown=${change}> + // ` + // self._view.input.setAttribute('spellcheck', 'false') + // self._view.input.setAttribute('contenteditable', 'true') + // self._view.input.setAttribute('id', 'terminalCliInput') + // self._view.input.setAttribute('data-id', 'terminalCliInput') + + // self._view.input.innerText = '\n' + // self._view.cli = yo` + //
+ // ${'>'} + // ${self._view.input} + //
+ // ` + + // self._view.icon = yo` + // ` + // self._view.dragbar = yo` + //
` + + // self._view.pendingTxCount = yo`
0
` + // self._view.inputSearch = yo` + // ` + // self._view.bar = yo` + //
+ // ${self._view.dragbar} + //
+ // ${self._view.icon} + //
+ // + //
+ // ${self._view.pendingTxCount} + //
+ //
+ // + // + //
+ //
+ // + // ${self._view.inputSearch} + //
+ //
+ //
+ // ` + // self._view.term = yo` + //
+ // ${self._components.autoCompletePopup.render()} + //
+ //
+ // ${self._view.journal} + // ${self._view.cli} + //
+ //
+ // ` + // self._view.el = yo` + //
+ // ${self._view.bar} + // ${self._view.term} + //
+ // ` + // setInterval(async () => { + // try { + // self._view.pendingTxCount.innerHTML = await self.call('udapp', 'pendingTransactionsCount') + // } catch (err) {} + // }, 1000) + + // function listenOnNetwork (ev) { + // self.event.trigger('listenOnNetWork', [ev.currentTarget.checked]) + // } + //function paste (event) { + // const selection = window.getSelection() + // if (!selection.rangeCount) return false + // event.preventDefault() + // event.stopPropagation() + // var clipboard = (event.clipboardData || window.clipboardData) + // var text = clipboard.getData('text/plain') + // text = text.replace(/[^\x20-\xFF]/gi, '') // remove non-UTF-8 characters + // var temp = document.createElement('div') + // temp.innerHTML = text + // var textnode = document.createTextNode(temp.textContent) + // selection.getRangeAt(0).insertNode(textnode) + // selection.empty() + // self.scroll2bottom() + // placeCaretAtEnd(event.currentTarget) + //} + //function placeCaretAtEnd (el) { + // el.focus() + // var range = document.createRange() + // range.selectNodeContents(el) + // range.collapse(false) + // var sel = window.getSelection() + // sel.removeAllRanges() + // sel.addRange(range) + // } + // function throttle (fn, wait) { + // var time = Date.now() + // return function debounce () { + // if ((time + wait - Date.now()) < 0) { + // fn.apply(this, arguments) + // time = Date.now() + // } + // } + // } + // var css2 = csjs` + // .anchor { + // position : static; + // border-top : 2px dotted blue; + // height : 10px; + // } + // .overlay { + // position : absolute; + // width : 100%; + // display : flex; + // align-items : center; + // justify-content : center; + // bottom : 0; + // right : 15px; + // min-height : 20px; + // } + // .text { + // z-index : 2; + // color : black; + // font-weight : bold; + // pointer-events : none; + // } + // .background { + // z-index : 1; + // opacity : 0.8; + // background-color : #a6aeba; + // cursor : pointer; + // } + // .ul { + // padding-left : 20px; + // padding-bottom : 5px; + // } + // ` + // var text = yo`
` + // var background = yo`
` + // var placeholder = yo`
${background}${text}
` + // var inserted = false + + // window.addEventListener('resize', function (event) { + // self.event.trigger('resize', []) + // self.event.trigger('resize', []) + // }) + + //function focusinput (event) { + // if ( + // event.altKey || + // event.ctrlKey || + // event.metaKey || + // event.shiftKey || + // event.key === 'Down' || + // event.key === 'ArrowDown' || + // event.key === 'Up' || + // event.key === 'ArrowUp' || + // event.key === 'Left' || + // event.key === 'ArrowLeft' || + // event.key === 'Right' || + // event.key === 'ArrowRight' || + // event.key === 'Esc' || + // event.key === 'Escape' + // ) return + + // refocus() + //} + + // function refocus () { + // self._view.input.focus() + // reattach({ currentTarget: self._view.term }) + // delete self.scroll2bottom + // self.scroll2bottom() + // } + //function reattach (event) { + // var el = event.currentTarget + // var isBottomed = el.scrollHeight - el.scrollTop - el.clientHeight < 30 + // if (isBottomed) { + // if (inserted) { + // text.innerText = '' + // background.onclick = undefined + // if (placeholder.parentElement) self._view.journal.removeChild(placeholder) + // } + // inserted = false + // delete self.scroll2bottom + // } else { + // if (!inserted) self._view.journal.appendChild(placeholder) + // inserted = true + // check() + // if (!placeholder.nextElementSibling) { + // placeholder.style.display = 'none' + // } else { + // placeholder.style = '' + // } + // self.scroll2bottom = function () { + // var next = placeholder.nextElementSibling + // if (next) { + // placeholder.style = '' + // check() + // var messages = 1 + // while ((next = next.nextElementSibling)) messages += 1 + // text.innerText = `${messages} new unread log entries` + // } else { + // placeholder.style.display = 'none' + // } + // } + // } + //} + //function check () { + // var pos1 = self._view.term.offsetHeight + self._view.term.scrollTop - (self._view.el.offsetHeight * 0.15) + // var pos2 = placeholder.offsetTop + // if ((pos1 - pos2) > 0) { + // text.style.display = 'none' + // background.style.position = 'relative' + // background.style.opacity = 0.3 + // background.style.right = 0 + // background.style.borderBox = 'content-box' + // background.style.padding = '2px' + // background.style.height = (self._view.journal.offsetHeight - (placeholder.offsetTop + placeholder.offsetHeight)) + 'px' + // background.onclick = undefined + // background.style.cursor = 'default' + // background.style.pointerEvents = 'none' + // } else { + // background.style = '' + // text.style = '' + // background.onclick = function (event) { + // placeholder.scrollIntoView() + // check() + // } + // } + //} + //function hover (event) { event.currentTarget.classList.toggle(css.hover) } + //function minimize (event) { + // event.preventDefault() + // event.stopPropagation() + // if (event.button === 0) { + // var classList = self._view.icon.classList + // classList.toggle('fa-angle-double-down') + // classList.toggle('fa-angle-double-up') + // self.event.trigger('resize', []) + // } + //} + // var filtertimeout = null + //function filter (event) { + // if (filtertimeout) { + // clearTimeout(filtertimeout) + // } + // filtertimeout = setTimeout(() => { + // self.updateJournal({ type: 'search', value: self._view.inputSearch.value }) + // self.scroll2bottom() + // }, 500) + // } + // function clear (event) { + // refocus() + // self._view.journal.innerHTML = '' + // } + // ----------------- 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 moveGhostbar (event) { // @NOTE HORIZONTAL ghostbar + // ghostbar.style.top = self._api.getPosition(event) + 'px' + // } + // function removeGhostbar (event) { + // if (self._view.icon.classList.contains('fa-angle-double-up')) { + // self._view.icon.classList.toggle('fa-angle-double-down') + // self._view.icon.classList.toggle('fa-angle-double-up') + // } + // document.body.removeChild(ghostbar) + // document.removeEventListener('mousemove', moveGhostbar) + // document.removeEventListener('mouseup', removeGhostbar) + // document.removeEventListener('keydown', cancelGhostbar) + // self.event.trigger('resize', [self._api.getPosition(event)]) + // } + + // self._cmdHistory = [] + // self._cmdIndex = -1 + // self._cmdTemp = '' + + // var intro = yo` + //
- Welcome to Remix ${packageJson.version} -

+ //
You can use this terminal to:
+ //
    + //
  • Check transactions details and start debugging.
    • + //
  • Execute JavaScript scripts: + //
    + // - Input a script directly in the command line interface + //
    + // - Select a Javascript file in the file explorer and then run \`remix.execute()\` or \`remix.exeCurrent()\` in the command line interface + //
    + // - Right click on a JavaScript file in the file explorer and then click \`Run\` + //
    • + //
+ //
The following libraries are accessible:
+ // + //
+ // ` + + //self._shell('remix.help()', self.commands, () => {}) + //self.commands.html(intro) + + //self._components.txLogger = new TxLogger(this, self.blockchain) + // self._components.txLogger.event.register('debuggingRequested', async (hash) => { + // // TODO should probably be in the run module + // if (!await self._opts.appManager.isActive('debugger')) await self._opts.appManager.activatePlugin('debugger') + // this.call('menuicons', 'select', 'debugger') + // this.call('debugger', 'debug', hash) + // }) + + // return self._view.el return this.element + // function wrapScript (script) { + // const isKnownScript = ['remix.', 'git'].some(prefix => script.trim().startsWith(prefix)) + // if (isKnownScript) return script + // return ` + // try { + // const ret = ${script}; + // if (ret instanceof Promise) { + // ret.then((result) => { console.log(result) }).catch((error) => { console.log(error) }) + // } else { + // console.log(ret) + // } + // } catch (e) { + // console.log(e.message) + // } + // ` + // } + //function change (event) { + // if (self._components.autoCompletePopup.handleAutoComplete( + // event, + // self._view.input.innerText)) return + // if (self._view.input.innerText.length === 0) self._view.input.innerText += '\n' + // if (event.which === 13) { + // if (event.ctrlKey) { // + // self._view.input.innerText += '\n' + // self.putCursor2End(self._view.input) + // self.scroll2bottom() + // self._components.autoCompletePopup.removeAutoComplete() + // } else { // + // self._cmdIndex = -1 + // self._cmdTemp = '' + // event.preventDefault() + // var script = self._view.input.innerText.trim() + // self._view.input.innerText = '\n' + // if (script.length) { + // self._cmdHistory.unshift(script) + // self.commands.script(wrapScript(script)) + // } + // self._components.autoCompletePopup.removeAutoComplete() + // } + // } else if (event.which === 38) { // + // var len = self._cmdHistory.length + // if (len === 0) return event.preventDefault() + // if (self._cmdHistory.length - 1 > self._cmdIndex) { + // self._cmdIndex++ + // } + // self._view.input.innerText = self._cmdHistory[self._cmdIndex] + // self.putCursor2End(self._view.input) + // self.scroll2bottom() + // } else if (event.which === 40) { // + // if (self._cmdIndex > -1) { + // self._cmdIndex-- + // } + // self._view.input.innerText = self._cmdIndex >= 0 ? self._cmdHistory[self._cmdIndex] : self._cmdTemp + // self.putCursor2End(self._view.input) + // self.scroll2bottom() + // } else { + // self._cmdTemp = self._view.input.innerText + // } + //} } renderComponent () { - ReactDOM.render(, this.element) + ReactDOM.render( + , + 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`
${el}
` } diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css index e69de29bb2..a8870af675 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.css @@ -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; + } \ No newline at end of file diff --git a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx index f8418db3f2..106f5812a9 100644 --- a/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx +++ b/libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx @@ -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 (
- Welcome to remix-ui-terminal + {console.log({ toggleDownUp })} +
+ {/* ${self._view.dragbar} */} +
+
+ {/* ${self._view.icon} */} + +
+ +
+ {/* ${self._view.pendingTxCount} */} +
0
+
+
+ + +
+
+ + {/* ${self._view.inputSearch} */} + +
+
+
+ Welcome to remix-ui-terminal {console.log(props.propterties, ' properties david')}
) }