Commit ad9b2c62 authored by Phil Hughes's avatar Phil Hughes

Merge branch 'gt-fix-styling-for-framework-notes' into 'master'

Fix styling for `app/assets/stylesheets/framework/notes.scss`

Closes #59868

See merge request gitlab-org/gitlab-ce!26877
parents de44f3e1 e68f94cd
...@@ -41,7 +41,7 @@ export default { ...@@ -41,7 +41,7 @@ export default {
<template> <template>
<tr v-if="shouldRender" :class="className" class="notes_holder"> <tr v-if="shouldRender" :class="className" class="notes_holder">
<td class="notes_content" colspan="3"> <td class="notes-content" colspan="3">
<div class="content"> <div class="content">
<diff-discussions <diff-discussions
v-if="line.discussions.length" v-if="line.discussions.length"
......
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
<template> <template>
<tr v-if="shouldRender" :class="className" class="notes_holder"> <tr v-if="shouldRender" :class="className" class="notes_holder">
<td class="notes_content parallel old" colspan="2"> <td class="notes-content parallel old" colspan="2">
<div v-if="shouldRenderDiscussionsOnLeft" class="content"> <div v-if="shouldRenderDiscussionsOnLeft" class="content">
<diff-discussions <diff-discussions
v-if="line.left.discussions.length" v-if="line.left.discussions.length"
...@@ -105,7 +105,7 @@ export default { ...@@ -105,7 +105,7 @@ export default {
line-position="left" line-position="left"
/> />
</td> </td>
<td class="notes_content parallel new" colspan="2"> <td class="notes-content parallel new" colspan="2">
<div v-if="shouldRenderDiscussionsOnRight" class="content"> <div v-if="shouldRenderDiscussionsOnRight" class="content">
<diff-discussions <diff-discussions
v-if="line.right.discussions.length" v-if="line.right.discussions.length"
......
...@@ -398,7 +398,7 @@ export default class MergeRequestTabs { ...@@ -398,7 +398,7 @@ export default class MergeRequestTabs {
const hash = getLocationHash(); const hash = getLocationHash();
const anchor = hash && $container.find(`.note[id="${hash}"]`); const anchor = hash && $container.find(`.note[id="${hash}"]`);
if (anchor && anchor.length > 0) { if (anchor && anchor.length > 0) {
const notesContent = anchor.closest('.notes_content'); const notesContent = anchor.closest('.notes-content');
const lineType = notesContent.hasClass('new') ? 'new' : 'old'; const lineType = notesContent.hasClass('new') ? 'new' : 'old';
Notes.instance.toggleDiffNote({ Notes.instance.toggleDiffNote({
target: anchor, target: anchor,
......
...@@ -506,7 +506,7 @@ export default class Notes { ...@@ -506,7 +506,7 @@ export default class Notes {
var contentContainerClass = var contentContainerClass =
'.' + '.' +
$notes $notes
.closest('.notes_content') .closest('.notes-content')
.attr('class') .attr('class')
.split(' ') .split(' ')
.join('.'); .join('.');
...@@ -1069,14 +1069,14 @@ export default class Notes { ...@@ -1069,14 +1069,14 @@ export default class Notes {
addForm = false; addForm = false;
let lineTypeSelector = ''; let lineTypeSelector = '';
rowCssToAdd = rowCssToAdd =
'<tr class="notes_holder js-temp-notes-holder"><td class="notes_content" colspan="3"><div class="content"></div></td></tr>'; '<tr class="notes_holder js-temp-notes-holder"><td class="notes-content" colspan="3"><div class="content"></div></td></tr>';
// In parallel view, look inside the correct left/right pane // In parallel view, look inside the correct left/right pane
if (this.isParallelView()) { if (this.isParallelView()) {
lineTypeSelector = `.${lineType}`; lineTypeSelector = `.${lineType}`;
rowCssToAdd = rowCssToAdd =
'<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes_content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes_content parallel new"><div class="content"></div></td></tr>'; '<tr class="notes_holder js-temp-notes-holder"><td class="notes_line old"></td><td class="notes-content parallel old"><div class="content"></div></td><td class="notes_line new"></td><td class="notes-content parallel new"><div class="content"></div></td></tr>';
} }
const notesContentSelector = `.notes_content${lineTypeSelector} .content`; const notesContentSelector = `.notes-content${lineTypeSelector} .content`;
let notesContent = targetRow.find(notesContentSelector); let notesContent = targetRow.find(notesContentSelector);
if (hasNotes && showReplyInput) { if (hasNotes && showReplyInput) {
......
...@@ -105,7 +105,7 @@ export default { ...@@ -105,7 +105,7 @@ export default {
</td> </td>
</tr> </tr>
<tr class="notes_holder"> <tr class="notes_holder">
<td class="notes_content" colspan="3"><slot></slot></td> <td class="notes-content" colspan="3"><slot></slot></td>
</tr> </tr>
</table> </table>
</div> </div>
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
} }
// Diff is side by side // Diff is side by side
.notes_content.parallel & { .notes-content.parallel & {
// We hide at double what we normally hide at because // We hide at double what we normally hide at because
// there are two columns of notes // there are two columns of notes
@media (#{$condition}-width: (2 * $breakpoint-width)) { @media (#{$condition}-width: (2 * $breakpoint-width)) {
......
...@@ -68,7 +68,7 @@ $note-form-margin-left: 72px; ...@@ -68,7 +68,7 @@ $note-form-margin-left: 72px;
} }
} }
.notes_content { .notes-content {
border: 0; border: 0;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
} }
...@@ -453,7 +453,7 @@ $note-form-margin-left: 72px; ...@@ -453,7 +453,7 @@ $note-form-margin-left: 72px;
// Merge request notes in diffs // Merge request notes in diffs
// Diff is inline // Diff is inline
.notes_content .note-header .note-headline-light { .notes-content .note-header .note-headline-light {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
...@@ -465,7 +465,7 @@ $note-form-margin-left: 72px; ...@@ -465,7 +465,7 @@ $note-form-margin-left: 72px;
border: 1px solid $border-color; border: 1px solid $border-color;
border-left: 0; border-left: 0;
&.notes_content { &.notes-content {
border-width: 1px 0; border-width: 1px 0;
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
...@@ -512,7 +512,7 @@ $note-form-margin-left: 72px; ...@@ -512,7 +512,7 @@ $note-form-margin-left: 72px;
} }
.commit-diff { .commit-diff {
.notes_content { .notes-content {
background-color: $white-light; background-color: $white-light;
} }
} }
......
...@@ -4,6 +4,6 @@ ...@@ -4,6 +4,6 @@
-# Text diff discussions -# Text diff discussions
- expanded = local_assigns.fetch(:expanded, true) - expanded = local_assigns.fetch(:expanded, true)
%tr.notes_holder{ class: ('hide' unless expanded) } %tr.notes_holder{ class: ('hide' unless expanded) }
%td.notes_content{ colspan: 3 } %td.notes-content{ colspan: 3 }
.content{ class: ('hide' unless expanded) } .content{ class: ('hide' unless expanded) }
= render partial: "discussions/notes", collection: discussions, as: :discussion, locals: { disable_collapse_class: true } = render partial: "discussions/notes", collection: discussions, as: :discussion, locals: { disable_collapse_class: true }
- expanded = [*discussions_left, *discussions_right].any?(&:expanded?) - expanded = [*discussions_left, *discussions_right].any?(&:expanded?)
%tr.notes_holder{ class: ('hide' unless expanded) } %tr.notes_holder{ class: ('hide' unless expanded) }
- if discussions_left - if discussions_left
%td.notes_content.parallel.old{ colspan: 2 } %td.notes-content.parallel.old{ colspan: 2 }
.content{ class: ('hide' unless discussions_left.any?(&:expanded?)) } .content{ class: ('hide' unless discussions_left.any?(&:expanded?)) }
= render partial: "discussions/notes", collection: discussions_left, as: :discussion, line_type: 'old', locals: { disable_collapse_class: true } = render partial: "discussions/notes", collection: discussions_left, as: :discussion, line_type: 'old', locals: { disable_collapse_class: true }
- else - else
%td.notes_content.parallel.old{ colspan: 2 } %td.notes-content.parallel.old{ colspan: 2 }
.content .content
- if discussions_right - if discussions_right
%td.notes_content.parallel.new{ colspan: 2 } %td.notes-content.parallel.new{ colspan: 2 }
.content{ class: ('hide' unless discussions_right.any?(&:expanded?)) } .content{ class: ('hide' unless discussions_right.any?(&:expanded?)) }
= render partial: "discussions/notes", collection: discussions_right, as: :discussion, line_type: 'new', locals: { disable_collapse_class: true } = render partial: "discussions/notes", collection: discussions_right, as: :discussion, line_type: 'new', locals: { disable_collapse_class: true }
- else - else
%td.notes_content.parallel.new{ colspan: 2 } %td.notes-content.parallel.new{ colspan: 2 }
.content .content
...@@ -138,7 +138,7 @@ describe "User adds a comment on a commit", :js do ...@@ -138,7 +138,7 @@ describe "User adds a comment on a commit", :js do
click_button("Comment") click_button("Comment")
end end
page.within(".diff-file:nth-of-type(1) .notes_content.parallel.old") do page.within(".diff-file:nth-of-type(1) .notes-content.parallel.old") do
expect(page).to have_content(old_comment) expect(page).to have_content(old_comment)
end end
...@@ -152,7 +152,7 @@ describe "User adds a comment on a commit", :js do ...@@ -152,7 +152,7 @@ describe "User adds a comment on a commit", :js do
wait_for_requests wait_for_requests
expect(all(".diff-file:nth-of-type(1) .notes_content.parallel.new")[1].text).to have_content(new_comment) expect(all(".diff-file:nth-of-type(1) .notes-content.parallel.new")[1].text).to have_content(new_comment)
end end
end end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment