Added toggle arrows, grey boxes for template links

3 files changed, 39 insertions, 6 deletions

diff --git a/debug_toolbar/media/debug_toolbar/toolbar.css b/debug_toolbar/media/debug_toolbar/toolbar.css
index bf4648a..64a1a3c 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.css
+++ b/debug_toolbar/media/debug_toolbar/toolbar.css
@@ -176,14 +176,14 @@
 	bottom:0;
 	left:0;
 	height:auto;
-	padding:10px 20px;
+	padding:0px 20px;
 }
 
 #djDebug .djDebugPanelContent .scroll {
 	height:100%;
 	overflow:auto;
 	display:block;
-	padding-right:10px;
+	padding:10px;
 }
 
 #djDebug h3 {
@@ -195,6 +195,8 @@
 #djDebug h4 {
 	font-size:20px;
 	font-weight:bold;
+	margin-bottom:0.8em;
+	margin-top:0.4em;
 }
 
 #djDebug .panelContent table {
@@ -314,6 +316,31 @@
 	margin-left:10px;
 }
 
+#djDebug a.toggleTemplate {
+	padding:4px;
+	background-color:#bbb;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+
+#djDebug a.toggleTemplate:hover {
+	padding:4px;
+	background-color:#444;
+	color:#ffe761;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+}
+
+
+#djDebug a.djTemplateShowContext, #djDebug a.djTemplateShowContext span.toggleArrow {
+	color:#999;
+}
+
+#djDebug a.djTemplateShowContext:hover,  #djDebug a.djTemplateShowContext:hover span.toggleArrow {
+	color:#000;
+	cursor:pointer;
+}
+
 #djDebug .highlight  { color:#000; }
 #djDebug .highlight .err { color:#000; } /* Error */
 #djDebug .highlight .g { color:#000; } /* Generic */
diff --git a/debug_toolbar/media/debug_toolbar/toolbar.js b/debug_toolbar/media/debug_toolbar/toolbar.js
index f1e6a94..e47adfa 100644
--- a/debug_toolbar/media/debug_toolbar/toolbar.js
+++ b/debug_toolbar/media/debug_toolbar/toolbar.js
@@ -43,6 +43,7 @@ jQuery(function($j) {
 				return false;
 			});
 			$j('#djDebugTemplatePanel a.djTemplateShowContext').click(function() {
+				$j.djDebug.toggle_arrow($j(this).children('.toggleArrow'))
 				$j.djDebug.toggle_content($j(this).parent().next());
 				return false;
 			});
@@ -101,7 +102,12 @@ jQuery(function($j) {
 				path: '/',
 				expires: -1
 			});
-		}
+		},
+		toggle_arrow: function(elem) {
+            var uarr = String.fromCharCode(0x25b6);
+            var darr = String.fromCharCode(0x25bc);
+            elem.html(elem.html() == uarr ? darr : uarr);
+        }
 	});
 	$j(document).bind('close.djDebug', function() {
 		$j(document).unbind('keydown.djDebug');
diff --git a/debug_toolbar/templates/debug_toolbar/panels/templates.html b/debug_toolbar/templates/debug_toolbar/panels/templates.html
index 872a5f5..1158abe 100644
--- a/debug_toolbar/templates/debug_toolbar/panels/templates.html
+++ b/debug_toolbar/templates/debug_toolbar/panels/templates.html
@@ -14,10 +14,10 @@
 {% if templates %}
 <dl>
 {% for template in templates %}
-	<dt><strong><a class="remoteCall" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
+	<dt><strong><a class="remoteCall toggleTemplate" href="/__debug__/template_source/?template={{ template.template.name }}">{{ template.template.name|addslashes }}</a></strong></dt>
 	<dd><samp>{{ template.template.origin_name|addslashes }}</samp></dd>
 	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext"><span class="toggleArrow">&#x25B6;</span> Toggle Context</a></div>
 		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ template.context }}</pre></div>
 	</dd>
 {% endfor %}
@@ -32,7 +32,7 @@
 {% for key, value in context_processors.iteritems %}
 	<dt><strong>{{ key|escape }}</strong></dt>
 	<dd>
-		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext">Toggle Context</a></div>
+		<div class="djTemplateShowContextDiv"><a class="djTemplateShowContext"><span class="toggleArrow">&#x25B6;</span> Toggle Context</a></div>
 		<div class="djTemplateHideContextDiv" style="display:none;"><pre>{{ value|escape }}</pre></div>
 	</dd>
 {% endfor %}