Skip to content

B
baas-ide
Commit 1da2a737 authored by PaddyMc's avatar PaddyMc Committed by Rob Stupay
Browse files
Options

Fixes #1462: UI update & sentance autocomplete

parent 18999277
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 74 deletions
src/app/constants/commands.js
View file @ 1da2a737
...@@ -10,9 +10,11 @@ const allCommands = [ ...@@ -10,9 +10,11 @@ const allCommands = [
{'remix.debugHelp()': 'Display help message for debugging'}, {'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.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.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.help()': 'Display this help message.'},
{'remix.loadgist(id)': 'Load a gist in the file explorer.'}, {'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.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.'}, {'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/'}, {'swarmgw.get(url, cb)': 'Download files from Swarm via https://swarm-gateways.net/'},
......
src/app/panels/terminal.js
View file @ 1da2a737
...@@ -68,7 +68,10 @@ class Terminal { ...@@ -68,7 +68,10 @@ class Terminal {
self._components.autoCompletePopup.event.register('handleSelect', function (input) { self._components.autoCompletePopup.event.register('handleSelect', function (input) {
self._components.autoCompletePopup.data._options = [] self._components.autoCompletePopup.data._options = []
self._components.autoCompletePopup._startingElement = 0 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() self._view.input.focus()
yo.update(self._view.autoCompletePopup, self._components.autoCompletePopup.render()) yo.update(self._view.autoCompletePopup, self._components.autoCompletePopup.render())
}) })
...@@ -167,7 +170,6 @@ class Terminal { ...@@ -167,7 +170,6 @@ class Terminal {
<div class=${css.panel}> <div class=${css.panel}>
${self._view.bar} ${self._view.bar}
${self._view.term} ${self._view.term}
${self._view.autoCompletePopup}
</div> </div>
` `
setInterval(() => { setInterval(() => {
...@@ -428,7 +430,7 @@ class Terminal { ...@@ -428,7 +430,7 @@ class Terminal {
} }
} else if (event.which === 38) { // <arrowUp> } else if (event.which === 38) { // <arrowUp>
if (self._components.autoCompletePopup.data._options.length > self._components.autoCompletePopup._elementsToShow) { 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 { } else {
var len = self._cmdHistory.length var len = self._cmdHistory.length
if (len === 0) return event.preventDefault() if (len === 0) return event.preventDefault()
...@@ -441,7 +443,7 @@ class Terminal { ...@@ -441,7 +443,7 @@ class Terminal {
} }
} else if (event.which === 40) { // <arrowDown> } else if (event.which === 40) { // <arrowDown>
if (self._components.autoCompletePopup.data._options.length > self._components.autoCompletePopup._elementsToShow) { 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 { } else {
if (self._cmdIndex > -1) { if (self._cmdIndex > -1) {
self._cmdIndex-- self._cmdIndex--
...@@ -484,14 +486,16 @@ class Terminal { ...@@ -484,14 +486,16 @@ class Terminal {
function handleAutoComplete (event) { function handleAutoComplete (event) {
if (event.which === 9) { if (event.which === 9) {
event.preventDefault() 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) { if (self._view.input.innerText.length >= 2) {
self._components.autoCompletePopup.data._options = [] self._components.autoCompletePopup.data._options = []
Commands.allPrograms.forEach(item => { 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) 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 => { 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) self._components.autoCompletePopup.data._options.push(item)
} }
}) })
...@@ -499,7 +503,9 @@ class Terminal { ...@@ -499,7 +503,9 @@ class Terminal {
}) })
} }
if (self._components.autoCompletePopup.data._options.length === 1) { 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 = [] self._components.autoCompletePopup.data._options = []
putCursor2End(self._view.input) putCursor2End(self._view.input)
} }
...@@ -513,6 +519,7 @@ class Terminal { ...@@ -513,6 +519,7 @@ class Terminal {
function removeAutoComplete () { function removeAutoComplete () {
self._components.autoCompletePopup.data._options = [] self._components.autoCompletePopup.data._options = []
self._components.autoCompletePopup._startingElement = 0 self._components.autoCompletePopup._startingElement = 0
self._components.autoCompletePopup._removePopUp()
yo.update(self._view.autoCompletePopup, self._components.autoCompletePopup.render()) yo.update(self._view.autoCompletePopup, self._components.autoCompletePopup.render())
} }
} }
......
src/app/ui/auto-complete-popup.js
View file @ 1da2a737
...@@ -2,8 +2,11 @@ var yo = require('yo-yo') ...@@ -2,8 +2,11 @@ var yo = require('yo-yo')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager var EventManager = remixLib.EventManager
var modal = require('./modaldialog.js')
// -------------- styling ---------------------- // -------------- styling ----------------------
var css = require('./styles/auto-complete-popup-styles') var css = require('./styles/auto-complete-popup-styles')
var cssModal = require('./styles/modaldialog-styles')
/* USAGE: /* USAGE:
...@@ -25,49 +28,75 @@ class AutoCompletePopup { ...@@ -25,49 +28,75 @@ class AutoCompletePopup {
self._view = {} self._view = {}
self._startingElement = 0 self._startingElement = 0
self._elementsToShow = 3 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 () { render () {
var self = this var self = this
var header = yo`<div class="${css.text}">Remix Commands</div>`
self._view.autoComplete = yo` self._view.autoComplete = yo`
<div class="${css.popup}"> <div class="${css.popup}">
<div class="${css.popupcontent}"> <div>
${self.data._options.map((item, index) => { ${self.data._options.map((item, index) => {
return yo` return yo`
<div class="${css.listHandlerHide}"> <div class="${css.listHandlerHide}">
<hr/> <a value=${index}>
<a value=${index}> <div onclick=${handleSelect}>
<div onclick=${handleSelect}> ${Object.keys(item)[0]}
${Object.keys(item)[0]}
</div>
</a>
<div>
${Object.values(item)[0]}
</div> </div>
<hr/> </a>
</div> <div>
` ${Object.values(item)[0]}
})} </div>
</div> <hr/>
<button class="${css.listHandlerHide}" value=false onclick=${handleListIteration}>▲</button> </div>
<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> })}
</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>
</div>
` `
handleNagivationButtons() function setUpPopUp () {
handleListSize() handleOpenPopup()
return self._view.autoComplete 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) { function handleSelect (event) {
self._removePopUp()
self._view.autoComplete.style.display = 'none'
self.event.trigger('handleSelect', [event.srcElement.innerText]) self.event.trigger('handleSelect', [event.srcElement.innerText])
} }
function handleNagivationButtons () { function handleNagivationButtons () {
if (self.data._options.length > self._elementsToShow) { if (self.data._options.length > self._elementsToShow) {
self._view.autoComplete.children[1].className = css.listHandlerButtonShow 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 () { function handleListSize () {
if (self.data._options.length >= self._startingElement) { if (self.data._options.length >= self._startingElement) {
for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) { for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) {
...@@ -77,6 +106,7 @@ class AutoCompletePopup { ...@@ -77,6 +106,7 @@ class AutoCompletePopup {
} }
} }
} }
function handleListIteration (event) { function handleListIteration (event) {
if (event.srcElement.value === 'true' || event.which === 40) { if (event.srcElement.value === 'true' || event.which === 40) {
if ((self._startingElement + self._elementsToShow) < self.data._options.length) { if ((self._startingElement + self._elementsToShow) < self.data._options.length) {
...@@ -89,7 +119,17 @@ class AutoCompletePopup { ...@@ -89,7 +119,17 @@ class AutoCompletePopup {
} }
self.event.trigger('updateList') 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 module.exports = AutoCompletePopup
src/app/ui/styles/auto-complete-popup-styles.js
View file @ 1da2a737
...@@ -4,43 +4,17 @@ var styles = styleGuide.chooser() ...@@ -4,43 +4,17 @@ var styles = styleGuide.chooser()
var css = csjs` var css = csjs`
.popup { .popup {
text-align : center; text-align : left;
z-index : 1; display : none;
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;
width : 100%; 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-family : monospace;
font-size : 10px; font-size : 10px;
overflow : auto;
padding-bottom : 13px;
} }
.popupcontent a:hover { .popup a {
background-color : #ddd; cursor : pointer;
} }
.listHandlerShow { .listHandlerShow {
...@@ -52,18 +26,42 @@ var css = csjs` ...@@ -52,18 +26,42 @@ var css = csjs`
} }
.listHandlerButtonShow { .listHandlerButtonShow {
display : inline; position : fixed;
float : center; width : 46%;
opacity : 0.8;
} }
.pageNumberAlignment { .pageNumberAlignment {
display : inline;
position : absolute;
padding-right : 10px;
font-family : monospace;
font-size : 10px; 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 module.exports = css
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