From b9a5664c748509e33c06c9e83e61bfc0d328a326 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Mon, 14 Dec 2015 09:51:46 -0500
Subject: [PATCH] Added bread crumb placeholder with a dummy link to the
 activity stream.  These stubs will be filled in in the future.

---
 awx/ui/client/legacy-styles/main-layout.less  |  2 +-
 awx/ui/client/src/app.js                      |  2 +
 .../src/bread-crumb/bread-crumb.block.less    | 52 +++++++++++++++++++
 .../src/bread-crumb/bread-crumb.directive.js  | 23 ++++++++
 .../src/bread-crumb/bread-crumb.partial.html  | 27 ++++++++++
 awx/ui/client/src/bread-crumb/main.js         |  5 ++
 .../login/loginModal/loginModal.block.less    |  2 +-
 .../client/src/main-menu/main-menu.block.less |  2 +-
 awx/ui/templates/ui/index.html                |  2 +-
 9 files changed, 113 insertions(+), 4 deletions(-)
 create mode 100644 awx/ui/client/src/bread-crumb/bread-crumb.block.less
 create mode 100644 awx/ui/client/src/bread-crumb/bread-crumb.directive.js
 create mode 100644 awx/ui/client/src/bread-crumb/bread-crumb.partial.html
 create mode 100644 awx/ui/client/src/bread-crumb/main.js

