From d760c96596dbd712fa4bb683942e8b723372fe62 Mon Sep 17 00:00:00 2001 From: Joe Fiorini Date: Tue, 21 Apr 2015 16:46:03 -0400 Subject: [PATCH] Change portal mode icon when in portal mode --- awx/ui/static/img/PortalMode--exit.svg | 16 +++++ .../js/main-menu/main-menu.directive.js | 1 + awx/ui/static/js/main-menu/main.js | 2 + .../js/main-menu/menu-default.partial.html | 2 +- .../js/main-menu/menu-minimal.partial.html | 5 +- .../main-menu/portal-mode-link.directive.js | 26 ++++++++ .../include-partial.directive.js | 64 +++++++++++++++++++ 7 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 awx/ui/static/img/PortalMode--exit.svg create mode 100644 awx/ui/static/js/main-menu/portal-mode-link.directive.js create mode 100644 awx/ui/static/js/shared/include-partial/include-partial.directive.js diff --git a/awx/ui/static/img/PortalMode--exit.svg b/awx/ui/static/img/PortalMode--exit.svg new file mode 100644 index 0000000000..747a7f741b --- /dev/null +++ b/awx/ui/static/img/PortalMode--exit.svg @@ -0,0 +1,16 @@ + + + + PortalMode--exit + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/awx/ui/static/js/main-menu/main-menu.directive.js b/awx/ui/static/js/main-menu/main-menu.directive.js index 2272e4c102..a9c0e1e2d9 100644 --- a/awx/ui/static/js/main-menu/main-menu.directive.js +++ b/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); }); } diff --git a/awx/ui/static/js/main-menu/main.js b/awx/ui/static/js/main-menu/main.js index 722c6dd62d..c53ad3d653 100644 --- a/awx/ui/static/js/main-menu/main.js +++ b/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); diff --git a/awx/ui/static/js/main-menu/menu-default.partial.html b/awx/ui/static/js/main-menu/menu-default.partial.html index ad551cb1ed..1b63eaa40d 100644 --- a/awx/ui/static/js/main-menu/menu-default.partial.html +++ b/awx/ui/static/js/main-menu/menu-default.partial.html @@ -20,7 +20,7 @@ - + diff --git a/awx/ui/static/js/main-menu/menu-minimal.partial.html b/awx/ui/static/js/main-menu/menu-minimal.partial.html index c79ad8a59e..f01c22f2d1 100644 --- a/awx/ui/static/js/main-menu/menu-minimal.partial.html +++ b/awx/ui/static/js/main-menu/menu-minimal.partial.html @@ -4,9 +4,6 @@ Portal - + - - - diff --git a/awx/ui/static/js/main-menu/portal-mode-link.directive.js b/awx/ui/static/js/main-menu/portal-mode-link.directive.js new file mode 100644 index 0000000000..96079c8842 --- /dev/null +++ b/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) + }; +}] diff --git a/awx/ui/static/js/shared/include-partial/include-partial.directive.js b/awx/ui/static/js/shared/include-partial/include-partial.directive.js new file mode 100644 index 0000000000..91e2f351f2 --- /dev/null +++ b/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: +// +//
+// +// 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: +// +// +// +// and "my-partial.html" contains: +// +//

Item 1

+//

Item 2

+//

Item 3

+// +// When the link function runs the +// DOM will look like: +// +// +// +//

Item 1

+//

Item 2

+//

Item 3

+// +// +// First we find the comment, then we get all the +// chilren of (the contents of 'my-partial.html'). +// +// Then we remove the tag and +// insert the its contents after the comment. +// +// There is a potential bug here if the +// 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); + } + }; +}