From ccb7bb054e3cbc26e41999946528908e8fdbdfd3 Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Wed, 25 May 2016 20:27:28 +0800
Subject: [PATCH] Dev: Nav bottom bar animation

---
 package.json              |  2 +-
 src/DevTools/DevTools.es6 |  2 +-
 src/DevTools/DevTools.hbs |  2 +-
 src/DevTools/NavBar.es6   | 20 +++++++++++++-------
 src/DevTools/NavBar.scss  | 10 +++++++++-
 src/style/style.scss      |  1 +
 6 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 81502c4..e505503 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "Console for Mobile Browsers",
   "main": "dist/eruda.js",
   "scripts": {
diff --git a/src/DevTools/DevTools.es6 b/src/DevTools/DevTools.es6
index 78571d1..14d2729 100644
--- a/src/DevTools/DevTools.es6
+++ b/src/DevTools/DevTools.es6
@@ -160,7 +160,7 @@ export default class DevTools extends util.Emitter
     }
     _initNavBar()
     {
-        this._navBar = new NavBar(this._$el.find('.eruda-nav-bar ul'));
+        this._navBar = new NavBar(this._$el.find('.eruda-nav-bar'));
         this._navBar.on('showTool', (name) => this.showTool(name));
     }
 }
diff --git a/src/DevTools/DevTools.hbs b/src/DevTools/DevTools.hbs
index 23f3332..f43c3be 100644
--- a/src/DevTools/DevTools.hbs
+++ b/src/DevTools/DevTools.hbs
@@ -1,4 +1,4 @@
 <div class="eruda-dev-tools">
-    <div class="eruda-nav-bar"><ul></ul></div>
+    <div class="eruda-nav-bar"></div>
     <div class="eruda-tools"></div>
 </div>
\ No newline at end of file
diff --git a/src/DevTools/NavBar.es6 b/src/DevTools/NavBar.es6
index 1b5b1f6..8782c41 100644
--- a/src/DevTools/NavBar.es6
+++ b/src/DevTools/NavBar.es6
@@ -9,6 +9,9 @@ export default class NavBar extends util.Emitter
         require('./NavBar.scss');
 
         this._$el = $el;
+        $el.html('<ul></ul><div class="eruda-bottom-bar"></div>');
+        this._$ul = $el.find('ul');
+        this._$bottomBar = $el.find('.eruda-bottom-bar');
         this._len = 0;
 
         this._bindEvent();
@@ -16,13 +19,13 @@ export default class NavBar extends util.Emitter
     add(name)
     {
         this._len++;
-        this._$el.prepend(`<li class="${name}">${name}</li>`);
+        this._$ul.prepend(`<li class="${name}">${name}</li>`);
         this._resetWidth();
     }
     remove(name)
     {
         this._len--;
-        this._$el.find(`li.${name}`).remove();
+        this._$ul.find(`li.${name}`).remove();
         this._resetWidth();
     }
     destroy()
@@ -31,15 +34,16 @@ export default class NavBar extends util.Emitter
     }
     activeTool(name)
     {
-        var $el = this._$el;
+        var self = this;
 
-        $el.find('li').each(function ()
+        this._$ul.find('li').each(function (idx)
         {
             var $this = util.$(this);
 
             if ($this.text() === name)
             {
                 $this.addClass('eruda-active');
+                self._$bottomBar.css({left: ITEM_WIDTH * idx});
             } else
             {
                 $this.rmClass('eruda-active');
@@ -48,15 +52,17 @@ export default class NavBar extends util.Emitter
     }
     _resetWidth()
     {
-        this._$el.css({width: this._len * 69});
+        this._$ul.css({width: this._len * ITEM_WIDTH});
     }
     _bindEvent()
     {
         var self = this;
 
-        this._$el.on('click', 'li', function ()
+        this._$ul.on('click', 'li', function ()
         {
             self.emit('showTool', util.$(this).text());
         });
     }
-}
\ No newline at end of file
+}
+
+const ITEM_WIDTH = 69;
\ No newline at end of file
diff --git a/src/DevTools/NavBar.scss b/src/DevTools/NavBar.scss
index e926bff..d3c4dd8 100644
--- a/src/DevTools/NavBar.scss
+++ b/src/DevTools/NavBar.scss
@@ -30,9 +30,17 @@
                     color: #fff;
                     opacity: 1;
                     background: $blue-light;
-                    border-bottom: 3px solid #fff;
                 }
             }
         }
+        .bottom-bar {
+            transition: left .3s;
+            height: 3px;
+            background: #fff;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 69px;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/style/style.scss b/src/style/style.scss
index d708d31..e74554b 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -2,6 +2,7 @@
 
 .container {
     pointer-events: none;
+    will-change: transform;
     position: fixed;
     left: 0;
     top: 0;