diff options
Diffstat (limited to 'app/assets/stylesheets/pages/diff.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 225 |
1 files changed, 200 insertions, 25 deletions
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 8cbf0ec6180..faa3d1fb4d5 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -77,6 +77,18 @@ word-wrap: break-word; } } + + &.left-side-selected { + td.line_content.parallel.right-side { + @include user-select(none); + } + } + + &.right-side-selected { + td.line_content.parallel.left-side { + @include user-select(none); + } + } } tr.line_holder.parallel { @@ -285,6 +297,7 @@ .drag-track { display: block; position: absolute; + top: 0; left: 12px; height: 10px; width: 276px; @@ -367,6 +380,10 @@ } } } + + .line_content { + white-space: pre-wrap; + } } .file-content .diff-file { @@ -374,10 +391,6 @@ border: none; } -.diff-file .line_content { - white-space: pre-wrap; -} - .diff-wrap-lines .line_content { white-space: pre-wrap; } @@ -451,7 +464,7 @@ } .files { - margin-top: -1px; + margin-top: 1px; .diff-file:last-child { margin-bottom: 0; @@ -535,21 +548,23 @@ } .diff-notes-collapse { - position: relative; - width: 19px; - height: 19px; + width: 24px; + height: 24px; + border-radius: 50%; padding: 0; transition: transform .1s ease-out; z-index: 100; + .collapse-icon { + height: 50%; + width: 100%; + } + svg { - position: absolute; - left: 50%; - top: 50%; - margin-left: -5.5px; - margin-top: -5.5px; + vertical-align: middle; } + .collapse-icon, path { fill: $white-light; } @@ -578,17 +593,12 @@ @media (min-width: $screen-sm-min) { position: -webkit-sticky; position: sticky; - top: 34px; + top: 24px; background-color: $white-light; z-index: 190; &.diff-files-changed-merge-request { - top: 84px; - } - - + .files, - + .alert { - margin-top: 1px; + top: 76px; } &:not(.is-stuck) .diff-stats-additions-deletions-collapsed { @@ -605,11 +615,14 @@ .inline-parallel-buttons { display: none; } + } + } +} - + .files, - + .alert { - margin-top: 30px; - } +@media (min-width: $screen-sm-min) { + .with-performance-bar { + .diff-files-changed.diff-files-changed-merge-request { + top: 76px + $performance-bar-height; } } } @@ -626,8 +639,170 @@ padding-top: 8px; padding-bottom: 8px; } + + .diff-changed-file { + display: flex; + align-items: center; + } } .diff-file-changes-path { - @include str-truncated(78%); + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.note-container { + background-color: $gray-light; + border-top: 1px solid $white-normal; + + // double jagged line divider + .discussion-notes + .discussion-notes::before, + .discussion-notes + .discussion-form::before { + content: ''; + position: relative; + display: block; + width: 100%; + height: 10px; + background-color: $white-light; + background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%), + linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%), + linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%), + linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%); + background-position: 5px 5px,0 5px,0 5px,5px 5px; + background-size: 10px 10px; + background-repeat: repeat; + } + + .notes { + position: relative; + } + + .diff-notes-collapse { + position: absolute; + left: -12px; + } +} + +.diff-file .note-container > .new-note, +.note-container .discussion-notes { + margin-left: 100px; + border-left: 1px solid $white-normal; +} + +.notes.active { + .diff-file .note-container > .new-note, + .note-container .discussion-notes { + // Override our margin and border (set for diff tab) + // when user is on the discussion tab for MR + margin-left: inherit; + border-left: inherit; + } +} + +.files:not([data-can-create-note]) .frame { + cursor: auto; +} + +.frame.click-to-comment { + position: relative; + cursor: image-url('icon_image_comment.svg') + $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; + + // Retina cursor + cursor: -webkit-image-set(image-url('icon_image_comment.svg') 1x, image-url('icon_image_comment@2x.svg') 2x) + $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; + + .comment-indicator { + position: absolute; + padding: 0; + width: (2px * $image-comment-cursor-left-offset); + height: (1px * $image-comment-cursor-top-offset); + // center the indicator to match the top left click region + margin-top: (-1px * $image-comment-cursor-top-offset) + 2; + margin-left: (-1px * $image-comment-cursor-left-offset) + 1; + + svg { + width: 100%; + height: 100%; + } + + &:focus { + outline: none; + } + } +} + +.frame .badge, +.image-diff-avatar-link .badge, +.notes > .badge { + position: absolute; + background-color: $blue-400; + color: $white-light; + border: $white-light 1px solid; + min-height: $gl-padding; + padding: 5px 8px; + border-radius: 12px; + + &:focus { + outline: none; + } +} + +.frame .badge, +.frame .image-comment-badge { + // Center align badges on the frame + transform: translate3d(-50%, -50%, 0); +} + +.image-comment-badge { + @include btn-comment-icon; + position: absolute; + + &.inverted { + border-color: $white-light; + } +} + +.image-diff-avatar-link { + position: relative; + + .badge, + .image-comment-badge { + top: 25px; + right: 8px; + } +} + +.notes > .badge { + display: none; + left: -13px; +} + +.discussion-notes { + min-height: 35px; + + &:first-child { + // First child does not have the jagged borders + min-height: 25px; + } + + &.collapsed { + background-color: $white-light; + + .diff-notes-collapse, + .note, + .discussion-reply-holder, { + display: none; + } + + .notes > .badge { + display: block; + } + } +} + +.discussion-body .image .frame { + position: relative; } |