Making minimize/maximize buttons sexier.

neilholcomb · Aug 15, 2010 · 5db6ec7 · 5db6ec7
1 parent 950435f
commit 5db6ec7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/views/elements/debug_toolbar.ctp b/views/elements/debug_toolbar.ctp
@@ -38,8 +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>
+					<a href="#" class="panel-maximize ui-control ui-button">+</a>
+					<a href="#" class="panel-minimize ui-control ui-button">–</a>
 					<div class="panel-resize-region">
 						<div class="panel-content-data">
 							<?php echo $this->element($panelInfo['elementName'], $panelInfo); ?>
@@ -48,7 +48,7 @@
 							<!-- content here -->
 						</div>
 					</div>
-					<div class="panel-resize-handle">====</div>
+					<div class="panel-resize-handle ui-control">====</div>
 				</div>
 			<?php $toolbar->panelEnd(); ?>
 			</li>

diff --git a/webroot/css/debug_toolbar.css b/webroot/css/debug_toolbar.css
@@ -107,24 +107,48 @@
 	overflow: auto;
 }
 
-#debug-kit-toolbar .panel-resize-handle {
+#debug-kit-toolbar .ui-control {
 	background:#ccc;
 	background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#c2c2c2));
 	background: -moz-linear-gradient(top, #d6d6d6, #c2c2c2);
 	text-align:center;
-	cursor: row-resize;
 	border-top:1px solid #afafaf;
 	border-bottom:1px solid #7c7c7c;
 	color:#666;
-	text-shadow:1px 1px #eee;
-	-webkit-text-shadow:1px 1px #eee;
-	-moz-text-shadow:1px 1px #eee;
+	text-shadow: 1px 1px #eee;
+	-webkit-text-shadow: 1px 1px #eee;
+	-moz-text-shadow: 1px 1px #eee;
+}
+#debug-kit-toolbar .ui-button {
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+}
+#debug-kit-toolbar .ui-button:hover {
+	text-decoration: none;
+	background:#ccc;
+	background: -webkit-gradient(linear, left top, left bottom, from(#c2c2c2), to(#d6d6d6));
+	background: -moz-linear-gradient(top, #c2c2c2, #d6d6d6);
+}
+#debug-kit-toolbar .panel-resize-handle {
+	cursor: row-resize;
 	height:14px;
+	line-height: 14px;
 	position: absolute;
 	bottom: 0px;
 	left: 0px;
 	right: 0px;
 }
+#debug-kit-toolbar .panel-maximize,
+#debug-kit-toolbar .panel-minimize {
+	float: right;
+	display: block;
+	width: 12px;
+	height: 12px;
+	line-height: 12px;
+	border-left: 1px solid #afafaf;
+	border-right: 1px solid #7c7c7c;
+}
 #debug-kit-toolbar .panel-maximize {
 	float: right;
 	margin: 10px 20px 0 0;
@@ -307,7 +331,7 @@
 	clear:both;
 	margin: 20px 0 5px;
 }
-#debug-kit-toolbar #sql_log-tab a {
+#debug-kit-toolbar #sql_log-tab .panel-content-data a {
 	background: none;
 	border:none;
 }
@@ -340,7 +364,7 @@
 #debug-kit-toolbar #history-tab li {
 	margin: 0 0 5px 0;
 }
-#debug-kit-toolbar #history-tab a {
+#debug-kit-toolbar #history-tab .panel-content-data a {
 	float: none;
 	display:block;
 }