diff options
author | Fatih Acet <acetfatih@gmail.com> | 2018-07-03 23:18:27 +0000 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-07-03 23:18:27 +0000 |
commit | 483864db77acb6db479ecdb8ce4dd121731a8330 (patch) | |
tree | 68fad0ba107207a5df667805bbe1af4990b50175 /app/assets/javascripts/diffs/components/inline_diff_table_row.vue | |
parent | 26998c68c936f183ead1a84e404a61160fc646f7 (diff) | |
download | gitlab-ce-483864db77acb6db479ecdb8ce4dd121731a8330.tar.gz |
Improve performance of toggling diff view type
Diffstat (limited to 'app/assets/javascripts/diffs/components/inline_diff_table_row.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/inline_diff_table_row.vue | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue new file mode 100644 index 00000000000..a2470843ca6 --- /dev/null +++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue @@ -0,0 +1,104 @@ +<script> +import { mapGetters } from 'vuex'; +import DiffTableCell from './diff_table_cell.vue'; +import { + NEW_LINE_TYPE, + OLD_LINE_TYPE, + CONTEXT_LINE_TYPE, + CONTEXT_LINE_CLASS_NAME, + PARALLEL_DIFF_VIEW_TYPE, + LINE_POSITION_LEFT, + LINE_POSITION_RIGHT, +} from '../constants'; + +export default { + components: { + DiffTableCell, + }, + props: { + diffFile: { + type: Object, + required: true, + }, + line: { + type: Object, + required: true, + }, + isBottom: { + type: Boolean, + required: false, + default: false, + }, + }, + data() { + return { + isHover: false, + }; + }, + computed: { + ...mapGetters(['isInlineView']), + isContextLine() { + return this.line.type === CONTEXT_LINE_TYPE; + }, + classNameMap() { + return { + [this.line.type]: this.line.type, + [CONTEXT_LINE_CLASS_NAME]: this.isContextLine, + [PARALLEL_DIFF_VIEW_TYPE]: this.isParallelView, + }; + }, + inlineRowId() { + const { lineCode, oldLine, newLine } = this.line; + + return lineCode || `${this.diffFile.fileHash}_${oldLine}_${newLine}`; + }, + }, + created() { + this.newLineType = NEW_LINE_TYPE; + this.oldLineType = OLD_LINE_TYPE; + this.linePositionLeft = LINE_POSITION_LEFT; + this.linePositionRight = LINE_POSITION_RIGHT; + }, + methods: { + handleMouseMove(e) { + // To show the comment icon on the gutter we need to know if we hover the line. + // Current table structure doesn't allow us to do this with CSS in both of the diff view types + this.isHover = e.type === 'mouseover'; + }, + }, +}; +</script> + +<template> + <tr + :id="inlineRowId" + :class="classNameMap" + class="line_holder" + @mouseover="handleMouseMove" + @mouseout="handleMouseMove" + > + <diff-table-cell + :diff-file="diffFile" + :line="line" + :line-type="oldLineType" + :is-bottom="isBottom" + :is-hover="isHover" + :show-comment-button="true" + class="diff-line-num old_line" + /> + <diff-table-cell + :diff-file="diffFile" + :line="line" + :line-type="newLineType" + :is-bottom="isBottom" + :is-hover="isHover" + class="diff-line-num new_line" + /> + <diff-table-cell + :class="line.type" + :diff-file="diffFile" + :line="line" + :is-content-line="true" + /> + </tr> +</template> |