File Icons in Merge Requests
This commit is contained in:
parent
afb9327dac
commit
6d291cc3a6
3 changed files with 14 additions and 10 deletions
|
@ -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
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
vertical-align: text-bottom;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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', () => {
|
||||||
|
|
Loading…
Reference in a new issue