Cleanup icons after change to navbar

awx/ui/static/img/Credentials.svg

@@ -4,9 +4,7 @@
     <title>Credentials</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+    <g id="Credentials">
-        <g id="Credentials" sketch:type="MSArtboardGroup" fill="#242424">
+        <path d="M18.425,10.5 C18.425,5.60538462 22.4972,1.61538462 27.50165,1.61538462 C32.505275,1.61538462 36.575,5.60538462 36.575,10.5 L36.575,20.1923077 L18.425,20.1923077 L18.425,10.5 L18.425,10.5 Z M38.225,20.1923077 L38.225,10.5 C38.225,4.70076923 33.4235,0 27.50165,0 C21.57815,0 16.775,4.70076923 16.775,10.5 L16.775,20.1923077 L11,20.1923077 L11,42 L44,42 L44,20.1923077 L38.225,20.1923077 L38.225,20.1923077 Z"></path>
-            <path d="M18.425,10.5 C18.425,5.60538462 22.4972,1.61538462 27.50165,1.61538462 C32.505275,1.61538462 36.575,5.60538462 36.575,10.5 L36.575,20.1923077 L18.425,20.1923077 L18.425,10.5 L18.425,10.5 Z M38.225,20.1923077 L38.225,10.5 C38.225,4.70076923 33.4235,0 27.50165,0 C21.57815,0 16.775,4.70076923 16.775,10.5 L16.775,20.1923077 L11,20.1923077 L11,42 L44,42 L44,20.1923077 L38.225,20.1923077 L38.225,20.1923077 Z" sketch:type="MSShapeGroup"></path>
-        </g>
     </g>
-</svg>
+</svg>

awx/ui/static/js/main-menu/menu-default.partial.html

@@ -1,17 +1,28 @@
 <a menu-item href="#/projects" title="Projects" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
-    <img src="/static/img/Projects.svg" class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+    <i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+        <aw-icon name="Projects"></aw-icon>
+    </i>
     Projects
 </a>
 <a menu-item href="#/inventories" title="Inventories" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
-    <img src="/static/img/CloudSync.svg" class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+    <i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+        <aw-icon name="CloudSync"></aw-icon>
+    </i>
+    <!-- <img src="/static/img/CloudSync.svg" class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height"> -->
     Inventories
 </a>
 <a menu-item href="#/job_templates" title="Job Templates" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
-    <img src="/static/img/JobTemplates.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+    <i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+        <aw-icon name="JobTemplates"></aw-icon>
+    </i>
+    <!-- <img src="/static/img/JobTemplates.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height"> -->
     Job Templates
 </a>
 <a menu-item href="#/jobs" title="Jobs" class="MenuItem MenuItem--hoverable HoverIcon HoverIcon--onlyLarge">
-    <img src="/static/img/Jobs.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+    <i class="MenuItem-hoverIcon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height">
+        <aw-icon name="Jobs"></aw-icon>
+    </i>
+    <!-- <img src="/static/img/Jobs.svg" class="MenuItem-hover-icon HoverIcon-icon HoverIcon-icon--opacity HoverIcon-icon--height"> -->
     Jobs
 </a>
 <a href="#/setup" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">

awx/ui/static/js/setup-menu/hover-icon.block.less

@@ -1,5 +1,7 @@
 /** @define HoverIcon */
 