diff --git a/awx/ui/client/legacy-styles/main-layout.less b/awx/ui/client/legacy-styles/main-layout.less
index ea4bc922dd..643c486a7a 100644
--- a/awx/ui/client/legacy-styles/main-layout.less
+++ b/awx/ui/client/legacy-styles/main-layout.less
@@ -13,7 +13,7 @@ body {
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
     color: @black;
-    padding-top: 60px;
+    padding-top: 100px;
     min-height: 100%;
     padding-bottom: 50px;
     position: relative;
diff --git a/awx/ui/client/src/app.js b/awx/ui/client/src/app.js
index 41599cc6ac..64f0206df5 100644
--- a/awx/ui/client/src/app.js
+++ b/awx/ui/client/src/app.js
@@ -38,6 +38,7 @@ import breadcrumbs from './shared/breadcrumbs/main';
 // modules
 import setupMenu from './setup-menu/main';
 import mainMenu from './main-menu/main';
+import breadCrumb from './bread-crumb/main';
 import browserData from './browser-data/main';
 import dashboard from './dashboard/main';
 import moment from './shared/moment/main';
@@ -90,6 +91,7 @@ var tower = angular.module('Tower', [
     managementJobs.name,
     setupMenu.name,
     mainMenu.name,
+    breadCrumb.name,
     dashboard.name,
     moment.name,
     templateUrl.name,
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
new file mode 100644
index 0000000000..af6f4f57de
--- /dev/null
+++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less
@@ -0,0 +1,52 @@
+/** @define BreadCrumb */
+
+.BreadCrumb {
+    padding: 0;
+    display: flex;
+    background-color: #FFFFFF;
+    width: 100%;
+    z-index: 1039;
+    position: fixed;
+    right: 0;
+    left: 0;
+    top: 50px;
+    height: 40px;
+    border-bottom: 1px solid #e1e1e1;
+}
+.BreadCrumb.is-loggedOut {
+    opacity: 0;
+}
+.BreadCrumb-menuLink {
+    width: 58px;
+    border-left: 1px solid #e1e1e1;
+    margin-left: auto;
+    color: #d7d7d7;
+    flex: initial;
+    display: flex;
+    align-items: center;
+    padding: 0 19px;
+    cursor: pointer;
+}
+.BreadCrumb-menuLink:hover {
+    background-color: #f6f6f6;
+    color: #d7d7d7;
+}
+.BreadCrumb-menuLink.BreadCrumb-menuLinkActive {
+    color: #1678c4;
+}
+.BreadCrumb-menuLinkImage {
+    font-size: 18px;
+    flex: initial;
+}
+
+@breadcrumb-breakpoint: 900px;
+
+@media screen and (max-width: @breadcrumb-breakpoint) {
+    .BreadCrumb-menuLinkImage {
+        font-size: 24px;
+    }
+    .BreadCrumb-menuLink {
+        width: 67px;
+        padding: 0 21px;
+    }
+}
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.directive.js b/awx/ui/client/src/bread-crumb/bread-crumb.directive.js
new file mode 100644
index 0000000000..55e3db0a47
--- /dev/null
+++ b/awx/ui/client/src/bread-crumb/bread-crumb.directive.js
@@ -0,0 +1,23 @@
+/* jshint unused: vars */
+
+export default
+    [   'templateUrl', '$route', function(templateUrl, $route) {
+        return {
+            restrict: 'E',
+            templateUrl: templateUrl('bread-crumb/bread-crumb'),
+            link: function(scope, element, attrs) {
+                scope.activityStreamActive = 0;
+
+                scope.toggleActivityStreamActive = function(){
+                    scope.activityStreamActive = !scope.activityStreamActive;
+                }
+
+                scope.isActive = function (path) {
+                    if ($route.current && $route.current.regexp) {
+                        return $route.current.regexp.test(path);
+                    }
+                    return false;
+                };
+            }
+        };
+    }];
diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.partial.html b/awx/ui/client/src/bread-crumb/bread-crumb.partial.html
new file mode 100644
index 0000000000..f49d02393a
--- /dev/null
+++ b/awx/ui/client/src/bread-crumb/bread-crumb.partial.html
@@ -0,0 +1,27 @@
+<div id="bread_crumb" class="BreadCrumb" ng-class="{'is-loggedOut' : !$root.current_user.username}">
+    <div class="BreadCrumb-menuLink"
+        id="bread_crumb_activity_stream"
+        aw-tool-tip="View Activity Stream"
+        data-placement="left"
+        data-trigger="hover"
+        data-container="body"
+        ng-class="{'BreadCrumb-menuLinkActive' : activityStreamActive}"
+        ng-if="isActive('/home')"
+        ng-click="toggleActivityStreamActive()">
+        <i class="BreadCrumb-menuLinkImage icon-activity-stream"
+            alt="Activity Stream">
+        </i>
+    </div>
+    <a class="BreadCrumb-menuLink"
+        id="bread_crumb_dashboard"
+        ng-href="/#/home"
+        aw-tool-tip="View Dashboard"
+        data-placement="left"
+        data-trigger="hover"
+        data-container="body"
+        ng-if="!isActive('/home')">
+        <i class="BreadCrumb-menuLinkImage fa fa-tachometer"
+            alt="Dashboard">
+        </i>
+    </a>
+</div>
diff --git a/awx/ui/client/src/bread-crumb/main.js b/awx/ui/client/src/bread-crumb/main.js
new file mode 100644
index 0000000000..fde7a7991c
--- /dev/null
+++ b/awx/ui/client/src/bread-crumb/main.js
@@ -0,0 +1,5 @@
+import breadCrumb from './bread-crumb.directive';
+
+export default
+    angular.module('breadCrumb', [])
+        .directive('breadCrumb', breadCrumb);
diff --git a/awx/ui/client/src/login/loginModal/loginModal.block.less b/awx/ui/client/src/login/loginModal/loginModal.block.less
index 4ab6d13187..aad5f43633 100644
--- a/awx/ui/client/src/login/loginModal/loginModal.block.less
+++ b/awx/ui/client/src/login/loginModal/loginModal.block.less
@@ -17,7 +17,7 @@
 
 .LoginModal-dialog {
     margin: 30px auto;
-    margin-top: 135px;
+    margin-top: 95px;
 }
 
 .LoginModal-content {
diff --git a/awx/ui/client/src/main-menu/main-menu.block.less b/awx/ui/client/src/main-menu/main-menu.block.less
index 4c9c12d43b..423622a1a2 100644
--- a/awx/ui/client/src/main-menu/main-menu.block.less
+++ b/awx/ui/client/src/main-menu/main-menu.block.less
@@ -60,7 +60,7 @@
     z-index: 1042;
 }
 
-@menu-breakpoint: 886px;
+@menu-breakpoint: 900px;
 
 @media screen and (min-width: (@menu-breakpoint + 1px)) {
     .MainMenu-mobileItems,
diff --git a/awx/ui/templates/ui/index.html b/awx/ui/templates/ui/index.html
index a9a7817b6a..360b34b97f 100644
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@@ -41,7 +41,7 @@
     <include-svg href="{{ STATIC_URL }}assets/icons.svg"></include-svg>
 
   <main-menu></main-menu>
-
+  <bread-crumb></bread-crumb>
 
     <div class="container-fluid" id="#content-container">
       <div class="row">