Adding crude minimize and maximize buttons for toolbar panels. Allows…

… quick min/maxing of panels.
neilholcomb · Aug 3, 2010 · 62b92f3 · 62b92f3
1 parent 95d2075
commit 62b92f3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/views/elements/debug_toolbar.ctp b/views/elements/debug_toolbar.ctp
@@ -38,6 +38,8 @@
 				echo $toolbar->panelStart($title, $panelUnderscore);
 			?>
 				<div class="panel-content" id="<?php echo $panelUnderscore ?>-tab">
+					<a href="#" class="panel-maximize">[+]</a>
+					<a href="#" class="panel-minimize">[-]</a>
 					<div class="panel-resize-region">
 						<div class="panel-content-data">
 							<?php echo $this->element($panelInfo['elementName'], $panelInfo); ?>

diff --git a/webroot/css/debug_toolbar.css b/webroot/css/debug_toolbar.css
@@ -29,7 +29,7 @@
 	padding: 0;
 	list-style: none;
 }
-#debug-kit-toolbar .panel-tab a {
+#debug-kit-toolbar .panel-tab > a {
 	float: left;
 	clear: none;
 	background: #efefef;
@@ -53,7 +53,7 @@
 	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#fff));
 	background: -moz-linear-gradient(top, #f5f5f5, #fff);
 }
-#debug-kit-toolbar .panel-tab a:hover {
+#debug-kit-toolbar .panel-tab > a:hover {
 	background: #fff;
 	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#fff));
 	background: -moz-linear-gradient(top, #f5f5f5, #fff);
@@ -125,6 +125,18 @@
 	left: 0px;
 	right: 0px;
 }
+#debug-kit-toolbar .panel-maximize {
+	float: right;
+	margin: 10px 20px 0 0;
+	z-index: 999;
+	position: relative;
+}
+#debug-kit-toolbar .panel-minimize {
+	float: right;
+	margin: 10px 10px 0 0;
+	z-index: 999;
+	position: relative;
+}
 
 /* Hide panel content by default */
 #debug-kit-toolbar .panel-content {
@@ -322,8 +334,15 @@
 	display: none;
 	background:#eeffff;
 }
+#debug-kit-toolbar #history-tab ul {
+	margin: 20px 0 0 20px;
+}
+#debug-kit-toolbar #history-tab li {
+	margin: 0 0 5px 0;
+}
 #debug-kit-toolbar #history-tab a {
 	float: none;
+	display:block;
 }
 #debug-kit-toolbar #history-tab a.active {
 	background: #FEF6E5;

diff --git a/webroot/js/js_debug_toolbar.js b/webroot/js/js_debug_toolbar.js
@@ -576,6 +576,7 @@ DEBUGKIT.toolbar = function () {
 				return false;
 			}
 			this.makePanelDraggable(panel);
+			this.makePanelMinMax(panel);
 
 			var self = this;
 			Event.addEvent(panel.button, 'click', function (event) {
@@ -628,6 +629,37 @@ DEBUGKIT.toolbar = function () {
 				}
 			});
 		},
+
+		// make the maximize button work on the panels.
+		makePanelMinMax: function (panel) {
+			var _oldHeight;
+
+			var maximize = function (event) {
+				event.preventDefault();
+				if (!_oldHeight) {
+					_oldHeight = this.parentNode.offsetHeight;
+				}
+				var windowHeight = window.innerHeight;
+				var panelHeight = windowHeight - this.parentNode.offsetTop;
+				Element.height(this.parentNode, panelHeight);
+			};
+
+			var minimize = function (event) {
+				event.preventDefault();
+				console.log(_oldHeight);
+				Element.height(this.parentNode, _oldHeight);
+				_oldHeight = null;
+			};
+
+			Collection.apply(panel.content.getElementsByTagName('A'), function (element) {
+				if (Element.hasClass(element, 'panel-maximize')) {
+					Event.addEvent(element, 'click', maximize);
+				}
+				if (Element.hasClass(element, 'panel-minimize')) {
+					Event.addEvent(element, 'click', minimize);
+				}
+			});
+		},
 
 		// Toggle a panel
 		togglePanel: function (id) {