Implement main menu redesign

2026-04-24 00:41:48 -05:00 · 2015-04-15 14:25:02 -04:00
parent ea51113e1b
commit 91fe2b5444
25 changed files with 448 additions and 109 deletions
--- a/awx/ui/static/js/app.js
+++ b/awx/ui/static/js/app.js
@@ -937,7 +937,7 @@ var tower = angular.module('Tower', [
        LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, ConfigureTower, CreateCustomInventory) {


-            var e, html, sock;
+            var html, e, sock;

            function activateTab() {
                // Make the correct tab active
--- a/awx/ui/static/js/main-menu/main-menu.directive.js
+++ b/awx/ui/static/js/main-menu/main-menu.directive.js
@@ -0,0 +1,28 @@
+function getMenuStylePartialUrl(style) {
+
+    if (style !== 'default' && style !== 'minimal') {
+        console.warn('main-menu: "', style, 'is not a valid menu style. Please use "default" or "minimal".');
+        style = 'default';
+    }
+
+    return '/static/js/main-menu/menu-' + style + '.partial.html';
+}
+
+function link(scope, element, attrs) {
+    scope.$watch(function(scope) {
+        return scope.$eval(scope.style);
+    }, function(value) {
+        scope.menuStylePartialUrl = getMenuStylePartialUrl(value);
+    });
+}
+
+export default function() {
+    return {
+        restrict: 'E',
+        template: '<nav class="Menu Menu--main Menu--fixed-top" ng-include="menuStylePartialUrl"></nav>',
+        scope: {
+            style: '&menuStyle'
+        },
+        link: link
+    };
+}
--- a/awx/ui/static/js/main-menu/main.js
+++ b/awx/ui/static/js/main-menu/main.js
@@ -0,0 +1,7 @@
+import mainMenu from './main-menu.directive';
+import menuItem from './menu-item.directive';
+
+export default
+    angular.module('mainMenu', [])
+        .directive('menuItem', menuItem)
+        .directive('mainMenu', mainMenu);
--- a/awx/ui/static/js/main-menu/menu-default.partial.html
+++ b/awx/ui/static/js/main-menu/menu-default.partial.html
@@ -0,0 +1,34 @@
+<a menu-item href="/" title="Home" class="MenuItem MenuItem--logo">
+    <img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
+</a>
+<a menu-item href="#/projects" title="Projects" class="MenuItem MenuItem--hoverable">
+    <img src="/static/img/Projects.svg" class="MenuItem-hover-icon">
+    Projects
+</a>
+<a menu-item href="#/inventories" title="Inventories" class="MenuItem MenuItem--hoverable">
+    <img src="/static/img/CloudSync.svg" class="MenuItem-hover-icon">
+    Inventories
+</a>
+<a menu-item href="#/job_templates" title="Job Templates" class="MenuItem MenuItem--hoverable">
+    <img src="/static/img/JobTemplates.svg" class="MenuItem-hover-icon">
+    Job Templates
+</a>
+<a menu-item href="#/jobs" title="Jobs" class="MenuItem MenuItem--hoverable">
+    <img src="/static/img/Jobs.svg" class="MenuItem-hover-icon">
+    Jobs
+</a>
+<a href="#/setup" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">
+    <img src="/static/img/Setup.svg" class="MenuItem-icon">
+</a>
+<a href="#portal" class="MenuItem MenuItem--fixed" title="Setup">
+    <img src="/static/img/PortalMode.svg" class="MenuItem-icon">
+</a>
+<a href="#/logout" title="Sign out" class="MenuItem MenuItem--fixed">
+  <img src="/static/img/Signout.svg" class="MenuItem-icon">
+</a>
+<a href="#setup" class="MenuItem MenuItem--setup" title="Setup">
+  Setup
+</a>
+<a href="#logout" title="Sign out" class="MenuItem MenuItem--fixed">
+  <img src="/static/img/Signout.svg" class="MenuItem-icon">
+</a>
--- a/awx/ui/static/js/main-menu/menu-item.directive.js
+++ b/awx/ui/static/js/main-menu/menu-item.directive.js
@@ -0,0 +1,18 @@
+export default ['$location', function($location) {
+    return {
+        link: function(scope, element, attrs) {
+            var itemPath = attrs.href.replace(/^#/, '');
+
+            scope.$watch(function() {
+                return $location.path();
+            }, function(currentPath) {
+                console.log(itemPath, currentPath);
+                if (currentPath === itemPath) {
+                    element.addClass('MenuItem--active');
+                } else {
+                    element.removeClass('MenuItem--active');
+                }
+            });
+        }
+    };
+}];
--- a/awx/ui/static/js/main-menu/menu-minimal.partial.html
+++ b/awx/ui/static/js/main-menu/menu-minimal.partial.html
@@ -0,0 +1,12 @@
+<a href="#portal" title="Home" class="MenuItem MenuItem--logo">
+    <img id="ansible-brand-logo" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
+</a>
+<a href="#portal" title="Portal" class="MenuItem">
+    Portal
+</a>
+<a href="#portal" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">
+    <img src="/static/img/PortalMode.svg" class="MenuItem-icon">
+</a>
+<a href="#logout" title="Sign out" class="MenuItem MenuItem--fixed">
+  <img src="/static/img/Signout.svg" class="MenuItem-icon">
+</a>
--- a/awx/ui/static/js/shared/menu/menu-item.block.less
+++ b/awx/ui/static/js/shared/menu/menu-item.block.less
@@ -0,0 +1,100 @@
+/** @define MenuItem */
+
+@import (reference) "shared/utilities/icons.less";
+
+.MenuItem {
+  display: flex;
+  flex: none;
+  padding: 2.8rem 0;
+  min-height: 5.8rem;
+  min-width: 9.2rem;
+
+  &--fixed {
+      flex: none;
+      min-width: 0;
+      margin-right: 0 !important;
+  }
+
+  &--logo {
+      width: 202px;
+  }
+
+  &--active {
+    flex-direction: column !important;
+    justify-content: center !important;
+    background-color: rgba(255,255,255,0.35);
+    .MenuItem-hover-icon {
+        display: flex;
+        opacity: 1 !important;
+        height: 22px !important;
+    }
+  }
+
+  &--hoverable {
+    transition: background-color 0.3s;
+    flex-direction: column;
+    justify-content: center;
+    .MenuItem-hover-icon {
+        display: flex;
+        opacity: 0;
+        height: 0;
+        width: auto;
+        transition: opacity 0.3s ease-out, height 0.2s ease-out;
+    }
+    &:hover {
+        background-color: rgba(255,255,255,0.35);
+        .MenuItem-hover-icon {
+            display: flex;
+            opacity: 1;
+            height: 22px;
+        }
+    }
+  }
+  &--context {
+    // Push this and all following elements to the right
+    margin-left: auto;
+    flex-direction: column;
+    justify-content: center;
+
+    .MenuItem {
+      // Make sure items in this container are aligned to
+      // the right-hand side (on rtl platforms)
+      align-self: flex-end;
+    }
+  }
+
+  &--right {
+    margin-left: auto;
+  }
+
+  &--setup {
+    &:before {
+      .icon(@fa-var-cogs);
+      padding-right: 0.25rem;
+    }
+  }
+
+  &--popup {
+    // Make pseudo button
+    background: transparent;
+    border: 0;
+    padding: 8px 0;
+
+    outline: none;
+
+    &:after {
+        .icon(@fa-var-angle-down);
+    }
+  }
+
+  &-logo {
+    height: 34px;
+    width: auto;
+  }
+
+  &-icon {
+      height: 13px;
+      width: auto;
+  }
+
+}
--- a/awx/ui/static/js/shared/menu/menu.block.less
+++ b/awx/ui/static/js/shared/menu/menu.block.less
@@ -0,0 +1,51 @@
+/** @define Menu */
+
+.Menu {
+  display: flex;
+  align-items: center;
+  background-color: white;
+
+  &--main {
+      background-color: white;
+      padding: 0 1rem;
+      margin: 0;
+      .MenuItem {
+          color: black;
+          margin-right: 2rem;
+          padding: 0 1rem;
+          align-items: center;
+          &:last-child {
+            margin-right: 0;
+          }
+      }
+  }
+
+  &--popup {
+    display: block;
+    position: absolute;
+    top: 60px;
+    right: 19px;
+    width: 160px;
+
+    .MenuItem {
+      padding: 0.5rem;
+      border: solid 1px #7A7A7A;
+      border-bottom: none;
+      text-align: center;
+      margin-right: 0;
+      &:last-child {
+        border-bottom: solid 1px #7A7A7A;
+      }
+    }
+  }
+
+  &--fixed-top {
+    width: 100%;
+    z-index: 1040;
+    position: fixed;
+    right: 0;
+    left: 0;
+    top: 0;
+  }
+
+}
--- a/awx/ui/static/js/shared/utilities/icons.less
+++ b/awx/ui/static/js/shared/utilities/icons.less
@@ -0,0 +1,16 @@
+@import "components-font-awesome/less/variables.less";
+
+/* not bem */
+
+.icon(@icon-var) {
+  display: flex;
+  align-self: center;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  content: @icon-var;
+}
--- a/awx/ui/static/js/shared/utilities/layer.less
+++ b/awx/ui/static/js/shared/utilities/layer.less
@@ -0,0 +1,4 @@
+.u-layer {
+  position: relative;
+  z-index: 10000;
+}
--- a/awx/ui/static/js/tmp.less
+++ b/awx/ui/static/js/tmp.less
@@ -1,11 +0,0 @@
-/** @define Component */
-
-.Component {
-    &-title {
-        diddy: doo;
-    }
-    .diddy {
-        dah: doody;
-    }
-    doo: dah;
-}