File Icons in Merge Requests

This commit is contained in:
Tim Zallmann 2018-07-05 12:02:56 +00:00 committed by Filipa Lacerda
parent afb9327dac
commit 6d291cc3a6
3 changed files with 14 additions and 10 deletions

View file

@ -2,6 +2,7 @@
import _ from 'underscore'; import _ from 'underscore';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue';
import Tooltip from '~/vue_shared/directives/tooltip'; import Tooltip from '~/vue_shared/directives/tooltip';
import { truncateSha } from '~/lib/utils/text_utility'; import { truncateSha } from '~/lib/utils/text_utility';
import { __, s__, sprintf } from '~/locale'; import { __, s__, sprintf } from '~/locale';
@ -12,6 +13,7 @@ export default {
ClipboardButton, ClipboardButton,
EditButton, EditButton,
Icon, Icon,
FileIcon,
}, },
directives: { directives: {
Tooltip, Tooltip,
@ -139,18 +141,20 @@ export default {
:name="collapseIcon" :name="collapseIcon"
:size="16" :size="16"
aria-hidden="true" aria-hidden="true"
class="diff-toggle-caret" class="diff-toggle-caret append-right-5"
@click.stop="handleToggle" @click.stop="handleToggle"
/> />
<a <a
ref="titleWrapper" ref="titleWrapper"
:href="titleLink" :href="titleLink"
class="append-right-4"
> >
<i <file-icon
:class="`fa-${icon}`" :file-name="filePath"
class="fa fa-fw" :size="18"
aria-hidden="true" aria-hidden="true"
></i> css-classes="js-file-icon append-right-5"
/>
<span v-if="diffFile.renamedFile"> <span v-if="diffFile.renamedFile">
<strong <strong
v-tooltip v-tooltip

View file

@ -15,7 +15,7 @@
} }
svg { svg {
vertical-align: text-bottom; vertical-align: middle;
} }
} }

View file

@ -280,11 +280,11 @@ describe('diff_file_header', () => {
}); });
}); });
it('displays an icon in the title', () => { it('displays an file icon in the title', () => {
vm = mountComponent(Component, props); vm = mountComponent(Component, props);
expect(vm.$el.querySelector('svg.js-file-icon use').getAttribute('xlink:href')).toContain(
const icon = vm.$el.querySelector(`i[class="fa fa-fw fa-${vm.icon}"]`); 'ruby',
expect(icon).not.toBe(null); );
}); });
describe('file paths', () => { describe('file paths', () => {