mirror of
https://github.com/ZwareBear/awx.git
synced 2026-04-30 11:51:48 -05:00
Implement setup menu
This commit is contained in:
@@ -38,6 +38,8 @@ import routeExtensions from 'tower/shared/route-extensions/main';
|
||||
import breadcrumbs from 'tower/shared/breadcrumbs/main';
|
||||
|
||||
// modules
|
||||
import setupMenu from 'tower/setup-menu/main';
|
||||
import mainMenu from 'tower/main-menu/main';
|
||||
import browserData from 'tower/browser-data/main';
|
||||
|
||||
import {JobDetailController} from 'tower/controllers/JobDetail';
|
||||
@@ -83,6 +85,8 @@ var tower = angular.module('Tower', [
|
||||
browserData.name,
|
||||
breadcrumbs.name,
|
||||
systemTracking.name,
|
||||
setupMenu.name,
|
||||
mainMenu.name,
|
||||
'AuthService',
|
||||
'Utilities',
|
||||
'LicenseHelper',
|
||||
|
||||
15
awx/ui/static/js/setup-menu/main.js
Normal file
15
awx/ui/static/js/setup-menu/main.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import route from './setup.route';
|
||||
|
||||
export default
|
||||
angular.module('setupMenu',
|
||||
[ 'AboutAnsibleHelpModal',
|
||||
'LicenseHelper',
|
||||
'ConfigureTowerHelper',
|
||||
'CreateCustomInventoryHelper'
|
||||
])
|
||||
.config(['$routeProvider', function($routeProvider) {
|
||||
var url = route.route;
|
||||
delete route.route;
|
||||
$routeProvider.when(url, route)
|
||||
}]);
|
||||
|
||||
53
awx/ui/static/js/setup-menu/setup-item.block.less
Normal file
53
awx/ui/static/js/setup-menu/setup-item.block.less
Normal file
@@ -0,0 +1,53 @@
|
||||
/** @define SetupItem */
|
||||
|
||||
@import 'shared/branding/colors.less';
|
||||
|
||||
.SetupItem {
|
||||
@vertical-basis: 3rem;
|
||||
|
||||
padding: 0;
|
||||
padding-bottom: @vertical-basis;
|
||||
|
||||
&:nth-child(2n) {
|
||||
.SetupItem-icon {
|
||||
background-color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 931px) and (max-width: 1251px) {
|
||||
&:nth-child(2n) {
|
||||
.SetupItem-icon {
|
||||
background-color: @ansible-red;
|
||||
}
|
||||
}
|
||||
&:nth-child(4n+3), &:nth-child(4n+4) {
|
||||
.SetupItem-icon {
|
||||
background-color: @blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.SetupItem-icon {
|
||||
display: flex;
|
||||
padding: 1.5rem;
|
||||
background-color: @ansible-red;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&--button {
|
||||
.SetupItem-icon {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.SetupItem-title {
|
||||
font-size: 3rem;
|
||||
text-align: center;
|
||||
padding: @vertical-basis;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
43
awx/ui/static/js/setup-menu/setup-menu.block.less
Normal file
43
awx/ui/static/js/setup-menu/setup-menu.block.less
Normal file
@@ -0,0 +1,43 @@
|
||||
/** @define SetupMenu */
|
||||
|
||||
@import "shared/branding/colors.less";
|
||||
|
||||
.SetupMenu {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background-color: #EDEDED;
|
||||
flex-wrap: wrap;
|
||||
margin-top: -2.8rem;
|
||||
|
||||
&-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
flex: 1 0 30%;
|
||||
margin: 2.8rem;
|
||||
max-width: 24rem;
|
||||
transition: background-color 0.25s ease-in-out;
|
||||
background-color: white;
|
||||
&:hover, &:focus, &:active {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.SetupItem-description {
|
||||
font-family: merriweather;
|
||||
font-weight: lighter;
|
||||
color: black;
|
||||
padding: 1.4rem;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 930px) {
|
||||
flex-flow: nowrap column;
|
||||
align-items: center;
|
||||
&-block {
|
||||
width: 100%;
|
||||
max-width: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
57
awx/ui/static/js/setup-menu/setup-menu.partial.html
Normal file
57
awx/ui/static/js/setup-menu/setup-menu.partial.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<section id="htmlTemplate" class="Container" page-name="SetupMenu">
|
||||
<nav class="SetupMenu Container-main">
|
||||
<a href="#/credentials" class="SetupItem SetupMenu-block">
|
||||
<i class="SetupItem-icon"><img src="/static/img/Credentials.svg"></i>
|
||||
<h4 class="SetupItem-title">Credentials</h4>
|
||||
<p class="SetupItem-description">
|
||||
Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or syncing inventories or projects.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#/users" class="SetupItem SetupMenu-block">
|
||||
<i class="SetupItem-icon"><img src="/static/img/Users.svg"></i>
|
||||
<h4 class="SetupItem-title">Users</h4>
|
||||
<p class="SetupItem-description">
|
||||
Allow others to sign into Tower and own content they create.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#/teams" class="SetupItem SetupMenu-block">
|
||||
<i class="SetupItem-icon"><img src="/static/img/Teams.svg"></i>
|
||||
<h4 class="SetupItem-title">Teams</h4>
|
||||
<p class="SetupItem-description">
|
||||
Divide up your organization to associate content and control permissions for groups.
|
||||
</p>
|
||||
</a>
|
||||
<a href="#/organizations" class="SetupItem SetupMenu-block">
|
||||
<i class="SetupItem-icon"><img src="/static/img/Organizations.svg"></i>
|
||||
<h4 class="SetupItem-title">Organizations</h4>
|
||||
<p class="SetupItem-description">
|
||||
Group all of your content to manage permissions across departments in your company
|
||||
</p>
|
||||
|
||||
</a>
|
||||
<button class="SetupMenu-block SetupItem SetupItem--button Button--pseudo" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
|
||||
<i class="SetupItem-icon"><img src="/static/img/ManagementJobs.svg"></i>
|
||||
<h4 class="SetupItem-title">Management Jobs</h4>
|
||||
<p class="SetupItem-description">
|
||||
Schedule jobs to periodically cleanup job history
|
||||
</p>
|
||||
</button>
|
||||
<button class="SetupMenu-block SetupItem SetupItem--button Button--pseudo" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
|
||||
<i class="SetupItem-icon"><img src="/static/img/InventoryScripts.svg"></i>
|
||||
<h4 class="SetupItem-title">Inventory Scripts</h4>
|
||||
<p class="SetupItem-description">
|
||||
Create and edit scripts to dynamically load hosts from any sources
|
||||
</p>
|
||||
</button>
|
||||
</nav>
|
||||
<aside class="Container-aside">
|
||||
<nav class="DetailNav Menu Menu--vertical">
|
||||
<button href="#/license" ng-click="showLicenseModal()" class="Button--pseudo">
|
||||
<h4 class="DetailNav-title">View your License</h4>
|
||||
</button>
|
||||
<button ng-click="showAboutModal()" class="DetailNav--extra Button--pseudo">
|
||||
<h4 class="DetailNav-title">About Tower</h4>
|
||||
</button>
|
||||
</nav>
|
||||
</aside>
|
||||
</section>
|
||||
30
awx/ui/static/js/setup-menu/setup.controller.js
Normal file
30
awx/ui/static/js/setup-menu/setup.controller.js
Normal file
@@ -0,0 +1,30 @@
|
||||
export default
|
||||
[ '$scope',
|
||||
'$rootScope',
|
||||
'AboutAnsibleHelp',
|
||||
'LicenseViewer',
|
||||
'ConfigureTower',
|
||||
'CreateCustomInventory',
|
||||
function(
|
||||
$scope,
|
||||
$rootScope,
|
||||
showAboutModal,
|
||||
licenseViewer,
|
||||
configureTower,
|
||||
showInventoryScriptsModal
|
||||
) {
|
||||
$scope.showAboutModal = showAboutModal;
|
||||
$scope.showLicenseModal = licenseViewer.showViewer.bind(licenseViewer);
|
||||
|
||||
$scope.showManagementJobsModal =
|
||||
configureTower.bind(null,
|
||||
{ scope: $rootScope,
|
||||
parent_scope: $rootScope
|
||||
});
|
||||
|
||||
$scope.showInventoryScriptsModal = showInventoryScriptsModal.bind(null,
|
||||
{ parent_scope: $rootScope
|
||||
});
|
||||
|
||||
}
|
||||
]
|
||||
7
awx/ui/static/js/setup-menu/setup.route.js
Normal file
7
awx/ui/static/js/setup-menu/setup.route.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import controller from './setup.controller';
|
||||
|
||||
export default {
|
||||
route: '/setup',
|
||||
controller: controller,
|
||||
templateUrl: '/static/js/setup-menu/setup-menu.partial.html'
|
||||
}
|
||||
19
awx/ui/static/js/shared/container/container.block.less
Normal file
19
awx/ui/static/js/shared/container/container.block.less
Normal file
@@ -0,0 +1,19 @@
|
||||
/** @define Container */
|
||||
|
||||
.Container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&-main {
|
||||
flex: 9;
|
||||
margin-right: 2.28rem;
|
||||
}
|
||||
&-aside {
|
||||
flex: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 710px) {
|
||||
.Container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
12
awx/ui/static/js/shared/detail-nav/detail-nav.block.less
Normal file
12
awx/ui/static/js/shared/detail-nav/detail-nav.block.less
Normal file
@@ -0,0 +1,12 @@
|
||||
/** @define DetailNav */
|
||||
|
||||
.DetailNav {
|
||||
|
||||
&-title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.4rem;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
16
awx/ui/static/js/shared/menu/button.block.less
Normal file
16
awx/ui/static/js/shared/menu/button.block.less
Normal file
@@ -0,0 +1,16 @@
|
||||
/** @define Button */
|
||||
|
||||
@import 'shared/branding/colors.less';
|
||||
|
||||
.Button {
|
||||
&--pseudo {
|
||||
// Make pseudo button
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
color: @blue-link;
|
||||
text-align: left;
|
||||
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user