From 9f7c57719229ff82bee0cfe9aab3995e144d586a Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Tue, 1 Sep 2015 10:18:23 +0200
Subject: [PATCH] add directive for breadcrumbs

---
 .../components/umbbreadcrumbs.directive.js    | 21 +++++++++++++
 src/Umbraco.Web.UI.Client/src/less/belle.less |  1 +
 .../src/less/components/umb-breadcrumbs.less  | 31 +++++++++++++++++++
 .../src/views/components/umb-breadcrumbs.html | 10 ++++++
 4 files changed, 63 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbbreadcrumbs.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-breadcrumbs.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbreadcrumbs.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbreadcrumbs.directive.js
new file mode 100644
index 0000000000..65894198ff
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbreadcrumbs.directive.js
@@ -0,0 +1,21 @@
+(function() {
+  'use strict';
+
+  function BreadcrumbsDirective() {
+
+    var directive = {
+      restrict: 'E',
+      replace: true,
+      templateUrl: 'views/components/umb-breadcrumbs.html',
+      scope: {
+        ancestors: "="
+      }
+    };
+
+    return directive;
+
+  }
+
+  angular.module('umbraco.directives').directive('umbBreadcrumbs', BreadcrumbsDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index cafbb585e3..17ae3dceb8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -94,6 +94,7 @@
 @import "components/umb-locked-field.less";
 @import "components/umb-tabs.less";
 @import "components/umb-load-indicator.less";
+@import "components/umb-breadcrumbs.less";
 
 @import "components/umb-file-dropzone.less";
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
new file mode 100644
index 0000000000..5854599722
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
@@ -0,0 +1,31 @@
+.umb-breadcrumbs {
+   list-style: none;
+   margin-bottom: 0;
+   margin-left: 0;
+}
+
+.umb-breadcrumbs__ancestor {
+   display: inline-block;
+}
+
+.umb-breadcrumbs__ancestor-link,
+.umb-breadcrumbs__ancestor-text {
+   font-size: 11px;
+   color: #555;
+}
+
+.umb-breadcrumbs__ancestor-link {
+   text-decoration: underline;
+}
+
+.umb-breadcrumbs__ancestor-link:hover {
+   color: #000;
+}
+
+.umb-breadcrumbs__seperator {
+   position: relative;
+   top: 1px;
+   margin-left: 5px;
+   margin-right: 5px;
+   color: #ccc;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-breadcrumbs.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-breadcrumbs.html
new file mode 100644
index 0000000000..8667edbbb3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-breadcrumbs.html
@@ -0,0 +1,10 @@
+<ul class="umb-breadcrumbs">
+   <li class="umb-breadcrumbs__ancestor" ng-repeat="ancestor in ancestors">
+
+      <a ng-if="!$last" href="#/content/content/edit/{{ancestor.id}}" class="umb-breadcrumbs__ancestor-link">{{ancestor.name}}</a>
+      <span ng-if="!$last" class="umb-breadcrumbs__seperator">&#47;</span>
+
+      <span class="umb-breadcrumbs__ancestor-text" ng-if="$last">{{ancestor.name}}</span>
+
+   </li>
+</ul>