Merge pull request #1765 from ethereum/swap_it_style_fixes_l

Swap it key navigation on modal dialog and context menu style fixes

src/app/panels/tab-proxy.js

@@ -110,8 +110,8 @@ export class TabProxy {
       <div class="d-flex">
         <div class="m-1">
           <span class="p-1">
-            <i class="m-1 fa fa-plus" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
+            <i class="m-1 fa fa-plus" style="color: var(--text-dark)" onclick=${increase} aria-hidden="true" title="increase editor font size"></i>
-            <i class="m-1 fa fa-minus" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
+            <i class="m-1 fa fa-minus" style="color: var(--text-dark)" onclick=${decrease} aria-hidden="true" title="decrease editor font size"></i>
           </span>
         </div>
         ${this._view.tabs}

src/app/ui/contextMenu.js

@@ -5,36 +5,29 @@ var csjs = require('csjs-inject')
 var css = csjs`
     .container
     {
-        display: none;
+      display: none;
-        position: fixed;
+      position: fixed;
-        border: 1px solid var(--primary);
+      width:100px;
-        width:150px; 
+      border-radius: 2px;
-        border-radius: 2px;
+      z-index: 1000;
-        z-index: 1000;
+      box-shadow: 0 0 4px var(--dark);
     }
-    
     .liitem
     {
-        padding: 3px;
+      padding: 2px;
-        padding-left: 10px;
+      padding-left: 6px;
-        cursor: pointer;
+      cursor: pointer;
+      color: var(--text-dark);
+      background-color: var(--light);
     }
-    
+    .liitem:hover
-    #menuitems
     {
-        list-style: none;
+      background-color:  var(--secondary);
-        margin: 0px;
-        margin-top: 4px;
-        padding-left: 5px;
-        padding-right: 5px;
-        padding-bottom: 3px;
-        color: var(--primary);
     }
-
+    #menuitems
-    #menuitems :hover
     {
-        background: $var(--seconday);
+      list-style: none;
-        border-radius: 2px;
+      margin: 0px;
     }
 `
 
@@ -53,7 +46,7 @@ module.exports = (event, items) => {
     current.onclick = () => { hide(null, true); items[item]() }
     return current
   })
-  var container = yo`<div class=${css.container}><ul id='menuitems'>${menu}</ul></div>`
+  var container = yo`<div class="${css.container} bg-light"><ul id='menuitems'>${menu}</ul></div>`
   container.style.left = event.pageX + 'px'
   container.style.top = event.pageY + 'px'
   container.style.display = 'block'

src/app/ui/modaldialog.js

