feat(project landing page): add copy to clipboard functionality (DSP-1248)

package.json

@@ -47,7 +47,6 @@
     "json2typescript": "^1.0.6",
     "jsonld": "^1.1.0",
     "moment": "^2.27.0",
-    "ngx-clipboard": "^14.0.1",
     "ngx-color-picker": "^10.0.1",
     "openseadragon": "^2.4.0",
     "rxjs": "~6.5.3",

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
@@ -83,7 +84,6 @@ import { DatasetTabViewComponent } from './project/board/dataset-tab-view/datase
 import { AttributionTabViewComponent } from './project/board/attribution-tab-view/attribution-tab-view.component';
 import { TermsTabViewComponent } from './project/board/terms-tab-view/terms-tab-view.component';
 import { ContactsTabViewComponent } from './project/board/contacts-tab-view/contacts-tab-view.component';
-import { ClipboardModule } from 'ngx-clipboard';
 
 import { AngularSplitModule } from 'angular-split';
 import { PersonTemplateComponent } from './project/board/person-template/person-template.component';

src/app/project/board/board.component.html

@@ -125,31 +125,43 @@ <h3>Dataset(s)</h3>
             </div>
 
             <div class="metadata-box">
-                <h3 class="display-inline-block">Cite as</h3>
-                <div class="copy-to-clipboard">
-                    <button title="Copy to clipboard" (click)="copyHowToCiteToClipboard();">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
-                        </svg>
+                <div>
+                    <h3 class='display-inline-block'>Cite as</h3>
+                    <button mat-button class="btn-copy-to-clipboard" [cdkCopyToClipboard]="selectedDataset.howToCite"
+                        matTooltip="Copy citation url" matTooltipPosition="below" (click)="copyToClipboard('Citation link')">
+                        <mat-icon class="icon-arkurl">content_copy</mat-icon>
                     </button>
                 </div>
                 <div class="sidenav-prop-text">
                     <p [innerHTML]="selectedDataset.howToCite"></p>
                 </div>
             </div>
+
             <div class="metadata-box">
                 <div class="sidenav-properties-container">
                     <div class="property">
-                        <div class="property-label">
-                            Persistent identifier
+                        <div>
+                            <div class="property-label display-inline-block">
+                                Persistent identifier
+                            </div>
+                                <button mat-button class="btn-copy-to-clipboard" [cdkCopyToClipboard]="selectedDataset.project.id"
+                                matTooltip="Copy persistent identifier" matTooltipPosition="below" (click)="copyToClipboard('Persistent identifier')">
+                                <mat-icon class="icon-arkurl">content_copy</mat-icon>
+                            </button>
                         </div>
                         <div class="sidenav-prop-text property-value">
                             <a href="{{ selectedDataset.project.id }}" target="_blank"> {{ selectedDataset.project.id }} </a>
                         </div>
                     </div>
                     <div class="property">
-                        <div class="property-label">
-                            License
+                        <div>
+                            <div class="property-label display-inline-block">
+                                License
+                            </div>
+                                <button mat-button class="btn-copy-to-clipboard" [cdkCopyToClipboard]="selectedDataset.license.value"
+                                matTooltip="Copy license" matTooltipPosition="below" (click)="copyToClipboard('License')">
+                                <mat-icon class="icon-arkurl">content_copy</mat-icon>
+                            </button>
                         </div>
                         <div class="sidenav-prop-text property-value">
                             <a href="{{ selectedDataset.license.value }}" target="_blank"> {{ selectedDataset.license.value }} </a>

src/app/project/board/board.component.scss

@@ -87,14 +87,9 @@ section {
     display: inline-block;
   }
 
-  .copy-to-clipboard {
-    display: inline-block;
-    float: right;
-
-    button {
-      cursor: pointer;
-      border: none;
-    }
+  .btn-copy-to-clipboard {
+    padding: 0px 10px;
+    min-width: auto;
   }
 
   .mat-radio-button {
@@ -155,7 +150,7 @@ section {
     }
 
     .property:not(:last-child) {
-      margin-bottom: 13px;
+      margin-bottom: 20px;
     }
   }
 

src/app/project/board/board.component.ts

@@ -1,6 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { MatRadioChange } from '@angular/material/radio';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Params } from '@angular/router';
 import {
@@ -11,7 +12,6 @@ import {
     ReadProject
 } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken, Session, SessionService } from '@dasch-swiss/dsp-ui';
-import { ClipboardService } from 'ngx-clipboard';
 import { DialogComponent } from 'src/app/main/dialog/dialog.component';
 import { ErrorHandlerService } from 'src/app/main/error/error-handler.service';
 import { CacheService } from '../../main/cache/cache.service';
@@ -71,7 +71,7 @@ export class BoardComponent implements OnInit {
         private _dialog: MatDialog,
         private _route: ActivatedRoute,
         private _titleService: Title,
-        private _clipboardService: ClipboardService
+        private _snackBar: MatSnackBar
     ) {
         // get the shortcode of the current project
         this._route.parent.paramMap.subscribe((params: Params) => {
@@ -422,8 +422,15 @@ export class BoardComponent implements OnInit {
         this.selectedDataset = this.datasets[event.value];
     }
 
-    copyHowToCiteToClipboard() {
-        this._clipboardService.copyFromContent(this.selectedDataset.howToCite);
+    // copy link to clipboard
+    copyToClipboard(msg: string) {
+        const message = 'Copied to clipboard!';
+        const action = msg;
+        this._snackBar.open(message, action, {
+            duration: 3000,
+            horizontalPosition: 'center',
+            verticalPosition: 'top'
+        });
     }
 
     openDialog(mode: string, name: string, id?: string): void {