Add truncate component

awx/ui/client/lib/components/index.js

@@ -19,6 +19,7 @@ import panelBody from './panel/body.directive';
 import popover from './popover/popover.directive';
 import tab from './tabs/tab.directive';
 import tabGroup from './tabs/group.directive';
+import truncate from './truncate/truncate.directive';
 
 import BaseInputController from './input/base.controller';
 import ComponentsStrings from './components.strings';
@@ -46,7 +47,8 @@ angular
     .directive('atPopover', popover)
     .directive('atTab', tab)
     .directive('atTabGroup', tabGroup)
-    .service('BaseInputController', BaseInputController)
-    .service('ComponentsStrings', ComponentsStrings);
+    .directive('atTruncate', truncate)
+    .service('ComponentsStrings', ComponentsStrings)
+    .service('BaseInputController', BaseInputController);
 
 

awx/ui/client/lib/components/truncate/truncate.directive.js

@@ -0,0 +1,43 @@
+function atTruncateLink (scope, el, attr, ctrl) {
+    let truncateController = ctrl;
+    let string = attr.atTruncate;
+    let maxlength = attr.maxlength;
+
+    truncateController.init(scope, string, maxlength);
+}
+
+function AtTruncateController ($filter) {
+    let vm = this;
+
+    let string,
+        maxlength;
+
+    vm.init = (scope, _string_, _maxlength_) => {
+        string = _string_;
+        maxlength = _maxlength_;
+        vm.truncatedString = $filter('limitTo')(string, maxlength, 0);
+    }
+
+}
+
+
+function atTruncate($filter) {
+    return {
+        restrict: 'EA',
+        replace: true,
+        transclude: true,
+        template: '<span>{{vm.truncatedString}}</span>',
+        controller: AtTruncateController,
+        controllerAs: 'vm',
+        link: atTruncateLink,
+        scope: {
+            maxLength: '@'
+        }
+    }
+}
+
+atTruncate.$inject = [
+    '$filter'
+];
+
+export default atTruncate;

awx/ui/client/src/projects/revisions/revisions.block.less

@@ -10,13 +10,12 @@
 }
 
 .RevisionHash-copy {
-    color: @default-link;
-    text-transform: uppercase;
+    color: @b7grey;
     cursor: pointer;
-    font-size: 11px;
     margin-left: 10px;
 }
 
+
 .RevisionHash-copy:hover {
-    color: @default-link-hov;
+    color: @default-link;
 }

awx/ui/client/src/projects/revisions/revisions.directive.js

@@ -1,20 +1,14 @@
 export default
-    [   'templateUrl',
-        'Rest',
-        '$q',
-        '$filter',
-        function(templateUrl, Rest, $q, $filter) {
+    [   'templateUrl', function(templateUrl) {
             return {
                 restrict: 'E',
                 templateUrl: templateUrl('projects/revisions/revisions'),
                 link: function(scope)  {
-                    let full_revision = scope.project.scm_revision;
-                    scope.revisionHash = $filter('limitTo')(full_revision, 7, 0);
-                    scope.count = scope.project.scm_revision.length;
 
-                    scope.copyRevisionHash = function() {
+                    scope.copy = function() {
                         scope.$emit('copied');
 
+                        let full_revision = scope.project.scm_revision;
                         let textArea = document.createElement("textarea");
 
                         // Place in top-left corner of screen regardless of scroll position.

awx/ui/client/src/projects/revisions/revisions.partial.html

@@ -1,7 +1,7 @@
 <div class="RevisionHash-tag">
-    <span class="RevisionHash-name">{{revisionHash}}</span>
+    <span at-truncate="{{project.scm_revision}}" maxLength="7" class="RevisionHash-name"></span>
 </div>
-<div class="RevisionHash-copy" ng-if="count > 7" aw-tool-tip="{{project.tooltipContent}}" data-tip-watch="project.tooltipContent"
-    data-placement="top" ng-click="copyRevisionHash()">
+<div class="RevisionHash-copy" aw-tool-tip="{{project.tooltipContent}}" data-tip-watch="project.tooltipContent"
+    data-placement="top" ng-click="copy()">
     <i class="fa fa-clone"></i>
 </div>