use font-awesome.css for button

harryEth · Nov 23, 2016 · c65476f · c65476f
1 parent 0261c3a
commit c65476f
Show file tree

Hide file tree

Showing 12 changed files with 653 additions and 18 deletions.
diff --git a/assets/css/font-awesome.min.css b/assets/css/font-awesome.min.css
diff --git a/assets/fonts/FontAwesome.otf b/assets/fonts/FontAwesome.otf
diff --git a/assets/fonts/fontawesome-webfont.eot b/assets/fonts/fontawesome-webfont.eot
diff --git a/assets/fonts/fontawesome-webfont.svg b/assets/fonts/fontawesome-webfont.svg
diff --git a/assets/fonts/fontawesome-webfont.ttf b/assets/fonts/fontawesome-webfont.ttf
diff --git a/assets/fonts/fontawesome-webfont.woff b/assets/fonts/fontawesome-webfont.woff
diff --git a/assets/fonts/fontawesome-webfont.woff2 b/assets/fonts/fontawesome-webfont.woff2
diff --git a/index.html b/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
   </head>
   <body onload="loadDebugger()" >
     <script type="text/javascript">

diff --git a/src/ui/ButtonNavigator.js b/src/ui/ButtonNavigator.js
@@ -22,20 +22,15 @@ module.exports = ButtonNavigator
 ButtonNavigator.prototype.render = function () {
   var self = this
   var view = yo`<div>    
-    <button id='overback' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} >
-      Step Over Back
+    <button id='overback' title='step over back' class='fa fa-fast-backward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepOverBack') }} disabled=${this.overBackDisabled} >
     </button>
-    <button id='intoback' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} >
-      Step Into Back
+    <button id='intoback' title='step into back' class='fa fa-backward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepIntoBack') }} disabled=${this.intoBackDisabled} >
     </button>    
-    <button id='intoforward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} >
-      Step Into Forward
+    <button id='intoforward' title='step into forward'  class='fa fa-forward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepIntoForward') }} disabled=${this.intoForwardDisabled} >
     </button>
-    <button id='overforward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} >
-      Step Over Forward
+    <button id='overforward' title='step over forward' class='fa fa-fast-forward' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('stepOverForward') }} disabled=${this.overForwardDisabled} >
     </button>
-    <button id='nextcall' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('jumpNextCall') }} disabled=${this.nextCallDisabled} >
-      Jump Next Call
+    <button id='nextcall'  title='step next call' class='fa fa-chevron-right' style=${ui.formatCss(style.button)} onclick=${function () { self.event.trigger('jumpNextCall') }} disabled=${this.nextCallDisabled} >
     </button>
   </div>`
   if (!this.view) {

diff --git a/src/ui/DropdownPanel.js b/src/ui/DropdownPanel.js
@@ -53,8 +53,7 @@ DropdownPanel.prototype.render = function (overridestyle) {
       <div style=${ui.formatCss(styleDropdown.inner, styleDropdown.titleInner)}>${this.name}</div>
     </div>
     <div class='dropdownpanel' style=${ui.formatCss(styleDropdown.content)} style='display:none'>
-      <button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} class="btn" type="button">
-        Raw
+      <button onclick=${function () { self.toggleRaw() }} style=${ui.formatCss(basicStyles.button, styleDropdown.copyBtn)} title='raw' class="btn fa fa-eye" type="button">
       </button>
       <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdowncontent'><div>Empty</div></div>
       <div style=${ui.formatCss(styleDropdown.inner, overridestyle)} class='dropdownrawcontent' style='display:none'></div>

diff --git a/src/ui/TxBrowser.js b/src/ui/TxBrowser.js
@@ -148,10 +148,9 @@ TxBrowser.prototype.render = function () {
         ${this.connectionSetting()}
         <input onkeyup=${function () { self.updateBlockN(arguments[0]) }} type='text' placeholder=${'Block number'} />
         <input id='txinput' onkeyup=${function () { self.updateTxN(arguments[0]) }} type='text' placeholder=${'Transaction index or hash'} />
-        <button id='load' onclick=${function () { self.submit() }} style=${ui.formatCss(style.button)}>
-          Load
+        <button id='load' class='fa fa-play' title='start debugging' onclick=${function () { self.submit() }} style=${ui.formatCss(style.button)}>
         </button>
-        <button id='unload' onclick=${function () { self.unload() }} style=${ui.formatCss(style.button)}>Reset</button>
+        <button id='unload' class='fa fa-stop' title='stop debugging' onclick=${function () { self.unload() }} style=${ui.formatCss(style.button)}></button>
         <div style=${ui.formatCss(style.transactionInfo)} id='txinfo'>
           ${this.basicPanel.render()}
         </div>

diff --git a/src/ui/styles/basicStyles.js b/src/ui/styles/basicStyles.js
@@ -66,17 +66,14 @@ module.exports = {
     '-moz-box-shadow': 'inset 0px 1px 0px 0px #ffffff',
     '-webkit-box-shadow': 'inset 0px 1px 0px 0px #ffffff',
     'box-shadow': 'inset 0px 1px 0px 0px #ffffff',
-    '*background': 'background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);;background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);', // eslint-disable-line
     'filter': "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9',GradientType=0)", // eslint-disable-line
-    'background-color': '#f9f9f9',
     '-moz-border-radius': '6px',
     '-webkit-border-radius': '6px',
     'border-radius': '6px',
     'border': '1px solid #dcdcdc',
     'display': 'inline-block',
     'cursor': 'pointer',
     'color': '#666666',
-    'font-family': 'Arial',
     'text-decoration': 'none',
     'text-shadow': '0px 1px 0px #ffffff'
   }