fixes demo feedback bugs in #1112

awx/ui/client/legacy-styles/ansible-ui.less

@@ -44,7 +44,8 @@
 @import "text-label.less";
 @import "./bootstrap-datepicker.less";
 @import "awx/ui/client/src/shared/branding/colors.default.less";
-
+// Bootstrap default overrides
+@import "awx/ui/client/src/shared/bootstrap-settings.less";
 /* Bootstrap fix that's causing a right margin to appear
    whenver a modal is opened */
 body.modal-open {

awx/ui/client/src/about/about.controller.js

@@ -1,20 +1,20 @@
 export default
 	['$scope', '$state', 'CheckLicense', function($scope, $state, CheckLicense){
 		var processVersion = function(version){
-			// prettify version & calculate padding
+					// prettify version & calculate padding
-			// e,g 3.0.0-0.git201602191743/ -> 3.0.0
+					// e,g 3.0.0-0.git201602191743/ -> 3.0.0
-			var split = version.split('-')[0]
+					var split = version.split('-')[0]
-            var spaces = Math.floor((16-split.length)/2),
+		            var spaces = Math.floor((16-split.length)/2),
-                paddedStr  = "";
+		                paddedStr  = "";
-            for(var i=0; i<=spaces; i++){
+		            for(var i=0; i<=spaces; i++){
-                paddedStr = paddedStr +" ";
+		                paddedStr = paddedStr +" ";
-            }
+		            }
-            paddedStr = paddedStr + split;
+		            paddedStr = paddedStr + split;
-            for(var j = paddedStr.length; j<16; j++){
+		            for(var j = paddedStr.length; j<16; j++){
-                paddedStr = paddedStr + " ";
+		                paddedStr = paddedStr + " ";
-            }
+		            }
-            return paddedStr
+		            return paddedStr
-		}
+		};
 		var init = function(){
 			CheckLicense.get()
 				.then(function(res){
@@ -23,9 +23,9 @@ export default
 					$('#about-modal').modal('show');
 				});
 		};
-		var back = function(){
+		$('#about-modal').on('hidden.bs.modal', function () {
-			$state.go('setup');
+		  $state.go('setup');
-		}
+		});
 		init();
 	}
 	];

awx/ui/client/src/about/about.partial.html

@@ -3,7 +3,7 @@
         <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()">
+                <button data-dismiss="modal" type="button" class="close About-close" ng-click="back()">
                     <span class="fa fa-times-circle"></span>
                 </button>
             </div>

awx/ui/client/src/app.js

