Merge pull request #3252 from quay/joseph.schorr/QUAY-1004/fix-clipboard-copy

Fix clipboard copy box to not cause reflow

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;
+    -webkit-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
-    -moz-animation: fadeOut 4s ease-in-out 0s 1 forwards;
+    -moz-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
-    -ms-animation: fadeOut 4s ease-in-out 0s 1 forwards;
+    -ms-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
-    -o-animation: fadeOut 4s ease-in-out 0s 1 forwards;
+    -o-animation: fadeOutSlide 2s ease-in-out 0s 1 forwards;
-    animation: fadeOut 4s ease-in-out 0s 1 forward;
+    animation: fadeOutSlide 2s ease-in-out 0s 1 forward;
+    animation-delay: 1s;
 }
 
-@-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-webkit-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
-@-moz-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-moz-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
-@-ms-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-ms-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
-@-o-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@-o-keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
-@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes fadeOutSlide { from { opacity: 1; width: 105px; } to { opacity: 0; width: 0px; } }
 
 .repo .settings-cog {
   margin-left: 20px;

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>

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>

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>

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;

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>

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>