vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix clipboard copy box to not cause reflow

Browse source 
Instead, we now put the "Copied" message inline in the box and have it both fade and slide rightward away
This commit is contained in:
Joseph Schorr 2018-09-18 14:17:33 -04:00
parent 8e643ce5d9
commit 5cde147426
7 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
static/css/quay.css
View file

@ -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;

2
static/directives/copy-box.html
View file

@ -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>

4
static/directives/repo-view/repo-panel-info.html
View file

@ -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>

6
static/directives/repo-view/repo-panel-settings.html
View file

@ -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>

1
static/js/directives/ui/copy-box.js
View file

@ -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;

2
static/js/directives/ui/manifest-link/manifest-link.component.html
View file

@ -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>

2
static/partials/manage-application.html
View file

@ -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>