Make the repo breadcrumb bar clickable

static/css/quay.css

@@ -2474,6 +2474,28 @@ p.editable:hover i {
   font-size: 16px;
 }
 
+.repo-breadcrumb-element .crumb {
+  cursor: pointer;
+}
+
+.repo-breadcrumb-element .crumb:nth-last-of-type(3), .repo-breadcrumb-element .crumb:nth-last-of-type(3) a {
+  color: #aaa !important;
+}
+
+.repo-breadcrumb-element .crumb:nth-last-of-type(2), .repo-breadcrumb-element .crumb:nth-last-of-type(2) a {
+  color: #888 !important;
+}
+
+.repo-breadcrumb-element .crumb:after {
+  content: "/";
+  color: #ccc;
+  margin-left: 4px;
+}
+
+.repo-breadcrumb-element .crumb:hover, .repo-breadcrumb-element .crumb:hover a {
+  color: #2a6496 !important;
+  text-decoration: none;
+}
 
 /* Overrides for typeahead to work with bootstrap 3. */
 

static/directives/repo-breadcrumb.html

@@ -0,0 +1,11 @@
+<span class="repo-breadcrumb-element">
+  <span ng-show="!image">
+    <span class="crumb" ng-click="showNamespace()">{{repo.namespace}}</span> 
+    <span class="current">{{repo.name}}</span>
+  </span>
+  <span ng-show="image">
+    <span class="crumb" ng-click="showNamespace()">{{repo.namespace}}</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>
+</span>

static/js/app.js

@@ -385,6 +385,15 @@ quayApp = angular.module('quay', ['ngRoute', 'chieffancypants.loadingBar', 'rest
         return org.is_org_admin;
       };
 
+      userService.isKnownNamespace = function(namespace) {
+        if (namespace == userResponse.username) {
+          return true;
+        }
+
+        var org = userService.getOrganization(namespace);
+        return !!org;
+      };
+        
       userService.currentUser = function() {
         return userResponse;
       };
@@ -854,6 +863,32 @@ quayApp.directive('markdownView', function () {
 });
 
 
+quayApp.directive('repoBreadcrumb', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/repo-breadcrumb.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+      'repo': '=repo',
+      'image': '=image'
+    },
+      controller: function($scope, $element, $location, UserService, CookieService) {
+      $scope.showNamespace = function() {
+        var namespace = $scope.repo.namespace || '';
+        if (UserService.isKnownNamespace(namespace)) {
+          CookieService.putPermanent('quay.namespace', namespace);
+        }
+
+        $location.path('/repository/');
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('repoCircle', function () {
   var directiveDefinitionObject = {
     priority: 0,

static/partials/image-view.html

@@ -4,11 +4,7 @@
       <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 style="color: #aaa;"> {{repo.namespace}}</span>
+        <span class="repo-breadcrumb" repo="repo" image="image.value"></span>
-        <span style="color: #ccc">/</span>
-        <span style="color: #666;">{{repo.name}}</span>
-        <span style="color: #ccc">/</span>
-        <span>{{image.value.id.substr(0, 12)}}</span>
       </h3>
     </div>
 

static/partials/repo-admin.html

@@ -4,7 +4,8 @@
   <div class="header row">
     <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 style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
+      <span class="repo-circle no-background" repo="repo"></span>
+      <span class="repo-breadcrumb" repo="repo"></span>
     </h3>
   </div>
   

static/partials/view-repo.html

@@ -10,7 +10,7 @@
     <div class="header">
       <h3>
         <span class="repo-circle" repo="repo"></span>
-        <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
+        <span class="repo-breadcrumb" repo="repo"></span>
         <span class="settings-cog" ng-show="repo.can_admin" title="Repository Settings" bs-tooltip="tooltip.title" data-placement="bottom">
           <a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/admin' }}">
             <i class="fa fa-cog fa-lg"></i>