diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/inline_diff_view.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/inline_diff_view.vue | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue new file mode 100644 index 00000000000..0ed3dc7f3ad --- /dev/null +++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue @@ -0,0 +1,117 @@ +<script> +import diffContentMixin from '../mixins/diff_content'; +import { + MATCH_LINE_TYPE, + CONTEXT_LINE_TYPE, + OLD_NO_NEW_LINE_TYPE, + NEW_NO_NEW_LINE_TYPE, + LINE_HOVER_CLASS_NAME, + LINE_UNFOLD_CLASS_NAME, +} from '../constants'; + +export default { + mixins: [diffContentMixin], + methods: { + handleMouse(lineCode, isOver) { + this.hoveredLineCode = isOver ? lineCode : null; + }, + getLineClass(line) { + const isSameLine = this.hoveredLineCode && this.hoveredLineCode === line.lineCode; + const isMatchLine = line.type === MATCH_LINE_TYPE; + const isContextLine = line.type === CONTEXT_LINE_TYPE; + const isMetaLine = line.type === OLD_NO_NEW_LINE_TYPE || line.type === NEW_NO_NEW_LINE_TYPE; + + return { + [line.type]: line.type, + [LINE_UNFOLD_CLASS_NAME]: isMatchLine, + [LINE_HOVER_CLASS_NAME]: + this.isLoggedIn && isSameLine && !isMatchLine && !isContextLine && !isMetaLine, + }; + }, + }, +}; +</script> + +<template> + <table + :class="userColorScheme" + :data-commit-id="commitId" + class="code diff-wrap-lines js-syntax-highlight text-file"> + <tbody> + <template + v-for="(line, index) in normalizedDiffLines" + > + <tr + :id="line.lineCode || `${fileHash}_${line.oldLine}_${line.newLine}`" + :key="line.lineCode" + :class="getRowClass(line)" + class="line_holder" + @mouseover="handleMouse(line.lineCode, true)" + @mouseout="handleMouse(line.lineCode, false)" + > + <td + :class="getLineClass(line)" + class="diff-line-num old_line" + > + <diff-line-gutter-content + :file-hash="fileHash" + :line-type="line.type" + :line-code="line.lineCode" + :line-number="line.oldLine" + :meta-data="line.metaData" + :show-comment-button="true" + :context-lines-path="diffFile.contextLinesPath" + :is-bottom="index + 1 === diffLinesLength" + @showCommentForm="handleShowCommentForm" + /> + </td> + <td + :class="getLineClass(line)" + class="diff-line-num new_line" + > + <diff-line-gutter-content + :file-hash="fileHash" + :line-type="line.type" + :line-code="line.lineCode" + :line-number="line.newLine" + :meta-data="line.metaData" + :is-bottom="index + 1 === diffLinesLength" + :context-lines-path="diffFile.contextLinesPath" + /> + </td> + <td + :class="line.type" + class="line_content" + v-html="line.richText" + > + </td> + </tr> + <tr + v-if="isDiscussionExpanded(line.lineCode) || diffLineCommentForms[line.lineCode]" + :key="index" + :class="discussionsByLineCode[line.lineCode] ? '' : 'js-temp-notes-holder'" + class="notes_holder" + > + <td + class="notes_line" + colspan="2" + ></td> + <td class="notes_content"> + <div class="content"> + <diff-discussions + :discussions="discussionsByLineCode[line.lineCode] || []" + /> + <diff-line-note-form + v-if="diffLineCommentForms[line.lineCode]" + :diff-file="diffFile" + :diff-lines="diffLines" + :line="line" + :note-target-line="diffLines[index]" + /> + </div> + </td> + </tr> + </template> + </tbody> + </table> +</template> |