diff --git a/src/Console/Console.scss b/src/Console/Console.scss index 8976299..5c4f23e 100644 --- a/src/Console/Console.scss +++ b/src/Console/Console.scss @@ -5,6 +5,7 @@ .console { .control { @include absolute(100%, 40px); + cursor: default; padding: 10px 10px 10px 40px; background: #fff; line-height: 20px; @@ -16,6 +17,7 @@ font-size: $font-size-l; position: absolute; top: 1px; + cursor: pointer; transition: color $anim-duration; &:active { color: $gray-dark; @@ -28,6 +30,7 @@ right: 0; } .filter { + cursor: pointer; color: $gray; margin: 0 1px; font-size: $font-size-s; @@ -64,6 +67,7 @@ font-size: $font-size-s; border-bottom: 1px solid $gray-light; .button { + cursor: pointer; width: 50%; display: inline-block; text-align: center; diff --git a/src/DevTools/DevTools.es6 b/src/DevTools/DevTools.es6 index 8adb0f3..d96c97c 100644 --- a/src/DevTools/DevTools.es6 +++ b/src/DevTools/DevTools.es6 @@ -102,11 +102,13 @@ export default class DevTools extends util.Emitter cfg.set(util.defaults(cfg.get(), { transparency: '100%', displaySize: '100%', + tinyNavBar: false, activeEruda: false })); this._setTransparency(cfg.get('transparency')); this._setDisplaySize(cfg.get('displaySize')); + this._setNavBarHeight(cfg.get('tinyNavBar') ? 30 : 55); cfg.on('change', (key, val) => { @@ -115,9 +117,15 @@ export default class DevTools extends util.Emitter case 'transparency': return this._setTransparency(val); case 'displaySize': return this._setDisplaySize(val); case 'activeEruda': return activeEruda(val); + case 'tinyNavBar': return this._setNavBarHeight(val ? 30 : 55); } }); } + _setNavBarHeight(height) + { + this._$el.css('paddingTop', height); + this._navBar.setHeight(height); + } _setTransparency(opacity) { opacity = +opacity.replace('%', '') / 100; diff --git a/src/DevTools/DevTools.scss b/src/DevTools/DevTools.scss index a1749de..7f973fd 100644 --- a/src/DevTools/DevTools.scss +++ b/src/DevTools/DevTools.scss @@ -7,7 +7,6 @@ height: 100%; left: 0; bottom: 0; - padding-top: 55px !important; background: #fff; z-index: 500; display: none; diff --git a/src/DevTools/NavBar.es6 b/src/DevTools/NavBar.es6 index d051e19..a9e6363 100644 --- a/src/DevTools/NavBar.es6 +++ b/src/DevTools/NavBar.es6 @@ -13,6 +13,7 @@ export default class NavBar extends util.Emitter this._$ul = $el.find('ul'); this._$bottomBar = $el.find('.eruda-bottom-bar'); this._len = 0; + this._height = 55; this._bindEvent(); } @@ -20,7 +21,12 @@ export default class NavBar extends util.Emitter { this._len++; this._$ul.prepend(`
  • ${name}
    • `); - this._resetWidth(); + this._resetStyle(); + } + setHeight(height) + { + this._height = height; + this._resetStyle(); } activeTool(name) { @@ -40,9 +46,16 @@ export default class NavBar extends util.Emitter } }); } - _resetWidth() + _resetStyle() { + var height = this._height; + + this._$el.css('height', height); this._$ul.css({width: this._len * ITEM_WIDTH}); + this._$ul.find('li').css({ + 'height': height, + 'lineHeight': height + }); } _bindEvent() { diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index 5157cc0..2e95848 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -11,6 +11,7 @@ } .breadcrumb { @include breadcrumb(); + cursor: pointer; transition: background $anim-duration, color $anim-duration; &:active { background: $blue; @@ -27,6 +28,9 @@ color: #fff; font-size: $font-size; transition: background $anim-duration; + &.active-effect { + cursor: pointer; + } &.active-effect:active { background: $blue-dark; } @@ -39,6 +43,7 @@ border-bottom: 1px solid $gray-light; li { @include overflow-auto(x); + cursor: pointer; padding: $padding; border-top: 1px solid $gray-light; white-space: nowrap; @@ -158,6 +163,7 @@ font-size: 0; border-top: 1px solid $gray-light; .btn { + cursor: pointer; text-align: center; color: $gray; font-size: 14px; diff --git a/src/Network/Network.scss b/src/Network/Network.scss index 9572e48..2468b42 100644 --- a/src/Network/Network.scss +++ b/src/Network/Network.scss @@ -57,6 +57,7 @@ margin-bottom: 10px; li { @include overflow-auto(x); + cursor: pointer; border-top: 1px solid $gray-light; height: 41px; white-space: nowrap; diff --git a/src/Resources/Resources.scss b/src/Resources/Resources.scss index 9302fd7..f52d4c4 100644 --- a/src/Resources/Resources.scss +++ b/src/Resources/Resources.scss @@ -42,6 +42,7 @@ background: #fff; padding: $padding !important; li { + cursor: pointer; width: 25%; float: left; overflow-y: hidden; @@ -70,6 +71,7 @@ font-size: 0; width: 40px; .icon-trash { + cursor: pointer; color: $red; font-size: $font-size; display: inline-block; diff --git a/src/Settings/Settings.scss b/src/Settings/Settings.scss index 2fd6b36..ddad0ec 100644 --- a/src/Settings/Settings.scss +++ b/src/Settings/Settings.scss @@ -12,6 +12,9 @@ color: $gray-dark; font-size: 12px; } + .select { + cursor: pointer; + } .select .head, .switch { padding: $padding; background: #fff; diff --git a/src/Sources/Sources.scss b/src/Sources/Sources.scss index cb4117f..dec0268 100644 --- a/src/Sources/Sources.scss +++ b/src/Sources/Sources.scss @@ -64,6 +64,7 @@ } .json { @include overflow-auto(x); + cursor: default; font-family: $font-family-code; font-size: $font-size-s; line-height: 1.2; diff --git a/src/index.es6 b/src/index.es6 index ae556dc..a00bfe8 100644 --- a/src/index.es6 +++ b/src/index.es6 @@ -99,6 +99,7 @@ module.exports = { .switch(this._entryBtn.config, 'rememberPos', 'Remember Entry Button Position') .separator() .switch(devTools.config, 'activeEruda', 'Always Activated') + .switch(devTools.config, 'tinyNavBar', 'Tiny Navigation Bar') .select(devTools.config, 'transparency', 'Transparency', ['100%', '95%', '90%', '85%', '80%', '75%', '70%']) .select(devTools.config, 'displaySize', 'Display Size', ['100%', '90%', '80%', '70%', '60%', '50%']) .separator();