From fdb628a0b0479ded4358c8ad41db7fe9bfa95cec Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Fri, 31 Jan 2014 13:52:35 -0500
Subject: [PATCH] Make the repo breadcrumb bar clickable

---
 static/css/quay.css                    | 22 ++++++++++++++++
 static/directives/repo-breadcrumb.html | 11 ++++++++
 static/js/app.js                       | 35 ++++++++++++++++++++++++++
 static/partials/image-view.html        |  6 +----
 static/partials/repo-admin.html        |  3 ++-
 static/partials/view-repo.html         |  2 +-
 6 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 static/directives/repo-breadcrumb.html

diff --git a/static/css/quay.css b/static/css/quay.css
index 1fe07fddc..7ee169fdf 100644
--- a/static/css/quay.css
+++ b/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. */
 
diff --git a/static/directives/repo-breadcrumb.html b/static/directives/repo-breadcrumb.html
new file mode 100644
index 000000000..6694d58ca
--- /dev/null
+++ b/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>
diff --git a/static/js/app.js b/static/js/app.js
index 387b2a735..8d7d08231 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -384,6 +384,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,
diff --git a/static/partials/image-view.html b/static/partials/image-view.html
index 45c9c7a74..8dacefc3c 100644
--- a/static/partials/image-view.html
+++ b/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 style="color: #ccc">/</span>
-        <span style="color: #666;">{{repo.name}}</span>
-        <span style="color: #ccc">/</span>
-        <span>{{image.value.id.substr(0, 12)}}</span>
+        <span class="repo-breadcrumb" repo="repo" image="image.value"></span>
       </h3>
     </div>
 
diff --git a/static/partials/repo-admin.html b/static/partials/repo-admin.html
index 25259e976..5c1b90393 100644
--- a/static/partials/repo-admin.html
+++ b/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>
   
diff --git a/static/partials/view-repo.html b/static/partials/view-repo.html
index 89091258e..969b59275 100644
--- a/static/partials/view-repo.html
+++ b/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>