Prefer global icon instead of glyphicon for copy

12 files changed, 29 insertions, 35 deletions

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index d92760ff8..db045b046 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -28,7 +28,7 @@
               <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
                       class="btn btn-outline-secondary btn-sm copy-button" title="Copy account handle" i18n-title
               >
-                <span class="glyphicon glyphicon-duplicate"></span>
+                <my-global-icon iconName="copy"></my-global-icon>
               </button>
             </div>
 
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index a316bd599..e5f86e61e 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -37,7 +37,13 @@ my-user-moderation-dropdown {
 }
 
 .copy-button {
+  @include margin-left(3px);
+
   border: 0;
+
+  my-global-icon {
+    width: 15px;
+  }
 }
 
 .account-info {
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 780db79b0..1b9dbe7b9 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -67,7 +67,7 @@
               <button [cdkCopyToClipboard]="videoChannel.nameWithHostForced" (click)="activateCopiedMessage()"
                       class="btn btn-outline-secondary btn-sm copy-button" title="Copy channel handle" i18n-title
               >
-                <span class="glyphicon glyphicon-duplicate"></span>
+                <my-global-icon iconName="copy"></my-global-icon>
               </button>
             </div>
 
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index c00dacae5..945d9a13d 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -150,7 +150,13 @@
 }
 
 .copy-button {
+  @include margin-left(3px);
+
   border: 0;
+
+  my-global-icon {
+    width: 15px;
+  }
 }
 
 @media screen and (max-width: 1400px) {
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index e5edb6c97..f7f9ce403 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -13,7 +13,7 @@
     *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
     class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
   >
-    <span class="glyphicon glyphicon-duplicate"></span>
+    <my-global-icon iconName="copy"></my-global-icon>
     <span class="copy-text">Copy</span>
   </button>
 </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
index 02a8d7d0e..cc1646a69 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.scss
@@ -11,6 +11,10 @@ input {
   font-size: 15px;
 }
 
+my-global-icon {
+  width: 18px;
+}
+
 .copy-text {
   font-size: 14px;
   margin-left: 5px;
diff --git a/client/src/app/shared/shared-icons/global-icon.component.ts b/client/src/app/shared/shared-icons/global-icon.component.ts
index ba23edde0..3a0d57691 100644
--- a/client/src/app/shared/shared-icons/global-icon.component.ts
+++ b/client/src/app/shared/shared-icons/global-icon.component.ts
@@ -21,6 +21,7 @@ const icons = {
   local: require('!!raw-loader?!../../../assets/images/misc/local.svg').default,
 
   // feather icons
+  copy: require('!!raw-loader?!../../../assets/images/feather/copy.svg').default,
   flag: require('!!raw-loader?!../../../assets/images/feather/flag.svg').default,
   playlists: require('!!raw-loader?!../../../assets/images/feather/list.svg').default,
   syndication: require('!!raw-loader?!../../../assets/images/feather/syndication.svg').default,
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index a6b8576a1..572c03129 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -25,7 +25,6 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-
               <my-input-toggle-hidden [value]="getPlaylistUrl()" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
             </div>
           </ng-template>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.html b/client/src/app/shared/shared-video-miniature/video-download.component.html
index 9123d2a5a..bf971229e 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.html
@@ -28,16 +28,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
-
-                <button
-                  *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
-                  [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
-                >
-                  <span class="glyphicon glyphicon-duplicate"></span>
-                </button>
-              </div>
+              <my-input-toggle-hidden
+                *ngIf="!isConfidentialVideo()"
+                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
+              ></my-input-toggle-hidden>
             </div>
           </ng-template>
         </ng-container>
@@ -54,16 +48,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <div class="input-group">
-                <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="getLink()" />
-
-                <button
-                  *ngIf="!isConfidentialVideo()" type="button" class="btn btn-outline-secondary"
-                  [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()"
-                >
-                  <span class="glyphicon glyphicon-duplicate"></span>
-                </button>
-              </div>
+              <my-input-toggle-hidden
+                *ngIf="!isConfidentialVideo()"
+                [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getLink()"
+              ></my-input-toggle-hidden>
             </div>
           </ng-template>
         </ng-container>
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.scss b/client/src/app/shared/shared-video-miniature/video-download.component.scss
index 04d5eb560..bd42f4813 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.scss
@@ -5,13 +5,6 @@
   margin-top: 30px;
 }
 
-.input-group > input {
-  @include peertube-input-text(auto);
-
-  font-size: 14px;
-  padding: 0 5px;
-}
-
 .advanced-filters-button {
   display: flex;
   justify-content: center;
diff --git a/client/src/app/shared/shared-video-miniature/video-download.component.ts b/client/src/app/shared/shared-video-miniature/video-download.component.ts
index 5328f5170..bbda39c2d 100644
--- a/client/src/app/shared/shared-video-miniature/video-download.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-download.component.ts
@@ -193,10 +193,6 @@ export class VideoDownloadComponent {
     return this.video.privacy.id === VideoPrivacy.PRIVATE || this.video.privacy.id === VideoPrivacy.INTERNAL
   }
 
-  activateCopiedMessage () {
-    this.notifier.success($localize`Copied`)
-  }
-
   switchToType (type: DownloadType) {
     this.type = type
   }
diff --git a/client/src/assets/images/feather/copy.svg b/client/src/assets/images/feather/copy.svg
new file mode 100644
index 000000000..4e0b09f19
--- /dev/null
+++ b/client/src/assets/images/feather/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
\ No newline at end of file