diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 804dfd81ce..2fba205de5 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/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']; diff --git a/awx/ui/client/lib/components/popover/_index.less b/awx/ui/client/lib/components/popover/_index.less index 3dd40de39a..9018729eda 100644 --- a/awx/ui/client/lib/components/popover/_index.less +++ b/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; } diff --git a/awx/ui/client/lib/components/popover/popover.directive.js b/awx/ui/client/lib/components/popover/popover.directive.js index aaae69adb9..8f8ee5198a 100644 --- a/awx/ui/client/lib/components/popover/popover.directive.js +++ b/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.left = `${arrowLeft}px`; + pos.arrow.style.top = `${arrowTop}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; \ No newline at end of file diff --git a/awx/ui/client/lib/components/truncate/_index.less b/awx/ui/client/lib/components/truncate/_index.less index 29b006f149..2b2cdfede5 100644 --- a/awx/ui/client/lib/components/truncate/_index.less +++ b/awx/ui/client/lib/components/truncate/_index.less @@ -1,19 +1,34 @@ -.RevisionHash { +.at-Truncate { display: flex; align-items: center; -} -.RevisionHash-name { - font-family: monospace; -} + .at-Truncate-text { + font-family: monospace; + } -.RevisionHash-copy { - color: @at-gray-dark-2x; - cursor: pointer; - margin-left: 10px; + .at-Truncate-copy { + color: @at-gray-dark-2x; + cursor: pointer; + 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; -} \ No newline at end of file + diff --git a/awx/ui/client/lib/components/truncate/truncate.directive.js b/awx/ui/client/lib/components/truncate/truncate.directive.js index b13a853007..6367d39918 100644 --- a/awx/ui/client/lib/components/truncate/truncate.directive.js +++ b/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.string = _string_; + vm.init = (_el_, _string_, _maxlength_) => { + el = _el_; + string = _string_; maxlength = _maxlength_; - vm.truncatedString = $filter('limitTo')(vm.string, maxlength, 0); - } - - 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.truncatedString = string.substring(0, maxlength); }; + 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: '@' } diff --git a/awx/ui/client/lib/components/truncate/truncate.partial.html b/awx/ui/client/lib/components/truncate/truncate.partial.html index 5d5bcd7ead..aa329908eb 100644 --- a/awx/ui/client/lib/components/truncate/truncate.partial.html +++ b/awx/ui/client/lib/components/truncate/truncate.partial.html @@ -1,9 +1,9 @@ -
-
- {{vm.truncatedString}} +
+
+ {{vm.truncatedString}}
-
- +
+
+
diff --git a/awx/ui/client/src/job-results/job-results.block.less b/awx/ui/client/src/job-results/job-results.block.less index 63be335c97..4ee845e811 100644 --- a/awx/ui/client/src/job-results/job-results.block.less +++ b/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; } diff --git a/awx/ui/client/src/job-results/job-results.partial.html b/awx/ui/client/src/job-results/job-results.partial.html index 7bf8bc74ce..ac5ad64022 100644 --- a/awx/ui/client/src/job-results/job-results.partial.html +++ b/awx/ui/client/src/job-results/job-results.partial.html @@ -247,7 +247,7 @@ - +
diff --git a/awx/ui/client/src/projects/list/projects-list.controller.js b/awx/ui/client/src/projects/list/projects-list.controller.js index 6a894530b0..5c98a1112a 100644 --- a/awx/ui/client/src/projects/list/projects-list.controller.js +++ b/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'); diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js index 32f5f4b98c..5a77a7059d 100644 --- a/awx/ui/client/src/shared/generator-helpers.js +++ b/awx/ui/client/src/shared/generator-helpers.js @@ -525,7 +525,7 @@ angular.module('GeneratorHelpers', [systemStatus.name]) Attr(field, 'columnClass') : ""; html += ` - + `; } else if (field.type === 'badgeCount') { html = BadgeCount(params);