diff options
author | Bryce Johnson <bryce@gitlab.com> | 2017-06-12 14:43:21 -0400 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2017-06-29 12:50:45 -0400 |
commit | 81e9c2842574b10d694a8e29665c77fde7fd6ae5 (patch) | |
tree | c7fad475df58553505885b9e2de9b9543bc6d3f3 /app/assets/stylesheets | |
parent | 066a6c8ba8900f0883ee788d901d300850b1ae61 (diff) | |
download | gitlab-ce-81e9c2842574b10d694a8e29665c77fde7fd6ae5.tar.gz |
Render add-diff-note button with server.
This commit moves the rendering of the button back to the server, and
shows/hides it using opacity rather than display. It also removes the
transform applied to the button on hover (scale). Previously, both of these
factors automatically triggered a reflow, which creates a performance
bottleneck on pages with larger DOM size.
MR: !12103
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 10 |
2 files changed, 10 insertions, 8 deletions
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index b58922626fa..631649b363f 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -476,6 +476,7 @@ height: 19px; width: 19px; margin-left: -15px; + z-index: 100; &:hover { .diff-comment-avatar, @@ -491,7 +492,7 @@ transform: translateX((($i * $x-pos) - $x-pos)); &:hover { - transform: translateX((($i * $x-pos) - $x-pos)) scale(1.2); + transform: translateX((($i * $x-pos) - $x-pos)); } } } @@ -542,6 +543,7 @@ height: 19px; padding: 0; transition: transform .1s ease-out; + z-index: 100; svg { position: absolute; @@ -555,10 +557,6 @@ fill: $white-light; } - &:hover { - transform: scale(1.2); - } - &:focus { outline: 0; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 53d5cf2f7bc..303425041df 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -628,8 +628,14 @@ ul.notes { * Line note button on the side of diffs */ +.line_holder .is-over:not(.no-comment-btn) { + .add-diff-note { + opacity: 1; + } +} + .add-diff-note { - display: none; + opacity: 0; margin-top: -2px; border-radius: 50%; background: $white-light; @@ -642,13 +648,11 @@ ul.notes { width: 23px; height: 23px; border: 1px solid $blue-500; - transition: transform .1s ease-in-out; &:hover { background: $blue-500; border-color: $blue-600; color: $white-light; - transform: scale(1.15); } &:active { |