diff options
26 files changed, 76 insertions, 36 deletions
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue index f54ea7df522..cbce9205e75 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue @@ -2,6 +2,7 @@ import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import limitWarning from './limit_warning_component.vue'; import totalTime from './total_time_component.vue'; + import icon from '../../vue_shared/components/icon.vue'; export default { props: { @@ -12,6 +13,7 @@ userAvatarImage, totalTime, limitWarning, + icon, }, }; </script> @@ -52,7 +54,10 @@ </template> <template v-else> <span class="merge-request-branch" v-if="mergeRequest.branch"> - <i class= "fa fa-code-fork"></i> + <icon + name="fork" + :size="16"> + </icon> <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a> </span> </template> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue index 5d95ddcd90e..508a411e599 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue @@ -3,6 +3,7 @@ import iconBranch from '../svg/icon_branch.svg'; import limitWarning from './limit_warning_component.vue'; import totalTime from './total_time_component.vue'; + import icon from '../../vue_shared/components/icon.vue'; export default { props: { @@ -13,6 +14,7 @@ userAvatarImage, totalTime, limitWarning, + icon, }, computed: { iconBranch() { @@ -37,7 +39,10 @@ <user-avatar-image :img-src="build.author.avatarUrl"/> <h5 class="item-title"> <a :href="build.url" class="pipeline-id">#{{ build.id }}</a> - <i class="fa fa-code-fork"></i> + <icon + name="fork" + :size="16"> + </icon> <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a> <span class="icon-branch" v-html="iconBranch"></span> <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a> diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue index 04d5440b77b..88fa6b073ca 100644 --- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue +++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue @@ -3,6 +3,7 @@ import iconBranch from '../svg/icon_branch.svg'; import limitWarning from './limit_warning_component.vue'; import totalTime from './total_time_component.vue'; + import icon from '../../vue_shared/components/icon.vue'; export default { props: { @@ -12,6 +13,7 @@ components: { totalTime, limitWarning, + icon, }, computed: { iconBuildStatus() { @@ -40,7 +42,10 @@ <a :href="build.url" class="item-build-name">{{ build.name }}</a> · <a :href="build.url" class="pipeline-id">#{{ build.id }}</a> - <i class="fa fa-code-fork"></i> + <icon + name="fork" + :size="16"> + </icon> <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a> <span class="icon-branch" v-html="iconBranch"></span> <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a> diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue index 751a20991af..831aa92ac4f 100644 --- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue +++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue @@ -1,5 +1,6 @@ <script> import tooltip from '../../vue_shared/directives/tooltip'; + import icon from '../../vue_shared/components/icon.vue'; export default { props: { @@ -11,6 +12,9 @@ directives: { tooltip, }, + components: { + icon, + }, }; </script> <template> @@ -24,10 +28,9 @@ data-placement="top" data-toggle="dropdown" aria-label="Artifacts"> - <i - class="fa fa-download" - aria-hidden="true"> - </i> + <icon + name="download"> + </icon> <i class="fa fa-caret-down" aria-hidden="true"> diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js index 13e4cb5717e..85bfd03a3cf 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.js @@ -1,5 +1,6 @@ import tooltip from '../../vue_shared/directives/tooltip'; import { pluralize } from '../../lib/utils/text_utility'; +import icon from '../../vue_shared/components/icon.vue'; export default { name: 'MRWidgetHeader', @@ -9,6 +10,9 @@ export default { directives: { tooltip, }, + components: { + icon, + }, computed: { shouldShowCommitsBehindText() { return this.mr.divergedCommitsCount > 0; @@ -81,10 +85,9 @@ export default { data-toggle="dropdown" aria-label="Download as" role="button"> - <i - class="fa fa-download" - aria-hidden="true"> - </i> + <icon + name="download"> + </icon> <i class="fa fa-caret-down" aria-hidden="true"> diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue index 52814de8b2d..59ca9a0a6d4 100644 --- a/app/assets/javascripts/vue_shared/components/commit.vue +++ b/app/assets/javascripts/vue_shared/components/commit.vue @@ -2,13 +2,14 @@ import commitIconSvg from 'icons/_icon_commit.svg'; import userAvatarLink from './user_avatar/user_avatar_link.vue'; import tooltip from '../directives/tooltip'; + import Icon from '../../vue_shared/components/icon.vue'; export default { props: { /** * Indicates the existance of a tag. * Used to render the correct icon, if true will render `fa-tag` icon, - * if false will render `fa-code-fork` icon. + * if false will render a svg sprite fork icon */ tag: { type: Boolean, @@ -107,6 +108,7 @@ }, components: { userAvatarLink, + Icon, }, created() { this.commitIconSvg = commitIconSvg; @@ -123,11 +125,10 @@ class="fa fa-tag" aria-hidden="true"> </i> - <i + <icon v-if="!tag" - class="fa fa-code-fork" - aria-hidden="true"> - </i> + name="fork"> + </icon> </div> <a diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 735fc4babd7..2f3a80daa90 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -16,6 +16,10 @@ .commit-sha, .commit-info { margin-left: 4px; + + .fork-svg { + margin-right: 4px; + } } .ref-name { @@ -79,7 +83,7 @@ } .limit-icon { - margin: 0 8px; + margin: 0 4px; } .limit-message { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index e75a35d78ad..f887a11004f 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -723,3 +723,7 @@ font-size: 16px; } } + +.fork-sprite { + margin-right: -5px; +} diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss index 7e2297c283f..b698a4f9afa 100644 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ b/app/assets/stylesheets/pages/pipeline_schedules.scss @@ -39,6 +39,10 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + svg { + vertical-align: middle; + } } .next-run-cell { diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 9805fc4f882..05c1033c5f7 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -143,6 +143,12 @@ fill: $gl-text-color-secondary; } + .sprite { + width: 12px; + height: 12px; + fill: $gl-text-color; + } + .fa { font-size: 12px; color: $gl-text-color; diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb index 3c2ee2cb5bc..f9dcb32f7c4 100644 --- a/app/helpers/blob_helper.rb +++ b/app/helpers/blob_helper.rb @@ -269,7 +269,7 @@ module BlobHelper return if blob.empty? if blob.raw_binary? || blob.stored_externally? - icon = icon('download') + icon = sprite_icon('download') title = 'Download' else icon = icon('file-code-o') diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb index 2d304f7eb91..0333c29e2fd 100644 --- a/app/helpers/commits_helper.rb +++ b/app/helpers/commits_helper.rb @@ -63,7 +63,7 @@ module CommitsHelper # Returns a link formatted as a commit branch link def commit_branch_link(url, text) link_to(url, class: 'label label-gray ref-name branch-link') do - icon('code-fork', class: 'append-right-5') + "#{text}" + sprite_icon('fork', size: 16, css_class: 'fork-svg') + "#{text}" end end diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml index fe02cbcbf95..7ff7466e561 100644 --- a/app/views/projects/artifacts/browse.html.haml +++ b/app/views/projects/artifacts/browse.html.haml @@ -18,7 +18,7 @@ .tree-controls = link_to download_project_job_artifacts_path(@project, @build), rel: 'nofollow', download: '', class: 'btn btn-default download' do - = icon('download') + = sprite_icon('download') Download artifacts archive .tree-content-holder diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml index 7777f55ddd7..c9fa90acd11 100644 --- a/app/views/projects/blob/_editor.html.haml +++ b/app/views/projects/blob/_editor.html.haml @@ -3,7 +3,7 @@ .file-holder-bottom-radius.file-holder.file.append-bottom-default .js-file-title.file-title.clearfix{ data: { current_action: action } } .editor-ref - = icon('code-fork') + = sprite_icon('fork', size: 12) = ref %span.editor-file-name - if current_action?(:edit) || current_action?(:update) diff --git a/app/views/projects/blob/viewers/_download.html.haml b/app/views/projects/blob/viewers/_download.html.haml index 253566c43be..f9b1da05a00 100644 --- a/app/views/projects/blob/viewers/_download.html.haml +++ b/app/views/projects/blob/viewers/_download.html.haml @@ -2,6 +2,6 @@ .center.render-error.vertical-center = link_to blob_raw_path do %h1.light - = icon('download') + = sprite_icon('download') %h4 Download (#{number_to_human_size(viewer.blob.raw_size)}) diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml index 573050e597d..acf67b83890 100644 --- a/app/views/projects/branches/_branch.html.haml +++ b/app/views/projects/branches/_branch.html.haml @@ -8,7 +8,8 @@ %li{ class: "js-branch-#{branch.name}" } %div = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do - = icon('code-fork', class: 'append-right-5') + "#{branch.name}" + = sprite_icon('fork', size: 12) + = branch.name - if branch.name == @repository.root_ref %span.label.label-primary default diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml index fa6f6d0b588..fa9a9bfc8f7 100644 --- a/app/views/projects/buttons/_download.html.haml +++ b/app/views/projects/buttons/_download.html.haml @@ -3,7 +3,7 @@ - if !project.empty_repo? && can?(current_user, :download_code, project) .project-action-button.dropdown.inline> %button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download') } - = icon('download') + = sprite_icon('download') = icon("caret-down") %span.sr-only= _('Select Archive Format') %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' } diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml index 86510b8ab93..0cd2d45c74b 100644 --- a/app/views/projects/ci/builds/_build.html.haml +++ b/app/views/projects/ci/builds/_build.html.haml @@ -22,7 +22,7 @@ - if ref - if job.ref .icon-container - = job.tag? ? icon('tag') : icon('code-fork') + = job.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite') = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name" - else .light none @@ -96,7 +96,7 @@ .pull-right - if can?(current_user, :read_build, job) && job.artifacts? = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do - = icon('download') + = sprite_icon('download') - if can?(current_user, :update_build, job) - if job.active? = link_to cancel_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: 'Cancel', class: 'btn btn-build' do diff --git a/app/views/projects/commit/_limit_exceeded_message.html.haml b/app/views/projects/commit/_limit_exceeded_message.html.haml index 84a52d49487..a264f3517c4 100644 --- a/app/views/projects/commit/_limit_exceeded_message.html.haml +++ b/app/views/projects/commit/_limit_exceeded_message.html.haml @@ -1,7 +1,7 @@ .has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: "Project has too many #{label_for_message} to search"} } .limit-icon - if objects == :branch - = icon('code-fork') + = sprite_icon('fork', size: 12) - else = icon('tag') .limit-message diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml index 014486be868..c7ac687e4a6 100644 --- a/app/views/projects/deployments/_commit.html.haml +++ b/app/views/projects/deployments/_commit.html.haml @@ -2,7 +2,7 @@ .branch-commit - if deployment.ref %span.icon-container - = deployment.tag? ? icon('tag') : icon('code-fork') + = deployment.tag? ? icon('tag') : sprite_icon('fork', css_class: 'sprite') = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name" .icon-container.commit-icon = custom_icon("icon_commit") diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml index d365bcd4ecc..e8a89b8c6fc 100644 --- a/app/views/projects/forks/error.html.haml +++ b/app/views/projects/forks/error.html.haml @@ -2,7 +2,7 @@ - if @forked_project && !@forked_project.saved? .alert.alert-danger.alert-block %h4 - %i.fa.fa-code-fork + = sprite_icon('fork', size: 16) Fork Error! %p You tried to fork @@ -21,5 +21,4 @@ %p = link_to new_project_fork_path(@project), title: "Fork", class: "btn" do - %i.fa.fa-code-fork Try to fork again diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml index b98dc09534f..2599ce5c4b8 100644 --- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml +++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml @@ -19,7 +19,7 @@ - if ref - if generic_commit_status.ref .icon-container - = generic_commit_status.tags.any? ? icon('tag') : icon('code-fork') + = generic_commit_status.tags.any? ? icon('tag') : sprite_icon('fork', size: 10) = link_to generic_commit_status.ref, project_commits_path(generic_commit_status.project, generic_commit_status.ref) - else .light none diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml index 2b5e8711b0a..f45a000833b 100644 --- a/app/views/projects/merge_requests/_merge_request.html.haml +++ b/app/views/projects/merge_requests/_merge_request.html.haml @@ -30,7 +30,7 @@ %span.project-ref-path = link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do - = icon('code-fork') + = sprite_icon('fork', size: 12, css_class: 'fork-sprite') = merge_request.target_branch - if merge_request.labels.any? diff --git a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml index f8c4005a9e0..800e234275c 100644 --- a/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml +++ b/app/views/projects/pipeline_schedules/_pipeline_schedule.html.haml @@ -3,7 +3,7 @@ %td = pipeline_schedule.description %td.branch-name-cell - = icon('code-fork') + = sprite_icon('fork', size: 12) - if pipeline_schedule.ref.present? = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name" %td diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml index 003f5fa52eb..63aa4e29ec9 100644 --- a/app/views/shared/projects/_project.html.haml +++ b/app/views/shared/projects/_project.html.haml @@ -52,7 +52,7 @@ = render_project_pipeline_status(project.pipeline_status) - if forks %span.prepend-left-10 - = icon('code-fork') + = sprite_icon('fork') = number_with_delimiter(project.forks_count) - if stars %span.prepend-left-10 diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js index d5754aaa9e7..fdead874209 100644 --- a/spec/javascripts/vue_shared/components/commit_spec.js +++ b/spec/javascripts/vue_shared/components/commit_spec.js @@ -10,7 +10,7 @@ describe('Commit component', () => { CommitComponent = Vue.extend(commitComp); }); - it('should render a code-fork icon if it does not represent a tag', () => { + it('should render a fork icon if it does not represent a tag', () => { component = new CommitComponent({ propsData: { tag: false, @@ -30,7 +30,7 @@ describe('Commit component', () => { }, }).$mount(); - expect(component.$el.querySelector('.icon-container i').classList).toContain('fa-code-fork'); + expect(component.$el.querySelector('.icon-container').children).toContain('svg'); }); describe('Given all the props', () => { |