Better UI feedback for filters

Added X on hover to signal closing Added title that explicitly says that click will remove Added :hover state for better interaction
piatra · Apr 14, 2014 · 4aaf2fd · 4aaf2fd
1 parent bae2bdc
commit 4aaf2fd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/dashboard/css/style.css b/dashboard/css/style.css
@@ -628,3 +628,26 @@ body {
     opacity: 0.4;
     margin-left: 0.5rem;
 }
+
+.js-handler--timeline-filters {
+  padding: 0;
+  margin: 0;
+}
+
+.timeline-filter--item {
+  border: 1px solid #444;
+  border-radius: 3px;
+  padding: .5rem;
+  margin: .5rem 0;
+  list-style: none;
+  cursor: pointer;
+}
+
+  .timeline-filter--item:hover {
+    background: #444;
+  }
+
+  .timeline-filter--item:hover:after {
+    content: "\00d7";
+    margin: 0 .5rem;
+  }
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -369,7 +369,7 @@ <h6 class="graph-title">No milestones</h6>
 </script>
 
 <script id="timeline-filter-item" type="text/x-handlebars-template">
-    <li class="timeline-filter--item"> {{ name }}</li>
+    <li class="timeline-filter--item" title="click to remove"> {{ name }}</li>
 </script>
 
 <script src="/js/jquery.js"></script>