lxm_front/eruda
1
0
Fork 0
mirror of synced 2025-12-13 10:18:40 +08:00
Code Issues Projects Releases Wiki Activity

Add: NavBar background color setting

Browse Source
This commit is contained in:
surunzi
2017-10-05 16:27:59 +08:00
parent b161fba2f9
commit d3006e38d7
11 changed files with 122 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
doc/TOOL_API.md
View File

@@ -245,7 +245,18 @@ Add range to input a number.
|cfg |object|Config object |
|name |string|Option name |
|desc |string|Option description|
|option|object|Min, max, step | |
|option|object|Min, max, step |
### color
Add color to select a color.
|Name |Type |Desc |
|-------|------|------------------|
|cfg |object|Config object |
|name |string|Option name |
|desc |string|Option description|
|[color]|array |Color list |
### separator

18
src/DevTools/DevTools.js
View File

@@ -19,7 +19,6 @@ export default class DevTools extends util.Emitter
this._appendTpl();
this._initNavBar();
this._initCfg();
}
show()
{
@@ -105,20 +104,22 @@ export default class DevTools extends util.Emitter
return this;
}
_initCfg()
initCfg(settings)
{
let cfg = this.config = util.createCfg('dev-tools');
cfg.set(util.defaults(cfg.get(), {
transparency: 0.95,
displaySize: 80,
tinyNavBar: false,
activeEruda: false
tinyNavBar: !util.isMobile(),
activeEruda: false,
navBarBgColor: '#2196f3'
}));
this._setTransparency(cfg.get('transparency'));
this._setDisplaySize(cfg.get('displaySize'));
this.setNavBarHeight(cfg.get('tinyNavBar') ? 30 : 55);
this._navBar.setBgColor(cfg.get('navBarBgColor'));
cfg.on('change', (key, val) =>
{
@@ -128,8 +129,17 @@ export default class DevTools extends util.Emitter
case 'displaySize': return this._setDisplaySize(val);
case 'activeEruda': return activeEruda(val);
case 'tinyNavBar': return this.setNavBarHeight(val ? 30 : 55);
case 'navBarBgColor': return this._navBar.setBgColor(val);
}
});
settings.separator()
.switch(cfg, 'activeEruda', 'Always Activated')
.switch(cfg, 'tinyNavBar', 'Tiny Navigation Bar')
.color(cfg, 'navBarBgColor', 'Navigation Bar Background Color')
.range(cfg, 'transparency', 'Transparency', {min: 0.2, max: 1, step: 0.01})
.range(cfg, 'displaySize', 'Display Size', {min: 40, max: 100, step: 1})
.separator();
}
setNavBarHeight(height)
{

4
src/DevTools/NavBar.js
View File

@@ -27,6 +27,10 @@ export default class NavBar extends util.Emitter
this._height = height;
this.resetStyle();
}
setBgColor(color)
{
this._$el.css('background-color', color);
}
activeTool(name)
{
let self = this;

4
src/DevTools/NavBar.scss
View File

@@ -25,10 +25,10 @@ $item-width: 69px;
text-transform: capitalize;
transition: background $anim-duration;
&:active {
background: $blue-dark;
background: $gray-dark;
}
&.active {
background: $blue-light;
background: $gray;
}
}
.bottom-bar {

9
src/EntryBtn/EntryBtn.js
View File

@@ -12,8 +12,6 @@ export default class EntryBtn extends util.Emitter
this._$parent = $parent;
this._appendTpl();
this._makeDraggable();
this._initCfg();
this._setPos();
this._bindEvent();
}
hide()
@@ -83,7 +81,7 @@ export default class EntryBtn extends util.Emitter
{
this._draggabilly = new Draggabilly(this._$el.get(0), {containment: true});
}
_initCfg()
initCfg(settings)
{
let cfg = this.config = util.createCfg('home-button');
@@ -91,6 +89,11 @@ export default class EntryBtn extends util.Emitter
rememberPos: true,
pos: this._getDefPos()
}));
settings.separator()
.switch(cfg, 'rememberPos', 'Remember Entry Button Position');
this._setPos();
}
_getDefPos()
{

2
src/Network/Network.js
View File

@@ -228,8 +228,6 @@ export default class Network extends Tool
data.push(getData('Unload', unloadEventStart, unloadEventEnd));
data.push(getData('DOM Processing', domLoading, domComplete));
data.push(getData('DOM Construction', domLoading, domInteractive));
data.push(getData('DOM Content Loaded Event', domContentLoadedEventStart, domContentLoadedEventEnd));
data.push(getData('Load Event', loadEventStart, loadEventEnd));
this._performanceTimingData = data;

30
src/Settings/Settings.js
View File

@@ -13,6 +13,7 @@ export default class Settings extends Tool
this._switchTpl = require('./switch.hbs');
this._selectTpl = require('./select.hbs');
this._rangeTpl = require('./range.hbs');
this._colorTpl = require('./color.hbs');
this._settings = [];
}
init($el)
@@ -38,6 +39,20 @@ export default class Settings extends Tool
return this;
}
color(config, key, desc, colors = [
'#2196f3', '#707d8b', '#f44336', '#009688', '#ffc107'
])
{
this._settings.push({config, key});
this._$el.append(this._colorTpl({
desc, colors,
idx: this._settings.length - 1,
val: config.get(key)
}));
return this;
}
select(config, key, desc, selections)
{
this._settings.push({config, key});
@@ -126,6 +141,21 @@ export default class Settings extends Tool
$container.parent().find('.eruda-head span').text(val);
$container.find('.eruda-range-track-progress').css('width', progress(val, min, max) + '%');
}).on('click', '.eruda-color .eruda-head', function ()
{
util.$(this).parent().find('ul').toggleClass('eruda-open');
}).on('click', '.eruda-color li', function ()
{
let $this = util.$(this),
$ul = $this.parent(),
val = $this.css('background-color'),
idx = $ul.data('idx'),
setting = self._settings[idx];
$ul.rmClass('eruda-open');
$ul.parent().find('.eruda-head span').css('background-color', val);
setting.config.set(setting.key, val);
});
}
}

