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

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

Browse source 
Fix clipboard copy box to not cause reflow
This commit is contained in:
Joseph Schorr 2018-09-20 11:40:19 -04:00 committed by GitHub
commit 430f91b868
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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>