Skip to content

G
gitlab-ce
Commit 1b0d13bf authored by Justin Ho's avatar Justin Ho
Browse files
Options

Update fa-question-circle icon in Vue and HAML 

Update from `fa-question-circle` to GitLab SVG `information-o`.
parent 9c4d9f98
Hide whitespace changes
Inline Side-by-side
Showing with 45 additions and 34 deletions
app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
View file @ 1b0d13bf
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
import { __ } from '../../locale';
import { deprecatedCreateFlash as createFlash } from '../../flash';
import Api from '../../api';
......@@ -8,6 +8,7 @@ import Dropdown from './dropdown.vue';
export default {
components: {
GlIcon,
GlLink,
GlSprintf,
Dropdown,
......@@ -136,7 +137,7 @@ export default {
target="_blank"
>
<span class="sr-only">{{ __('Read more') }}</span>
<i class="fa fa-question-circle" aria-hidden="true"></i>
<gl-icon name="question-o" />
</gl-link>
</p>
</div>
......
app/assets/javascripts/jobs/components/sidebar_detail_row.vue
View file @ 1b0d13bf
<script>
import { GlLink } from '@gitlab/ui';
import { GlIcon, GlLink } from '@gitlab/ui';
export default {
name: 'SidebarDetailRow',
components: {
GlIcon,
GlLink,
},
props: {
......@@ -37,7 +38,7 @@ export default {
<span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
<span v-if="hasHelpURL" class="help-button float-right">
<gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<gl-icon name="question-o" />
</gl-link>
</span>
</p>
......
app/assets/javascripts/pages/projects/shared/permissions/components/project_setting_row.vue
View file @ 1b0d13bf
<script>
import { GlIcon } from '@gitlab/ui';
export default {
components: {
GlIcon,
},
props: {
label: {
type: String,
......@@ -25,7 +30,7 @@ export default {
<label v-if="label" class="label-bold">
{{ label }}
<a v-if="helpPath" :href="helpPath" target="_blank">
<i aria-hidden="true" data-hidden="true" class="fa fa-question-circle"> </i>
<gl-icon name="question-o" />
</a>
</label>
<span v-if="helpText" class="form-text text-muted"> {{ helpText }} </span> <slot></slot>
......
app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
View file @ 1b0d13bf
......@@ -106,7 +106,7 @@ export default {
<div class="title hide-collapsed">
{{ __('Time tracking') }}
<div v-if="!showHelpState" class="help-button float-right" @click="toggleHelpState(true)">
<i class="fa fa-question-circle" aria-hidden="true"> </i>
<gl-icon name="question-o" />
</div>
<div
v-if="showHelpState"
......
app/assets/javascripts/vue_merge_request_widget/components/source_branch_removal_status.vue
View file @ 1b0d13bf
<script>
import { GlSprintf } from '@gitlab/ui';
import { GlIcon, GlSprintf } from '@gitlab/ui';
import tooltip from '../../vue_shared/directives/tooltip';
import { __ } from '../../locale';
......@@ -9,6 +9,7 @@ export default {
tooltipTitle: __('A user with write access to the source branch selected this option'),
},
components: {
GlIcon,
GlSprintf,
},
directives: {
......@@ -26,12 +27,11 @@ export default {
</template>
</gl-sprintf>
</span>
<i
<gl-icon
v-tooltip
:title="$options.i18n.tooltipTitle"
:aria-label="$options.i18n.tooltipTitle"
class="fa fa-question-circle"
>
</i>
name="question-o"
/>
</p>
</template>
app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.vue
View file @ 1b0d13bf
<script>
import { GlIcon } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
import tooltip from '~/vue_shared/directives/tooltip';
import statusIcon from '../mr_widget_status_icon.vue';
......@@ -9,6 +10,7 @@ export default {
tooltip,
},
components: {
GlIcon,
statusIcon,
},
props: {
......@@ -50,7 +52,7 @@ export default {
<span class="bold js-branch-text">
<span class="capitalize"> {{ missingBranchName }} </span>
{{ s__('mrWidget|branch does not exist.') }} {{ missingBranchNameMessage }}
<i v-tooltip :title="message" :aria-label="message" class="fa fa-question-circle"> </i>
<gl-icon v-tooltip :title="message" :aria-label="message" name="question-o" />
</span>
</div>
</div>
......
app/assets/stylesheets/fontawesome_custom.scss
View file @ 1b0d13bf
......@@ -84,10 +84,6 @@
color: $white;
}
.fa-question-circle::before {
content: '\f059';
}
.fa-chevron-down::before {
content: '\f078';
}
......
app/views/projects/_issuable_by_email.html.haml
View file @ 1b0d13bf
......@@ -37,9 +37,9 @@
= render 'by_email_description'
%p
This is a private email address
%a{ href: 'https://docs.gitlab.com/ee/development/emails.html#email-namespace', target: "_blank", rel: "noopener" }
%i.fa.fa-question-circle{ 'aria-label': "Learn more about incoming email addresses" }
%span<
= link_to help_page_path('development/emails', anchor: 'email-namespace'), target: '_blank', rel: 'noopener', aria: { label: 'Learn more about incoming email addresses' } do
= sprite_icon('question-o')
generated just for you.
......
app/views/projects/cycle_analytics/show.html.haml
View file @ 1b0d13bf
......@@ -40,19 +40,23 @@
%li.stage-header.pl-5
%span.stage-name.font-weight-bold
{{ s__('ProjectLifecycle|Stage') }}
%i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
%span.has-tooltip{ "data-placement" => "top", title: _("The phase of the development lifecycle."), "aria-hidden" => "true" }
= sprite_icon('question-o')
%li.median-header
%span.stage-name.font-weight-bold
{{ __('Median') }}
%i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
%span.has-tooltip{ "data-placement" => "top", title: _("The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6."), "aria-hidden" => "true" }
= sprite_icon('question-o')
%li.event-header.pl-3
%span.stage-name.font-weight-bold
{{ currentStage ? __(currentStage.legend) : __('Related Issues') }}
%i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
%span.has-tooltip{ "data-placement" => "top", title: _("The collection of events added to the data gathered for that stage."), "aria-hidden" => "true" }
= sprite_icon('question-o')
%li.total-time-header.pr-5.text-right
%span.stage-name.font-weight-bold
{{ __('Time') }}
%i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
%span.has-tooltip{ "data-placement" => "top", title: _("The time taken by each data entry gathered by that stage."), "aria-hidden" => "true" }
= sprite_icon('question-o')
.stage-panel-body
%nav.stage-nav
%ul
......
doc/development/documentation/index.md
View file @ 1b0d13bf
......@@ -335,9 +335,9 @@ You can combine one or more of the following:
= link_to 'Help page', help_page_path('user/permissions'), target: '_blank'
```
1. **Linking to a circle icon.** Usually used in settings where a long
1. **Using a question icon.** Usually used in settings where a long
description cannot be used, like near checkboxes. You can basically use
any font awesome icon, but prefer the `question-circle`:
any GitLab SVG icon, but prefer the `question-o`:
```haml
= link_to icon('question-circle'), help_page_path('user/permissions')
......
ee/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_secondary_geo_node.vue
View file @ 1b0d13bf
<script>
import { GlIcon } from '@gitlab/ui';
import tooltip from '~/vue_shared/directives/tooltip';
import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
export default {
components: {
GlIcon,
statusIcon,
},
directives: {
......@@ -31,7 +33,7 @@ export default {
rel="noopener noreferrer nofollow"
data-container="body"
>
<i class="fa fa-question-circle"></i>
<gl-icon name="question-o" />
</a>
</div>
</div>
......
ee/spec/frontend/vue_mr_widget/ee_mr_widget_options_spec.js
View file @ 1b0d13bf
......@@ -958,7 +958,7 @@ describe('ee merge request widget options', () => {
vm.mr.state = 'readyToMerge';
vm.$nextTick(() => {
const tooltip = vm.$el.querySelector('.fa-question-circle');
const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]');
expect(vm.$el.textContent).toContain('Deletes source branch');
expect(tooltip.getAttribute('data-original-title')).toBe(
......
spec/frontend/confidential_merge_request/components/__snapshots__/project_form_group_spec.js.snap
View file @ 1b0d13bf
......@@ -33,9 +33,9 @@ exports[`Confidential merge request project form group component renders empty s
Read more
</span>
<i
aria-hidden="true"
class="fa fa-question-circle"
<gl-icon-stub
name="question-o"
size="16"
/>
</gl-link-stub>
</p>
......@@ -76,9 +76,9 @@ exports[`Confidential merge request project form group component renders fork dr
Read more
</span>
<i
aria-hidden="true"
class="fa fa-question-circle"
<gl-icon-stub
name="question-o"
size="16"
/>
</gl-link-stub>
</p>
......
spec/frontend/vue_mr_widget/mr_widget_options_spec.js
View file @ 1b0d13bf
......@@ -530,7 +530,7 @@ describe('mrWidgetOptions', () => {
vm.mr.state = 'readyToMerge';
vm.$nextTick(() => {
const tooltip = vm.$el.querySelector('.fa-question-circle');
const tooltip = vm.$el.querySelector('[data-testid="question-o-icon"]');
expect(vm.$el.textContent).toContain('Deletes source branch');
expect(tooltip.getAttribute('data-original-title')).toBe(
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7