Commit c8859444 authored by Tim Zallmann's avatar Tim Zallmann

Merge branch 'jivl-general-icons-2' into 'master'

Replace the download, fork and resolve discussion in a new issue icons

See merge request gitlab-org/gitlab-ce!15436
parents 692b2d7e 5bbc322b
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue'; import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
...@@ -12,6 +13,7 @@ ...@@ -12,6 +13,7 @@
userAvatarImage, userAvatarImage,
totalTime, totalTime,
limitWarning, limitWarning,
icon,
}, },
}; };
</script> </script>
...@@ -52,7 +54,10 @@ ...@@ -52,7 +54,10 @@
</template> </template>
<template v-else> <template v-else>
<span class="merge-request-branch" v-if="mergeRequest.branch"> <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> <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
</span> </span>
</template> </template>
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import iconBranch from '../svg/icon_branch.svg'; import iconBranch from '../svg/icon_branch.svg';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
...@@ -13,6 +14,7 @@ ...@@ -13,6 +14,7 @@
userAvatarImage, userAvatarImage,
totalTime, totalTime,
limitWarning, limitWarning,
icon,
}, },
computed: { computed: {
iconBranch() { iconBranch() {
...@@ -37,7 +39,10 @@ ...@@ -37,7 +39,10 @@
<user-avatar-image :img-src="build.author.avatarUrl"/> <user-avatar-image :img-src="build.author.avatarUrl"/>
<h5 class="item-title"> <h5 class="item-title">
<a :href="build.url" class="pipeline-id">#{{ build.id }}</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> <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
<span class="icon-branch" v-html="iconBranch"></span> <span class="icon-branch" v-html="iconBranch"></span>
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a> <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
import iconBranch from '../svg/icon_branch.svg'; import iconBranch from '../svg/icon_branch.svg';
import limitWarning from './limit_warning_component.vue'; import limitWarning from './limit_warning_component.vue';
import totalTime from './total_time_component.vue'; import totalTime from './total_time_component.vue';
import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
...@@ -12,6 +13,7 @@ ...@@ -12,6 +13,7 @@
components: { components: {
totalTime, totalTime,
limitWarning, limitWarning,
icon,
}, },
computed: { computed: {
iconBuildStatus() { iconBuildStatus() {
...@@ -40,7 +42,10 @@ ...@@ -40,7 +42,10 @@
<a :href="build.url" class="item-build-name">{{ build.name }}</a> <a :href="build.url" class="item-build-name">{{ build.name }}</a>
&middot; &middot;
<a :href="build.url" class="pipeline-id">#{{ build.id }}</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> <a :href="build.branch.url" class="ref-name">{{ build.branch.name }}</a>
<span class="icon-branch" v-html="iconBranch"></span> <span class="icon-branch" v-html="iconBranch"></span>
<a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a> <a :href="build.commitUrl" class="commit-sha">{{ build.shortSha }}</a>
......
<script> <script>
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
...@@ -11,6 +12,9 @@ ...@@ -11,6 +12,9 @@
directives: { directives: {
tooltip, tooltip,
}, },
components: {
icon,
},
}; };
</script> </script>
<template> <template>
...@@ -24,10 +28,9 @@ ...@@ -24,10 +28,9 @@
data-placement="top" data-placement="top"
data-toggle="dropdown" data-toggle="dropdown"
aria-label="Artifacts"> aria-label="Artifacts">
<i <icon
class="fa fa-download" name="download">
aria-hidden="true"> </icon>
</i>
<i <i
class="fa fa-caret-down" class="fa fa-caret-down"
aria-hidden="true"> aria-hidden="true">
......
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
import { pluralize } from '../../lib/utils/text_utility'; import { pluralize } from '../../lib/utils/text_utility';
import icon from '../../vue_shared/components/icon.vue';
export default { export default {
name: 'MRWidgetHeader', name: 'MRWidgetHeader',
...@@ -9,6 +10,9 @@ export default { ...@@ -9,6 +10,9 @@ export default {
directives: { directives: {
tooltip, tooltip,
}, },
components: {
icon,
},
computed: { computed: {
shouldShowCommitsBehindText() { shouldShowCommitsBehindText() {
return this.mr.divergedCommitsCount > 0; return this.mr.divergedCommitsCount > 0;
...@@ -81,10 +85,9 @@ export default { ...@@ -81,10 +85,9 @@ export default {
data-toggle="dropdown" data-toggle="dropdown"
aria-label="Download as" aria-label="Download as"
role="button"> role="button">
<i <icon
class="fa fa-download" name="download">
aria-hidden="true"> </icon>
</i>
<i <i
class="fa fa-caret-down" class="fa fa-caret-down"
aria-hidden="true"> aria-hidden="true">
......
...@@ -2,13 +2,14 @@ ...@@ -2,13 +2,14 @@
import commitIconSvg from 'icons/_icon_commit.svg'; import commitIconSvg from 'icons/_icon_commit.svg';
import userAvatarLink from './user_avatar/user_avatar_link.vue'; import userAvatarLink from './user_avatar/user_avatar_link.vue';
import tooltip from '../directives/tooltip'; import tooltip from '../directives/tooltip';
import Icon from '../../vue_shared/components/icon.vue';
export default { export default {
props: { props: {
/** /**
* Indicates the existance of a tag. * Indicates the existance of a tag.
* Used to render the correct icon, if true will render `fa-tag` icon, * 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: { tag: {
type: Boolean, type: Boolean,
...@@ -107,6 +108,7 @@ ...@@ -107,6 +108,7 @@
}, },
components: { components: {
userAvatarLink, userAvatarLink,
Icon,
}, },
created() { created() {
this.commitIconSvg = commitIconSvg; this.commitIconSvg = commitIconSvg;
...@@ -123,11 +125,10 @@ ...@@ -123,11 +125,10 @@
class="fa fa-tag" class="fa fa-tag"
aria-hidden="true"> aria-hidden="true">
</i> </i>
<i <icon
v-if="!tag" v-if="!tag"
class="fa fa-code-fork" name="fork">
aria-hidden="true"> </icon>
</i>
</div> </div>
<a <a
......
...@@ -16,6 +16,10 @@ ...@@ -16,6 +16,10 @@
.commit-sha, .commit-sha,
.commit-info { .commit-info {
margin-left: 4px; margin-left: 4px;
.fork-svg {
margin-right: 4px;
}
} }
.ref-name { .ref-name {
...@@ -79,7 +83,7 @@ ...@@ -79,7 +83,7 @@
} }
.limit-icon { .limit-icon {
margin: 0 8px; margin: 0 4px;
} }
.limit-message { .limit-message {
......
...@@ -723,3 +723,7 @@ ...@@ -723,3 +723,7 @@
font-size: 16px; font-size: 16px;
} }
} }
.fork-sprite {
margin-right: -5px;
}
...@@ -39,6 +39,10 @@ ...@@ -39,6 +39,10 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
svg {
vertical-align: middle;
}
} }
.next-run-cell { .next-run-cell {
......
...@@ -143,6 +143,12 @@ ...@@ -143,6 +143,12 @@
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
} }
.sprite {
width: 12px;
height: 12px;
fill: $gl-text-color;
}
.fa { .fa {
font-size: 12px; font-size: 12px;
color: $gl-text-color; color: $gl-text-color;
......
...@@ -269,7 +269,7 @@ module BlobHelper ...@@ -269,7 +269,7 @@ module BlobHelper
return if blob.empty? return if blob.empty?
if blob.raw_binary? || blob.stored_externally? if blob.raw_binary? || blob.stored_externally?
icon = icon('download') icon = sprite_icon('download')
title = 'Download' title = 'Download'
else else
icon = icon('file-code-o') icon = icon('file-code-o')
......
...@@ -63,7 +63,7 @@ module CommitsHelper ...@@ -63,7 +63,7 @@ module CommitsHelper
# Returns a link formatted as a commit branch link # Returns a link formatted as a commit branch link
def commit_branch_link(url, text) def commit_branch_link(url, text)
link_to(url, class: 'label label-gray ref-name branch-link') do 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
end end
......
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
.tree-controls .tree-controls
= link_to download_project_job_artifacts_path(@project, @build), = link_to download_project_job_artifacts_path(@project, @build),
rel: 'nofollow', download: '', class: 'btn btn-default download' do rel: 'nofollow', download: '', class: 'btn btn-default download' do
= icon('download') = sprite_icon('download')
Download artifacts archive Download artifacts archive
.tree-content-holder .tree-content-holder
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.file-holder-bottom-radius.file-holder.file.append-bottom-default .file-holder-bottom-radius.file-holder.file.append-bottom-default
.js-file-title.file-title.clearfix{ data: { current_action: action } } .js-file-title.file-title.clearfix{ data: { current_action: action } }
.editor-ref .editor-ref
= icon('code-fork') = sprite_icon('fork', size: 12)
= ref = ref
%span.editor-file-name %span.editor-file-name
- if current_action?(:edit) || current_action?(:update) - if current_action?(:edit) || current_action?(:update)
......
...@@ -2,6 +2,6 @@ ...@@ -2,6 +2,6 @@
.center.render-error.vertical-center .center.render-error.vertical-center
= link_to blob_raw_path do = link_to blob_raw_path do
%h1.light %h1.light
= icon('download') = sprite_icon('download')
%h4 %h4
Download (#{number_to_human_size(viewer.blob.raw_size)}) Download (#{number_to_human_size(viewer.blob.raw_size)})
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
%li{ class: "js-branch-#{branch.name}" } %li{ class: "js-branch-#{branch.name}" }
%div %div
= link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do = 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
&nbsp; &nbsp;
- if branch.name == @repository.root_ref - if branch.name == @repository.root_ref
%span.label.label-primary default %span.label.label-primary default
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
- if !project.empty_repo? && can?(current_user, :download_code, project) - if !project.empty_repo? && can?(current_user, :download_code, project)
.project-action-button.dropdown.inline> .project-action-button.dropdown.inline>
%button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download') } %button.btn.has-tooltip{ title: s_('DownloadSource|Download'), 'data-toggle' => 'dropdown', 'aria-label' => s_('DownloadSource|Download') }
= icon('download') = sprite_icon('download')
= icon("caret-down") = icon("caret-down")
%span.sr-only= _('Select Archive Format') %span.sr-only= _('Select Archive Format')
%ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' } %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
- if ref - if ref
- if job.ref - if job.ref
.icon-container .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" = link_to job.ref, project_ref_path(job.project, job.ref), class: "ref-name"
- else - else
.light none .light none
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
.pull-right .pull-right
- if can?(current_user, :read_build, job) && job.artifacts? - 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 = 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 can?(current_user, :update_build, job)
- if job.active? - 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 = link_to cancel_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: 'Cancel', class: 'btn btn-build' do
......
.has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: "Project has too many #{label_for_message} to search"} } .has-tooltip{ class: "limit-box limit-box-#{objects} prepend-left-5", data: { title: "Project has too many #{label_for_message} to search"} }
.limit-icon .limit-icon
- if objects == :branch - if objects == :branch
= icon('code-fork') = sprite_icon('fork', size: 12)
- else - else
= icon('tag') = icon('tag')
.limit-message .limit-message
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
.branch-commit .branch-commit
- if deployment.ref - if deployment.ref
%span.icon-container %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" = link_to deployment.ref, project_ref_path(@project, deployment.ref), class: "ref-name"
.icon-container.commit-icon .icon-container.commit-icon
= custom_icon("icon_commit") = custom_icon("icon_commit")
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- if @forked_project && !@forked_project.saved? - if @forked_project && !@forked_project.saved?
.alert.alert-danger.alert-block .alert.alert-danger.alert-block
%h4 %h4
%i.fa.fa-code-fork = sprite_icon('fork', size: 16)
Fork Error! Fork Error!
%p %p
You tried to fork You tried to fork
...@@ -21,5 +21,4 @@ ...@@ -21,5 +21,4 @@
%p %p
= link_to new_project_fork_path(@project), title: "Fork", class: "btn" do = link_to new_project_fork_path(@project), title: "Fork", class: "btn" do
%i.fa.fa-code-fork
Try to fork again Try to fork again
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
- if ref - if ref
- if generic_commit_status.ref - if generic_commit_status.ref
.icon-container .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) = link_to generic_commit_status.ref, project_commits_path(generic_commit_status.project, generic_commit_status.ref)
- else - else
.light none .light none
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
%span.project-ref-path %span.project-ref-path
&nbsp; &nbsp;
= link_to project_ref_path(merge_request.project, merge_request.target_branch), class: 'ref-name' do = 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 = merge_request.target_branch
- if merge_request.labels.any? - if merge_request.labels.any?
&nbsp; &nbsp;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
%td %td
= pipeline_schedule.description = pipeline_schedule.description
%td.branch-name-cell %td.branch-name-cell
= icon('code-fork') = sprite_icon('fork', size: 12)
- if pipeline_schedule.ref.present? - if pipeline_schedule.ref.present?
= link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name" = link_to pipeline_schedule.ref, project_ref_path(@project, pipeline_schedule.ref), class: "ref-name"
%td %td
......
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
= render_project_pipeline_status(project.pipeline_status) = render_project_pipeline_status(project.pipeline_status)
- if forks - if forks
%span.prepend-left-10 %span.prepend-left-10
= icon('code-fork') = sprite_icon('fork')
= number_with_delimiter(project.forks_count) = number_with_delimiter(project.forks_count)
- if stars - if stars
%span.prepend-left-10 %span.prepend-left-10
......
...@@ -10,7 +10,7 @@ describe('Commit component', () => { ...@@ -10,7 +10,7 @@ describe('Commit component', () => {
CommitComponent = Vue.extend(commitComp); 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({ component = new CommitComponent({
propsData: { propsData: {
tag: false, tag: false,
...@@ -30,7 +30,7 @@ describe('Commit component', () => { ...@@ -30,7 +30,7 @@ describe('Commit component', () => {
}, },
}).$mount(); }).$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', () => { describe('Given all the props', () => {
......
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