Better breadcrumbs

static/css/quay.css

@@ -2723,13 +2723,17 @@ p.editable:hover i {
   color: #888 !important;
 }
 
+.repo-breadcrumb-element .current a {
+  color: #444 !important;
+}
+
 .repo-breadcrumb-element .crumb:after {
   content: "/";
   color: #ccc;
   margin-left: 4px;
 }
 
-.repo-breadcrumb-element .crumb:hover, .repo-breadcrumb-element .crumb:hover a {
+.repo-breadcrumb-element .crumb:hover, .repo-breadcrumb-element .crumb:hover a, .repo-breadcrumb-element .current:hover a {
   color: #2a6496 !important;
   text-decoration: none;
 }

static/directives/repo-breadcrumb.html

@@ -1,15 +1,25 @@
 <span class="repo-breadcrumb-element">
-  <span ng-show="!image">
+  <span ng-show="!image && !subsection">
     <span class="crumb">
       <a href="{{ '/repository/?namespace=' + repo.namespace }}">{{repo.namespace}}</a>
     </span>
     <span class="current">{{repo.name}}</span>
   </span>
-  <span ng-show="image">
+  <span ng-show="image && !subsection">
     <span class="crumb">
       <a href="{{ '/repository/?namespace=' + repo.namespace }}">{{repo.namespace}}</a>
     </span>
     <span class="crumb"><a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}">{{repo.name}}</a></span>
-    <span class="current">{{image.id.substr(0, 12)}}</span>
+    <span class="current">
+      <i class="fa fa-archive" style="margin-left: 2px; margin-right: 2px;"></i> 
+      {{image.id.substr(0, 12)}}
+    </span>
+  </span>
+  <span ng-show="!image && subsection">
+    <span class="crumb">
+      <a href="{{ '/repository/?namespace=' + repo.namespace }}">{{repo.namespace}}</a>
+    </span>
+    <span class="crumb"><a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}">{{repo.name}}</a></span>    
+    <span class="current"><i class="fa" ng-class="subsectionIcon" style="margin-left: 4px; margin-right: 8px;"></i>{{subsection}}</span>
   </span>
 </span>

static/js/app.js

@@ -892,7 +892,9 @@ quayApp.directive('repoBreadcrumb', function () {
     restrict: 'C',
     scope: {
       'repo': '=repo',
-      'image': '=image'
+      'image': '=image',
+      'subsection': '=subsection',
+      'subsectionIcon': '=subsectionIcon'
     },
     controller: function($scope, $element) {     
     }

static/partials/image-view.html

@@ -3,7 +3,7 @@
     <div class="header">
       <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
       <h3>       
-        <i class="fa fa-archive fa-lg" style="color: #aaa; margin-right: 10px;"></i>
+        <span class="repo-circle no-background" repo="repo"></span>
         <span class="repo-breadcrumb" repo="repo" image="image.value"></span>
       </h3>
     </div>

static/partials/repo-admin.html

@@ -8,7 +8,8 @@
     <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
     <h3>
       <span class="repo-circle no-background" repo="repo"></span>
-      <span class="repo-breadcrumb" repo="repo"></span>
+      <span class="repo-breadcrumb" repo="repo" subsection-icon="'fa-cog'"
+            subsection="'Admin'"></span>
     </h3>
   </div>
   

static/partials/repo-build.html

@@ -7,7 +7,7 @@
     <a href="{{ '/repository/' + repo.namespace + '/' + repo.name }}" class="back"><i class="fa fa-chevron-left"></i></a>
     <h3>
       <span class="repo-circle no-background" repo="repo"></span>
-      <span class="repo-breadcrumb" repo="repo"></span>
+      <span class="repo-breadcrumb" repo="repo" subsection-icon="'fa-tasks'" subsection="'Build History'"></span>
     </h3>
   </div>