Add changes related to PR review

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

@@ -1,6 +1,6 @@
 function ComponentsStrings (BaseString) {
     BaseString.call(this, 'components');
-    
+
     let t = this.t;
     let ns = this.components;
 
@@ -42,6 +42,11 @@ function ComponentsStrings (BaseString) {
     ns.lookup = {
         NOT_FOUND: t('That value was not found. Please enter or select a valid value.')
     };
+
+    ns.truncate = {
+        DEFAULT: t('Copy full revision to clipboard.'),
+        COPIED: t('Copied to clipboard.')
+    }
 }
 
 ComponentsStrings.$inject = ['BaseStringService'];

awx/ui/client/lib/components/popover/_index.less

@@ -7,7 +7,7 @@
 }
 
 .at-Popover-icon {
-    .at-mixin-ButtonIcon();  
+    .at-mixin-ButtonIcon();
     color: @at-color-icon-popover;
     font-size: @at-font-size-icon;
     padding: 1px;
@@ -54,5 +54,5 @@
 .at-Popover-text {
     margin: 0;
     padding: 0;
-    font-size: @at-font-size-body;
+    font-size: @at-font-size;
 }

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

@@ -193,8 +193,8 @@ function AtPopoverController () {
         let popoverTop = pos.icon.top - pos.popover.height - pos.icon.height - 5;
         let popoverLeft = Math.floor(pos.cx - (pos.popover.width / 2));
 
-        pos.arrow.style.top = `${arrowTop}px`; 
+        pos.arrow.style.top = `${arrowTop}px`;
-        pos.arrow.style.left = `${arrowLeft}px`; 
+        pos.arrow.style.left = `${arrowLeft}px`;
 
         popover.style.top = `${popoverTop}px`;
         popover.style.left = `${popoverLeft}px`;
@@ -221,4 +221,4 @@ atPopover.$inject = [
     'PathService'
 ];
 
-export default atPopover;
+export default atPopover;

awx/ui/client/lib/components/truncate/_index.less

@@ -1,19 +1,34 @@
-.RevisionHash {
+.at-Truncate {
     display: flex;
     align-items: center;
-}
 
-.RevisionHash-name {
+    .at-Truncate-text {
-    font-family: monospace;
+        font-family: monospace;
-}
+    }
 
-.RevisionHash-copy {
+    .at-Truncate-copy {
-    color: @at-gray-dark-2x;
+        color: @at-gray-dark-2x;
-    cursor: pointer;
+        cursor: pointer;
-    margin-left: 10px;
+        margin-left: 10px;
+
+        i:hover {
+            color: @at-blue;
+        }
+    }
+
+    .at-Truncate-textarea {
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        height: 2em;
+        left: 0px;
+        outline: none;
+        padding: 0px;
+        position: fixed;
+        top: 0px;
+        width: 2em;
+    }
 }
 
 
-.RevisionHash-copy:hover {
+
-    color: @at-blue;
-}

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

@@ -3,64 +3,50 @@ function atTruncateLink (scope, el, attr, ctrl) {
     let string = attr.string;
     let maxlength = attr.maxlength;
 
-    truncateController.init(scope, string, maxlength);
+    truncateController.init(el, string, maxlength);
 }
 
-function AtTruncateController ($filter, $scope) {
+function AtTruncateController (strings) {
     let vm = this;
-    vm.toolTipContent = 'Copy full revision to clipboard.';
+    let el;
-
+    let string;
     let maxlength;
+    vm.strings = strings;
 
-    vm.init = (scope, _string_, _maxlength_) => {
+    vm.init = (_el_, _string_, _maxlength_) => {
-        vm.string = _string_;
+        el = _el_;
+        string = _string_;
         maxlength = _maxlength_;
-        vm.truncatedString = $filter('limitTo')(vm.string, maxlength, 0);
+        vm.truncatedString = string.substring(0, maxlength);
-    }
-
-    vm.copy = function() {
-        vm.toolTipContent = 'Copied to clipboard.';
-
-        let textArea = document.createElement("textarea");
-
-        // Place in top-left corner of screen regardless of scroll position.
-        textArea.style.position = 'fixed';
-        textArea.style.top = 0;
-        textArea.style.left = 0;
-
-        // Ensure it has a small width and height. Setting to 1px / 1em
-        // doesn't work as this gives a negative w/h on some browsers.
-        textArea.style.width = '2em';
-        textArea.style.height = '2em';
-
-        // We don't need padding, reducing the size if it does flash render.
-        textArea.style.padding = 0;
-
-        // Clean up any borders.
-        textArea.style.border = 'none';
-        textArea.style.outline = 'none';
-        textArea.style.boxShadow = 'none';
-
-        // Avoid flash of white box if rendered for any reason.
-        textArea.style.background = 'transparent';
-
-        textArea.value = vm.string;
-        document.body.appendChild(textArea);
-        textArea.select();
-
-        document.execCommand('copy');
-
-        document.body.removeChild(textArea);
     };
 
+    vm.tooltip = {
+        popover: {
+            text: vm.strings.components.truncate.DEFAULT,
+            on: 'mouseover',
+            position: 'top',
+            icon: 'fa fa-clone',
+            resetOnExit: true,
+            click: copyToClipboard
+        }
+    };
+
+    function copyToClipboard() {
+        vm.tooltip.popover.text = vm.strings.components.truncate.COPIED;
+
+        let textarea = el[0].getElementsByClassName('at-Truncate-textarea')[0];
+        textarea.value = string;
+        textarea.select();
+
+        document.execCommand('copy');
+    };
 }
 
-AtTruncateController.$inject = ['$filter', '$scope' ];
+AtTruncateController.$inject = ['ComponentsStrings'];
-
 
 function atTruncate(pathService) {
     return {
-        restrict: 'EA',
+        restrict: 'E',
         replace: true,
         transclude: true,
         templateUrl: pathService.getPartialPath('components/truncate/truncate'),
@@ -68,6 +54,7 @@ function atTruncate(pathService) {
         controllerAs: 'vm',
         link: atTruncateLink,
         scope: {
+            state: '=',
             maxLength: '@',
             string: '@'
         }

awx/ui/client/lib/components/truncate/truncate.partial.html

@@ -1,9 +1,9 @@
-<div class="RevisionHash">
+<div class="at-Truncate">
-    <div class="RevisionHash-tag">
+    <div class="at-Truncate-tag">
-        <span class="RevisionHash-name">{{vm.truncatedString}}</span>
+        <span class="at-Truncate-text">{{vm.truncatedString}}</span>
     </div>
-    <div class="RevisionHash-copy" aw-tool-tip="vm.toolTipContent" data-tip-watch="vm.toolTipContent"
+    <div class="at-Truncate-copy" data-placement="top">
-        data-placement="top" ng-click="vm.copy()">
+        <at-popover position="top" on="mouseover" state="vm.tooltip"></at-popover>
-        <i class="fa fa-clone"></i>
     </div>
+    <textarea class="at-Truncate-textarea"></textarea>
 </div>

awx/ui/client/src/job-results/job-results.block.less

@@ -108,10 +108,6 @@
     margin-left: 10px;
 }
 
-.JobResults-resultRowText--revision{
-    font-family: monospace;
-}
-
 .JobResults-resultRowText--instanceGroup {
     display: flex;
 }

awx/ui/client/src/job-results/job-results.partial.html

@@ -247,7 +247,7 @@
                         <label class="JobResults-resultRowLabel">
                             Revision
                         </label>
-                        <at-truncate string="{{job.scm_revision}}" maxLength="7" class="JobResults-resultRowText JobResults-resultRowText--revision">
+                        <at-truncate string="{{job.scm_revision}}" maxLength="7" class="JobResults-resultRowText">
                         </at-truncate>
                     </div>
 

awx/ui/client/src/projects/list/projects-list.controller.js

@@ -74,7 +74,6 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert',
             project.scm_update_tooltip = i18n._("Start an SCM update");
             project.scm_schedule_tooltip = i18n._("Schedule future SCM updates");
             project.scm_type_class = "";
-            project.tooltipContent = 'Copy full revision to clipboard.';
 
             if (project.status === 'failed' && project.summary_fields.last_update && project.summary_fields.last_update.status === 'canceled') {
                 project.statusTip = i18n._('Canceled. Click for details');

awx/ui/client/src/shared/generator-helpers.js

@@ -525,7 +525,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 Attr(field, 'columnClass') : "";
                 html += `
                 <td ${classList}>
-                    <at-truncate string="{{project.scm_revision}}"  maxLength="7"></at-truncate>
+                    <at-truncate string="{{project.scm_revision}}" maxLength="7"></at-truncate>
                 </td>`;
             } else if (field.type === 'badgeCount') {
                 html = BadgeCount(params);