diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-07-05 12:02:56 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-07-05 12:02:56 +0000 |
commit | 8b0e2628099c34a9ac352b6a9a05605613c45a53 (patch) | |
tree | 06767a36091815f7fa61e9ff886a53afb5e0ca8b | |
parent | afb9327dac1b6a04bc62148139a59235a4dac1cb (diff) | |
parent | 6d291cc3a6b5e5b7100fc6a4838430df42e89ea3 (diff) | |
download | gitlab-ce-8b0e2628099c34a9ac352b6a9a05605613c45a53.tar.gz |
Merge branch 'tz-file-icons-in-mrs' into 'master'
File Icons in Merge Requests
Closes #48651
See merge request gitlab-org/gitlab-ce!20268
-rw-r--r-- | app/assets/javascripts/diffs/components/diff_file_header.vue | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 2 | ||||
-rw-r--r-- | spec/javascripts/diffs/components/diff_file_header_spec.js | 8 |
3 files changed, 14 insertions, 10 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index fba1d1af7cd..a8e8732053b 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -2,6 +2,7 @@ import _ from 'underscore'; import ClipboardButton from '~/vue_shared/components/clipboard_button.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 { truncateSha } from '~/lib/utils/text_utility'; import { __, s__, sprintf } from '~/locale'; @@ -12,6 +13,7 @@ export default { ClipboardButton, EditButton, Icon, + FileIcon, }, directives: { Tooltip, @@ -139,18 +141,20 @@ export default { :name="collapseIcon" :size="16" aria-hidden="true" - class="diff-toggle-caret" + class="diff-toggle-caret append-right-5" @click.stop="handleToggle" /> <a ref="titleWrapper" :href="titleLink" + class="append-right-4" > - <i - :class="`fa-${icon}`" - class="fa fa-fw" + <file-icon + :file-name="filePath" + :size="18" aria-hidden="true" - ></i> + css-classes="js-file-icon append-right-5" + /> <span v-if="diffFile.renamedFile"> <strong v-tooltip diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index a90a9c6e486..7e89f8998fb 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -15,7 +15,7 @@ } svg { - vertical-align: text-bottom; + vertical-align: middle; } } diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js index d0f1700bee6..05f5d47ce42 100644 --- a/spec/javascripts/diffs/components/diff_file_header_spec.js +++ b/spec/javascripts/diffs/components/diff_file_header_spec.js @@ -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); - - const icon = vm.$el.querySelector(`i[class="fa fa-fw fa-${vm.icon}"]`); - expect(icon).not.toBe(null); + expect(vm.$el.querySelector('svg.js-file-icon use').getAttribute('xlink:href')).toContain( + 'ruby', + ); }); describe('file paths', () => { |