Fixes #1462: UI update & sentance autocomplete

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/'},

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 {
       <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())
     }
   }

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,17 +28,26 @@ 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}">
+        <div>
           ${self.data._options.map((item, index) => {
             return yo`
               <div class="${css.listHandlerHide}">
-                  <hr/>
                   <a value=${index}>
                     <div onclick=${handleSelect}>
                       ${Object.keys(item)[0]} 
@@ -49,25 +61,42 @@ class AutoCompletePopup {
             `
           })}
         </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>
+        <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>
     `
+    function setUpPopUp () {
+      handleOpenPopup()
       handleNagivationButtons()
       handleListSize()
-    return self._view.autoComplete
+    }
+
+    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

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