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

Fixes #1462: UI update & sentance autocomplete

Browse Source
pull/1/head
PaddyMc 6 years ago committed by Rob Stupay
parent 189992777c
commit 1da2a737cc
4 changed files with 121 additions and 74 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. 2
      src/app/constants/commands.js
  2. 23
      src/app/panels/terminal.js
  3. 92
      src/app/ui/auto-complete-popup.js
  4. 78
      src/app/ui/styles/auto-complete-popup-styles.js

2
src/app/constants/commands.js
Unescape View File

@ -10,9 +10,11 @@ const allCommands = [
{'remix.debugHelp()': 'Display help message for debugging'},
{'remix.execute(filepath)': 'Run the script specified by file path. If filepath is empty, script currently displayed in the editor is executed.'},
{'remix.exeCurrent()': 'Run the script currently displayed in the editor.'},
{'remix.getFile(path)': 'Returns the content of the file located at the given path'},
{'remix.help()': 'Display this help message.'},
{'remix.loadgist(id)': 'Load a gist in the file explorer.'},
{'remix.loadurl(url)': 'Load the given url in the file explorer. The url can be of type github, swarm or ipfs.'},
{'remix.setFile(path, content)': 'set the content of the file located at the given path'},
{'remix.setproviderurl(url)': 'Change the current provider to Web3 provider and set the url endpoint.'},
{'swarmgw.get(url, cb)': 'Download files from Swarm via https://swarm-gateways.net/'},

23
src/app/panels/terminal.js
Unescape View File

@ -68,7 +68,10 @@ class Terminal {
self._components.autoCompletePopup.event.register('handleSelect', function (input) {
self._components.autoCompletePopup.data._options = []
self._components.autoCompletePopup._startingElement = 0
self._view.input.innerText = input
let textList = self._view.input.innerText.split(' ')
textList.pop()
textList.push(input)
self._view.input.innerText = `${textList}`.replace(/,/g, ' ')
self._view.input.focus()
yo.update(self._view.autoCompletePopup, self._components.autoCompletePopup.render())
})
@ -167,7 +170,6 @@ class Terminal {
<div class=${css.panel}>
${self._view.bar}
${self._view.term}
${self._view.autoCompletePopup}
</div>
`
setInterval(() => {
@ -428,7 +430,7 @@ class Terminal {
}
} else if (event.which === 38) { // <arrowUp>
if (self._components.autoCompletePopup.data._options.length > self._components.autoCompletePopup._elementsToShow) {
self._components.autoCompletePopup._view.autoComplete.children[1].onclick(event)
self._components.autoCompletePopup._view.autoComplete.children[1].children[0].onclick(event)
} else {
var len = self._cmdHistory.length
if (len === 0) return event.preventDefault()
@ -441,7 +443,7 @@ class Terminal {
}
} else if (event.which === 40) { // <arrowDown>
if (self._components.autoCompletePopup.data._options.length > self._components.autoCompletePopup._elementsToShow) {
self._components.autoCompletePopup._view.autoComplete.children[1].onclick(event)
self._components.autoCompletePopup._view.autoComplete.children[1].children[1].onclick(event)
} else {
if (self._cmdIndex > -1) {
self._cmdIndex--
@ -484,14 +486,16 @@ class Terminal {
function handleAutoComplete (event) {
if (event.which === 9) {
event.preventDefault()
let textList = self._view.input.innerText.split(' ')
let autoCompleteInput = textList.length > 1 ? textList[textList.length - 1] : textList[0]
if (self._view.input.innerText.length >= 2) {
self._components.autoCompletePopup.data._options = []
Commands.allPrograms.forEach(item => {
if (Object.keys(item)[0].substring(0, Object.keys(item)[0].length - 1).includes(self._view.input.innerText.trim())) {
if (Object.keys(item)[0].substring(0, Object.keys(item)[0].length - 1).includes(autoCompleteInput.trim())) {
self._components.autoCompletePopup.data._options.push(item)
} else if (self._view.input.innerText.trim().includes(Object.keys(item)[0]) || (Object.keys(item)[0] === self._view.input.innerText.trim())) {
} else if (autoCompleteInput.trim().includes(Object.keys(item)[0]) || (Object.keys(item)[0] === autoCompleteInput.trim())) {
Commands.allCommands.forEach(item => {
if (Object.keys(item)[0].includes(self._view.input.innerText.trim())) {
if (Object.keys(item)[0].includes(autoCompleteInput.trim())) {
self._components.autoCompletePopup.data._options.push(item)
}
})
@ -499,7 +503,9 @@ class Terminal {
})
}
if (self._components.autoCompletePopup.data._options.length === 1) {
self._view.input.innerText = Object.keys(self._components.autoCompletePopup.data._options[0])[0]
textList.pop()
textList.push(Object.keys(self._components.autoCompletePopup.data._options[0])[0])
self._view.input.innerText = `${textList}`.replace(/,/g, ' ')
self._components.autoCompletePopup.data._options = []
putCursor2End(self._view.input)
}
@ -513,6 +519,7 @@ class Terminal {
function removeAutoComplete () {
self._components.autoCompletePopup.data._options = []
self._components.autoCompletePopup._startingElement = 0
self._components.autoCompletePopup._removePopUp()
yo.update(self._view.autoCompletePopup, self._components.autoCompletePopup.render())
}
}

92
src/app/ui/auto-complete-popup.js
Unescape View File

@ -2,8 +2,11 @@ var yo = require('yo-yo')
var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager
var modal = require('./modaldialog.js')
// -------------- styling ----------------------
var css = require('./styles/auto-complete-popup-styles')
var cssModal = require('./styles/modaldialog-styles')
/* USAGE:
@ -25,49 +28,75 @@ class AutoCompletePopup {
self._view = {}
self._startingElement = 0
self._elementsToShow = 3
self._removePopUp = this.resetCSSValuesModalContainer
}
resetCSSValuesModalContainer () {
var modalContainer = document.querySelector(`.${cssModal.modal}`)
modalContainer.style.display = 'none'
var modalContent = document.querySelector(`.${css.modalContent}`)
let newModalContent = modalContent ? document.querySelector(`.${css.modalContent}`) : document.querySelector(`.${cssModal.modalContent}`)
newModalContent.className = cssModal.modalContent
}
render () {
var self = this
var header = yo`<div class="${css.text}">Remix Commands</div>`
self._view.autoComplete = yo`
<div class="${css.popup}">
<div class="${css.popupcontent}">
${self.data._options.map((item, index) => {
return yo`
<div class="${css.listHandlerHide}">
<hr/>
<a value=${index}>
<div onclick=${handleSelect}>
${Object.keys(item)[0]}
</div>
</a>
<div>
${Object.values(item)[0]}
<div class="${css.popup}">
<div>
${self.data._options.map((item, index) => {
return yo`
<div class="${css.listHandlerHide}">
<a value=${index}>
<div onclick=${handleSelect}>
${Object.keys(item)[0]}
</div>
<hr/>
</div>
`
})}
</div>
<button class="${css.listHandlerHide}" value=false onclick=${handleListIteration}>▲</button>
<button class="${css.listHandlerHide}" value=true onclick=${handleListIteration}>▼</button>
<div class="${css.listHandlerHide}">Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}</div>
</a>
<div>
${Object.values(item)[0]}
</div>
<hr/>
</div>
`
})}
</div>
<div class="${css.listHandlerHide}">
<button value=false onclick=${handleListIteration}>▲</button>
<button value=true onclick=${handleListIteration}>▼</button>
<div class="${css.pageNumberAlignment}">Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}</div>
</div>
</div>
`
handleNagivationButtons()
handleListSize()
return self._view.autoComplete
function setUpPopUp () {
handleOpenPopup()
handleNagivationButtons()
handleListSize()
}
function handleOpenPopup () {
if (self.data._options.length > 1) {
self._view.autoComplete.style.display = 'block'
modal(header.innerText, self._view.autoComplete, {label: null},
{
fn: () => { self._removePopUp() }
})
editCSSValuesModalContainer()
}
}
function handleSelect (event) {
self._removePopUp()
self._view.autoComplete.style.display = 'none'
self.event.trigger('handleSelect', [event.srcElement.innerText])
}
function handleNagivationButtons () {
if (self.data._options.length > self._elementsToShow) {
self._view.autoComplete.children[1].className = css.listHandlerButtonShow
self._view.autoComplete.children[2].className = css.listHandlerButtonShow
self._view.autoComplete.children[3].className = css.pageNumberAlignment
}
}
function handleListSize () {
if (self.data._options.length >= self._startingElement) {
for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) {
@ -77,6 +106,7 @@ class AutoCompletePopup {
}
}
}
function handleListIteration (event) {
if (event.srcElement.value === 'true' || event.which === 40) {
if ((self._startingElement + self._elementsToShow) < self.data._options.length) {
@ -89,7 +119,17 @@ class AutoCompletePopup {
}
self.event.trigger('updateList')
}
function editCSSValuesModalContainer () {
var modalContent = document.querySelector(`.${cssModal.modalContent}`)
let newModalContent = modalContent ? document.querySelector(`.${cssModal.modalContent}`) : document.querySelector(`.${css.modalContent}`)
newModalContent.className = css.modalContent
}
setUpPopUp()
return self._view
}
}
module.exports = AutoCompletePopup

78
src/app/ui/styles/auto-complete-popup-styles.js
Unescape View File

@ -4,43 +4,17 @@ var styles = styleGuide.chooser()
var css = csjs`
.popup {
text-align : center;
z-index : 1;
position : absolute;
width : 100%;
justify-content : center;
bottom : 0;
margin-bottom : 32px;
border-radius : 6px;
padding : 8px 0;
opacity : 0.8;
}
.popupcontent {
display : block;
position : absolute;
background-color : #f1f1f1;
text-align : left;
display : none;
width : 100%;
box-shadow : 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index : 1;
bottom : 100%;
}
.popupcontent a {
color : ${styles.terminal.text_Primary};
font-family : monospace;
font-size : 10px;
display : block;
cursor : pointer;
}
.popupcontent div {
font-family : monospace;
font-size : 10px;
overflow : auto;
padding-bottom : 13px;
}
.popupcontent a:hover {
background-color : #ddd;
.popup a {
cursor : pointer;
}
.listHandlerShow {
@ -52,18 +26,42 @@ var css = csjs`
}
.listHandlerButtonShow {
display : inline;
float : center;
opacity : 0.8;
position : fixed;
width : 46%;
}
.pageNumberAlignment {
display : inline;
position : absolute;
padding-right : 10px;
font-family : monospace;
font-size : 10px;
margin-left : 30%;
float : right;
}
.modalContent {
position : absolute;
margin-left : 20%;
margin-bottom : 32px;
bottom : 0px;
background-color : ${styles.colors.black};
padding : 0;
line-height : 18px;
font-size : 12px;
border : 1px solid ${styles.colors.grey};
width : 50%;
box-shadow : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 0.4s;
animation-name : animatetop;
animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
@keyframes animatetop {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
`
module.exports = css

Write Preview
Loading…
Cancel
Save