@@ -2,6 +2,7 @@ var yo = require('yo-yo')
 var css = require('./styles/modaldialog-styles')
 
 module.exports = (title, content, ok, cancel, focusSelector, opts) => {
+  let agreed = true
   opts = opts || {}
   var container = document.querySelector(`.${css.modal}`)
   if (!container) {
@@ -29,12 +30,26 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
   modal.innerHTML = ''
   if (content) modal.appendChild(content)
 
+  setFocusOn('ok')
+
   show()
 
+  function setFocusOn (btn) {
+    var okDiv = document.getElementById('modal-footer-ok')
+    var cancelDiv = document.getElementById('modal-footer-cancel')
+    if (btn === 'ok') {
+      okDiv.className = okDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
+      cancelDiv.className = cancelDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
+    } else {
+      cancelDiv.className = cancelDiv.className.replace(/\bbtn-light\b/g, 'btn-dark')
+      okDiv.className = okDiv.className.replace(/\bbtn-dark\b/g, 'btn-light')
+    }
+  }
+
   function okListener () {
     removeEventListener()
     hide()
-    if (ok && ok.fn) ok.fn()
+    if (ok && ok.fn && agreed) ok.fn()
   }
 
   function cancelListener () {
@@ -53,6 +68,14 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
     } else if (e.keyCode === 13) {
       e.preventDefault()
       okListener()
+    } else if (e.keyCode === 37) {
+      e.preventDefault()
+      agreed = true
+      setFocusOn('ok')
+    } else if (e.keyCode === 39) {
+      e.preventDefault()
+      agreed = false
+      setFocusOn('cancel')
     }
   }
 
@@ -96,16 +119,17 @@ module.exports = (title, content, ok, cancel, focusSelector, opts) => {
 function html (opts) {
   return yo`<div id="modal-dialog" class="${css.modal}">
   <div id="modal-background" class="${css['modalBackground']}"> </div>
-  <div class="${css['modalContent']} bg-light text-secondary ${opts.class}">
+    <div class="${css['modalContent']} bg-light text-secondary ${opts.class}">
-    <div class="${css['modalHeader']}">
+      <div class="${css['modalHeader']}">
-    <h3></h3>
+        <h3></h3>
-    <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
+        <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
-  </div>
+      </div>
-  <div class="${css['modalBody']}"> -
+      <div class="${css['modalBody']}"> -
-  </div>
+      </div>
-  <div class="${css['modalFooter']}">
+      <div class="${css['modalFooter']}">
-    <span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-primary">OK</span><span id="modal-footer-cancel"  class="${css['modalFooterCancel']} btn btn-sm btn-primary">Cancel</span>
+        <span id="modal-footer-ok" class="${css['modalFooterOk']} btn btn-sm btn-light">OK</span>
-        </div>
+        <span id="modal-footer-cancel" class="${css['modalFooterCancel']} btn btn-sm btn-light">Cancel</span>
-  </div>
+      </div>
+    </div>
   </div>`
 }

src/app/ui/styles-guide/theme-chooser.js

@@ -3,19 +3,21 @@ var EventEmitter = require('events')
 
 // TODO : Put it somewhere else
 const themes = [
-  {name: 'cerulean', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cerulean/bootstrap.min.css'},
+  {name: 'Flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
-  {name: 'materia', quality: 'light', url: 'https://bootswatch.com/4/materia/bootstrap.min.css'},
+  {name: 'Journal', quality: 'light', url: 'https://bootswatch.com/4/journal/bootstrap.min.css'},
-  {name: 'litera', quality: 'light', url: 'https://bootswatch.com/4/litera/bootstrap.min.css'},
+  {name: 'Lumen', quality: 'light', url: 'https://bootswatch.com/4/lumen/bootstrap.min.css'},
-  {name: 'cosmo', quality: 'light', url: 'https://bootswatch.com/4/cosmo/bootstrap.min.css'},
+  {name: 'Minty', quality: 'light', url: 'https://bootswatch.com/4/minty/bootstrap.min.css'},
-  {name: 'flatly', quality: 'light', url: 'https://bootswatch.com/4/flatly/bootstrap.min.css'},
+  {name: 'Sandstone', quality: 'light', url: 'https://bootswatch.com/4/sandstone/bootstrap.min.css'},
-  {name: 'lux', quality: 'light', url: 'https://bootswatch.com/4/lux/bootstrap.min.css'},
+  {name: 'Spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'},
-  {name: 'spacelab', quality: 'light', url: 'https://bootswatch.com/4/spacelab/bootstrap.min.css'},
+  {name: 'United', quality: 'light', url: 'https://bootswatch.com/4/united/bootstrap.min.css'},
-  {name: 'yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'},
+  {name: 'Yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'},
-  {name: 'darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'},
+  {name: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/bootstrap.min.css'},
-  {name: 'slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'}
+  {name: 'Darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'},
+  {name: 'Slate', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'},
+  {name: 'Superhero', quality: 'dark', url: 'https://bootswatch.com/4/superhero/bootstrap.min.css'}
 ]
 
-const defaultTheme = themes[0].name
+const defaultTheme = 'Superhero'
 
 module.exports = {
   event: new EventEmitter(),

src/app/ui/styles/modaldialog-styles.js

@@ -56,9 +56,20 @@ var css = csjs`
     animation-duration: 0.4s
   }
   .modalFooterOk {
+    background-color: var(--light);
+    color: var(--dark);
+    cursor: pointer;
+  }
+  .modalFooterOk:hover {
     cursor: pointer;
   }
   .modalFooterCancel {
+    background-color: var(--light);
+    color: var(--dark);
+    margin-left: 1em;
+    cursor: pointer;
+  }
+  .modalFooterCancel:hover {
     margin-left: 1em;
     cursor: pointer;
   }