Prefer global icon instead of glyphicon for copy

diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index d92760ff8e762b3fa75afc8d7fd2867b938146f2..db045b046af3ecaa4ffc0ebc58d50bc41acbfe75 100644 (file)
--- 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 a316bd5994b29e901bd55eb24501c3fe36287b11..e5f86e61ec71be35a673515de1b9b8e43c955891 100644 (file)
--- 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 780db79b0d69085f1d659db34a30bc1de7bba0f3..1b9dbe7b911ca06498ecde3dc3b20de4fedd7969 100644 (file)
--- 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 c00dacae59c65b139cdaa8930f196fb5fed45099..945d9a13db462380753bcad455c5e8956a1a6f9c 100644 (file)
--- 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 e5edb6c97b55f192e674c3a20848b739a70be330..f7f9ce403b3a6d5a126c4d2297ec7d465d8b03da 100644 (file)
--- 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 02a8d7d0e5b9c8da39e10d93d718294f2ca38a00..cc1646a6921da4dca18cd8b62cdbe36c57ee782e 100644 (file)
--- 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 ba23edde0231ea42aa3445effef54a168fed78a6..3a0d5769135a6d0bcd4898c78006b0a38cd121ab 100644 (file)
--- 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 a6b8576a1c58974573532f63454346841c3d5340..572c03129800e7eac22d42c5b1881b4bbae1a8e2 100644 (file)
--- 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 9123d2a5a7e3ed043a4af06c904b259b4a332165..bf971229ed1ee43d87d0ad0ed1fe6343b20bd0a1 100644 (file)
--- 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 04d5eb560794848092eb3fd57e0171f5639fc15d..bd42f4813ba35cd401eac571d8084a608100c48c 100644 (file)
--- 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 5328f5170d650d4465f6be35c8461bd53d9375ff..bbda39c2dfb84a679b4adaa6220c2fa977f71a56 100644 (file)
--- 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 (file)
index 0000000..4e0b09f
--- /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