Merge pull request #539 from mabashian/breadcrumb-placeholder

Added breadcrumb placeholder

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;

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,

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;
+    }
+}

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;
+                };
+            }
+        };
+    }];

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>

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);

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 {

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,

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">