diff options
author | Phil Hughes <me@iamphill.com> | 2017-02-22 17:30:17 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-02-27 10:08:02 +0000 |
commit | cc41ec979513245a9cc8d7e8b8327efdfa12d2c7 (patch) | |
tree | c8015730df8a48a95cf20c11b078a0dce92ab3e0 /app/assets/stylesheets/pages/notes.scss | |
parent | 8b855eaf40fcb32d37c4cd2c2dbe8ff8be29c88c (diff) | |
download | gitlab-ce-cc41ec979513245a9cc8d7e8b8327efdfa12d2c7.tar.gz |
Improved the diff comment button UX
It now shows the line will be commenting on my highlight the line number cells with a lighter color. The button has also been made smaller, it was previously way over the top & took over a lot more space than it should of done
Closes #27543
Diffstat (limited to 'app/assets/stylesheets/pages/notes.scss')
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 49 |
1 files changed, 24 insertions, 25 deletions
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index aa130a1abb0..692925c8338 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -452,36 +452,35 @@ ul.notes { * Line note button on the side of diffs */ -.diff-file tr.line_holder { - @mixin show-add-diff-note { - display: inline-block; - } +.add-diff-note { + display: none; + margin-top: -2px; + border-radius: 50%; + background: $white-light; + padding: 2px 5px; + font-size: 12px; + color: $gl-link-color; + margin-left: -55px; + position: absolute; + z-index: 10; + width: 23px; + height: 23px; + border: 1px solid $border-color; - .add-diff-note { - margin-top: -8px; - border-radius: 40px; - background: $white-light; - padding: 4px; - font-size: 16px; - color: $gl-link-color; - margin-left: -56px; - position: absolute; - z-index: 10; - width: 32px; - // "hide" it by default - display: none; + &:hover { + background: $gl-info; + color: $white-light; + } - &:hover { - background: $gl-info; - color: $white-light; - @include show-add-diff-note; - } + &:active { + outline: 0; } +} - // "show" the icon also if we just hover somewhere over the line - &:hover > td { +.diff-file { + .is-over { .add-diff-note { - @include show-add-diff-note; + display: inline-block; } } } |