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

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>