Implement setup menu

This commit is contained in:
Joe Fiorini
2015-05-27 09:47:21 -04:00
parent 58b3f4360c
commit ea51113e1b
39 changed files with 355 additions and 7 deletions

View File

@@ -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',

View 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)
}]);

View 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;
}
}

View 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;
}
}
}

View 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>

View 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
});
}
]

View 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'
}

View 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;
}
}

View File

@@ -0,0 +1,12 @@
/** @define DetailNav */
.DetailNav {
&-title {
font-size: 1.4rem;
margin-bottom: 0.4rem;
&:first-child {
margin-top: 0;
}
}
}

View 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;
}
}