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

Move DOM event listener to directive

Browse Source
This commit is contained in:
Marliana Lara 2017-09-25 11:56:26 -04:00
parent 8d9ef4445a
commit bb625264d4
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui/client/legacy/styles/ansible-ui.less
View File

@ -2327,12 +2327,4 @@ body {
.btn {
text-transform: uppercase;
}
@breakpoint-sm: 700px;
@media screen and (max-width: @breakpoint-sm) {
#content-container {
padding-top: 100px;
}
}

14
awx/ui/client/lib/components/layout/_index.less
View File

@ -83,6 +83,7 @@
}
&-side {
background: @at-color-side-nav-background;
position: fixed;
bottom: 0;
top: @at-height-top-side-nav-makeup;
@ -92,7 +93,7 @@
z-index: @at-z-index-side-nav;
.at-Layout-sideNavItem {
background: @at-color-side-nav-background;
background: inherit;
color: @at-color-side-nav-content;
display: flex;
cursor: pointer;
@ -122,8 +123,8 @@
}
.at-Layout-sideNavSpacer {
background: inherit;
height: @at-height-side-nav-spacer;
background: @at-color-side-nav-background;
}
&--expanded {
@ -174,13 +175,13 @@
}
}
@breakpoint-sm: 700px;
@media screen and (max-width: @breakpoint-sm) {
.at-Layout {
&-side {
top: 60px;
background-color: transparent;
.at-Layout-sideNavItem.at-Layout-sideNavToggle {
display: flex;
@ -192,6 +193,7 @@
.at-Layout-sideNavItem,
.at-Layout-sideNavSpacer {
display: none;
background-color: @at-color-side-nav-background;
}
&--expanded {
@ -207,6 +209,10 @@
.at-Layout-main {
padding-left: 0;
#content-container {
padding-top: 100px;
}
}
}
}
}

25
awx/ui/client/lib/components/layout/side-nav.directive.js
View File

@ -2,28 +2,39 @@ const templateUrl = require('~components/layout/side-nav.partial.html');
function atSideNavLink (scope, element, attrs, ctrl) {
scope.layoutVm = ctrl;
document.on('click', (e) => {
if ($(e.target).parents('.at-Layout-side').length === 0) {
scope.$emit('clickOutsideSideNav');
}
});
}
function AtSideNavController ($scope) {
function AtSideNavController ($scope, $window) {
let vm = this || {};
const breakpoint = 700;
vm.isExpanded = false;
vm.toggleExpansion = () => {
vm.isExpanded = !vm.isExpanded;
}
};
document.body.onclick = (e) => {
if ($(e.target).parents(".at-Layout-side").length === 0) {
$scope.$watch('layoutVm.currentState', () => {
if ($window.innerWidth <= breakpoint) {
vm.isExpanded = false;
}
}
});
$scope.$on('$locationChangeStart', function(event) {
vm.isExpanded = false;
$scope.$on('clickOutsideSideNav', () => {
if ($window.innerWidth <= breakpoint) {
vm.isExpanded = false;
}
});
}
AtSideNavController.$inject = ['$scope', '$window'];
function atSideNav () {
return {
restrict: 'E',