From d2f76c91af13789ac95a3de0041d2d47c37e0173 Mon Sep 17 00:00:00 2001 From: Tatjana Dehler Date: Fri, 17 Apr 2020 14:49:05 +0200 Subject: [PATCH] mgr/dashboard: handle `textarea` and add tooltip Enhance `Copy2ClipboardButtonDirective` in order to handle `textarea`s and copy a formatted input. Add a tooltip to the button, too. Signed-off-by: Tatjana Dehler --- .../copy2clipboard-button.directive.spec.ts | 12 +++++++++++- .../directives/copy2clipboard-button.directive.ts | 10 ++++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts index e50fd86332c43..37fca45264e65 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.spec.ts @@ -1,8 +1,18 @@ +import { TestBed } from '@angular/core/testing'; + +import { I18n } from '@ngx-translate/i18n-polyfill'; + +import { configureTestBed, i18nProviders } from '../../../testing/unit-test-helper'; import { Copy2ClipboardButtonDirective } from './copy2clipboard-button.directive'; describe('Copy2clipboardButtonDirective', () => { + configureTestBed({ + providers: [i18nProviders] + }); + it('should create an instance', () => { - const directive = new Copy2ClipboardButtonDirective(null, null, null); + const i18n = TestBed.get(I18n); + const directive = new Copy2ClipboardButtonDirective(null, null, null, i18n); expect(directive).toBeTruthy(); }); }); diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts index 005b20157583a..32f4cda3e85b8 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/copy2clipboard-button.directive.ts @@ -1,4 +1,5 @@ import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 } from '@angular/core'; +import { I18n } from '@ngx-translate/i18n-polyfill'; import { ToastrService } from 'ngx-toastr'; @@ -8,17 +9,21 @@ import { ToastrService } from 'ngx-toastr'; export class Copy2ClipboardButtonDirective implements OnInit { @Input() private cdCopy2ClipboardButton: string; + @Input() + private formatted = 'no'; constructor( private elementRef: ElementRef, private renderer: Renderer2, - private toastr: ToastrService + private toastr: ToastrService, + private i18n: I18n ) {} ngOnInit() { const iElement = this.renderer.createElement('i'); this.renderer.addClass(iElement, 'fa'); this.renderer.addClass(iElement, 'fa-clipboard'); + this.renderer.setAttribute(iElement, 'title', this.i18n('Copy to clipboard')); this.renderer.appendChild(this.elementRef.nativeElement, iElement); } @@ -29,8 +34,9 @@ export class Copy2ClipboardButtonDirective implements OnInit { @HostListener('click') onClick() { try { + const tagName = this.formatted === '' ? 'textarea' : 'input'; // Create the input to hold our text. - const tmpInputElement = document.createElement('input'); + const tmpInputElement = document.createElement(tagName); tmpInputElement.value = this.getInputElement().value; document.body.appendChild(tmpInputElement); // Copy text to clipboard. -- 2.39.5