Commit 330af830 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch 'dm-md-css-ee' into 'master'

[EE] Untangle Markdown/Diffs/Notes CSS mess

See merge request gitlab-org/gitlab-ee!10392
parents ca689fa3 ec6e16b8
......@@ -10,10 +10,10 @@ export class CopyAsGFM {
const isIOS = /\b(iPad|iPhone|iPod)(?=;)/.test(userAgent);
if (isIOS) return;
$(document).on('copy', '.md, .wiki', e => {
$(document).on('copy', '.md', e => {
CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformGFMSelection);
});
$(document).on('copy', 'pre.code.highlight, .diff-content .line_content', e => {
$(document).on('copy', 'pre.code.highlight, table.code td.line_content', e => {
CopyAsGFM.copyAsGFM(e, CopyAsGFM.transformCodeSelection);
});
$(document).on('paste', '.js-gfm-input', CopyAsGFM.pasteGFM);
......@@ -99,7 +99,7 @@ export class CopyAsGFM {
}
static transformGFMSelection(documentFragment) {
const gfmElements = documentFragment.querySelectorAll('.md, .wiki');
const gfmElements = documentFragment.querySelectorAll('.md');
switch (gfmElements.length) {
case 0: {
return documentFragment;
......
......@@ -37,7 +37,7 @@ export default class ShortcutsIssuable extends Shortcuts {
}
// Sanity check: Make sure the selected text comes from a discussion : it can either contain a message...
let foundMessage = !!documentFragment.querySelector('.md, .wiki');
let foundMessage = !!documentFragment.querySelector('.md');
// ... Or come from a message
if (!foundMessage) {
......@@ -46,7 +46,7 @@ export default class ShortcutsIssuable extends Shortcuts {
let node = e;
do {
// Text nodes don't define the `matches` method
if (node.matches && node.matches('.md, .wiki')) {
if (node.matches && node.matches('.md')) {
foundMessage = true;
}
node = node.parentNode;
......
......@@ -38,36 +38,34 @@ export default {
</script>
<template>
<div
<table
:class="$options.userColorScheme"
:data-commit-id="commitId"
class="code diff-wrap-lines js-syntax-highlight text-file"
>
<table>
<tbody>
<template v-for="(line, index) in diffLines">
<parallel-diff-table-row
:key="line.line_code"
:file-hash="diffFile.file_hash"
:context-lines-path="diffFile.context_lines_path"
:line="line"
:is-bottom="index + 1 === diffLinesLength"
/>
<parallel-diff-comment-row
:key="`dcr-${line.line_code || index}`"
:line="line"
:diff-file-hash="diffFile.file_hash"
:line-index="index"
:help-page-path="helpPagePath"
/>
<parallel-draft-comment-row
v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
:key="`drafts-${index}`"
:line="line"
:diff-file-content-sha="diffFile.file_hash"
/>
</template>
</tbody>
</table>
</div>
<tbody>
<template v-for="(line, index) in diffLines">
<parallel-diff-table-row
:key="line.line_code"
:file-hash="diffFile.file_hash"
:context-lines-path="diffFile.context_lines_path"
:line="line"
:is-bottom="index + 1 === diffLinesLength"
/>
<parallel-diff-comment-row
:key="`dcr-${line.line_code || index}`"
:line="line"
:diff-file-hash="diffFile.file_hash"
:line-index="index"
:help-page-path="helpPagePath"
/>
<parallel-draft-comment-row
v-if="shouldRenderParallelDraftRow(diffFile.file_hash, line)"
:key="`drafts-${index}`"
:line="line"
:diff-file-content-sha="diffFile.file_hash"
/>
</template>
</tbody>
</table>
</template>
......@@ -140,7 +140,7 @@ export default {
'issue-realtime-pre-pulse': preAnimation,
'issue-realtime-trigger-pulse': pulseAnimation,
}"
class="wiki"
class="md"
v-html="descriptionHtml"
></div>
<textarea
......
......@@ -16,7 +16,7 @@ import utilsMixin from '../mixins/line_conflict_utils';
},
},
template: `
<table>
<table class="diff-wrap-lines code js-syntax-highlight">
<tr class="line_holder parallel" v-for="section in file.parallelLines">
<template v-for="line in section">
<td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td>
......
......@@ -72,8 +72,8 @@ export default {
:can-current-user-fork="false"
:expanded="!discussion.diff_file.viewer.collapsed"
/>
<div v-if="isTextFile" :class="$options.userColorSchemeClass" class="diff-content code">
<table>
<div v-if="isTextFile" class="diff-content">
<table class="code js-syntax-highlight" :class="$options.userColorSchemeClass">
<template v-if="hasTruncatedDiffLines">
<tr
v-for="line in discussion.truncated_diff_lines"
......@@ -81,8 +81,8 @@ export default {
:key="line.line_code"
class="line_holder"
>
<td class="diff-line-num old_line">{{ line.old_line }}</td>
<td class="diff-line-num new_line">{{ line.new_line }}</td>
<td :class="line.type" class="diff-line-num old_line">{{ line.old_line }}</td>
<td :class="line.type" class="diff-line-num new_line">{{ line.new_line }}</td>
<td :class="line.type" class="line_content" v-html="line.rich_text"></td>
</tr>
</template>
......
......@@ -101,7 +101,6 @@ export default {
<div ref="note-body" :class="{ 'js-task-list-container': canEdit }" class="note-body">
<suggestions
v-if="hasSuggestion && !isEditing"
class="note-text md"
:suggestions="note.suggestions"
:note-html="note.note_html"
:line-type="lineType"
......
......@@ -78,8 +78,8 @@ export default {
</script>
<template>
<div ref="markdown-preview" class="md md-previewer">
<div ref="markdown-preview" class="md-previewer">
<gl-skeleton-loading v-if="isLoading" />
<div v-else v-html="previewContent"></div>
<div v-else class="md" v-html="previewContent"></div>
</div>
</template>
......@@ -215,7 +215,7 @@ export default {
<div
v-show="previewMarkdown"
ref="markdown-preview"
class="md-preview js-vue-md-preview md md-preview-holder"
class="js-vue-md-preview md-preview-holder"
>
<suggestions
v-if="hasSuggestion"
......@@ -233,7 +233,7 @@ export default {
<div
v-show="previewMarkdown"
ref="markdown-preview"
class="md-preview js-vue-md-preview md md-preview-holder"
class="js-vue-md-preview md md-preview-holder"
v-html="markdownPreview"
></div>
</template>
......
......@@ -130,6 +130,6 @@ export default {
<template>
<div>
<div class="flash-container js-suggestions-flash"></div>
<div v-show="isRendered" ref="container" v-html="noteHtml"></div>
<div v-show="isRendered" ref="container" class="md" v-html="noteHtml"></div>
</div>
</template>
......@@ -57,7 +57,7 @@ export default {
</div>
</div>
<div class="note-body">
<div class="note-text">
<div class="note-text md">
<p>{{ note.body }}</p>
</div>
</div>
......
......@@ -93,7 +93,7 @@ export default {
'system-note-commit-list': hasMoreCommits,
'hide-shade': expanded,
}"
class="note-text"
class="note-text md"
v-html="note.note_html"
></div>
<div v-if="hasMoreCommits" class="flex-list">
......
......@@ -25,10 +25,6 @@
}
}
table {
@extend .table;
}
.file-title {
position: relative;
background-color: $gray-light;
......@@ -123,7 +119,7 @@
}
}
&.wiki {
&.md {
padding: $gl-padding;
@include media-breakpoint-up(md) {
......
......@@ -135,30 +135,6 @@
width: 100%;
}
.md:not(.use-csslab) {
&.md-preview-holder {
// Reset ul style types since we're nested inside a ul already
@include bulleted-list;
}
// On diffs code should wrap nicely and not overflow
code {
white-space: pre-wrap;
word-break: keep-all;
}
hr {
// Darken 'whitesmoke' a bit to make it more visible in note bodies
border-color: darken($gray-normal, 8%);
margin: 10px 0;
}
table {
@include markdown-table;
}
}
.toolbar-btn {
float: left;
padding: 0 7px;
......
......@@ -21,26 +21,6 @@
margin-right: auto;
}
/*
* Mixin for markdown tables
*/
@mixin markdown-table {
width: auto;
display: block;
overflow-x: auto;
border: 0;
tr {
th {
border-bottom: solid 2px $gl-gray-200;
}
td {
border-color: $gl-gray-200;
}
}
}
/*
* Base mixin for lists in GitLab
*/
......@@ -93,20 +73,6 @@
}
}
@mixin bulleted-list {
> ul {
list-style-type: disc;
ul {
list-style-type: circle;
ul {
list-style-type: square;
}
}
}
}
@mixin webkit-prefix($property, $value) {
#{'-webkit-' + $property}: $value;
#{$property}: $value;
......
@mixin md-typography {
/**
* Apply Markdown typography
*
*/
.md:not(.use-csslab) {
color: $gl-text-color;
word-wrap: break-word;
......@@ -6,8 +10,35 @@
text-align: initial;
}
*:first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
p {
color: $gl-text-color;
margin: 0 0 16px;
> code {
font-weight: inherit;
}
a:not(.no-attachment-icon) img {
// Remove bottom padding because
// <p> already has $gl-padding bottom
margin-bottom: 0;
}
}
a {
color: $blue-600;
> code {
color: $blue-600;
}
}
img:not(.emoji) {
......@@ -28,18 +59,12 @@
max-width: 100%;
}
p a:not(.no-attachment-icon) img {
// Remove bottom padding because
// <p> already has $gl-padding bottom
margin-bottom: 0;
}
*:first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
&:not(.md-file) img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
margin: 5px 0;
// Ensure that image does not exceed viewport
max-height: calc(100vh - 100px);
}
// Single code lines should wrap
......@@ -47,6 +72,7 @@
font-family: $monospace-font;
white-space: pre-wrap;
word-wrap: normal;
word-break: keep-all;
}
kbd {
......@@ -131,17 +157,25 @@
}
}
p {
color: $gl-text-color;
margin: 0 0 16px;
hr {
// Darken 'whitesmoke' a bit to make it more visible in note bodies
border-color: darken($gray-normal, 8%);
margin: 10px 0;
}
table {
table:not(.code) {
@extend .table;
@extend .table-bordered;
margin: 16px 0;
color: $gl-text-color;
border: 0;
width: auto;
display: block;
overflow-x: auto;
tbody {
background-color: $white-light;
}
tr {
th {
......@@ -179,14 +213,6 @@
}
}
p > code {
font-weight: inherit;
}
a > code {
color: $blue-600;
}
dd {
margin-left: $gl-padding;
}
......@@ -202,6 +228,18 @@
margin: 3px 28px 3px 0 !important;
}
> ul {
list-style-type: disc;
ul {
list-style-type: circle;
ul {
list-style-type: square;
}
}
}
li {
line-height: 1.6em;
margin-left: 25px;
......@@ -245,11 +283,11 @@
&:hover::before {
text-decoration: none;
}
}
a.no-attachment-icon {
&::before {
display: none;
&.no-attachment-icon {
&::before {
display: none;
}
}
}
......@@ -367,28 +405,6 @@ code {
@extend .ref-name;
}
/**
* Apply Markdown typography
*
*/
.wiki:not(.use-csslab) {
@include md-typography;
}
.md:not(.use-csslab) {
@include md-typography;
&:not(.wiki) {
img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
margin: 5px 0;
// Ensure that image does not exceed viewport
max-height: calc(100vh - 100px);
}
}
}
/**
* Textareas intended for GFM
*
......
......@@ -89,138 +89,6 @@
}
}
.note-text {
table {
font-family: $font-family-sans-serif;
}
}
table {
width: 100%;
font-family: $monospace-font;
border: 0;
border-collapse: separate;
margin: 0;
padding: 0;
table-layout: fixed;
border-radius: 0 0 $border-radius-default $border-radius-default;
.diff-line-num {
width: 50px;
position: relative;
a {
transition: none;
}
}
.line_holder td {
line-height: $code-line-height;
font-size: $code-font-size;
vertical-align: top;
&.noteable_line {
position: relative;
}
span {
white-space: pre-wrap;
&.context-cell {
display: inline-block;
width: 100%;
height: 100%;
}
}
.line {
word-wrap: break-word;
}
}
&.left-side-selected {
td.line_content.parallel.right-side {
user-select: none;
}
}
&.right-side-selected {
td.line_content.parallel.left-side {
user-select: none;
}
}
}
tr.line_holder.parallel {
td.line_content.parallel {
width: 46%;
}
.add-diff-note {
margin-left: -55px;
}
}
.old_line,
.new_line {
user-select: none;
margin: 0;
border: 0;
padding: 0 5px;
border-right: 1px solid;
text-align: right;
min-width: 35px;
max-width: 50px;
width: 35px;
a {
float: left;
width: 35px;
font-weight: $gl-font-weight-normal;
&[disabled] {
cursor: default;
&:hover,
&:active {
text-decoration: none;
}
}
}
}
.line_content {
display: block;
margin: 0;
padding: 0 1.5em;
border: 0;
position: relative;
&.parallel {
display: table-cell;
span {
word-break: break-all;
}
}
&.old {
&::before {
content: '-';
position: absolute;
left: 0.5em;
}
}
&.new {
&::before {
content: '+';
position: absolute;
left: 0.5em;
}
}
}
.diff-loading-error-block {
padding: $gl-padding * 2 $gl-padding;
text-align: center;
......@@ -443,10 +311,6 @@
}
}
.line_content {
white-space: pre-wrap;
}
.diff-file-container {
.frame.deleted {
border: 1px solid $deleted;
......@@ -508,6 +372,114 @@
}
}
table.code {
width: 100%;
font-family: $monospace-font;
border: 0;
border-collapse: separate;
margin: 0;
padding: 0;
table-layout: fixed;
border-radius: 0 0 $border-radius-default $border-radius-default;
tr.line_holder td {
line-height: $code-line-height;
font-size: $code-font-size;
vertical-align: top;
span {
white-space: pre-wrap;
&.context-cell {
display: inline-block;
width: 100%;
height: 100%;
}
&.line {
word-wrap: break-word;
}
}
&.diff-line-num {
user-select: none;
margin: 0;
border: 0;
padding: 0 10px 0 5px;
border-right: 1px solid;
text-align: right;
width: 50px;
position: relative;
a {
transition: none;
float: left;
width: 100%;
font-weight: $gl-font-weight-normal;
&[disabled] {
cursor: default;
&:hover,
&:active {
text-decoration: none;
}
}
}
&:not(.js-unfold-bottom) a::before {
content: attr(data-linenumber);
}
}
&.line_content {
display: block;
margin: 0;
padding: 0 1.5em;
border: 0;
position: relative;
white-space: pre-wrap;
&.parallel {
display: table-cell;
width: 46%;
span {
word-break: break-all;
}
}
&.old {
&::before {
content: '-';
position: absolute;
left: 0.5em;
}
}
&.new {
&::before {
content: '+';
position: absolute;
left: 0.5em;
}
}
}
}
&.left-side-selected {
td.line_content.parallel.right-side {
user-select: none;
}
}
&.right-side-selected {
td.line_content.parallel.left-side {
user-select: none;
}
}
}
.diff-stats {
align-items: center;
padding: 0 0.25rem;
......@@ -608,16 +580,6 @@
}
}
.file-holder {
.diff-line-num:not(.js-unfold-bottom) {
a {
&::before {
content: attr(data-linenumber);
}
}
}
}
.diff-comment-avatar-holders {
position: absolute;
height: 19px;
......
......@@ -37,12 +37,4 @@
.documentation {
padding: 7px;
// Border around images in the help pages.
img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
margin: 5px;
max-height: calc(100vh - 100px);
}
}
......@@ -72,14 +72,6 @@
height: $gl-padding * 2;
}
// Border around images in issue and MR descriptions.
.description img:not(.emoji) {
border: 1px solid $white-normal;
padding: 5px;
max-height: calc(100vh - 100px);
max-width: 100%;
}
.emoji-block {
padding: 10px 0;
}
......
......@@ -225,8 +225,6 @@ $note-form-margin-left: 72px;
overflow-y: hidden;
.note-text {
// Reset ul style types since we're nested inside a ul already
@include bulleted-list;
word-wrap: break-word;
}
}
......@@ -738,7 +736,7 @@ $note-form-margin-left: 72px;
.add-diff-note {
@include btn-comment-icon;
opacity: 0;
margin-left: -55px;
margin-left: -50px;
position: absolute;
top: 50%;
transform: translateY(-50%);
......
......@@ -179,9 +179,3 @@ ul.wiki-pages-list.content-list {
}
}
}
.wiki:not(.use-csslab) {
table {
@include markdown-table;
}
}
.wiki h1,
.wiki h2,
.wiki h3,
.wiki h4,
.wiki h5,
.wiki h6 {
.md h1,
.md h2,
.md h3,
.md h4,
.md h5,
.md h6 {
margin-top: 17px;
}
.wiki h1 {
.md h1 {
font-size: 30px;
}
.wiki h2 {
.md h2 {
font-size: 22px;
}
.wiki h3 {
.md h3 {
font-size: 18px;
font-weight: 600;
}
......
......@@ -11,8 +11,8 @@
= render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false
- if diff_file.text?
.diff-content.code.js-syntax-highlight
%table
.diff-content
%table.code.js-syntax-highlight
- if expanded
- discussions = { discussion.original_line_code => [discussion] }
= render partial: "projects/diffs/line",
......
......@@ -29,7 +29,7 @@
.row.prepend-top-default
.col-md-8
.documentation-index.wiki
.documentation-index.md
= markdown(@help_index)
.col-md-4
.card
......
- page_title 'Instance Configuration'
.wiki.documentation
.documentation.md
%h1 Instance Configuration
%p
......
- page_title @path.split("/").reverse.map(&:humanize)
.documentation.wiki.prepend-top-default
.documentation.md.prepend-top-default
= markdown @markdown
......@@ -513,7 +513,7 @@
%h2#markdown Markdown
%h4
%code .md or .wiki and others
%code .md
Markdown rendering has a bit different css and presented in next UI elements:
......
......@@ -22,7 +22,7 @@
.md-write-holder
= yield
.md.md-preview-holder.js-md-preview.hide.md-preview{ data: { url: url } }
.md.md-preview-holder.js-md-preview.hide{ data: { url: url } }
.referenced-commands.hide
- if referenced_users
......
- if @wiki_home.present?
%div{ class: container_class }
.prepend-top-default.append-bottom-default
.wiki
= render_wiki_content(@wiki_home)
.md.md-file.prepend-top-default.append-bottom-default
= render_wiki_content(@wiki_home)
- else
- can_create_wiki = can?(current_user, :create_wiki, @project)
.landing{ class: [('row-content-block row p-0 align-items-center' if can_create_wiki), ('content-block' unless can_create_wiki)] }
......
......@@ -15,14 +15,14 @@
%a{ href: "#", data: { linenumber: line_number_old }, disabled: true }
%td.new_line.diff-line-num{ data: { linenumber: line_number_new } }
%a{ href: "#", data: { linenumber: line_number_new }, disabled: true }
%td.line_content.noteable_line{ class: line_class }= line
%td.line_content{ class: line_class }= line
- when :parallel
%td.old_line.diff-line-num{ data: { linenumber: line_number_old } }
%a{ href: "##{line_number_old}", data: { linenumber: line_number_old }, disabled: true }
%td.line_content.noteable_line.left-side{ class: line_class }= line
%td.line_content.left-side{ class: line_class }= line
%td.new_line.diff-line-num{ data: { linenumber: line_number_new } }
%a{ href: "##{line_number_new}", data: { linenumber: line_number_new }, disabled: true }
%td.line_content.noteable_line.right-side{ class: line_class }= line
%td.line_content.right-side{ class: line_class }= line
- if @form.unfold? && @form.bottom? && @form.to < @blob.lines.size
%tr.line_holder{ id: @form.to, class: line_class }
......
.diff-file.file-holder
.diff-content
- if markup?(@blob.name)
.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= markup(@blob.name, @content)
- else
.file-content.code.js-syntax-highlight
- unless @diff_lines.empty?
%table.text-file
- @diff_lines.each do |line|
%tr.line_holder{ class: "#{line.type}" }
- if line.type == "match"
%td.old_line.diff-line-num= "..."
%td.new_line.diff-line-num= "..."
%td.line_content.match= line.text
- else
%td.old_line.diff-line-num
%td.new_line.diff-line-num
%td.line_content{ class: "#{line.type}" }= diff_line_content(line.text)
- else
.nothing-here-block No changes.
- if markup?(@blob.name)
.file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= markup(@blob.name, @content)
- else
.diff-file
.diff-content
- unless @diff_lines.empty?
%table.text-file.code.js-syntax-highlight
- @diff_lines.each do |line|
%tr.line_holder{ class: line.type }
- if line.type == "match"
%td.old_line.diff-line-num.match= "..."
%td.new_line.diff-line-num.match= "..."
%td.line_content.match= line.text
- else
%td.old_line.diff-line-num{ class: line.type }
%td.new_line.diff-line-num{ class: line.type }
%td.line_content{ class: line.type }= diff_line_content(line.text)
- else
.nothing-here-block No changes.
- blob = viewer.blob
- context = blob.respond_to?(:rendered_markup) ? { rendered: blob.rendered_markup } : {}
.file-content.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
.file-content.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= markup(blob.name, blob.data, context)
......@@ -30,7 +30,7 @@
= link_text
- else
%a{ href: "##{line_code}", data: { linenumber: link_text } }
%td.line_content.noteable_line{ class: type }<
%td.line_content{ class: type }<
- if email
%pre= line.rich_text
- else
......
/ Side-by-side diff view
.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
%table
.text-file{ data: diff_view_data }
%table.diff-wrap-lines.code.js-syntax-highlight
- diff_file.parallel_diff_lines.each do |line|
- left = line[:left]
- right = line[:right]
......@@ -23,7 +23,7 @@
- discussion_left = discussions_left.try(:first)
- if discussion_left && discussion_left.resolvable?
%diff-note-avatars{ "discussion-id" => discussion_left.id }
%td.line_content.parallel.noteable_line.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.rich_text)
%td.line_content.parallel.left-side{ id: left_line_code, class: left.type }= diff_line_content(left.rich_text)
- else
%td.old_line.diff-line-num.empty-cell
%td.line_content.parallel.left-side
......@@ -44,7 +44,7 @@
- discussion_right = discussions_right.try(:first)
- if discussion_right && discussion_right.resolvable?
%diff-note-avatars{ "discussion-id" => discussion_right.id }
%td.line_content.parallel.noteable_line.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.rich_text)
%td.line_content.parallel.right-side{ id: right_line_code, class: right.type }= diff_line_content(right.rich_text)
- else
%td.old_line.diff-line-num.empty-cell
%td.line_content.parallel.right-side
......
......@@ -72,7 +72,7 @@
%h2.title= markdown_field(@issue, :title)
- if @issue.description.present?
.description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
.wiki= markdown_field(@issue, :description)
.md= markdown_field(@issue, :description)
%textarea.hidden.js-task-list-field= @issue.description
= edited_time_ago_with_tooltip(@issue, placement: 'bottom', html_class: 'issue-edited-ago js-issue-edited-ago')
......
......@@ -5,7 +5,7 @@
%div
- if @merge_request.description.present?
.description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
.wiki
.md
= markdown_field(@merge_request, :description)
%textarea.hidden.js-task-list-field
= @merge_request.description
......
%inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
%table
%table.diff-wrap-lines.code.js-syntax-highlight
%tr.line_holder.diff-inline{ "v-for" => "line in file.inlineLines" }
%td.diff-line-num.new_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
%a {{line.new_line}}
......
......@@ -26,9 +26,9 @@
%strong {{file.filePath}}
= render partial: 'projects/merge_requests/conflicts/file_actions'
.diff-content.diff-wrap-lines
.diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
.file-content{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
= render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
.diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
.file-content{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
%parallel-conflict-lines{ ":file" => "file" }
%div{ "v-show" => "file.resolveMode === 'edit' || file.type === 'text-editor'" }
= render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
......
......@@ -54,9 +54,8 @@
%div
- if @milestone.description.present?
.description
.wiki
= markdown_field(@milestone, :description)
.description.md
= markdown_field(@milestone, :description)
= render_if_exists 'shared/milestones/burndown', milestone: @milestone, project: @project
......
......@@ -20,9 +20,8 @@
%p
= s_("TagsPage|Can't find HEAD commit for this tag")
- if release && release.description.present?
.description.prepend-top-default
.wiki
= markdown_field(release, :description)
.description.md.prepend-top-default
= markdown_field(release, :description)
.row-fixed-content.controls.flex-row
= render 'projects/buttons/download', project: @project, ref: tag.name, pipeline: @tags_pipelines[tag.name]
......
......@@ -39,8 +39,7 @@
.append-bottom-default.prepend-top-default
- if @release.description.present?
.description
.wiki
= markdown_field(@release, :description)
.description.md
= markdown_field(@release, :description)
- else
= s_('TagsPage|This tag has no release notes.')
......@@ -26,7 +26,7 @@
= (s_("WikiHistoricalPage|You can view the %{most_recent_link} or browse the %{history_link}.") % { most_recent_link: most_recent_link, history_link: history_link }).html_safe
.prepend-top-default.append-bottom-default
.wiki.md{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
.md.md-file{ class: ('use-csslab' if Feature.enabled?(:csslab)) }
= render_wiki_content(@page)
= render 'sidebar'
......@@ -18,7 +18,7 @@
%i.fa.fa-file
%strong= snippet.file_name
- if markup?(snippet.file_name)
.file-content.wiki
.file-content.md.md-file
- snippet_chunks.each do |chunk|
- unless chunk[:data].empty?
= markup(snippet.file_name, chunk[:data])
......
......@@ -42,9 +42,8 @@
= markdown_field(milestone, :title)
- if milestone.group_milestone? && milestone.description.present?
%div
.description
.wiki
= markdown_field(milestone, :description)
.description.md
= markdown_field(milestone, :description)
- if milestone.complete?(current_user) && milestone.active?
.alert.alert-success.prepend-top-default
......
......@@ -22,7 +22,7 @@
- if @snippet.description.present?
.description.qa-snippet-description
.wiki
.md
= markdown_field(@snippet, :description)
%textarea.hidden.js-task-list-field
= @snippet.description
......
......@@ -48,7 +48,7 @@ describe 'Update Epic', :js do
page.within('.detail-page-description') do
click_button('Preview')
expect(find('.md-preview')).to have_content('New epic description')
expect(find('.md-preview-holder')).to have_content('New epic description')
end
click_button 'Save changes'
......@@ -100,7 +100,7 @@ describe 'Update Epic', :js do
click_button('Preview')
wait_for_requests
within('.md-preview') do
within('.md-preview-holder') do
link = find(link_css)['src']
expect(link).to match(link_match)
end
......
......@@ -13,7 +13,7 @@ describe 'User views an open merge request' do
end
it 'renders both the title and the description' do
node = find('.wiki h1 a#user-content-description-header')
node = find('.md h1 a#user-content-description-header')
expect(node[:href]).to end_with('#description-header')
# Work around a weird Capybara behavior where calling `parent` on a node
......
......@@ -136,7 +136,7 @@ describe "User creates wiki page" do
click_button("Create page")
end
page.within ".wiki" do
page.within ".md" do
expect(page).to have_selector(".katex", count: 3).and have_content("2+2 is 4")
end
end
......
......@@ -70,7 +70,7 @@ describe 'Comments on personal snippets', :js do
fill_in 'note[note]', with: 'This is **awesome**!'
find('.js-md-preview-button').click
page.within('.new-note .md-preview') do
page.within('.new-note .md-preview-holder') do
expect(page).to have_content('This is awesome!')
expect(page).to have_selector('strong')
end
......
......@@ -37,7 +37,7 @@ describe 'User creates snippet', :js do
dropzone_file Rails.root.join('spec', 'fixtures', 'banana_sample.gif')
find('.js-md-preview-button').click
page.within('#new_personal_snippet .md-preview') do
page.within('#new_personal_snippet .md-preview-holder') do
expect(page).to have_content('My Snippet')
link = find('a.no-attachment-icon img[alt="banana_sample"]')['src']
......
......@@ -79,7 +79,7 @@ describe 'Task Lists' do
visit_issue(project, issue)
wait_for_requests
expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector('a.btn-close')
end
......@@ -87,14 +87,14 @@ describe 'Task Lists' do
visit_issue(project, issue)
wait_for_requests
expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
logout(:user)
login_as(user2)
visit current_path
wait_for_requests
expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector(".md .task-list .task-list-item .task-list-item-checkbox")
end
it 'provides a summary on Issues#index' do
......@@ -231,7 +231,7 @@ describe 'Task Lists' do
container = '.detail-page-description .description.js-task-list-container'
expect(page).to have_selector(container)
expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector("#{container} .md .task-list .task-list-item .task-list-item-checkbox")
expect(page).to have_selector("#{container} .js-task-list-field")
expect(page).to have_selector('form.js-issuable-update')
expect(page).to have_selector('a.btn-close')
......
......@@ -496,7 +496,7 @@ export default {
{
text: 'line',
rich_text:
'<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="1">\n1\n</td>\n<td class="line_content new noteable_line"><span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n</td>\n</tr>\n<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="2">\n2\n</td>\n<td class="line_content new noteable_line"><span id="LC2" class="line" lang="plaintext"></span>\n</td>\n</tr>\n',
'<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="1">\n1\n</td>\n<td class="line_content new"><span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n</td>\n</tr>\n<tr class="line_holder new" id="">\n<td class="diff-line-num new old_line" data-linenumber="1">\n \n</td>\n<td class="diff-line-num new new_line" data-linenumber="2">\n2\n</td>\n<td class="line_content new"><span id="LC2" class="line" lang="plaintext"></span>\n</td>\n</tr>\n',
can_receive_suggestion: true,
line_code: '6f209374f7e565f771b95720abf46024c41d1885_1_1',
type: 'new',
......
<a class="btn-close"></a>
<div class="detail-page-description">
<div class="description js-task-list-container">
<div class="wiki">
<div class="md">
<ul class="task-list">
<li class="task-list-item">
<input class="task-list-item-checkbox" type="checkbox">
......
......@@ -75,7 +75,7 @@ describe('Issuable output', () => {
.then(() => {
expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>this is a description!</p>');
expect(vm.$el.querySelector('.js-task-list-field').value).toContain(
'this is a description',
);
......@@ -92,7 +92,7 @@ describe('Issuable output', () => {
.then(() => {
expect(document.querySelector('title').innerText).toContain('2 (#1)');
expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
expect(vm.$el.querySelector('.md').innerHTML).toContain('<p>42</p>');
expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
expect(vm.$el.querySelector('.edited-text')).toBeTruthy();
expect(formatText(vm.$el.querySelector('.edited-text').innerText)).toMatch(
......
......@@ -43,12 +43,12 @@ describe('Description component', () => {
Vue.nextTick(() => {
expect(
vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'),
vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),
).toBeTruthy();
setTimeout(() => {
expect(
vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'),
vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
).toBeTruthy();
done();
......
......@@ -5,7 +5,7 @@ import fieldComponent from '~/vue_shared/components/markdown/field.vue';
function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
expect(vm.$el.querySelector('.md-preview').style.display).toEqual(isWrite ? 'none' : '');
expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : '');
}
describe('Markdown field component', () => {
......@@ -80,7 +80,9 @@ describe('Markdown field component', () => {
previewLink.click();
Vue.nextTick(() => {
expect(vm.$el.querySelector('.md-preview').textContent.trim()).toContain('Loading…');
expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain(
'Loading…',
);
done();
});
......@@ -90,7 +92,7 @@ describe('Markdown field component', () => {
previewLink.click();
setTimeout(() => {
expect(vm.$el.querySelector('.md-preview').innerHTML).toContain(
expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(
'<p>markdown preview</p>',
);
......
RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".wiki"|
RSpec::Matchers.define :have_header_with_correct_id_and_link do |level, text, id, parent = ".md"|
match do |actual|
node = find("#{parent} h#{level} a#user-content-#{id}")
......
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