28
src/Settings/Settings.scss
View File

@@ -12,16 +12,16 @@
color: $gray-dark;
font-size: 12px;
}
.select, .range {
.select, .range, .color {
cursor: pointer;
}
.select .head, .switch, .range .head {
.select .head, .switch, .range .head, .color .head {
padding: $padding;
background: #fff;
font-size: $font-size;
border-bottom: 1px solid $gray-light;
}
.select .head, .range .head {
.select .head, .range .head, .color .head {
transition: background $anim-duration, color $anim-duration;
span {
float: right;
@@ -31,6 +31,12 @@
color: #fff;
}
}
.color .head span {
display: inline-block;
border: 1px solid $gray-dark;
width: 15px;
height: 15px;
}
.select ul {
display: none;
&.open {
@@ -46,6 +52,22 @@
}
}
}
.color ul {
display: none;
padding: $padding;
font-size: 0;
background: $gray-light;
&.open {
display: block;
}
li {
display: inline-block;
width: 20px;
border: 1px solid $gray-dark;
height: 20px;
margin-right: 10px;
}
}
.range .input-container {
display: none;
padding: $padding;

11
src/Settings/color.hbs Normal file
View File

@@ -0,0 +1,11 @@
<div class="eruda-color">
<div class="eruda-head">
{{desc}}
<span class="eruda-val" style="background-color: {{val}}"></span>
</div>
<ul data-idx="{{idx}}">
{{#each colors}}
<li style="background: {{.}}"></li>
{{/each}}
</ul>
</div>

10
src/index.js
View File

@@ -127,14 +127,8 @@ module.exports = {
devTools.add(settings);
settings.separator()
.switch(this.entryBtn.config, 'rememberPos', 'Remember Entry Button Position')
.separator()
.switch(devTools.config, 'activeEruda', 'Always Activated')
.switch(devTools.config, 'tinyNavBar', 'Tiny Navigation Bar')
.range(devTools.config, 'transparency', 'Transparency', {min: 0.2, max: 1, step: 0.01})
.range(devTools.config, 'displaySize', 'Display Size', {min: 40, max: 100, step: 1})
.separator();
this.entryBtn.initCfg(settings);
devTools.initCfg(settings);
},
_initTools(tool = ['console', 'elements', 'network', 'resources', 'sources', 'info', 'snippets', 'features'])
{

16
test/settings.js
View File

@@ -5,7 +5,8 @@ var cfg = eruda.config.create('eruda-test');
cfg.set({
testSwitch: false,
testSelect: '1',
testRange: 1
testRange: 1,
testColor: '#000'
});
beforeEach(function ()
@@ -59,3 +60,16 @@ describe('range', function ()
expect($el.find('input').length).toEqual(1);
});
});
describe('color', function ()
{
it('ui', function ()
{
var text = 'Test Color';
tool.color(cfg, 'testColor', text, ['#000', '#fff']);
var $el = $tool.find('.eruda-color');
expect($el.find('.eruda-head')).toContainText(text);
expect($el.find('ul li').length).toEqual(2);
});
});