@@ -76,7 +76,7 @@ __deferLoadIfEnabled();
 /*#endif#*/
 
 var tower = angular.module('Tower', [
-    // 'ngAnimate',
+    'ngAnimate',
     'ngSanitize',
     'ngCookies',
     about.name,

awx/ui/client/src/footer/footer.block.less

@@ -1,12 +1,11 @@
 /** @define DashboardCounts */
-
 .Footer {
     height: 40px;
     background-color: #f6f6f6;
     color: #848992;
     width: 100%;
     z-index: 1040;
-    position: fixed;
+    position: absolute;
     right: 0;
     left: 0;
     bottom: 0;

awx/ui/client/src/license/license.block.less

@@ -20,6 +20,15 @@
 	display: block;
 	width: 100%;
 }
+.License-submit--success.ng-hide-add, .License-submit--success.ng-hide-remove {
+  transition: all ease-in-out 0.5s;
+}
+.License-submit--success{
+	opacity: 1;
+}
+.License-submit--success.ng-hide{
+	opacity: 0;
+}
 .License-eula textarea{
 	width: 100%;
 	height: 300px;
@@ -64,3 +73,7 @@
 	display: none;
 	}
 }
+.License-input--fake{
+	border-top-right-radius: 4px !important;
+	border-bottom-right-radius: 4px !important;
+}

awx/ui/client/src/license/license.controller.js

@@ -5,9 +5,9 @@
  *************************************************/
 
 export default
-	[	'Wait', '$state', '$scope', '$location',
+	[	'Wait', '$state', '$scope', '$rootScope', '$location',
 	 'GetBasePath', 'Rest', 'ProcessErrors', 'CheckLicense', 'moment',
-	 function( Wait, $state, $scope, $location,
+	 function( Wait, $state, $scope, $rootScope, $location,
 	 	GetBasePath, Rest, ProcessErrors, CheckLicense, moment){
 	 	$scope.getKey = function(event){
 	 		// Mimic HTML5 spec, show filename
@@ -16,9 +16,19 @@ export default
 	 		var raw = new FileReader();
 	 		// readAsFoo runs async
 	 		raw.onload = function(){
-	 			$scope.newLicense.file = JSON.parse(raw.result);
+	 			try {
+	 				$scope.newLicense.file = JSON.parse(raw.result);
+	 			}
+	 			catch(err) {
+	 				ProcessErrors($rootScope, null, null, null, {msg: 'Invalid file format. Please upload valid JSON.'});
+	 			}
+	 		}
+	 		try {
+	 			raw.readAsText(event.target.files[0]);
+	 		}
+	 		catch(err) {
+	 			ProcessErrors($rootScope, null, null, null, {msg: 'Invalid file format. Please upload valid JSON.'});
 	 		}
-	 		raw.readAsText(event.target.files[0]);
 	 	};
 	 	// HTML5 spec doesn't provide a way to customize file input css
 	 	// So we hide the default input, show our own, and simulate clicks to the hidden input
@@ -33,6 +43,11 @@ export default
 					reset();
 					init();
 					$scope.success = true;
+					// for animation purposes
+					var successTimeout = setTimeout(function(){
+						$scope.success = false;
+						clearTimeout(successTimeout);
+					}, 4000);
 			});
 		};
 	 	var calcDaysRemaining = function(ms){
@@ -51,6 +66,7 @@ export default
 	 		CheckLicense.get()
 	 		.then(function(res){
 	 			$scope.license = res.data;
+	 			$scope.license.version = res.data.version.split('-')[0];
 	 			$scope.time = {};
 	 			$scope.time.remaining = calcDaysRemaining($scope.license.license_info.time_remaining);
 	 			$scope.time.expiresOn = calcExpiresOn($scope.time.remaining);

awx/ui/client/src/license/license.partial.html

@@ -7,31 +7,31 @@
 					<div class="License-field--label">License</div>
 					<div class="License-field--content"> 
 					<span ng-show='valid'><i class="fa fa-circle License-greenText"></i>   Valid</span>
-					<span ng-show='invalid'><i class="fa fa-circle License-redText"></i>   Invalid</span>
+					<span ng-show='!valid'><i class="fa fa-circle License-redText"></i>   Invalid</span>
 					</div>	
 				</div>
 				<div class="License-field">
 					<div class="License-field--label">Version</div>
 					<div class="License-field--content"> 
-					{{license.version}}
+					{{license.version || "No result found"}}
 					</div>
 				</div>
 				<div class="License-field">
 					<div class="License-field--label">License Type</div> 
 					<div class="License-field--content">
-					{{license.license_info.license_type}}
+					{{license.license_info.license_type || "No result found"}}
 					</div>	
 				</div>
 				<div class="License-field">
 					<div class="License-field--label">Subscription</div>
 					<div class="License-field--content"> 
-					{{license.license_info.subscription_name}}
+					{{license.license_info.subscription_name || "No result found"}}
 					</div>	
 				</div>
 				<div class="License-field">
 					<div class="License-field--label">License Key</div> 
 					<div class="License-field--content"> 					
-					{{license.license_info.license_key}}
+					{{license.license_info.license_key || "No result found"}}
 					</div>	
 				</div>
 				<div class="License-field">
@@ -43,25 +43,25 @@
 				<div class="License-field">
 					<div class="License-field--label">Time Remaining</div>
 					<div class="License-field--content"> 
-					{{time.remaining}} Day
+					{{time.remaining}} Days
 					</div>	
 				</div>
 				<div class="License-field">
 					<div class="License-field--label">Hosts Available</div> 
 					<div class="License-field--content">
-					{{license.license_info.available_instances}}
+					{{license.license_info.available_instances || "No result found"}}
 					</div>	
 				</div>
 				<div class="License-field">
 					<div class="License-field--label">Hosts Used</div>
 					<div class="License-field--content"> 
-					{{license.license_info.current_instances}}
+					{{license.license_info.current_instances || "No result found"}}
 					</div>	
 				</div>
 				<div class="License-field License-greenText">
 					<div class="License-field--label">Hosts Remaining</div>
 					<div class="License-field--content"> 
-					{{license.license_info.free_instances}}
+					{{license.license_info.free_instances || "No result found"}}
 					</div>	
 				</div>
 			</div>
@@ -76,7 +76,7 @@
 			<form id="License-form" name="license">
 				<div class="input-group License-file--container">
 					<span class="btn btn-default input-group-addon" ng-click="fakeClick()">Browse...</span>
-					<input class="form-control" ng-disabled="true" placeholder="{{fileName}}" />
+					<input class="form-control License-input--fake" ng-disabled="true" placeholder="{{fileName}}" />
 					<input id="License-file" class="form-control" type="file" file-on-change="getKey"/>
 				</div>
 				<div class="License-titleText prepend-asterisk"> End User License Agreement</div>
@@ -88,7 +88,7 @@
 					<div class="checkbox">
 						<div class="License-details--label"><input type="checkbox" ng-model="newLicense.eula" required>  I agree to the End User License Agreement</div>
 						<div class="License-submit--container pull-right">
-							<span ng-hide="success == null || false" class="License-greenText License-submit--success pull-left">Save successful!</span>
+							<span ng-show="success == true" class="License-greenText License-submit--success pull-left">Save successful!</span>
 							<button ng-click="submit()" class="btn btn-success pull-right" ng-disabled="newLicense.file.license_key == null || newLicense.eula == null">Submit</button>
 						</div>
 					</div>

awx/ui/client/src/shared/bootstrap-settings.less

@@ -0,0 +1,22 @@
+@import "awx/ui/client/src/shared/branding/colors.default.less";
+.btn-success{
+	background: @default-succ;
+	border-color: transparent;
+	:hover{
+		background: @default-succ-hov;
+	}
+	:disabled{
+		background: @default-succ-disabled;
+	}
+}
+.btn-default{
+	background: @btn-bg;
+	border-color: @btn-bord;
+	color: @btn-txt;
+	:hover{
+		background: @btn-bg-hov;
+	}
+	:focus{
+		background: @btn-bg-sel;
+	}
+}

awx/ui/client/src/shared/layouts/one-plus-two.less

@@ -74,6 +74,7 @@
 .OnePlusTwo-left--detailsContent {
     display: inline-block;
     max-width: 220px;
+    width: 220px;
     word-wrap: break-word;
 }
 

awx/ui/templates/ui/index.html

@@ -154,8 +154,6 @@
     <div id="login-modal-dialog" style="display: none;"></div>
     <div id="help-modal-dialog" style="display: none;"></div>
 
-    <div class="About" id="about-modal-dialog" style="display: none;" ng-include=" '{{ STATIC_URL }}assets/cowsay-about.html ' "></div>
-
     <div id="prompt-for-days" style="display:none">
       <form name="prompt_for_days_form" id="prompt_for_days_form">
             Set how many days of data should be retained. <br>