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

working commit

Browse Source
This commit is contained in:
John Mitchell 2018-10-05 16:58:01 -04:00
parent 6cfd9dbfe4
commit 5a17acb131
No known key found for this signature in database
GPG Key ID: FE6A9B5BD4EB5C94
5 changed files with 56 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
.at-Layout {
height: 100vh;
min-height: 100vh;
width: 100vw;
display: flex;
@ -82,17 +82,21 @@
}
}
&-side {
&-sideContainer {
background: @at-color-side-nav-background;
position: fixed;
bottom: 0;
top: @at-height-top-side-nav-makeup;
overflow-y: auto;
max-height: 100vh;
min-width: @at-width-collapsed-side-nav;
}
&-side {
// background: @at-color-side-nav-background;
// position: fixed;
// bottom: 0;
margin-top: @at-height-top-side-nav-makeup;
// overflow-y: auto;
// max-height: 100vh;
// min-width: @at-width-collapsed-side-nav;
width: @at-width-collapsed-side-nav;
overflow-x: hidden;
z-index: @at-z-index-side-nav;
// overflow-x: hidden;
// z-index: @at-z-index-side-nav;
.at-Popover-container {
margin-top: 2px;
@ -201,7 +205,6 @@
height: 100%;
width: 100%;
flex-direction: column;
padding-left: @at-width-collapsed-side-nav;
padding-bottom: @at-space-4x;
overflow-x: hidden;
}
@ -262,7 +265,7 @@
}
.twr-nav-dropdown-content {
display: none;
position: fixed;
position: absolute;
background-color: #848992;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
@ -271,7 +274,7 @@
z-index: 2000;
}
.at-Layout-side--expanded {
.at-Layout-side--expanded + .twr-nav-dropdown {
.twr-nav-dropdown-content {
left: @at-width-expanded-side-nav;
}
@ -284,12 +287,14 @@
text-decoration: none;
display: block;
}
// hover stuff
.twr-nav-dropdown-content a:hover {
background-color: #b7b7b7;
}
.twr-nav-dropdown:hover .twr-nav-dropdown-content {
.twr-nav-dropdown.twr-nav-dropdown--visible .twr-nav-dropdown-content {
display: block;
}
.twr-nav-dropdown:hover .nav-button {
.twr-nav-dropdown.twr-nav-dropdown--visible .nav-button {
background-color: #b7b7b7;
}

10
awx/ui/client/lib/components/layout/layout.partial.html
View File

@ -96,15 +96,7 @@
ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin">
</at-side-nav-item>
<at-side-nav-item icon-class="fa-cog" route="settings" name="SETTINGS"
system-admin-only="true">
<!-- sub-nav dropdpown popup -->
<div class="twr-nav-dropdown-content">
<a ui-sref="settings.form({form: 'auth'})">Authentication</a>
<a ui-sref="settings.form({form: 'jobs'})">Jobs</a>
<a ui-sref="settings.form({form: 'system'})">System</a>
<a ui-sref="settings.form({form: 'ui'})">User Interface</a>
<a ui-sref="settings.form({form: 'license'})" ng-if="vm.product === 'Tower'">License</a>
</div>
system-admin-only="true" show-settings-sub-menu="true">
</at-side-nav-item>
</at-side-nav>
<div class="at-Layout-main" ng-class="{'at-Layout-main--noLicense': vm.licenseIsMissing}">

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

@ -2,6 +2,16 @@ const templateUrl = require('~components/layout/side-nav-item.partial.html');
function atSideNavItemLink (scope, element, attrs, ctrl) {
[scope.navVm, scope.layoutVm] = ctrl;
if (attrs.showSettingsSubMenu) {
element.hover(() => {
scope.navVm.showSettingsSubMenu = true;
}, () => {
// TODO: don't hide when mouse is hovering over the sub menu itself
// currently it closes as soon as you nav off of the settings side nav item
scope.navVm.showSettingsSubMenu = false;
});
}
}
function AtSideNavItemController ($scope, strings) {

21
awx/ui/client/lib/components/layout/side-nav-item.partial.html
View File

@ -1,13 +1,10 @@
<div class="twr-nav-dropdown">
<a class="at-Layout-sideNavItem" ui-sref="{{ route }}" ng-class="{'is-active': vm.isRoute}"
ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
!layoutVm.licenseIsMissing">
<at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
<a class="at-Layout-sideNavItem" ui-sref="{{ route }}" ng-class="{'is-active': vm.isRoute}"
ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
!layoutVm.licenseIsMissing">
<at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
<i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
<span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
{{ layoutVm.getString(name) }}
</span>
</a>
<div ng-transclude></div>
</div>
<i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
<span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
{{ layoutVm.getString(name) }}
</span>
</a>

22
awx/ui/client/lib/components/layout/side-nav.partial.html
View File

@ -1,8 +1,18 @@
<div class="at-Layout-side"
ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}" ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
<div class="at-Layout-sideNavItem at-Layout-sideNavToggle" ng-click="vm.toggleExpansion()"
ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
<i class="fa fa-bars"></i>
<div class="at-Layout-sideContainer" ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
<div class="at-Layout-side" ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}">
<div class="at-Layout-sideNavItem at-Layout-sideNavToggle" ng-click="vm.toggleExpansion()"
ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
<i class="fa fa-bars"></i>
</div>
<ng-transclude></ng-transclude>
</div>
<div class="twr-nav-dropdown" ng-class="{'twr-nav-dropdown--visible': vm.showSettingsSubMenu}">
<div class="twr-nav-dropdown-content">
<a ui-sref="settings.form({form: 'auth'})">Authentication</a>
<a ui-sref="settings.form({form: 'jobs'})">Jobs</a>
<a ui-sref="settings.form({form: 'system'})">System</a>
<a ui-sref="settings.form({form: 'ui'})">User Interface</a>
<a ui-sref="settings.form({form: 'license'})" ng-if="vm.product === 'Tower'">License</a>
</div>
</div>
<ng-transclude></ng-transclude>
</div>