From 1da2a737cc2684f3e5cf51c746d7c1eb33805f92 Mon Sep 17 00:00:00 2001 From: PaddyMc Date: Fri, 16 Nov 2018 00:04:14 +0000 Subject: [PATCH] Fixes #1462: UI update & sentance autocomplete --- src/app/constants/commands.js | 2 + src/app/panels/terminal.js | 23 +++-- src/app/ui/auto-complete-popup.js | 92 +++++++++++++------ .../ui/styles/auto-complete-popup-styles.js | 78 ++++++++-------- 4 files changed, 121 insertions(+), 74 deletions(-) diff --git a/src/app/constants/commands.js b/src/app/constants/commands.js index 6406d0911f..fe579ee037 100644 --- a/src/app/constants/commands.js +++ b/src/app/constants/commands.js @@ -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/'}, diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js index 0fa4f961f4..a5cb7ea3e7 100644 --- a/src/app/panels/terminal.js +++ b/src/app/panels/terminal.js @@ -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 {
${self._view.bar} ${self._view.term} - ${self._view.autoCompletePopup}
` setInterval(() => { @@ -428,7 +430,7 @@ class Terminal { } } else if (event.which === 38) { // 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) { // 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()) } } diff --git a/src/app/ui/auto-complete-popup.js b/src/app/ui/auto-complete-popup.js index 43c4d760c5..5c829104f0 100644 --- a/src/app/ui/auto-complete-popup.js +++ b/src/app/ui/auto-complete-popup.js @@ -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`
Remix Commands
` self._view.autoComplete = yo` -
-
- ${self.data._options.map((item, index) => { - return yo` -
-
- -
- ${Object.keys(item)[0]} -
- -
- ${Object.values(item)[0]} +
+
+ ${self.data._options.map((item, index) => { + return yo` +
+ +
+ ${Object.keys(item)[0]}
-
-
- ` - })} -
- - -
Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}
+ +
+ ${Object.values(item)[0]} +
+
+
+ ` + })} +
+
+ + +
Page ${(self._startingElement / self._elementsToShow) + 1} of ${Math.ceil(self.data._options.length / self._elementsToShow)}
+
` - 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 diff --git a/src/app/ui/styles/auto-complete-popup-styles.js b/src/app/ui/styles/auto-complete-popup-styles.js index f3897072d2..5141ce7436 100644 --- a/src/app/ui/styles/auto-complete-popup-styles.js +++ b/src/app/ui/styles/auto-complete-popup-styles.js @@ -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