From 71f196e9c285f3469a6cdb8bd0a7e19d707dd4d9 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Mon, 2 Dec 2013 16:44:50 -0500
Subject: [PATCH] Switch chart button to an icon

---
 static/css/quay.css              | 14 ++++++++++++++
 static/directives/logs-view.html |  6 ++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 641c3a1d3..69d56cfb7 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -21,6 +21,20 @@ html, body {
   border-bottom: 1px dashed #aaa;
 }
 
+.toggle-icon {
+  font-size: 22px;
+  padding: 6px;
+  cursor: pointer;
+}
+
+i.toggle-icon:hover {
+  color: steelblue;
+}
+
+.toggle-icon.active {
+  border-radius: 4px;
+  background: #eee;
+}
 
 .entity-reference .prefix {
   color: #aaa;
diff --git a/static/directives/logs-view.html b/static/directives/logs-view.html
index 2af2bf6e3..7ebb46fe3 100644
--- a/static/directives/logs-view.html
+++ b/static/directives/logs-view.html
@@ -6,10 +6,8 @@
     <div class="container header">
       <b>Usage logs for the last seven days</b>
       <span class="right">
-        <button class="btn btn-default btn-toggle" ng-class="chartVisible ? 'active' : ''" ng-click="toggleChart()">
-          Show Chart
-          <i class="fa" ng-class="chartVisible ? 'fa-toggle-down' : 'fa-toggle-right'" style="margin-left: 10px"></i>
-        </button>
+        <i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
+           ng-click="toggleChart()" title="Toggle Chart" bs-tooltip="tooltip.title"></i>
       </span>
     </div>