mirror_php/php-debugbar
1
0
Fork 0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-01-17 13:28:35 +01:00
Code Issues Releases Wiki Activity

refactoring and improvements to resizing and responsivity

Browse Source 
debugbar header is now split in left and right containers for better responsivity
changed the way the indicators position is handled (not a property of the indicator anymore)
moved resize-handle out of body
when closed, the debugbar will always restore to opened state
This commit is contained in:
maximebf 2014-02-14 12:40:15 -03:00
parent 9efc22aca1
commit 3089d2f750
5 changed files with 63 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/rendering.md
View File

@ -139,6 +139,7 @@ possible values:
- *default*: a js string, default value of the data map
- *tab*: class name of the tab object (to use a custom tab object)
- *indicator*: class name of the indicator object (to use a custom indicator object)
- *position*: position of the indicator ('left' of 'right', default to 'right')
At least *icon* or *widget* are needed (unless *tab* or *indicator* are specified). If *widget* is
specified, a tab will be created, otherwise an indicator. Any other options is also passed to the tab

7
src/DebugBar/JavascriptRenderer.php
View File

@ -758,7 +758,7 @@ class JavascriptRenderer
{
$js = '';
$dataMap = array();
$excludedOptions = array('indicator', 'tab', 'map', 'default', 'widget');
$excludedOptions = array('indicator', 'tab', 'map', 'default', 'widget', 'position');
// finds controls provided by collectors
$widgets = array();
@ -787,11 +787,12 @@ class JavascriptRenderer
isset($options['widget']) ? sprintf('%s"widget": new %s()', count($opts) ? ', ' : '', $options['widget']) : ''
);
} else if (isset($options['indicator']) || isset($options['icon'])) {
$js .= sprintf("%s.addIndicator(\"%s\", new %s(%s));\n",
$js .= sprintf("%s.addIndicator(\"%s\", new %s(%s), \"%s\");\n",
$varname,
$name,
isset($options['indicator']) ? $options['indicator'] : 'PhpDebugBar.DebugBar.Indicator',
json_encode($opts, JSON_FORCE_OBJECT)
json_encode($opts, JSON_FORCE_OBJECT),
isset($options['position']) ? $options['position'] : 'right'
);
}

56
src/DebugBar/Resources/debugbar.css
View File

@ -22,6 +22,23 @@ div.phpdebugbar * {
box-sizing: content-box;
}
a.phpdebugbar-restore-btn {
float: left;
padding: 5px 8px;
font-size: 14px;
color: #555;
text-decoration: none;
border-right: 1px solid #ddd;
}
div.phpdebugbar-resize-handle {
display: none;
height: 4px;
width: 100%;
background: #fff;
cursor: n-resize;
}
/* -------------------------------------- */
div.phpdebugbar-header {
@ -38,26 +55,30 @@ div.phpdebugbar-header:before, div.phpdebugbar-header:after {
div.phpdebugbar-header:after {
clear: both;
}
/* -------------------------------------- */
a.phpdebugbar-tab,
span.phpdebugbar-indicator,
a.phpdebugbar-indicator,
a.phpdebugbar-open-btn,
a.phpdebugbar-restore-btn,
a.phpdebugbar-close-btn {
div.phpdebugbar-header-left {
float: left;
}
div.phpdebugbar-header-right {
float: right;
}
div.phpdebugbar-header > div > * {
padding: 5px 8px;
font-size: 14px;
color: #555;
text-decoration: none;
}
div.phpdebugbar-header-left > * {
float: left;
}
div.phpdebugbar-header-right > * {
float: right;
}
/* -------------------------------------- */
span.phpdebugbar-indicator,
a.phpdebugbar-indicator,
a.phpdebugbar-restore-btn,
a.phpdebugbar-close-btn {
float: right;
border-right: 1px solid #ddd;
}
@ -75,7 +96,8 @@ a.phpdebugbar-tab.phpdebugbar-active {
display: none;
margin-left: 5px;
font-size: 11px;
padding: 1px 6px;
line-height: 14px;
padding: 0px 6px;
background: #ccc;
border-radius: 4px;
color: #555;
@ -153,16 +175,6 @@ div.phpdebugbar-body {
position: relative;
height: 300px;
}
div.phpdebugbar-resize-handle {
display: none;
height: 4px;
width: 100%;
background: #fff;
border-top: 1px solid #ccc;
cursor: n-resize;
position: absolute;
top: -33px;
}
/* -------------------------------------- */

45
src/DebugBar/Resources/debugbar.js
View File

@ -291,7 +291,6 @@ if (typeof(PhpDebugBar) == 'undefined') {
* - icon
* - title
* - tooltip
* - position: "right" or "left"
* - data: alias of title
*/
var Indicator = Widget.extend({
@ -300,13 +299,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
className: csscls('indicator'),
defaults: {
position: "right"
},
render: function() {
this.bindAttr('position', function(pos) { this.$el.css('float', pos); });
this.$icon = $('<i />').appendTo(this.$el);
this.bindAttr('icon', function(icon) {
if (icon) {
@ -421,7 +414,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
resize: function() {
var contentSize = this.respCSSSize;
if (this.respCSSSize == 0) {
this.$header.find("> *:visible").each(function () {
this.$header.find("> div > *:visible").each(function () {
contentSize += $(this).outerWidth();
});
}
@ -447,9 +440,11 @@ if (typeof(PhpDebugBar) == 'undefined') {
render: function() {
var self = this;
this.$el.appendTo('body');
this.$resizehdle = $('<div />').addClass(csscls('resize-handle')).appendTo(this.$el);
this.$header = $('<div />').addClass(csscls('header')).appendTo(this.$el);
this.$headerLeft = $('<div />').addClass(csscls('header-left')).appendTo(this.$header);
this.$headerRight = $('<div />').addClass(csscls('header-right')).appendTo(this.$header);
var $body = this.$body = $('<div />').addClass(csscls('body')).appendTo(this.$el);
this.$resizehdle = $('<div />').addClass(csscls('resize-handle')).appendTo(this.$body);
this.recomputeBottomOffset();
// dragging of resize handle
@ -473,7 +468,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
// minimize button
this.$closebtn = $('<a href="javascript:" />').addClass(csscls('close-btn')).appendTo(this.$header);
this.$closebtn = $('<a href="javascript:" />').addClass(csscls('close-btn')).appendTo(this.$headerRight);
this.$closebtn.click(function() {
self.close();
});
@ -485,7 +480,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
// open button
this.$openbtn = $('<a href="javascript:" />').addClass(csscls('open-btn')).appendTo(this.$header).hide();
this.$openbtn = $('<a href="javascript:" />').addClass(csscls('open-btn')).appendTo(this.$headerRight).hide();
this.$openbtn.click(function() {
self.openHandler.show(function(id, dataset) {
self.addDataSet(dataset, id, "(opened)");
@ -494,7 +489,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
// select box for data sets
this.$datasets = $('<select />').addClass(csscls('datasets-switcher')).appendTo(this.$header);
this.$datasets = $('<select />').addClass(csscls('datasets-switcher')).appendTo(this.$headerRight);
this.$datasets.change(function() {
self.dataChangeHandler(self.datasets[this.value]);
self.showTab();
@ -563,7 +558,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
}
var self = this;
tab.$tab.appendTo(this.$header).click(function() {
tab.$tab.appendTo(this.$headerLeft).click(function() {
if (!self.isMinimized() && self.activePanelName == name) {
self.minimize();
} else {
@ -592,10 +587,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
createIndicator: function(name, icon, tooltip, position) {
var indicator = new Indicator({
icon: icon,
tooltip: tooltip,
position: position || 'right'
tooltip: tooltip
});
return this.addIndicator(name, indicator);
return this.addIndicator(name, indicator, position);
},
/**
@ -606,15 +600,15 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @param {Indicator} indicator Indicator object
* @return {Indicator}
*/
addIndicator: function(name, indicator) {
addIndicator: function(name, indicator, position) {
if (this.isControl(name)) {
throw new Error(name + ' already exists');
}
if (indicator.get('position') == 'right') {
indicator.$el.appendTo(this.$header);
if (position == 'left') {
indicator.$el.insertBefore(this.$headerLeft.children().first());
} else {
indicator.$el.insertBefore(this.$header.children().first())
indicator.$el.appendTo(this.$headerRight);
}
this.controls[name] = indicator;
@ -706,7 +700,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$body.show();
this.recomputeBottomOffset();
$(this.$header).find('> .' + csscls('active')).removeClass(csscls('active'));
$(this.$header).find('> div > .' + csscls('active')).removeClass(csscls('active'));
$(this.$body).find('> .' + csscls('active')).removeClass(csscls('active'));
this.controls[name].$tab.addClass(csscls('active'));
@ -725,7 +719,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar}
*/
minimize: function() {
this.$header.find('> .' + csscls('active')).removeClass(csscls('active'));
this.$header.find('> div > .' + csscls('active')).removeClass(csscls('active'));
this.$body.hide();
this.$resizehdle.hide();
this.recomputeBottomOffset();
@ -749,6 +743,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar}
*/
close: function() {
this.$resizehdle.hide();
this.$header.hide();
this.$body.hide();
this.$restorebtn.show();
@ -763,10 +758,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar}
*/
restore: function() {
this.$resizehdle.show();
this.$header.show();
this.$restorebtn.hide();
localStorage.setItem('phpdebugbar-open', '1');
this.restoreState();
var tab = localStorage.getItem('phpdebugbar-tab');
if (this.isTab(tab)) {
this.showTab(tab);
}
this.$el.removeClass(csscls('closed'));
this.resize();
},

2
tests/DebugBar/Tests/full_init.html
View File

@ -2,7 +2,7 @@
jQuery.noConflict(true);
var phpdebugbar = new PhpDebugBar.DebugBar();
phpdebugbar.addTab("messages", new PhpDebugBar.DebugBar.Tab({"icon":"list-alt","title":"Messages", "widget": new PhpDebugBar.Widgets.MessagesWidget()}));
phpdebugbar.addIndicator("time", new PhpDebugBar.DebugBar.Indicator({"icon":"time"}));
phpdebugbar.addIndicator("time", new PhpDebugBar.DebugBar.Indicator({"icon":"time"}), "right");
phpdebugbar.setDataMap({
"messages": ["messages.messages", []],
"messages:badge": ["messages.count", null],