From 5cde14742691e8b16c806e1d0647c461a321dbdf Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Tue, 18 Sep 2018 14:17:33 -0400
Subject: [PATCH] Fix clipboard copy box to not cause reflow

Instead, we now put the "Copied" message inline in the box and have it both fade and slide rightward away
---
 static/css/quay.css                           | 40 ++++++++++---------
 static/directives/copy-box.html               |  2 +-
 .../directives/repo-view/repo-panel-info.html |  4 +-
 .../repo-view/repo-panel-settings.html        |  6 +--
 static/js/directives/ui/copy-box.js           |  1 -
 .../manifest-link.component.html              |  2 +-
 static/partials/manage-application.html       |  2 +-
 7 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/static/css/quay.css b/static/css/quay.css
index 33256d4b0..390ff23f8 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -1538,14 +1538,6 @@ p.editable:hover i {
   cursor: pointer;
 }
 
-.copy-box-element .hovering {
-   position: absolute;
-   right: 0px;
-   top: 40px;
-   pointer-events: none;
-   z-index: 100;
-}
-
 .copy-box-element input {
   background-color: white !important;
 }
@@ -1553,27 +1545,37 @@ p.editable:hover i {
 .clipboard-copied-message {
    font-size: 0.8em;
    display: inline-block;
-   margin-right: 10px;
 
    background: black;
    color: white;
    padding: 6px;
    border-radius: 4px;
+
+   position: absolute;
+   right: 6px;
+   top: 4px;
+   pointer-events: none;
+   z-index: 100;
+
+   white-space: nowrap;
+   height: 27px;
+   overflow: hidden;
 }
 
 .clipboard-copied-message {
-    -webkit-animation: fadeOut 4s ease-in-out 0s 1 forwards;
-    -moz-animation: fadeOut 4s ease-in-out 0s 1 forwards;
-    -ms-animation: fadeOut 4s ease-in-out 0s 1 forwards;
-    -o-animation: fadeOut 4s ease-in-out 0s 1 forwards;
-    animation: fadeOut 4s ease-in-out 0s 1 forward;
+    -webkit-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
+    -moz-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
+    -ms-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
+    -o-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
+    animation: fadeOutSlide 2s ease-in-out 0s 1 forward;
+    animation-delay: 1s;
 }
 
-@-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
-@-moz-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
-@-ms-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
-@-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
-@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-webkit-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
+@-moz-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
+@-ms-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
+@-o-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
+@keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
 
 .repo .settings-cog {
   margin-left: 20px;
diff --git a/static/directives/copy-box.html b/static/directives/copy-box.html
index 48685daf4..758be3ee3 100644
--- a/static/directives/copy-box.html
+++ b/static/directives/copy-box.html
@@ -12,7 +12,7 @@
     </div>
   </div>
 
-  <div class="clipboard-copied-message" ng-class="hoveringMessage ? 'hovering' : ''" style="display: none">
+  <div class="clipboard-copied-message" style="display: none">
     Copied to clipboard
   </div>
 </div>
diff --git a/static/directives/repo-view/repo-panel-info.html b/static/directives/repo-view/repo-panel-info.html
index a5b37f4a0..cb02fe509 100644
--- a/static/directives/repo-view/repo-panel-info.html
+++ b/static/directives/repo-view/repo-panel-info.html
@@ -26,7 +26,7 @@
     <div class="col-sm-7 builds-list" ng-if="!Features.BUILD_SUPPORT">
       <div class="right-pull-controls" style="width: 100%">
         <div>Pull this container with the following Docker command:</div>
-        <div class="copy-box" hovering-message="true" value="pullCommand"></div>
+        <div class="copy-box" value="pullCommand"></div>
       </div>
     </div>
 
@@ -74,7 +74,7 @@
       <td style="width: 400px;" class="hidden-xs hidden-sm" ng-if="Features.BUILD_SUPPORT">
         <div class="right-pull-controls">
           <div>Pull this container with the following Docker command:</div>
-          <div class="copy-box" hovering-message="true" value="pullCommand"></div>
+          <div class="copy-box" value="pullCommand"></div>
         </div>
       </td>
     </tr>
diff --git a/static/directives/repo-view/repo-panel-settings.html b/static/directives/repo-view/repo-panel-settings.html
index 0c97bf1cd..a0055648b 100644
--- a/static/directives/repo-view/repo-panel-settings.html
+++ b/static/directives/repo-view/repo-panel-settings.html
@@ -110,19 +110,19 @@
             <tr>
               <td>Image (SVG):</td>
               <td>
-                <div class="copy-box" hovering-message="true" value="getBadgeFormat('svg', repository)"></div>
+                <div class="copy-box" value="getBadgeFormat('svg', repository)"></div>
               </td>
             </tr>
             <tr>
               <td>Markdown:</td>
               <td>
-                <div class="copy-box" hovering-message="true" value="getBadgeFormat('md', repository)"></div>
+                <div class="copy-box" value="getBadgeFormat('md', repository)"></div>
               </td>
             </tr>
             <tr>
               <td>AsciiDoc:</td>
               <td>
-                <div class="copy-box" hovering-message="true" value="getBadgeFormat('asciidoc', repository)"></div>
+                <div class="copy-box" value="getBadgeFormat('asciidoc', repository)"></div>
               </td>
             </tr>
           </table>
diff --git a/static/js/directives/ui/copy-box.js b/static/js/directives/ui/copy-box.js
index 63cb69cb9..94689f412 100644
--- a/static/js/directives/ui/copy-box.js
+++ b/static/js/directives/ui/copy-box.js
@@ -10,7 +10,6 @@ angular.module('quay').directive('copyBox', function () {
     restrict: 'C',
     scope: {
       'value': '=value',
-      'hoveringMessage': '=hoveringMessage',
     },
     controller: function($scope, $element, $rootScope) {
       $scope.disabled = false;
diff --git a/static/js/directives/ui/manifest-link/manifest-link.component.html b/static/js/directives/ui/manifest-link/manifest-link.component.html
index af5400a87..d14fc48fd 100644
--- a/static/js/directives/ui/manifest-link/manifest-link.component.html
+++ b/static/js/directives/ui/manifest-link/manifest-link.component.html
@@ -26,7 +26,7 @@
             <h4 class="modal-title"><span ng-if="$ctrl.hasSHA256($ctrl.manifestDigest)">Manifest SHA256</span><span ng-if="!$ctrl.hasSHA256($ctrl.manifestDigest)">V1 ID</span></h4>
             </div>
             <div class="modal-body">
-            <div class="copy-box" hovering-message="true" value="$ctrl.hasSHA256($ctrl.manifestDigest) ? $ctrl.manifestDigest : $ctrl.imageId"></div>            
+            <div class="copy-box" value="$ctrl.hasSHA256($ctrl.manifestDigest) ? $ctrl.manifestDigest : $ctrl.imageId"></div>            
             </div>
             <div class="modal-footer" ng-show="!working">
             <button type="button" class="btn btn-default" ng-click="$ctrl.hideCopyBox()">Close</button>
diff --git a/static/partials/manage-application.html b/static/partials/manage-application.html
index 90bb4dc5c..7f608f1f0 100644
--- a/static/partials/manage-application.html
+++ b/static/partials/manage-application.html
@@ -130,7 +130,7 @@
         <cor-tab-pane id="oauth">
           <dl class="dl-horizontal">
             <dt>Client ID:</dt>
-            <dd><div class="copy-box" hovering-message="true" value="application.client_id"></div></dd>
+            <dd><div class="copy-box" value="application.client_id"></div></dd>
           </dl>
           <dl class="dl-horizontal" style="margin-top: 20px;">
             <dt>Client Secret:</dt>