Commit 4e4a8a02 authored by Samantha Ming's avatar Samantha Ming

Restyle file tree:

- Folder icon colors are lighter
- Has file type icon
- ChangedFileIcon is on the right
parent 98272880
......@@ -5,12 +5,14 @@
*/
import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowStats from './file_row_stats.vue';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
export default {
name: 'DiffFileRow',
components: {
FileRow,
FileRowStats,
ChangedFileIcon,
},
props: {
file: {
......@@ -31,7 +33,8 @@ export default {
</script>
<template>
<file-row :file="file" :hide-file-stats="hideFileStats" v-bind="$attrs" v-on="$listeners">
<file-row-stats v-if="showFileRowStats" :file="file" />
<file-row :file="file" v-bind="$attrs" v-on="$listeners">
<file-row-stats v-if="showFileRowStats" :file="file" class="mr-1" />
<changed-file-icon :file="file" :size="16" />
</file-row>
</template>
......@@ -95,8 +95,6 @@ export default {
:file="file"
:level="0"
:hide-file-stats="hideFileStats"
:hide-extra-on-tree="true"
:show-changed-icon="true"
:file-row-component="$options.DiffFileRow"
@toggleTreeOpen="toggleTreeOpen"
@clickFile="scrollToFile"
......
<script>
import FileHeader from '~/vue_shared/components/file_row_header.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
export default {
name: 'FileRow',
components: {
FileHeader,
FileIcon,
ChangedFileIcon,
},
props: {
file: {
......@@ -19,11 +17,6 @@ export default {
type: Number,
required: true,
},
showChangedIcon: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
isTree() {
......@@ -121,15 +114,14 @@ export default {
<div class="file-row-name-container">
<span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated">
<file-icon
v-if="!showChangedIcon || file.type === 'tree'"
class="file-row-icon"
:class="{ 'text-secondary': file.type === 'tree' }"
:file-name="file.name"
:loading="file.loading"
:folder="isTree"
:opened="file.opened"
:size="16"
/>
<changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
{{ file.name }}
</span>
<slot></slot>
......
---
title: Restyle Merge Request diffs file tree
merge_request: 24342
author:
type: changed
......@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
import DiffFileRow from '~/diffs/components/diff_file_row.vue';
import FileRow from '~/vue_shared/components/file_row.vue';
import FileRowStats from '~/diffs/components/file_row_stats.vue';
import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
describe('Diff File Row component', () => {
let wrapper;
......@@ -38,6 +39,21 @@ describe('Diff File Row component', () => {
);
});
it('renders ChangedFileIcon component', () => {
createComponent({
level: 4,
file: {},
hideFileStats: false,
});
expect(wrapper.find(ChangedFileIcon).props()).toEqual(
expect.objectContaining({
file: {},
size: 16,
}),
);
});
describe('FileRowStats components', () => {
it.each`
type | hideFileStats | value | desc
......
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