From 6776924ee766885529f7c4a4d284d3c77a53bee7 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <jschorr@gmail.com>
Date: Thu, 13 Feb 2014 18:58:28 -0500
Subject: [PATCH] Better breadcrumbs

---
 static/css/quay.css                    |  6 +++++-
 static/directives/repo-breadcrumb.html | 16 +++++++++++++---
 static/js/app.js                       |  4 +++-
 static/partials/image-view.html        |  4 ++--
 static/partials/repo-admin.html        |  3 ++-
 static/partials/repo-build.html        |  2 +-
 6 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 63d69bf85..93ac21c85 100644
--- a/static/css/quay.css
+++ b/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;
 }
diff --git a/static/directives/repo-breadcrumb.html b/static/directives/repo-breadcrumb.html
index b7546c033..d76e4c8fd 100644
--- a/static/directives/repo-breadcrumb.html
+++ b/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>
diff --git a/static/js/app.js b/static/js/app.js
index c3e90e7f0..22e0bdfad 100644
--- a/static/js/app.js
+++ b/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) {     
     }
diff --git a/static/partials/image-view.html b/static/partials/image-view.html
index 8dacefc3c..a7b305db2 100644
--- a/static/partials/image-view.html
+++ b/static/partials/image-view.html
@@ -2,8 +2,8 @@
   <div class="container repo repo-image-view">
     <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>
+      <h3>       
+        <span class="repo-circle no-background" repo="repo"></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 3053f26fc..3bfbae297 100644
--- a/static/partials/repo-admin.html
+++ b/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>
   
diff --git a/static/partials/repo-build.html b/static/partials/repo-build.html
index defa1b636..8d08b21b8 100644
--- a/static/partials/repo-build.html
+++ b/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>