External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-07 17:37:37 -02: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
5 changed files with 56 additions and 42 deletions
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 { .at-Layout {
height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
display: flex; display: flex;
@@ -82,17 +82,21 @@
} }
} }
&-side { &-sideContainer {
background: @at-color-side-nav-background; background: @at-color-side-nav-background;
position: fixed; }
bottom: 0;
top: @at-height-top-side-nav-makeup; &-side {
overflow-y: auto; // background: @at-color-side-nav-background;
max-height: 100vh; // position: fixed;
min-width: @at-width-collapsed-side-nav; // 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; width: @at-width-collapsed-side-nav;
overflow-x: hidden; // overflow-x: hidden;
z-index: @at-z-index-side-nav; // z-index: @at-z-index-side-nav;
.at-Popover-container { .at-Popover-container {
margin-top: 2px; margin-top: 2px;
@@ -201,7 +205,6 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
padding-left: @at-width-collapsed-side-nav;
padding-bottom: @at-space-4x; padding-bottom: @at-space-4x;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -262,7 +265,7 @@
} }
.twr-nav-dropdown-content { .twr-nav-dropdown-content {
display: none; display: none;
position: fixed; position: absolute;
background-color: #848992; background-color: #848992;
min-width: 140px; min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
@@ -271,7 +274,7 @@
z-index: 2000; z-index: 2000;
} }
.at-Layout-side--expanded { .at-Layout-side--expanded + .twr-nav-dropdown {
.twr-nav-dropdown-content { .twr-nav-dropdown-content {
left: @at-width-expanded-side-nav; left: @at-width-expanded-side-nav;
} }
@@ -284,12 +287,14 @@
text-decoration: none; text-decoration: none;
display: block; display: block;
} }
// hover stuff
.twr-nav-dropdown-content a:hover { .twr-nav-dropdown-content a:hover {
background-color: #b7b7b7; background-color: #b7b7b7;
} }
.twr-nav-dropdown:hover .twr-nav-dropdown-content { .twr-nav-dropdown.twr-nav-dropdown--visible .twr-nav-dropdown-content {
display: block; display: block;
} }
.twr-nav-dropdown:hover .nav-button { .twr-nav-dropdown.twr-nav-dropdown--visible .nav-button {
background-color: #b7b7b7; 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"> ng-show="$parent.layoutVm.isSuperUser || $parent.layoutVm.isOrgAdmin">
</at-side-nav-item> </at-side-nav-item>
<at-side-nav-item icon-class="fa-cog" route="settings" name="SETTINGS" <at-side-nav-item icon-class="fa-cog" route="settings" name="SETTINGS"
system-admin-only="true"> system-admin-only="true" show-settings-sub-menu="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>
</at-side-nav-item> </at-side-nav-item>
</at-side-nav> </at-side-nav>
<div class="at-Layout-main" ng-class="{'at-Layout-main--noLicense': vm.licenseIsMissing}"> <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) { function atSideNavItemLink (scope, element, attrs, ctrl) {
[scope.navVm, scope.layoutVm] = 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) { 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}"
<a class="at-Layout-sideNavItem" ui-sref="{{ route }}" ng-class="{'is-active': vm.isRoute}" ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn &&
ng-show="(!systemAdminOnly || layoutVm.isSuperUser) && layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
!layoutVm.licenseIsMissing"> <at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
<at-popover state="vm.tooltip" ng-if="!navVm.isExpanded"></at-popover>
<i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i> <i class="fa {{ iconClass }}" ng-show="navVm.isExpanded"></i>
<span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded"> <span class="at-Layout-sideNavItemName" ng-show="navVm.isExpanded">
{{ layoutVm.getString(name) }} {{ layoutVm.getString(name) }}
</span> </span>
</a> </a>
<div ng-transclude></div>
</div>

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

@@ -1,8 +1,18 @@
<div class="at-Layout-side" <div class="at-Layout-sideContainer" ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
ng-class="{'at-Layout-side--expanded': vm.isExpanded && layoutVm.isLoggedIn}" 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()" <div class="at-Layout-sideNavItem at-Layout-sideNavToggle" ng-click="vm.toggleExpansion()"
ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing"> ng-show="layoutVm.isLoggedIn && !layoutVm.licenseIsMissing">
<i class="fa fa-bars"></i> <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> </div>
<ng-transclude></ng-transclude>
</div> </div>