mirror of
https://github.com/ansible/awx.git
synced 2024-11-01 08:21:15 +03:00
finish modular-izing about modal, delete scattered dependencies for old modal, resolves #1046
This commit is contained in:
Leigh Johnson
parent
09da3c6f82
commit
9ca560ab8c
@ -1,29 +0,0 @@
|
||||
|
||||
<div id="about-dialog-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-5 About-cowsay">
|
||||
<div style="width: 340px; margin: 0 auto;">
|
||||
<pre id="cowsay">
|
||||
________________
|
||||
/ Tower Version \
|
||||
\<span id='about-modal-version'></span>/
|
||||
----------------
|
||||
\ ^__^
|
||||
\ (oo)\_______
|
||||
(__)\ A)\/\
|
||||
||----w |
|
||||
|| ||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 text-center">
|
||||
<img id="about-modal-titlelogo" src="/static/assets/ansible_tower_logo_minimalc.png"><br>
|
||||
<p>Copyright 2015. All rights reserved.</p>
|
||||
<p>Ansible and Ansible Tower are registered trademarks of Red Hat, Inc.</p>
|
||||
<br>
|
||||
<img class="About-redhat" src="/static/assets/redhat_ansible_lockup.png">
|
||||
<br>
|
||||
<p>Visit <a href="http://www.ansible.com" target="_blank">Ansible.com</a> for more information.</p>
|
||||
<p><span id='about-modal-subscription'></span></p>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,14 +1,42 @@
|
||||
/** @define About */
|
||||
.About {
|
||||
height: 309px !important;
|
||||
}
|
||||
@import "awx/ui/client/src/shared/branding/colors.default.less";
|
||||
|
||||
.About-cowsay {
|
||||
margin-top: 30px;
|
||||
.About-cowsay--container{
|
||||
width: 340px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.About-redhat {
|
||||
max-width: 100%;
|
||||
margin-top: -61px;
|
||||
margin-bottom: -33px;
|
||||
.About-cowsay--code{
|
||||
background-color: @default-bg;
|
||||
padding-left: 30px;
|
||||
border-style: none;
|
||||
max-width: 340px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.About .modal-header{
|
||||
border: none;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
.About .modal-dialog{
|
||||
max-width: 500px;
|
||||
}
|
||||
.About .modal-body{
|
||||
padding-top: 0px;
|
||||
}
|
||||
.About-brand--redhat{
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
margin-top: -50px;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.About-brand--ansible{
|
||||
max-width: 120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.About-close{
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
.About p{
|
||||
color: @default-interface-txt;
|
||||
}
|
||||
32
awx/ui/client/src/about/about.controller.js
Normal file
32
awx/ui/client/src/about/about.controller.js
Normal file
@ -0,0 +1,32 @@
|
||||
export default
|
||||
['$scope', '$state', 'CheckLicense', function($scope, $state, CheckLicense){
|
||||
var processVersion = function(version){
|
||||
// prettify version & calculate padding
|
||||
// e,g 3.0.0-0.git201602191743/ -> 3.0.0
|
||||
var split = version.split('-')[0]
|
||||
var spaces = Math.floor((16-split.length)/2),
|
||||
paddedStr = "";
|
||||
for(var i=0; i<=spaces; i++){
|
||||
paddedStr = paddedStr +" ";
|
||||
}
|
||||
paddedStr = paddedStr + split;
|
||||
for(var j = paddedStr.length; j<16; j++){
|
||||
paddedStr = paddedStr + " ";
|
||||
}
|
||||
return paddedStr
|
||||
}
|
||||
var init = function(){
|
||||
CheckLicense.get()
|
||||
.then(function(res){
|
||||
$scope.subscription = res.data.license_info.subscription_name;
|
||||
$scope.version = processVersion(res.data.version);
|
||||
$('#about-modal').modal('show');
|
||||
console.log(window.cowsay)
|
||||
});
|
||||
};
|
||||
var back = function(){
|
||||
$state.go('setup');
|
||||
}
|
||||
init();
|
||||
}
|
||||
];
|
||||
32
awx/ui/client/src/about/about.partial.html
Normal file
32
awx/ui/client/src/about/about.partial.html
Normal file
@ -0,0 +1,32 @@
|
||||
<div class="About modal fade" id="about-modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<img class="About-brand--ansible img-responsive" src="/static/assets/ansible_tower_logo_minimalc.png" />
|
||||
<button type="button" class="close About-close" ng-click="back()">
|
||||
<span class="fa fa-times-circle"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="About-cowsay--container">
|
||||
<!-- Don't indent this properly, you'll break the cow -->
|
||||
<pre class="About-cowsay--code">
|
||||
________________
|
||||
/ Tower Version \\
|
||||
\\<span>{{version}}</span>/
|
||||
----------------
|
||||
\\ ^__^
|
||||
\\ (oo)\\_______
|
||||
(__)\ A)\\/\\
|
||||
||----w |
|
||||
|| ||
|
||||
</pre>
|
||||
</div>
|
||||
<img class="About-brand--redhat img-responsive" src="/static/assets/redhat_ansible_lockup.png" />
|
||||
<p class="text-center">Copyright 2016. All rights reserved.<br>
|
||||
Ansible and Ansible Tower are registered trademarks of <a href="http://www.redhat.com/" target="_blank">Red Hat, Inc</a>.<br>
|
||||
Visit <a href="http://www.ansible.com/" target="_blank">Ansible.com</a> for more information.<br>
|
||||
{{subscription}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
12
awx/ui/client/src/about/about.route.js
Normal file
12
awx/ui/client/src/about/about.route.js
Normal file
@ -0,0 +1,12 @@
|
||||
import {templateUrl} from '../shared/template-url/template-url.factory';
|
||||
import controller from './about.controller';
|
||||
|
||||
export default {
|
||||
name: 'setup.about',
|
||||
route: '/about',
|
||||
controller: controller,
|
||||
ncyBreadcrumb: {
|
||||
label: "ABOUT"
|
||||
},
|
||||
templateUrl: templateUrl('about/about')
|
||||
};
|
||||
15
awx/ui/client/src/about/main.js
Normal file
15
awx/ui/client/src/about/main.js
Normal file
@ -0,0 +1,15 @@
|
||||
/*************************************************
|
||||
* Copyright (c) 2016 Ansible, Inc.
|
||||
*
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
import controller from './about.controller';
|
||||
import route from './about.route';
|
||||
|
||||
export default
|
||||
angular.module('aboutTower', [])
|
||||
.controller('aboutTower', controller)
|
||||
.run(['$stateExtender', function($stateExtender){
|
||||
$stateExtender.addState(route);
|
||||
}]);
|
||||
@ -32,6 +32,7 @@ import managementJobs from './management-jobs/main';
|
||||
import jobDetail from './job-detail/main';
|
||||
|
||||
// modules
|
||||
import about from './about/main';
|
||||
import license from './license/main';
|
||||
import setupMenu from './setup-menu/main';
|
||||
import mainMenu from './main-menu/main';
|
||||
@ -78,6 +79,7 @@ var tower = angular.module('Tower', [
|
||||
// 'ngAnimate',
|
||||
'ngSanitize',
|
||||
'ngCookies',
|
||||
about.name,
|
||||
license.name,
|
||||
RestServices.name,
|
||||
browserData.name,
|
||||
@ -179,7 +181,6 @@ var tower = angular.module('Tower', [
|
||||
'lrInfiniteScroll',
|
||||
'LoadConfigHelper',
|
||||
'SocketHelper',
|
||||
'AboutAnsibleHelpModal',
|
||||
'PortalJobsListDefinition',
|
||||
'features',
|
||||
'longDateFilter',
|
||||
@ -882,9 +883,9 @@ var tower = angular.module('Tower', [
|
||||
}])
|
||||
|
||||
.run(['$q', '$compile', '$cookieStore', '$rootScope', '$log', 'CheckLicense', '$location', 'Authorization', 'LoadBasePaths', 'Timer', 'ClearScope', 'Socket',
|
||||
'LoadConfig', 'Store', 'ShowSocketHelp', 'AboutAnsibleHelp', 'pendoService',
|
||||
'LoadConfig', 'Store', 'ShowSocketHelp', 'pendoService',
|
||||
function ($q, $compile, $cookieStore, $rootScope, $log, CheckLicense, $location, Authorization, LoadBasePaths, Timer, ClearScope, Socket,
|
||||
LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, pendoService) {
|
||||
LoadConfig, Store, ShowSocketHelp, pendoService) {
|
||||
|
||||
|
||||
var sock;
|
||||
@ -1122,10 +1123,6 @@ var tower = angular.module('Tower', [
|
||||
|
||||
activateTab();
|
||||
|
||||
$rootScope.viewAboutTower = function(){
|
||||
AboutAnsibleHelp();
|
||||
};
|
||||
|
||||
$rootScope.viewCurrentUser = function () {
|
||||
$location.path('/users/' + $rootScope.current_user.id);
|
||||
};
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
import './forms';
|
||||
import './lists';
|
||||
|
||||
import AboutAnsible from "./helpers/AboutAnsible";
|
||||
import Children from "./helpers/Children";
|
||||
import Credentials from "./helpers/Credentials";
|
||||
import EventViewer from "./helpers/EventViewer";
|
||||
@ -42,8 +41,7 @@ import ApiModelHelper from "./helpers/ApiModel";
|
||||
import ActivityStreamHelper from "./helpers/ActivityStream";
|
||||
|
||||
export
|
||||
{ AboutAnsible,
|
||||
Children,
|
||||
{ Children,
|
||||
Credentials,
|
||||
EventViewer,
|
||||
Events,
|
||||
|
||||
@ -1,93 +0,0 @@
|
||||
/*************************************************
|
||||
* Copyright (c) 2015 Ansible, Inc.
|
||||
*
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
/**
|
||||
* @ngdoc overview
|
||||
* @name helpers
|
||||
* @description These are helpers...figure it out :)
|
||||
*/
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name helpers.function:AboutAnsible
|
||||
* @description This is the code for the About Ansible modal window that pops up with cowsay giving company/tower info and copyright information.
|
||||
*/
|
||||
|
||||
|
||||
export default
|
||||
angular.module('AboutAnsibleHelpModal', ['RestServices', 'Utilities','ModalDialog'])
|
||||
.factory('AboutAnsibleHelp', ['$rootScope', '$compile', '$location' , 'Rest', 'GetBasePath', 'ProcessErrors', 'Wait', 'CreateDialog',
|
||||
function ($rootScope, $compile , $location, Rest, GetBasePath, ProcessErrors, Wait, CreateDialog) {
|
||||
return function () {
|
||||
|
||||
var scope= $rootScope.$new(),
|
||||
url;
|
||||
|
||||
url = GetBasePath('config');
|
||||
Rest.setUrl(url);
|
||||
Rest.get()
|
||||
.success(function (data){
|
||||
scope.$emit('BuildAboutDialog', data);
|
||||
})
|
||||
.error(function (data, status) {
|
||||
ProcessErrors(scope, data, status, null, { hdr: 'Error!',
|
||||
msg: 'Failed to get: ' + url + ' GET returned: ' + status });
|
||||
});
|
||||
|
||||
|
||||
if (scope.removeDialogReady) {
|
||||
scope.removeDialogReady();
|
||||
}
|
||||
scope.removeDialogReady = scope.$on('DialogReady', function() {
|
||||
// element = angular.element(document.getElementById('about-modal-dialog'));
|
||||
// $compile(element)(scope);
|
||||
$('#about-modal-dialog').dialog('open');
|
||||
});
|
||||
|
||||
if (scope.removeBuildAboutDialog) {
|
||||
scope.removeBuildAboutDialog();
|
||||
}
|
||||
scope.removeBuildAboutDialog = scope.$on('BuildAboutDialog', function(e, data) {
|
||||
var spaces, i, j,
|
||||
paddedStr = "",
|
||||
versionParts,
|
||||
str = data.version,
|
||||
subscription = data.license_info.subscription_name || "";
|
||||
|
||||
versionParts = str.split('-');
|
||||
spaces = Math.floor((16-versionParts[0].length)/2);
|
||||
for( i=0; i<=spaces; i++){
|
||||
paddedStr = paddedStr +" ";
|
||||
}
|
||||
paddedStr = paddedStr + versionParts[0];
|
||||
for( j = paddedStr.length; j<16; j++){
|
||||
paddedStr = paddedStr + " ";
|
||||
}
|
||||
$('#about-modal-version').html(paddedStr);
|
||||
$('#about-modal-subscription').html(subscription);
|
||||
scope.modalOK = function(){
|
||||
$('#about-modal-dialog').dialog('close');
|
||||
};
|
||||
CreateDialog({
|
||||
id: 'about-modal-dialog',
|
||||
scope: scope,
|
||||
// buttons: [],
|
||||
width: 710,
|
||||
height: 450,
|
||||
minWidth: 300,
|
||||
resizable: false,
|
||||
callback: 'DialogReady',
|
||||
onOpen: function(){
|
||||
$('#dialog-ok-button').focus();
|
||||
$('#about-modal-dialog').scrollTop(0);
|
||||
$('#about-modal-dialog').css('overflow-x', 'hidden');
|
||||
$('.ui-widget-overlay').css('width', '100%');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
}
|
||||
]);
|
||||
@ -3,9 +3,7 @@ import icon from '../shared/icon/main';
|
||||
|
||||
export default
|
||||
angular.module('setupMenu',
|
||||
[ 'AboutAnsibleHelpModal',
|
||||
icon.name
|
||||
])
|
||||
[ icon.name])
|
||||
.run(['$stateExtender', function($stateExtender) {
|
||||
$stateExtender.addState(route);
|
||||
}]);
|
||||
|
||||
@ -42,11 +42,12 @@
|
||||
View and edit your license information.
|
||||
</p>
|
||||
</a>
|
||||
<a ng-click="showAboutModal()" class="SetupItem">
|
||||
<a ui-sref="setup.about" class="SetupItem">
|
||||
<h4 class="SetupItem-title">About Tower</h4>
|
||||
<p class="SetupItem-description">
|
||||
View information about this version of Ansible Tower.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
<div ui-view></div>
|
||||
</section>
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
export default
|
||||
[ '$scope',
|
||||
'$rootScope',
|
||||
'AboutAnsibleHelp',
|
||||
function(
|
||||
$scope,
|
||||
$rootScope,
|
||||
showAboutModal
|
||||
) {
|
||||
$scope.showAboutModal = showAboutModal;
|
||||
}
|
||||
];
|
||||
@ -1,10 +1,8 @@
|
||||
import {templateUrl} from '../shared/template-url/template-url.factory';
|
||||
import controller from './setup.controller';
|
||||
|
||||
export default {
|
||||
name: 'setup',
|
||||
route: '/setup',
|
||||
controller: controller,
|
||||
ncyBreadcrumb: {
|
||||
label: "SETUP"
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user