Merge pull request #771 from ethereum/smalluifixes

Terminal Menu Bar -  UI

src/app/panels/terminal.js

@@ -18,9 +18,8 @@ var css = csjs`
     flex-direction    : column;
     font-size         : 12px;
     font-family       : monospace;
-    color             : black;
-    background-color  : lightgrey;
-    margin-top        : auto;
+    color             : #777;
+    background-color  : #ededed;
     height            : 100%;
     min-height        : 1.7em;
     overflow          : hidden;
@@ -38,9 +37,7 @@ var css = csjs`
     display           : flex;
     align-items       : center;
     width             : 100%;
-  }
-  .title              {
-    margin-right      : 15px;
+    padding           : 5px;
   }
   .minimize           {
     margin-left       : auto;
@@ -91,6 +88,10 @@ var css = csjs`
     outline           : none;
     font-family       : monospace;
   }
+  .filter             {
+    padding           : 3px;
+    width             : 20em;    
+  }
 
   .dragbarHorizontal  {
     position          : absolute;
@@ -135,17 +136,30 @@ class Terminal {
     self._components = {}
     self._components.dropdown = new Dropdown({
       options: [
-        'knownTransaction',
-        'unknownTransaction',
+        'only remix transactions',
+        'all transactions',
         'script'
       ],
-      defaults: ['knownTransaction', 'script']
+      defaults: ['only remix transactions', 'script'],
+      dependencies: {'all transactions': ['only remix transactions'], 'only remix transactions': ['all transactions']}
     })
     self._components.dropdown.event.register('deselect', function (label) {
-      self.updateJournal({ type: 'deselect', value: label })
+      if (label === 'only remix transactions') {
+        self.updateJournal({ type: 'select', value: 'unknownTransaction' })
+      } else if (label === 'all transactions') {
+        self.updateJournal({ type: 'deselect', value: 'unknownTransaction' })
+      } else { // script
+        self.updateJournal({ type: 'deselect', value: label })
+      }
     })
     self._components.dropdown.event.register('select', function (label) {
-      self.updateJournal({ type: 'select', value: label })
+      if (label === 'only remix transactions') {
+        self.updateJournal({ type: 'deselect', value: 'unknownTransaction' })
+      } else if (label === 'all transactions') {
+        self.updateJournal({ type: 'select', value: 'unknownTransaction' })
+      } else { // script
+        self.updateJournal({ type: 'select', value: label })
+      }
     })
     self._commands = {}
     self.commands = {}
@@ -171,6 +185,7 @@ class Terminal {
     self._jsSandbox = vm.createContext(self._jsSandboxContext)
     if (opts.shell) self._shell = opts.shell
     register(self)
+    self.updateJournal({ type: 'select', value: 'knownTransaction' })
   }
   render () {
     var self = this
@@ -192,7 +207,6 @@ class Terminal {
       <div class=${css.bar}>
         ${self._view.dragbar}
         <div class=${css.menu}>
-          <div class=${css.title}>Remix Terminal</div>
           <div class=${css.clear} onclick=${clear}>
             <i class="fa fa-ban" aria-hidden="true" onmouseenter=${hover} onmouseleave=${hover}></i>
           </div>

src/app/ui/dropdown.js

@@ -13,7 +13,6 @@ var css = csjs`
     display           : flex;
     align-items       : center;
     background-color  : lightgrey;
-    border-radius     : 5px;
     margin            : 3px;
     cursor            : pointer;
   }
@@ -24,6 +23,7 @@ var css = csjs`
     white-space       : nowrap;
     text-overflow     : ellipsis;
     overflow          : hidden;
+    padding           : 3px;
   }
   .icon               {
     padding           : 0px 5px;
@@ -65,7 +65,9 @@ class Dropdown {
     self.event = new EventManager()
     self.data = {
       _options: opts.options || [],
-      selected: opts.defaults || []
+      _dependencies: opts.dependencies || [],
+      selected: opts.defaults || [],
+      _elements: []
     }
     self._view = {}
     self._api = opts.api
@@ -85,11 +87,12 @@ class Dropdown {
         ${self._view.selected}
         <div class=${css.options} style="display: none;">
           ${self.data._options.map(label => {
-            var input = yo`<input onchange=${emit} type="checkbox" />`
+            var input = yo`<input data-idx=${self.data._elements.length} onchange=${emit} type="checkbox" />`
             if (self.data.selected.indexOf(label) !== -1) {
               input.checked = true
               self.event.trigger('select', [label])
             }
+            self.data._elements.push(input)
             return yo`
               <div class=${css.option}>
                 ${input}
@@ -106,14 +109,30 @@ class Dropdown {
       var label = input.nextSibling.innerText
       if (input.checked) {
         self.data.selected.push(label)
-        self.event.trigger('select', [label])
+        if (event.type === 'change') {
+          self.event.trigger('select', [label])
+          updateDependencies(label)
+        }
       } else {
         var idx = self.data.selected.indexOf(label)
         self.data.selected.splice(idx, 1)
-        self.event.trigger('deselect', [label])
+        if (event.type === 'change') {
+          self.event.trigger('deselect', [label])
+          updateDependencies(label)
+        }
       }
       self._view.selected.children[0].innerText = `[${self.data.selected.length}] ${self.data.selected.join(', ')}`
     }
+    function updateDependencies (changed) {
+      if (self.data._dependencies[changed]) {
+        for (var dep in self.data._dependencies[changed]) {
+          var label = self.data._dependencies[changed][dep]
+          var el = self.data._elements[self.data._options.indexOf(label)]
+          el.checked = !el.checked
+          emit({currentTarget: el, type: 'changeDependencies'})
+        }
+      }
+    }
     function show (event) {
       event.stopPropagation()
       var options = event.currentTarget.children[1]