Change portal mode icon when in portal mode

awx/ui/static/img/PortalMode--exit.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="67px" height="46px" viewBox="0 0 67 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>PortalMode--exit</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="PortalMode--exit" sketch:type="MSArtboardGroup" fill="#FFFFFF">
+            <g id="PortalMode--exit-arrow" sketch:type="MSLayerGroup" transform="translate(2.000000, 8.000000)">
+                <path d="M11,8.25000041 L32.5589445,8.25 L32.5589445,13.451166 L11,13.4511664 L11,8.25000041 Z" id="Signout-arrow-line" sketch:type="MSShapeGroup"></path>
+                <path d="M0.66,10.56 L11.22,0.66 L11.22,20.46 L0.66,10.56 L0.66,10.56 Z" id="Signout-arrowhead" sketch:type="MSShapeGroup"></path>
+            </g>
+            <path d="M7,8 L38,8 L38,31 L7,31 L7,8 Z M59,36 L59,0 L7,0 L7,36 L32,36 L32,44 L25,44 L25,46 L41,46 L41,44 L34,44 L34,36 L59,36" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>

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

@@ -12,6 +12,7 @@ function link(scope, element, attrs) {
     scope.$watch(function(scope) {
         return scope.$eval(scope.style);
     }, function(value) {
+        console.log('changed', scope.$eval(scope.style));
         scope.menuStylePartialUrl = getMenuStylePartialUrl(value);
     });
 }

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

@@ -1,7 +1,9 @@
 import mainMenu from './main-menu.directive';
 import menuItem from './menu-item.directive';
+import portalModeLink from './portal-mode-link.directive';
 
 export default
     angular.module('mainMenu', [])
+        .directive('portalModeLink', portalModeLink)
         .directive('menuItem', menuItem)
         .directive('mainMenu', mainMenu);

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

@@ -20,7 +20,7 @@
 <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">
+<a portal-mode-link class="MenuItem MenuItem--fixed" title="Portal Mode">
     <img src="/static/img/PortalMode.svg" class="MenuItem-icon">
 </a>
 <a href="#/logout" title="Sign out" class="MenuItem MenuItem--fixed">

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

@@ -4,9 +4,6 @@
 <a href="#portal" title="Portal" class="MenuItem">
     Portal
 </a>
-<a href="#portal" class="MenuItem MenuItem--right MenuItem--fixed" title="Setup">
+<a portal-mode-link class="MenuItem MenuItem--right MenuItem--fixed" title="Portal Mode">
     <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>

awx/ui/static/js/main-menu/portal-mode-link.directive.js

@@ -0,0 +1,26 @@
+function wrapper(rootScope) {
+    return function compile(element, attrs) {
+        var href, title, icon;
+        if (rootScope.portalMode) {
+            href = '#';
+            title = 'Exit Portal Mode';
+            icon = 'PortalMode--exit.svg';
+        } else {
+            href = '#portal';
+            title = 'Portal Mode';
+            icon = 'PortalMode.svg';
+        }
+
+        element
+            .attr('href', href)
+            .attr('title', title)
+            .find('>img')
+                .attr('src', '/static/img/' + icon);
+    }
+}
+
+export default ['$rootScope', function($rootScope) {
+    return {
+        compile: wrapper($rootScope)
+    };
+}]

awx/ui/static/js/shared/include-partial/include-partial.directive.js

@@ -0,0 +1,64 @@
+// Typically ng-include requires the use of an extra tag like:
+//
+//  <div ng-include="my-partial.html"></div>
+//
+// This means that the content from `my-partial.html` will _always_
+// be wrapped in that extra div.
+//
+// This directive works with ngInclude to replace its own contents with
+// the contents of the included partial.
+//
+// The high-level strategy here is to find the comment
+// inserted by ng-include, remove all children after
+// the comment (this will be the children inserted by
+// this directiv) then insert the included children
+// after the comment.
+//
+// So say we have:
+//
+// <include-partial ng-include="'my-partial.html'"></include-partial>
+//
+// and "my-partial.html" contains:
+//
+// <p>Item 1</p>
+// <p>Item 2</p>
+// <p>Item 3</p>
+//
+// When the <include-partial> link function runs the
+// DOM will look like:
+//
+// <!-- ngInclude: 'my-partial.html' -->
+// <include-partial ng-include="'my-partial.html'">
+//     <p>Item 1</p>
+//     <p>Item 2</p>
+//     <p>Item 3</p>
+// </include-partial>
+//
+// First we find the comment, then we get all the
+// chilren of <include-partial> (the contents of 'my-partial.html').
+//
+// Then we remove the <include-partial> tag and
+// insert the its contents after the comment.
+//
+// There is a potential bug here if the <include-partial>
+// is followed by other siblings, they will get removed
+// too. We can fix this probably by inserting another
+// comment and removing everything between the two
+// comments instead.
+
+export default function() {
+    return {
+        restrict: 'E',
+            link: function(scope, linkElement) {
+                var contents = Array.prototype.slice.apply(linkElement.parent().contents());
+                var commentNode = contents.filter(function(node) {
+                    // This selects a comment node
+                    return node.nodeType === 8;
+                });
+
+                var children = linkElement.children();
+                $(commentNode[0]).nextAll().remove();
+                $(commentNode[0]).after(children);
+            }
+    };
+}