External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-24 16:01:20 -03:30
Code Issues Packages Projects Releases Wiki Activity

Close menu when user selects item

Browse Source
This commit is contained in:
Joe Fiorini 2015-05-28 18:09:25 -04:00
parent 77d38b0455
commit 1a5b04c7ee
4 changed files with 63 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui/static/js/main-menu/main-menu.block.less
View File

@ -11,7 +11,7 @@
transition: height 0.5s ease-out;
justify-content: flex-start;
flex-direction: column;
height: 56px;
height: 58px;
overflow: hidden;
&.Menu--open {

33
awx/ui/static/js/main-menu/main-menu.directive.js
View File

@ -3,10 +3,43 @@
export default function() {
return {
restrict: 'E',
controllerAs: 'mainMenu',
templateUrl: '/static/js/main-menu/main-menu.partial.html',
controller: ['$scope', function($scope) {
this.open = function() {
$scope.isOpen = true;
};
this.close = function() {
$scope.isOpen = false;
};
this.toggle = function() {
$scope.isOpen = !$scope.isOpen;
};
$scope.isOpen = false;
}],
scope: {
menuStyle: '&menuStyle',
currentUser: '='
},
link: function(scope, element, attrs) {
scope.menuStyleClassName = 'blah';
scope.$watch(function() {
return scope.$eval(scope.menuStyle);
}, function(newValue) {
scope.menuStyleClassName = 'MainMenu--' + newValue;
});
scope.$watch('isOpen', function(isOpen) {
if (isOpen) {
element.find('.MainMenu').addClass("Menu--open");
element.find('menu-toggle-button').addClass("MenuToggle--open");
} else {
element.find('.MainMenu').removeClass("Menu--open");
element.find('menu-toggle-button').removeClass("MenuToggle--open");
}
});
}
};
}

25
awx/ui/static/js/main-menu/menu-item.directive.js
View File

@ -2,19 +2,34 @@
export default ['$route', '$rootScope', function($route, $rootScope) {
return {
link: function(scope, element, attrs) {
require: '^^mainMenu',
link: function(scope, element, attrs, mainMenuController) {
var routeName = attrs.linkTo;
scope.$watch(function() {
return $route.current.name;
}, function(nextRoute) {
if (nextRoute === routeName) {
scope.$on('$routeChangeStart', function() {
// any time we start a route change,
// assume it was from the menu, and
// close it in case it's open
mainMenuController.close();
});
scope.$on('$routeChangeSuccess', function(e, nextRoute) {
if (nextRoute.$$route.name === routeName) {
element.addClass('MenuItem--active');
} else {
element.removeClass('MenuItem--active');
}
return nextRoute.$$route.name;
});
scope.$on('$destroy', function() {
element.off('click.menu-item');
});
element.on('click', function(e) {
mainMenuController.close();
}, true);
}
};
}];

12
awx/ui/static/js/main-menu/menu-toggle.directive.js
View File

@ -4,17 +4,23 @@ export default function() {
return {
templateUrl: '/static/js/main-menu/menu-toggle.partial.html',
restrict: 'E',
require: '^^mainMenu',
scope: {
width: '@',
height: '@',
barHeight: '@'
},
link: function(scope, element, attrs) {
link: function(scope, element, attrs, mainMenuController) {
scope.$on('$destroy', function() {
element.off('click');
});
element.on("click", function(e) {
e.preventDefault();
e.stopPropagation();
$(".MainMenu").toggleClass("Menu--open");
element.toggleClass("MenuToggle--open");
scope.$apply(function() {
mainMenuController.toggle();
});
});
}
};