1
0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-07-27 19:50:21 +02:00

Change minimize to close button

Close the debugbar, to save space. Minimize happens when clicking on the
open tab.
This commit is contained in:
Barry vd. Heuvel
2013-12-29 17:45:41 +01:00
parent 740b7d26c8
commit 231d17fc7f
2 changed files with 57 additions and 18 deletions

View File

@@ -12,6 +12,10 @@ div.phpdebugbar {
text-align: left;
}
div.phpdebugbar-closed {
width: auto;
}
div.phpdebugbar * {
box-sizing: content-box;
}
@@ -39,7 +43,8 @@ a.phpdebugbar-tab,
span.phpdebugbar-indicator,
a.phpdebugbar-indicator,
a.phpdebugbar-open-btn,
a.phpdebugbar-minimize-btn {
a.phpdebugbar-restore-btn,
a.phpdebugbar-close-btn {
float: left;
padding: 5px 8px;
font-size: 14px;
@@ -48,8 +53,8 @@ a.phpdebugbar-minimize-btn {
}
span.phpdebugbar-indicator,
a.phpdebugbar-indicator,
a.phpdebugbar-open-btn,
a.phpdebugbar-minimize-btn {
a.phpdebugbar-restore-btn,
a.phpdebugbar-close-btn {
float: right;
border-right: 1px solid #ddd;
}
@@ -85,14 +90,13 @@ a.phpdebugbar-tab.phpdebugbar-active {
color: white;
}
a.phpdebugbar-minimize-btn {
display: none;
a.phpdebugbar-close-btn {
background: url(icons.png) no-repeat 10px 7px;
width: 16px;
height: 16px;
}
a.phpdebugbar-open-btn {
a.phpdebugbar-open-btn, a.phpdebugbar-restore-btn {
background: url(icons.png) no-repeat -14px 8px;
width: 16px;
height: 16px;

View File

@@ -471,9 +471,15 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
// minimize button
this.$minimizebtn = $('<a href="javascript:" />').addClass(csscls('minimize-btn')).appendTo(this.$header);
this.$minimizebtn.click(function() {
self.minimize();
this.$closebtn = $('<a href="javascript:" />').addClass(csscls('close-btn')).appendTo(this.$header);
this.$closebtn.click(function() {
self.close();
});
// minimize button
this.$restorebtn = $('<a href="javascript:" />').addClass(csscls('restore-btn')).hide().appendTo(this.$el);
this.$restorebtn.click(function() {
self.restore();
});
// open button
@@ -509,12 +515,17 @@ if (typeof(PhpDebugBar) == 'undefined') {
localStorage.setItem('phpdebugbar-height', this.$body.height());
}
// bar visibility
var visible = localStorage.getItem('phpdebugbar-visible');
if (visible && visible == '1') {
var tab = localStorage.getItem('phpdebugbar-tab');
if (this.isTab(tab)) {
this.showTab(tab);
// bar visibility
var open = localStorage.getItem('phpdebugbar-open');
if(open && open == '0'){
this.close();
}else{
var visible = localStorage.getItem('phpdebugbar-visible');
if (visible && visible == '1') {
var tab = localStorage.getItem('phpdebugbar-tab');
if (this.isTab(tab)) {
this.showTab(tab);
}
}
}
},
@@ -691,7 +702,6 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$resizehdle.show();
this.$body.show();
this.$minimizebtn.show();
this.recomputeBottomOffset();
$(this.$header).find('> .' + csscls('active')).removeClass(csscls('active'));
@@ -707,14 +717,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
},
/**
* Hide panels and "close" the debug bar
* Hide panels and minimize the debug bar
*
* @this {DebugBar}
*/
minimize: function() {
this.$header.find('> .' + csscls('active')).removeClass(csscls('active'));
this.$body.hide();
this.$minimizebtn.hide();
this.$resizehdle.hide();
this.recomputeBottomOffset();
localStorage.setItem('phpdebugbar-visible', '0');
@@ -729,6 +738,32 @@ if (typeof(PhpDebugBar) == 'undefined') {
isMinimized: function() {
return this.$el.hasClass(csscls('minimized'));
},
/**
* Close the debug bar
*
* @this {DebugBar}
*/
close: function() {
this.$header.hide();
this.$body.hide();
this.$restorebtn.show();
localStorage.setItem('phpdebugbar-open', '0');
this.$el.addClass(csscls('closed'));
},
/**
* Restore the debug bar
*
* @this {DebugBar}
*/
restore: function() {
this.$header.show();
this.$restorebtn.hide();
localStorage.setItem('phpdebugbar-open', '1');
this.restoreState();
this.$el.removeClass(csscls('closed'));
},
/**
* Recomputes the padding-bottom css property of the body so