add caret to dropdownpanel / remove ASMCode.js

src/ui/ASMCode.js

@@ -1,55 +0,0 @@
-'use strict'
-var style = require('./styles/basicStyles')
-var yo = require('yo-yo')
-var ui = require('../helpers/ui')
-
-function ASMCode (_parent, _codeManager) {
-  this.parent = _parent
-  this.codeManager = _codeManager
-  this.code
-  this.address
-  this.codeView
-
-  this.init()
-}
-
-ASMCode.prototype.render = function () {
-  var view = (
-    yo`<select size='10' id='asmitems' ref='itemsList' style=${ui.formatCss(style.instructionsList)}>
-      ${this.codeView}
-    </select>`
-  )
-  if (!this.view) {
-    this.view = view
-  }
-  return view
-}
-
-ASMCode.prototype.init = function () {
-  this.codeManager.event.register('changed', this, this.changed)
-}
-
-ASMCode.prototype.indexChanged = function (index) {
-  document.getElementById('asmitems').value = index
-}
-
-ASMCode.prototype.changed = function (code, address, index) {
-  if (this.address !== address) {
-    this.code = code
-    this.address = address
-    this.renderAssemblyItems()
-    yo.update(this.view, this.render())
-  }
-  this.indexChanged(index)
-}
-
-ASMCode.prototype.renderAssemblyItems = function () {
-  if (this.code) {
-    this.codeView = this.code.map(function (item, i) {
-      return yo`<option key=${i} value=${i}>${item}</option>`
-    })
-    return this.codeView
-  }
-}
-
-module.exports = ASMCode

src/ui/DropdownPanel.js

@@ -41,6 +41,7 @@ DropdownPanel.prototype.render = function (overridestyle) {
   var self = this
   var view = yo`<div>
     <div class='title' style=${ui.formatCss(styleDropdown.title)} onclick=${function () { self.toggle() }}>
+      <div style=${ui.formatCss(styleDropdown.caret)} class='fa fa-caret-right'></div>
       <div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div>
     </div>
     <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
@@ -65,24 +66,31 @@ DropdownPanel.prototype.toggleRaw = function () {
 
 DropdownPanel.prototype.toggle = function () {
   var el = this.view.querySelector('.dropdownpanel')
+  var caret = this.view.querySelector('.title').firstElementChild
   if (el.style.display === '') {
     el.style.display = 'none'
+    caret.className = 'fa fa-caret-right'
   } else {
     el.style.display = ''
+    caret.className = 'fa fa-caret-down'
   }
 }
 
 DropdownPanel.prototype.hide = function () {
   if (this.view) {
+    var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = 'none'
+    caret.className = 'fa fa-caret-right'
   }
 }
 
 DropdownPanel.prototype.show = function () {
   if (this.view) {
+    var caret = this.view.querySelector('.title').firstElementChild
     var el = this.view.querySelector('.dropdownpanel')
     el.style.display = ''
+    caret.className = 'fa fa-caret-down'
   }
 }
 

src/ui/styles/basicStyles.js

@@ -27,7 +27,9 @@ module.exports = {
     'width': '52%',
     'overflow-y': 'scroll',
     'max-height': '250px',
-    'margin': '0'
+    'margin': '0',
+    'margin-left': '10px',
+    'padding': '2px'
   },
   transactionInfo: {
     'margin-top': '5px'

src/ui/styles/dropdownPanel.js

@@ -18,11 +18,13 @@ module.exports = {
   },
   inner: {
     'padding': '2px',
-    'margin-left': '10px',
     'word-break': 'break-all'
   },
   copyBtn: {
     'float': 'right',
     'margin-top': '3px'
+  },
+  caret: {
+    'margin-left': '5px'
   }
 }