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