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 @@
\ 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('');
+ 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(`${name}`);
+ this._$ul.prepend(`${name}`);
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;