From c7e1e432b0e5d321ff2331cf3ddff56c43500788 Mon Sep 17 00:00:00 2001
From: Julien Lemaire <sticmac@outlook.fr>
Date: Mon, 11 Dec 2017 11:59:39 -0500
Subject: 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.
---
 .../app/videos/+video-watch/video-share.component.html | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'client/src/app/videos/+video-watch/video-share.component.html')

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">
-- 
cgit v1.2.3