diff options
author | Phil Hughes <me@iamphill.com> | 2018-10-03 12:05:43 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-10-03 12:05:43 +0300 |
commit | 33c4c5b8f30c07ff30de4cd26494becd3ad058c0 (patch) | |
tree | b8c380912b47b697d8e2d2c7e41149e69be32040 /app/assets/javascripts/vue_shared/components/changed_file_icon.vue | |
parent | 974fe0797079f4f7ddc57b45d15ee7d39a06e78a (diff) |
Added file tree to merge request diffs
This file tree displays all the diff files in a tree like format
Each file is taken and converted into a tree with folders
Each folder can be toggled open & closed
Clicking a file will scroll to the diff file & highlight with a glow affect
Searching the tree list will search only files & return a list of the
files without any folders
Each file row contains an icon to show changed, new file or deleted
Each row will also contain the added & removed lines count
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/14249
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/changed_file_icon.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/changed_file_icon.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue new file mode 100644 index 00000000000..8684005e0fb --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue @@ -0,0 +1,112 @@ +<script> +import tooltip from '~/vue_shared/directives/tooltip'; +import Icon from '~/vue_shared/components/icon.vue'; +import { pluralize } from '~/lib/utils/text_utility'; +import { __, sprintf } from '~/locale'; +import { getCommitIconMap } from '~/ide/utils'; + +export default { + components: { + Icon, + }, + directives: { + tooltip, + }, + props: { + file: { + type: Object, + required: true, + }, + showTooltip: { + type: Boolean, + required: false, + default: false, + }, + showStagedIcon: { + type: Boolean, + required: false, + default: false, + }, + forceModifiedIcon: { + type: Boolean, + required: false, + default: false, + }, + size: { + type: Number, + required: false, + default: 12, + }, + }, + computed: { + changedIcon() { + const suffix = !this.file.changed && this.file.staged && !this.showStagedIcon ? '-solid' : ''; + + if (this.forceModifiedIcon) return `file-modified${suffix}`; + + return `${getCommitIconMap(this.file).icon}${suffix}`; + }, + changedIconClass() { + return `${this.changedIcon} float-left d-block`; + }, + tooltipTitle() { + if (!this.showTooltip) return undefined; + + const type = this.file.tempFile ? 'addition' : 'modification'; + + if (this.file.changed && !this.file.staged) { + return sprintf(__('Unstaged %{type}'), { + type, + }); + } else if (!this.file.changed && this.file.staged) { + return sprintf(__('Staged %{type}'), { + type, + }); + } else if (this.file.changed && this.file.staged) { + return sprintf(__('Unstaged and staged %{type}'), { + type: pluralize(type), + }); + } + + return undefined; + }, + showIcon() { + return this.file.changed || this.file.tempFile || this.file.staged || this.file.deleted; + }, + }, +}; +</script> + +<template> + <span + v-tooltip + :title="tooltipTitle" + data-container="body" + data-placement="right" + class="file-changed-icon ml-auto" + > + <icon + v-if="showIcon" + :name="changedIcon" + :size="size" + :css-classes="changedIconClass" + /> + </span> +</template> + +<style> +.file-addition, +.file-addition-solid { + color: #1aaa55; +} + +.file-modified, +.file-modified-solid { + color: #fc9403; +} + +.file-deletion, +.file-deletion-solid { + color: #db3b21; +} +</style> |