From 17e86b4ec6e92725fb3ce65e78527524730e9c60 Mon Sep 17 00:00:00 2001
From: gconsidine <greg@greg-considine.com>
Date: Mon, 7 Aug 2017 14:13:12 -0400
Subject: [PATCH] Add dynamic sizing for version speech bubble

---
 awx/ui/client/src/about/about.controller.js | 49 +++++++++++++--------
 awx/ui/client/src/about/about.partial.html  |  4 +-
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/awx/ui/client/src/about/about.controller.js b/awx/ui/client/src/about/about.controller.js
index 159f61458a..39523be348 100644
--- a/awx/ui/client/src/about/about.controller.js
+++ b/awx/ui/client/src/about/about.controller.js
@@ -1,18 +1,31 @@
-export default
-	['$scope', '$state', 'ConfigService',
-        function($scope, $state, ConfigService){
-		var init = function(){
-			ConfigService.getConfig()
-				.then(function(config){
-					$scope.version = config.version.split('-')[0];
-					$scope.ansible_version = config.ansible_version;
-					$scope.subscription = config.license_info.subscription_name;
-					$('#about-modal').modal('show');
-				});
-		};
-		$('#about-modal').on('hidden.bs.modal', function () {
-		  $state.go('setup');
-		});
-		init();
-	}
-	];
+export default ['$rootScope', '$scope', '$state', 'ConfigService',
+    ($rootScope, $scope, $state, ConfigService) => {
+
+    ConfigService.getConfig()
+        .then(function(config){
+            $scope.version = config.version.split('-')[0];
+            $scope.ansible_version = config.ansible_version;
+            $scope.subscription = config.license_info.subscription_name;
+            $scope.speechBubble = createSpeechBubble($rootScope.BRAND_NAME, config.version);
+            $('#about-modal').modal('show');
+        });
+
+    $('#about-modal').on('hidden.bs.modal', () => $state.go('setup'));
+
+    function createSpeechBubble (brand, version) {
+        let text = `${brand} ${version}`;
+        let top = '';
+        let bottom = '';
+
+        for (let i = 0; i < text.length; i++) {
+            top += '_';
+            bottom += '-';
+        }
+
+        top = ` __${top}__ \n`;
+        text = `<  ${text}  >\n`;
+        bottom = ` --${bottom}-- `;
+
+        return top + text + bottom;
+    }
+}];
diff --git a/awx/ui/client/src/about/about.partial.html b/awx/ui/client/src/about/about.partial.html
index 62c7c0acf3..32e32b72e8 100644
--- a/awx/ui/client/src/about/about.partial.html
+++ b/awx/ui/client/src/about/about.partial.html
@@ -10,9 +10,7 @@
                 <div class="About-cowsayContainer">
 <!-- Don't indent this properly, you'll break the cow -->
 <pre class="About-cowsayCode">
- _______________
-<  {{BRAND_NAME}} {{version}}  >
- ---------------
+{{ speechBubble }}
         \   ^__^
          \  (oo)\_______
             (__)      A )\/\