diff options
Diffstat (limited to 'app/assets/javascripts/diffs/components/diffs_file_tree.vue')
-rw-r--r-- | app/assets/javascripts/diffs/components/diffs_file_tree.vue | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/app/assets/javascripts/diffs/components/diffs_file_tree.vue b/app/assets/javascripts/diffs/components/diffs_file_tree.vue new file mode 100644 index 00000000000..34cd901dd0c --- /dev/null +++ b/app/assets/javascripts/diffs/components/diffs_file_tree.vue @@ -0,0 +1,79 @@ +<script> +// eslint-disable-next-line no-restricted-imports +import { mapActions, mapState } from 'vuex'; +import { Mousetrap } from '~/lib/mousetrap'; +import { keysFor, MR_TOGGLE_FILE_BROWSER } from '~/behaviors/shortcuts/keybindings'; +import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import { + INITIAL_TREE_WIDTH, + MIN_TREE_WIDTH, + TREE_HIDE_STATS_WIDTH, + TREE_LIST_WIDTH_STORAGE_KEY, +} from '../constants'; +import TreeList from './tree_list.vue'; + +export default { + name: 'DiffsFileTree', + components: { TreeList, PanelResizer }, + mixins: [glFeatureFlagsMixin()], + minTreeWidth: MIN_TREE_WIDTH, + maxTreeWidth: window.innerWidth / 2, + props: { + renderDiffFiles: { + type: Boolean, + required: true, + }, + }, + data() { + const treeWidth = + parseInt(localStorage.getItem(TREE_LIST_WIDTH_STORAGE_KEY), 10) || INITIAL_TREE_WIDTH; + + return { + treeWidth, + }; + }, + computed: { + ...mapState('diffs', ['showTreeList']), + renderFileTree() { + return this.renderDiffFiles && this.showTreeList; + }, + hideFileStats() { + return this.treeWidth <= TREE_HIDE_STATS_WIDTH; + }, + }, + watch: { + renderFileTree() { + this.$emit('toggled'); + }, + }, + mounted() { + Mousetrap.bind(keysFor(MR_TOGGLE_FILE_BROWSER), this.toggleTreeList); + }, + beforeDestroy() { + Mousetrap.unbind(keysFor(MR_TOGGLE_FILE_BROWSER), this.toggleTreeList); + }, + methods: { + ...mapActions('diffs', ['cacheTreeListWidth', 'toggleTreeList']), + }, +}; +</script> + +<template> + <div + v-if="renderFileTree" + :style="{ width: `${treeWidth}px` }" + :class="{ 'is-sidebar-moved': glFeatures.movedMrSidebar }" + class="diff-tree-list gl-px-5" + > + <panel-resizer + :size.sync="treeWidth" + :start-size="treeWidth" + :min-size="$options.minTreeWidth" + :max-size="$options.maxTreeWidth" + side="right" + @resize-end="cacheTreeListWidth" + /> + <tree-list :hide-file-stats="hideFileStats" /> + </div> +</template> |