Merge pull request #403 from webcompat/Labels-component

Labels component

Author: magsout

webcompat/static/css/development/components/labels.css

@@ -0,0 +1,15 @@
+/*---------- Labels ----------*/
+
+.wc-Labels {
+  display: inline-block;
+  border-width:0 0 3px 0;
+  border-style:solid;
+  font-weight:700;
+  border-color:transparent;
+  opacity:.7;
+}
+  /* state */
+  .wc-Labels:hover {
+    text-decoration:none;
+    opacity:1;
+  }

webcompat/static/css/development/main.css

@@ -28,6 +28,7 @@
 @import "components/hero.css";
 @import "components/filter.css";
 @import "components/pagination.css";
+@import "components/labels.css";
 /*----------Layout----------*/
 @import "layout/body.css";
 @import "layout/utilities.css";

webcompat/static/css/development/page/issue-list.css

@@ -69,4 +69,9 @@
     /* modifier : label */
     .IssueList-noResults-list-item--label {
       list-style: none;
+      padding-top:.8em;
+    }
+    /* labels item */
+    .IssueList-noResults-list-labelsItem {
+      display:inline-block;
     }

webcompat/static/js/lib/issue-list.js

@@ -236,7 +236,7 @@ issueList.PaginationControlsView = Backbone.View.extend({
 issueList.IssueView = Backbone.View.extend({
   el: $('.js-issue-list'),
   events: {
-    'click .IssueItem-label': 'labelSearch'
+    'click .js-issue-label': 'labelSearch',
   },
   initialize: function() {
     this.issues = new issueList.IssueCollection();

webcompat/templates/issue-list.html

@@ -70,8 +70,8 @@ <h2 class="wc-margin-bottom">Issues</h2>
               </p>
             </div>
             <div class="IssueItem-section">
-              <span class="IssueItem-label"><% _.each(issue.labels, function(label) { %>
-                <a href="#" class="wc-bold"><%= label.name %></a>
+              <span class="IssueItem-label js-issue-label"><% _.each(issue.labels, function(label) { %>
+                <a href="#" class="wc-Labels" title="Labels : <%= label.name %>"><%= label.name %></a>
               <% }); %></span>
             </div>
           </div>
@@ -83,6 +83,22 @@ <h2 class="wc-margin-bottom">Issues</h2>
                <li class="IssueList-noResults-list-item">Check your spelling</li>
                <li class="IssueList-noResults-list-item">Try a more general search</li>
                <li class="IssueList-noResults-list-item">Filter by popular labels</li>
+               <li class="IssueList-noResults-list-item IssueList-noResults-list-item--label">
+                 <ul class="r-ResetList IssueList-noResults-list-labels">
+                   <li class="IssueList-noResults-list-labelsItem js-issue-label" >
+                     <a class="wc-Labels" href="#" title="Labels : android" style="border-color: #48DE20">android</a>
+                    </li>
+                   <li class="IssueList-noResults-list-labelsItem js-issue-label">
+                     <a class="wc-Labels" href="#" title="Labels : chrome" style="border-color: #FFA500">chrome</a>
+                    </li>
+                   <li class="IssueList-noResults-list-labelsItem js-issue-label">
+                     <a class="wc-Labels" href="#" title="Labels : firefox" style="border-color: #E50000">firefox</a>
+                   </li>
+                   <li class="IssueList-noResults-list-labelsItem js-issue-label">
+                     <a class="wc-Labels" href="#" title="Labels : ie" style="border-color: #3E8AE5">ie</a>
+                    </li>
+                 </ul>
+               </li>
              </ul>
           </div>
         <% } %>