Some improvements to image tracks in the repo list view

static/css/directives/repo-view/repo-panel-tags.css

@@ -46,6 +46,7 @@
 
 .repo-panel-tags-element .image-track-line.start {
   top: 18px;
+  height: 24px;
   display: block;
 }
 
@@ -58,3 +59,11 @@
   height: 16px;
   display: block;
 }
+
+.repo-panel-tags-element .image-id-col {
+  width: 100px;
+}
+
+.repo-panel-tags-element .options-col {
+  padding-left: 20px;
+}

static/directives/repo-view/repo-panel-tags.html

@@ -7,12 +7,17 @@
        <div class="cor-checkable-menu-item" item-filter="allTagFilter">
         <i class="fa fa-check-square-o"></i>All Tags
        </div>
-       <div class="cor-checkable-menu-item" item-filter="noTagFilter">
+       <div class="cor-checkable-menu-item" item-filter="noTagFilter(tag)">
         <i class="fa fa-square-o"></i>No Tags
        </div>
-       <div class="cor-checkable-menu-item" item-filter="commitTagFilter">
+       <div class="cor-checkable-menu-item" item-filter="commitTagFilter(tag)">
         <i class="fa fa-git"></i>Commit SHAs
        </div>
+
+       <div class="cor-checkable-menu-item" item-filter="imageIDFilter(it.image_id, tag)"
+            ng-repeat="it in imageTracks">
+        <i class="fa fa-circle-o" ng-style="{'color': it.color}"></i> {{ it.image_id.substr(0, 12) }}
+       </div>
      </span>
 
      <span class="co-checked-actions" ng-if="checkedTags.checked.length">
@@ -53,13 +58,13 @@
       <td><i class="fa fa-tag"></i> {{ tag.name }}</td>
       <td><span am-time-ago="tag.last_modified"></span></td>
       <td>{{ tag.size | bytes }}</td>
+      <td class="image-id-col">{{ tag.image_id.substr(0, 12) }}</td>
       <td class="image-track" ng-repeat="it in imageTracks" ng-style="{'color': it.color}">
         <span class="image-track-dot" ng-if="it.image_id == tag.image_id"></span>
         <span class="image-track-line" ng-class="trackLineClass($parent.$index, it)"
               ng-style="{'borderColor': it.color}"></span>
       </td>
-      <td>{{ tag.image_id.substr(0, 12) }}</td>
-      <td>
+      <td class="options-col">
         <span class="cor-options-menu" ng-if="repository.can_write">
           <span class="cor-option" option-click="askDeleteTag(tag.name)">
             <i class="fa fa-times"></i> Delete Tag

static/js/core-ui.js

@@ -657,7 +657,9 @@ angular.module("core-ui", [])
         };
 
         this.checkByFilter = function(filter) {
-          $scope.controller.checkByFilter(filter);
+          $scope.controller.checkByFilter(function(tag) {
+            return filter({'tag': tag});
+          });
         };
       }
     };
@@ -673,7 +675,7 @@ angular.module("core-ui", [])
       restrict: 'C',
       require: '^corCheckableMenu',
       scope: {
-        'itemFilter': '=itemFilter'
+        'itemFilter': '&itemFilter'
       },
       link: function($scope, $element, $attr, parent) {
         $scope.parent = parent;

static/js/directives/repo-view/repo-panel-tags.js

@@ -215,6 +215,10 @@ angular.module('quay').directive('repoPanelTags', function () {
       $scope.noTagFilter = function(tag) {
         return false;
       };
+
+      $scope.imageIDFilter = function(image_id, tag) {
+        return tag.image_id == image_id;
+      };
     }
   };
   return directiveDefinitionObject;