Copy to clipboard (#142)

* Copy buttons on share view

Ugly but working buttons to copy video url and video iframe code.

Add ngx-clipboard dependency to allow easy copy to clipboard directive.

* Designed copy buttons

Using some css (scss) rules to make buttons look better.

* First version on copy feedback

Little success alert message on copy.

Fix lint errors

Move dependencies to dev dependencies

* Update button design

* Use of notifications service

Provides feedback of copy action to the user through the
angular2-notifications module.

1 files changed, 16 insertions, 2 deletions

diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index 36ec38d88..52ee36a2e 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -12,12 +12,26 @@
       <div class="modal-body">
         <div class="form-group">
           <label>URL</label>
-          <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
+          <div class="input-group">
+            <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoUrl()" />
+            <div class="input-group-btn" placement="bottom right">
+              <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
+                <span class="glyphicon glyphicon-copy"></span>
+              </button>
+            </div>
+          </div>
         </div>
 
         <div class="form-group">
           <label>Embed</label>
-          <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
+          <div class="input-group">
+            <input #shareInput (click)="shareInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getVideoIframeCode()" />
+            <div class="input-group-btn" placement="bottom right">
+              <button [ngxClipboard]="shareInput" (click)="activateCopiedMessage()" type="button" class="btn btn-default btn-search">
+                <span class="glyphicon glyphicon-copy"></span>
+              </button>
+            </div>
+          </div>
         </div>
 
         <div *ngIf="notSecure()" class="alert alert-warning">