+@import 'shared/branding/colors.less';
+
 .HoverIcon {
   @media screen and (max-width: 571px) {
     &--onlyLarge {
@@ -13,6 +15,11 @@
   }
   &-icon {
     width: auto;
+    &--color {
+      g, path {
+          transition: fill 0.15s ease-out;
+      }
+    }
     &--opacity {
       transition: opacity 0.3s ease-out;
       opacity: 0;
@@ -30,6 +37,11 @@
       &--height {
         height: 22px;
       }
+      &--color {
+        path, g {
+            fill: @ansible-red;
+        }
+      }
     }
   }
 }

awx/ui/static/js/setup-menu/main.js

@@ -1,11 +1,13 @@
 import route from './setup.route';
+import icon from 'tower/shared/icon/main';
 
 export default
     angular.module('setupMenu',
                    [    'AboutAnsibleHelpModal',
                         'LicenseHelper',
                         'ConfigureTowerHelper',
-                        'CreateCustomInventoryHelper'
+                        'CreateCustomInventoryHelper',
+                        icon.name
                    ])
         .config(['$routeProvider', function($routeProvider) {
             var url = route.route;

awx/ui/static/js/setup-menu/setup-item.block.less

@@ -31,15 +31,15 @@
     }
 
     &-icon {
+      // height: 28px;
       &--aside {
         width: @icon-small-size;
+        flex: none; // do not let the flex container adjust this width!
+        align-self: flex-start;
       }
 
       width: @icon-large-size;
       align-self: center;
-      img {
-          width: 100%;
-      }
     }
 
     &--noIcon {

awx/ui/static/js/setup-menu/setup-menu.partial.html

@@ -1,14 +1,18 @@
 <section id="htmlTemplate" class="Container">
   <nav class="SetupMenu Container-main">
-      <a href="#/credentials" class="SetupItem Media">
+      <a href="#/credentials" class="SetupItem HoverIcon Media">
-        <i class="SetupItem-icon Media-figure"><img src="/static/img/Credentials.svg"></i>
+        <i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
+          <aw-icon name="Credentials" inline></aw-icon>
+        </i>
         <div class="Media-body">
           <h4 class="SetupItem-title">Credentials</h4>
           <p class="SetupItem-description">Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.</p>
         </div>
       </a>
-      <a href="#/users" class="SetupItem Media">
+      <a href="#/users" class="SetupItem HoverIcon Media">
-        <i class="SetupItem-icon Media-figure"><img src="/static/img/Users.svg"></i>
+        <i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
+          <aw-icon name="Users" inline></aw-icon>
+        </i>
         <div class="Media-body">
           <h4 class="SetupItem-title">Users</h4>
           <p class="SetupItem-description">
@@ -16,8 +20,10 @@
           </p>
         </div>
       </a>
-      <a href="#/teams" class="SetupItem Media">
+      <a href="#/teams" class="SetupItem HoverIcon Media">
-        <i class="SetupItem-icon Media-figure"><img src="/static/img/Teams.svg"></i>
+        <i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
+          <aw-icon name="Teams" inline></aw-icon>
+        </i>
         <div class="Media-block">
           <h4 class="SetupItem-title">Teams</h4>
           <p class="SetupItem-description">
@@ -29,8 +35,8 @@
   <aside class="Container-aside">
       <nav class="SetupMenu Menu Menu--vertical">
         <a href="#/organizations" class="SetupItem SetupItem--aside HoverIcon Media">
-          <i class="SetupItem-icon SetupItem-icon--aside Media-figure">
+          <i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
-            <img class="Icon HoverIcon-icon HoverIcon-icon--opacity" src="/static/img/Organizations.svg">
+            <aw-icon name="Organizations"></aw-icon>
           </i>
           <div class="Media-block">
             <h4 class="SetupItem-title SetupItem-title--aside">Organizations</h4>
@@ -40,8 +46,8 @@
           </div>
         </a>
         <button class="SetupItem SetupItem--button SetupItem--aside HoverIcon Media" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
-          <i class="SetupItem-icon SetupItem-icon--aside Media-figure">
+          <i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
-            <img class="Icon HoverIcon-icon HoverIcon-icon--opacity" src="/static/img/ManagementJobs.svg">
+            <aw-icon name="ManagementJobs"></aw-icon>
           </i>
           <div class="Media-block">
             <h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
@@ -51,8 +57,8 @@
           </div>
         </button>
         <button class="SetupItem SetupItem--button SetupItem--aside HoverIcon Media" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
-          <i class="SetupItem-icon SetupItem-icon--aside Media-figure">
+          <i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
-            <img class="Icon HoverIcon-icon HoverIcon-icon--opacity" src="/static/img/InventoryScripts.svg">
+            <aw-icon name="InventoryScripts"></aw-icon>
           </i>
           <div class="Media-block">
             <h4 class="SetupItem-title SetupItem-title--aside">Inventory Scripts</h4>

awx/ui/static/js/shared/icon/icon.block.less

@@ -0,0 +1,7 @@
+/** @define Icon */
+
+.Icon {
+    path, g {
+      fill: #242424;
+    }
+}

awx/ui/static/js/shared/icon/icon.directive.js

@@ -0,0 +1,34 @@
+export default function() {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/shared/icon/icon.partial.html',
+        scope: {
+            isInline: '@inline'
+        },
+        link: function(scope, element, attrs) {
+            var svg = $('svg', element);
+            var iconPath = '#' + attrs.name;
+
+            scope.isInline = scope.isInline === "true";
+
+            if(angular.isDefined(attrs.inline)) {
+                // Make a copy of the <symbol> tag to insert its contents into this
+                // element's svg tag
+                var content = $(iconPath).clone();
+
+                // Copy classes off the <symbol> so that we preserve any styling
+                // when we copy the item inline
+                var classes = $(iconPath).attr('class');
+
+                svg.attr('class', classes)
+                    .html(content.contents());
+            } else {
+                // Using string concatenation here because <use> needs to be
+                // generated without a close tag, but jQuery will NOT allow us
+                // to create it without a closing tag :(
+                var use = '<use xlink:href="' + iconPath + '">';
+                svg.html(use);
+            }
+        }
+    };
+}

awx/ui/static/js/shared/icon/icon.partial.html

@@ -0,0 +1,2 @@
+<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 55 42" width="100%" height="100%">
+</svg>

awx/ui/static/js/shared/icon/include-svg.directive.js

@@ -0,0 +1,12 @@
+export default ['$http', function($http) {
+    return {
+        restrict: 'E',
+        link: function(scope, element, attrs) {
+            var path = attrs.href;
+
+            $http.get(path).then(function(response) {
+                element.append(response.data);
+            });
+        }
+    };
+}]

awx/ui/static/js/shared/icon/main.js

@@ -0,0 +1,7 @@
+import icon from './icon.directive';
+import includeSvg from './include-svg.directive';
+
+export default
+    angular.module('awIcon', [])
+        .directive('awIcon', icon)
+        .directive('includeSvg', includeSvg);

awx/ui/static/js/shared/menu/menu-item.block.less

@@ -31,6 +31,10 @@
     }
   }
 
+  &-hoverIcon {
+    width: 28px;
+  }
+
   &--active {
     flex-direction: column !important;
     justify-content: center !important;

awx/ui/static/less/ansible-ui.less

@@ -1902,8 +1902,6 @@ tr td button i {
 
 }
 
-
-
 /* Landscape phone to portrait tablet */
 
 @media (max-width: 767px) {

awx/ui/static/lib/nvd3/build/nv.d3.css

@@ -3,19 +3,6 @@
  */
 
 
-svg {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  /* Trying to get SVG to act like a greedy block in all browsers */
-  display: block;
-  width:100%;
-  height:100%;
-}
-
 /********************
   Default CSS for an svg element nvd3 used
 */
@@ -642,4 +629,4 @@ Interactive Layer
 }
 .nvd3 line.nv-guideline {
   stroke: #ccc;
-}
+}

awx/ui/templates/ui/index.html

@@ -28,6 +28,8 @@
 </head>
 <body>
 
+    <include-svg href="{{ STATIC_URL }}img/icons.svg"></include-svg>
+
   <main-menu
           menu-style="portalMode ? 'minimal' : 'default'">
   </main-menu>