From 73ea0b348a510995d40a3198a52e38af5e270d24 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Mon, 3 Jul 2017 16:20:19 -0400 Subject: [PATCH 1/9] Dynamically update Tooltip content based on click --- .../src/projects/list/projects-list.controller.js | 12 ++++++++++++ .../src/projects/revisions/revisions.directive.js | 5 +++-- .../src/projects/revisions/revisions.partial.html | 5 +++-- 3 files changed, 18 insertions(+), 4 deletions(-) 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 5c98a1112a..5975c2b973 100644 --- a/awx/ui/client/src/projects/list/projects-list.controller.js +++ b/awx/ui/client/src/projects/list/projects-list.controller.js @@ -74,6 +74,7 @@ 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'); @@ -92,6 +93,17 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert', } } + $scope.$on('copied', function(e) { + $scope.projects.map( (project) => { + if (project.id === e.targetScope.project.id) { + project.tooltipContent = 'Copied to clipboard.'; + } + else { + project.tooltipContent = "Copy full revision to clipboard."; + } + }); + }); + $scope.reloadList = function(){ let path = GetBasePath(list.basePath) || GetBasePath(list.name); qs.search(path, $state.params[`${list.iterator}_search`]) diff --git a/awx/ui/client/src/projects/revisions/revisions.directive.js b/awx/ui/client/src/projects/revisions/revisions.directive.js index b5e7ef02c3..959b1c2232 100644 --- a/awx/ui/client/src/projects/revisions/revisions.directive.js +++ b/awx/ui/client/src/projects/revisions/revisions.directive.js @@ -6,7 +6,6 @@ export default function(templateUrl, Rest, $q, $filter) { return { restrict: 'E', - scope: false, templateUrl: templateUrl('projects/revisions/revisions'), link: function(scope) { let full_revision = scope.project.scm_revision; @@ -14,6 +13,8 @@ export default scope.count = scope.project.scm_revision.length; scope.copyRevisionHash = function() { + scope.$emit('copied'); + let textArea = document.createElement("textarea"); // Place in top-left corner of screen regardless of scroll position. @@ -40,7 +41,7 @@ export default textArea.value = full_revision; document.body.appendChild(textArea); textArea.select(); - + document.execCommand('copy'); document.body.removeChild(textArea); diff --git a/awx/ui/client/src/projects/revisions/revisions.partial.html b/awx/ui/client/src/projects/revisions/revisions.partial.html index 6b72870994..ff391e2ad3 100644 --- a/awx/ui/client/src/projects/revisions/revisions.partial.html +++ b/awx/ui/client/src/projects/revisions/revisions.partial.html @@ -1,6 +1,7 @@
{{revisionHash}}
-
- Copy +
+
\ No newline at end of file From 3cc522de8f8a94bba6f8a5c065b1212d4a3710d6 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 6 Jul 2017 12:11:29 -0400 Subject: [PATCH 2/9] Add truncate component --- awx/ui/client/lib/components/index.js | 6 ++- .../components/truncate/truncate.directive.js | 43 +++++++++++++++++++ .../projects/revisions/revisions.block.less | 7 ++- .../projects/revisions/revisions.directive.js | 12 ++---- .../projects/revisions/revisions.partial.html | 6 +-- 5 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 awx/ui/client/lib/components/truncate/truncate.directive.js diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index fa8b5d6d0b..40a0264e28 100644 --- a/awx/ui/client/lib/components/index.js +++ b/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); diff --git a/awx/ui/client/lib/components/truncate/truncate.directive.js b/awx/ui/client/lib/components/truncate/truncate.directive.js new file mode 100644 index 0000000000..6ce69aed6b --- /dev/null +++ b/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: '{{vm.truncatedString}}', + controller: AtTruncateController, + controllerAs: 'vm', + link: atTruncateLink, + scope: { + maxLength: '@' + } + } +} + +atTruncate.$inject = [ + '$filter' +]; + +export default atTruncate; \ No newline at end of file diff --git a/awx/ui/client/src/projects/revisions/revisions.block.less b/awx/ui/client/src/projects/revisions/revisions.block.less index 084a8ba553..176a062bc1 100644 --- a/awx/ui/client/src/projects/revisions/revisions.block.less +++ b/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; } \ No newline at end of file diff --git a/awx/ui/client/src/projects/revisions/revisions.directive.js b/awx/ui/client/src/projects/revisions/revisions.directive.js index 959b1c2232..bcd95b2054 100644 --- a/awx/ui/client/src/projects/revisions/revisions.directive.js +++ b/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. diff --git a/awx/ui/client/src/projects/revisions/revisions.partial.html b/awx/ui/client/src/projects/revisions/revisions.partial.html index ff391e2ad3..75b2887d58 100644 --- a/awx/ui/client/src/projects/revisions/revisions.partial.html +++ b/awx/ui/client/src/projects/revisions/revisions.partial.html @@ -1,7 +1,7 @@
- {{revisionHash}} +
-
+
\ No newline at end of file From 3d5f7057c38f09fa59da8fad648d9fb1eb08aca6 Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 6 Jul 2017 14:14:47 -0400 Subject: [PATCH 3/9] Add revision component to job details --- .../components/truncate/truncate.directive.js | 55 ++++++++++++++++--- .../components/truncate/truncate.partial.html | 9 +++ .../src/job-results/job-results.partial.html | 5 +- .../projects/list/projects-list.controller.js | 18 +++--- awx/ui/client/src/shared/generator-helpers.js | 2 +- 5 files changed, 68 insertions(+), 21 deletions(-) create mode 100644 awx/ui/client/lib/components/truncate/truncate.partial.html diff --git a/awx/ui/client/lib/components/truncate/truncate.directive.js b/awx/ui/client/lib/components/truncate/truncate.directive.js index 6ce69aed6b..fd0d496230 100644 --- a/awx/ui/client/lib/components/truncate/truncate.directive.js +++ b/awx/ui/client/lib/components/truncate/truncate.directive.js @@ -1,6 +1,6 @@ function atTruncateLink (scope, el, attr, ctrl) { let truncateController = ctrl; - let string = attr.atTruncate; + let string = attr.string; let maxlength = attr.maxlength; truncateController.init(scope, string, maxlength); @@ -8,36 +8,73 @@ function atTruncateLink (scope, el, attr, ctrl) { function AtTruncateController ($filter) { let vm = this; + vm.toolTipContent = 'Copy full revision to clipboard.'; - let string, - maxlength; + let maxlength; vm.init = (scope, _string_, _maxlength_) => { - string = _string_; + vm.string = _string_; maxlength = _maxlength_; - vm.truncatedString = $filter('limitTo')(string, maxlength, 0); + 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); + }; + } -function atTruncate($filter) { +function atTruncate($filter, pathService) { return { restrict: 'EA', replace: true, transclude: true, - template: '{{vm.truncatedString}}', + templateUrl: pathService.getPartialPath('components/truncate/truncate'), controller: AtTruncateController, controllerAs: 'vm', link: atTruncateLink, scope: { - maxLength: '@' + maxLength: '@', + string: '@' } } } atTruncate.$inject = [ - '$filter' + '$filter', + 'PathService' ]; export default atTruncate; \ No newline at end of file diff --git a/awx/ui/client/lib/components/truncate/truncate.partial.html b/awx/ui/client/lib/components/truncate/truncate.partial.html new file mode 100644 index 0000000000..5d5bcd7ead --- /dev/null +++ b/awx/ui/client/lib/components/truncate/truncate.partial.html @@ -0,0 +1,9 @@ +
+
+ {{vm.truncatedString}} +
+
+ +
+
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 3592935bbd..7bf8bc74ce 100644 --- a/awx/ui/client/src/job-results/job-results.partial.html +++ b/awx/ui/client/src/job-results/job-results.partial.html @@ -247,9 +247,8 @@ -
- {{ job.scm_revision }} -
+ +
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 5975c2b973..2a3682e77c 100644 --- a/awx/ui/client/src/projects/list/projects-list.controller.js +++ b/awx/ui/client/src/projects/list/projects-list.controller.js @@ -94,14 +94,16 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert', } $scope.$on('copied', function(e) { - $scope.projects.map( (project) => { - if (project.id === e.targetScope.project.id) { - project.tooltipContent = 'Copied to clipboard.'; - } - else { - project.tooltipContent = "Copy full revision to clipboard."; - } - }); + // $scope.projects.map( (project) => { + // if (project.id === e.targetScope.project.id) { + // project.tooltipContent = 'Copied to clipboard.'; + // } + // else { + // project.tooltipContent = "Copy full revision to clipboard."; + // } + // }); + console.log('copied hi there'); + console.log(e); }); $scope.reloadList = function(){ diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js index f4d6aade11..32f5f4b98c 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); From d8384522c2ca8eccdea6bdbf4d9d9af65d8fe29e Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 6 Jul 2017 16:22:07 -0400 Subject: [PATCH 4/9] Remove Revisions directory --- awx/ui/client/lib/components/_index.less | 1 + .../components/truncate/_index.less} | 6 +-- .../components/truncate/truncate.directive.js | 7 +-- .../projects/list/projects-list.controller.js | 13 ------ awx/ui/client/src/projects/main.js | 3 +- awx/ui/client/src/projects/revisions/main.js | 11 ----- .../projects/revisions/revisions.directive.js | 46 ------------------- .../projects/revisions/revisions.partial.html | 7 --- 8 files changed, 8 insertions(+), 86 deletions(-) rename awx/ui/client/{src/projects/revisions/revisions.block.less => lib/components/truncate/_index.less} (66%) delete mode 100644 awx/ui/client/src/projects/revisions/main.js delete mode 100644 awx/ui/client/src/projects/revisions/revisions.directive.js delete mode 100644 awx/ui/client/src/projects/revisions/revisions.partial.html diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index 729d577b54..1902014e11 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -5,3 +5,4 @@ @import 'popover/_index'; @import 'tabs/_index'; @import 'utility/_index'; +@import 'truncate/_index'; diff --git a/awx/ui/client/src/projects/revisions/revisions.block.less b/awx/ui/client/lib/components/truncate/_index.less similarity index 66% rename from awx/ui/client/src/projects/revisions/revisions.block.less rename to awx/ui/client/lib/components/truncate/_index.less index 176a062bc1..29b006f149 100644 --- a/awx/ui/client/src/projects/revisions/revisions.block.less +++ b/awx/ui/client/lib/components/truncate/_index.less @@ -1,5 +1,3 @@ -@import "./client/src/shared/branding/colors.default.less"; - .RevisionHash { display: flex; align-items: center; @@ -10,12 +8,12 @@ } .RevisionHash-copy { - color: @b7grey; + color: @at-gray-dark-2x; cursor: pointer; margin-left: 10px; } .RevisionHash-copy:hover { - color: @default-link; + 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 fd0d496230..b13a853007 100644 --- a/awx/ui/client/lib/components/truncate/truncate.directive.js +++ b/awx/ui/client/lib/components/truncate/truncate.directive.js @@ -6,7 +6,7 @@ function atTruncateLink (scope, el, attr, ctrl) { truncateController.init(scope, string, maxlength); } -function AtTruncateController ($filter) { +function AtTruncateController ($filter, $scope) { let vm = this; vm.toolTipContent = 'Copy full revision to clipboard.'; @@ -55,8 +55,10 @@ function AtTruncateController ($filter) { } +AtTruncateController.$inject = ['$filter', '$scope' ]; -function atTruncate($filter, pathService) { + +function atTruncate(pathService) { return { restrict: 'EA', replace: true, @@ -73,7 +75,6 @@ function atTruncate($filter, pathService) { } atTruncate.$inject = [ - '$filter', 'PathService' ]; 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 2a3682e77c..6a894530b0 100644 --- a/awx/ui/client/src/projects/list/projects-list.controller.js +++ b/awx/ui/client/src/projects/list/projects-list.controller.js @@ -93,19 +93,6 @@ export default ['$scope', '$rootScope', '$log', 'Rest', 'Alert', } } - $scope.$on('copied', function(e) { - // $scope.projects.map( (project) => { - // if (project.id === e.targetScope.project.id) { - // project.tooltipContent = 'Copied to clipboard.'; - // } - // else { - // project.tooltipContent = "Copy full revision to clipboard."; - // } - // }); - console.log('copied hi there'); - console.log(e); - }); - $scope.reloadList = function(){ let path = GetBasePath(list.basePath) || GetBasePath(list.name); qs.search(path, $state.params[`${list.iterator}_search`]) diff --git a/awx/ui/client/src/projects/main.js b/awx/ui/client/src/projects/main.js index 52fa7270b6..778cfab07a 100644 --- a/awx/ui/client/src/projects/main.js +++ b/awx/ui/client/src/projects/main.js @@ -13,10 +13,9 @@ import { N_ } from '../i18n'; import GetProjectPath from './factories/get-project-path.factory'; import GetProjectIcon from './factories/get-project-icon.factory'; import GetProjectToolTip from './factories/get-project-tool-tip.factory'; -import revisions from './revisions/main'; export default -angular.module('Projects', [revisions.name]) +angular.module('Projects', []) .controller('ProjectsList', ProjectsList) .controller('ProjectsAdd', ProjectsAdd) .controller('ProjectsEdit', ProjectsEdit) diff --git a/awx/ui/client/src/projects/revisions/main.js b/awx/ui/client/src/projects/revisions/main.js deleted file mode 100644 index 592cc2c976..0000000000 --- a/awx/ui/client/src/projects/revisions/main.js +++ /dev/null @@ -1,11 +0,0 @@ -/************************************************* - * Copyright (c) 2015 Ansible, Inc. - * - * All Rights Reserved - *************************************************/ - -import revisions from './revisions.directive'; - -export default - angular.module('revisions', []) - .directive('revisions', revisions); \ No newline at end of file diff --git a/awx/ui/client/src/projects/revisions/revisions.directive.js b/awx/ui/client/src/projects/revisions/revisions.directive.js deleted file mode 100644 index bcd95b2054..0000000000 --- a/awx/ui/client/src/projects/revisions/revisions.directive.js +++ /dev/null @@ -1,46 +0,0 @@ -export default - [ 'templateUrl', function(templateUrl) { - return { - restrict: 'E', - templateUrl: templateUrl('projects/revisions/revisions'), - link: function(scope) { - - 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. - 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 = full_revision; - document.body.appendChild(textArea); - textArea.select(); - - document.execCommand('copy'); - - document.body.removeChild(textArea); - }; - } - }; - } - ]; \ No newline at end of file diff --git a/awx/ui/client/src/projects/revisions/revisions.partial.html b/awx/ui/client/src/projects/revisions/revisions.partial.html deleted file mode 100644 index 75b2887d58..0000000000 --- a/awx/ui/client/src/projects/revisions/revisions.partial.html +++ /dev/null @@ -1,7 +0,0 @@ -
- -
-
- -
\ No newline at end of file From 452950ab6107b3a309801ae6d155b863bea49767 Mon Sep 17 00:00:00 2001 From: gconsidine Date: Fri, 7 Jul 2017 15:56:54 -0400 Subject: [PATCH 5/9] Add alternative trigger event and position support to popover --- .../lib/components/input/label.partial.html | 2 +- .../client/lib/components/popover/_index.less | 10 ++- .../components/popover/popover.directive.js | 90 ++++++++++++++----- .../components/popover/popover.partial.html | 16 ++-- 4 files changed, 87 insertions(+), 31 deletions(-) diff --git a/awx/ui/client/lib/components/input/label.partial.html b/awx/ui/client/lib/components/input/label.partial.html index 2a9a61690f..d94c073ebf 100644 --- a/awx/ui/client/lib/components/input/label.partial.html +++ b/awx/ui/client/lib/components/input/label.partial.html @@ -1,7 +1,7 @@