Commit 469dc95a authored by George Tsiolis's avatar George Tsiolis Committed by Clement Ho

Replace `<i>` in vue components with `<icon>`

parent 0602fcb6
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import Icon from '~/vue_shared/components/icon.vue';
import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
import tooltip from '../../vue_shared/directives/tooltip'; import tooltip from '../../vue_shared/directives/tooltip';
...@@ -8,6 +9,7 @@ ...@@ -8,6 +9,7 @@
export default { export default {
components: { components: {
UserAvatarLink, UserAvatarLink,
Icon,
}, },
directives: { directives: {
tooltip, tooltip,
...@@ -140,11 +142,11 @@ ...@@ -140,11 +142,11 @@
<div> <div>
<div class="board-card-header"> <div class="board-card-header">
<h4 class="board-card-title"> <h4 class="board-card-title">
<i <icon
v-if="issue.confidential" v-if="issue.confidential"
class="fa fa-eye-slash confidential-icon" name="eye-slash"
aria-hidden="true" class="confidential-icon"
></i> />
<a <a
:href="issue.path" :href="issue.path"
:title="issue.title" :title="issue.title"
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue';
import bp from '../../../breakpoints'; import bp from '../../../breakpoints';
import ModalStore from '../../stores/modal_store'; import ModalStore from '../../stores/modal_store';
import IssueCardInner from '../issue_card_inner.vue'; import IssueCardInner from '../issue_card_inner.vue';
...@@ -6,6 +7,7 @@ ...@@ -6,6 +7,7 @@
export default { export default {
components: { components: {
IssueCardInner, IssueCardInner,
Icon,
}, },
props: { props: {
issueLinkBase: { issueLinkBase: {
...@@ -147,13 +149,13 @@ ...@@ -147,13 +149,13 @@
:issue="issue" :issue="issue"
:issue-link-base="issueLinkBase" :issue-link-base="issueLinkBase"
:root-path="rootPath"/> :root-path="rootPath"/>
<span <icon
v-if="issue.selected" v-if="issue.selected"
:aria-label="'Issue #' + issue.id + ' selected'" :aria-label="'Issue #' + issue.id + ' selected'"
name="mobile-issue-close"
aria-checked="true" aria-checked="true"
class="issue-card-selected text-center"> class="issue-card-selected text-center"
<i class="fa fa-check"></i> />
</span>
</div> </div>
</div> </div>
</div> </div>
......
<script> <script>
import { Link } from '@gitlab-org/gitlab-ui'; import { Link } from '@gitlab-org/gitlab-ui';
import Icon from '~/vue_shared/components/icon.vue';
import ModalStore from '../../stores/modal_store'; import ModalStore from '../../stores/modal_store';
import boardsStore from '../../stores/boards_store'; import boardsStore from '../../stores/boards_store';
export default { export default {
components: { components: {
'gl-link': Link, 'gl-link': Link,
Icon,
}, },
data() { data() {
return { return {
...@@ -35,7 +37,9 @@ export default { ...@@ -35,7 +37,9 @@ export default {
class="dropdown-label-box"> class="dropdown-label-box">
</span> </span>
{{ selected.title }} {{ selected.title }}
<i class="fa fa-chevron-down"></i> <icon
name="chevron-down"
/>
</button> </button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
<ul> <ul>
......
<script> <script>
import $ from 'jquery'; import $ from 'jquery';
import _ from 'underscore'; import _ from 'underscore';
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '../eventhub'; import eventHub from '../eventhub';
import Api from '../../api'; import Api from '../../api';
export default { export default {
name: 'BoardProjectSelect', name: 'BoardProjectSelect',
components: {
Icon,
},
props: { props: {
groupId: { groupId: {
type: Number, type: Number,
...@@ -78,11 +82,9 @@ export default { ...@@ -78,11 +82,9 @@ export default {
aria-expanded="false" aria-expanded="false"
> >
{{ selectedProjectName }} {{ selectedProjectName }}
<i <icon
class="fa fa-chevron-down" name="chevron-down"
aria-hidden="true" />
>
</i>
</button> </button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
<div class="dropdown-title"> <div class="dropdown-title">
...@@ -92,12 +94,11 @@ export default { ...@@ -92,12 +94,11 @@ export default {
type="button" type="button"
class="dropdown-title-button dropdown-menu-close" class="dropdown-title-button dropdown-menu-close"
> >
<i <icon
aria-hidden="true" name="merge-request-close-m"
data-hidden="true" data-hidden="true"
class="fa fa-times dropdown-menu-close-icon" class="dropdown-menu-close-icon"
> />
</i>
</button> </button>
</div> </div>
<div class="dropdown-input"> <div class="dropdown-input">
...@@ -106,12 +107,11 @@ export default { ...@@ -106,12 +107,11 @@ export default {
type="search" type="search"
placeholder="Search projects" placeholder="Search projects"
/> />
<i <icon
aria-hidden="true" name="search"
class="dropdown-input-search"
data-hidden="true" data-hidden="true"
class="fa fa-search dropdown-input-search" />
>
</i>
</div> </div>
<div class="dropdown-content"></div> <div class="dropdown-content"></div>
<div class="dropdown-loading"> <div class="dropdown-loading">
......
<script> <script>
import Icon from '~/vue_shared/components/icon.vue';
import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg'; import iconCycleAnalyticsSplash from 'icons/_icon_cycle_analytics_splash.svg';
export default { export default {
components: {
Icon,
},
props: { props: {
documentationLink: { documentationLink: {
type: String, type: String,
...@@ -28,10 +32,9 @@ ...@@ -28,10 +32,9 @@
type="button" type="button"
@click="dismissOverviewDialog" @click="dismissOverviewDialog"
> >
<i <icon
class="fa fa-times" name="close"
aria-hidden="true"> />
</i>
</button> </button>
<div <div
class="svg-container" class="svg-container"
......
...@@ -115,7 +115,7 @@ export default { ...@@ -115,7 +115,7 @@ export default {
<span> <span>
{{ selectedVersionName }} {{ selectedVersionName }}
</span> </span>
<Icon <icon
:size="12" :size="12"
name="angle-down" name="angle-down"
class="position-absolute" class="position-absolute"
......
...@@ -60,11 +60,9 @@ export default { ...@@ -60,11 +60,9 @@ export default {
> >
<span> <span>
<icon name="play" /> <icon name="play" />
<i <icon
class="fa fa-caret-down" name="chevron-down"
aria-hidden="true" />
>
</i>
<gl-loading-icon v-if="isLoading" /> <gl-loading-icon v-if="isLoading" />
</span> </span>
</button> </button>
......
...@@ -4,6 +4,7 @@ import _ from 'underscore'; ...@@ -4,6 +4,7 @@ import _ from 'underscore';
import tooltip from '~/vue_shared/directives/tooltip'; import tooltip from '~/vue_shared/directives/tooltip';
import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
import { humanize } from '~/lib/utils/text_utility'; import { humanize } from '~/lib/utils/text_utility';
import Icon from '~/vue_shared/components/icon.vue';
import ActionsComponent from './environment_actions.vue'; import ActionsComponent from './environment_actions.vue';
import ExternalUrlComponent from './environment_external_url.vue'; import ExternalUrlComponent from './environment_external_url.vue';
import StopComponent from './environment_stop.vue'; import StopComponent from './environment_stop.vue';
...@@ -24,6 +25,7 @@ export default { ...@@ -24,6 +25,7 @@ export default {
components: { components: {
UserAvatarLink, UserAvatarLink,
CommitComponent, CommitComponent,
Icon,
ActionsComponent, ActionsComponent,
ExternalUrlComponent, ExternalUrlComponent,
StopComponent, StopComponent,
...@@ -448,6 +450,10 @@ export default { ...@@ -448,6 +450,10 @@ export default {
this.canRetry this.canRetry
); );
}, },
folderIconName() {
return this.model.isOpen ? 'chevron-down' : 'chevron-right';
},
}, },
methods: { methods: {
...@@ -494,27 +500,15 @@ export default { ...@@ -494,27 +500,15 @@ export default {
role="button" role="button"
@click="onClickFolder"> @click="onClickFolder">
<span class="folder-icon"> <icon
<i :name="folderIconName"
v-show="model.isOpen" class="folder-icon"
class="fa fa-caret-down" />
aria-hidden="true"
>
</i>
<i
v-show="!model.isOpen"
class="fa fa-caret-right"
aria-hidden="true"
>
</i>
</span>
<span class="folder-icon"> <icon
<i name="folder"
class="fa fa-folder" class="folder-icon"
aria-hidden="true"> />
</i>
</span>
<span> <span>
{{ model.folderName }} {{ model.folderName }}
......
<script> <script>
import _ from 'underscore'; import _ from 'underscore';
import { mapActions } from 'vuex'; import { mapActions } from 'vuex';
import Icon from '~/vue_shared/components/icon.vue';
import eventHub from '../event_hub'; import eventHub from '../event_hub';
import frequentItemsMixin from './frequent_items_mixin'; import frequentItemsMixin from './frequent_items_mixin';
export default { export default {
components: {
Icon,
},
mixins: [frequentItemsMixin], mixins: [frequentItemsMixin],
data() { data() {
return { return {
...@@ -45,11 +49,10 @@ export default { ...@@ -45,11 +49,10 @@ export default {
type="search" type="search"
class="form-control" class="form-control"
/> />
<i <icon
v-if="!searchQuery" v-if="!searchQuery"
class="search-icon fa fa-fw fa-search" name="search"
aria-hidden="true" class="search-icon"
> />
</i>
</div> </div>
</template> </template>
...@@ -102,7 +102,6 @@ export default { ...@@ -102,7 +102,6 @@ export default {
> >
<icon <icon
:name="lockIcon" :name="lockIcon"
aria-hidden="true"
class="sidebar-item-icon is-active" class="sidebar-item-icon is-active"
/> />
</div> </div>
...@@ -134,7 +133,6 @@ export default { ...@@ -134,7 +133,6 @@ export default {
<icon <icon
:size="16" :size="16"
name="lock" name="lock"
aria-hidden="true"
class="sidebar-item-icon inline is-active" class="sidebar-item-icon inline is-active"
/> />
{{ __('Locked') }} {{ __('Locked') }}
...@@ -147,7 +145,6 @@ export default { ...@@ -147,7 +145,6 @@ export default {
<icon <icon
:size="16" :size="16"
name="lock-open" name="lock-open"
aria-hidden="true"
class="sidebar-item-icon inline" class="sidebar-item-icon inline"
/> />
{{ __('Unlocked') }} {{ __('Unlocked') }}
......
...@@ -105,6 +105,7 @@ export default { ...@@ -105,6 +105,7 @@ export default {
:x="x" :x="x"
:y="y" :y="y"
:tabindex="tabIndex" :tabindex="tabIndex"
aria-hidden="true"
> >
<use v-bind="{ 'xlink:href':spriteHref }"/> <use v-bind="{ 'xlink:href':spriteHref }"/>
</svg> </svg>
......
...@@ -37,7 +37,6 @@ ...@@ -37,7 +37,6 @@
:name="warningIcon" :name="warningIcon"
:size="16" :size="16"
class="icon inline" class="icon inline"
aria-hidden="true"
/> />
<span v-if="isLockedAndConfidential"> <span v-if="isLockedAndConfidential">
......
...@@ -109,7 +109,7 @@ export default { ...@@ -109,7 +109,7 @@ export default {
class="system-note-commit-list-toggler flex-row" class="system-note-commit-list-toggler flex-row"
@click="expanded = !expanded" @click="expanded = !expanded"
> >
<Icon <icon
:name="toggleIcon" :name="toggleIcon"
:size="8" :size="8"
class="append-right-5" class="append-right-5"
......
...@@ -283,18 +283,20 @@ ...@@ -283,18 +283,20 @@
.dismiss-button { .dismiss-button {
position: absolute; position: absolute;
right: 6px; right: $gl-padding-8;
top: 6px; top: $gl-padding-8;
cursor: pointer; cursor: pointer;
color: $blue-300; color: $blue-500;
z-index: 1; z-index: 1;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
padding: $gl-padding-8;
line-height: 0;
&:hover, &:hover,
&:focus { &:focus {
border: 0; border: 0;
color: $blue-400; color: $blue-700;
} }
} }
......
...@@ -144,6 +144,13 @@ ...@@ -144,6 +144,13 @@
top: 11px; top: 11px;
right: 8px; right: 8px;
} }
.ic-chevron-down {
position: absolute;
top: $gl-padding-8;
right: $gl-padding-8;
color: $gray-darkest;
}
} }
@mixin dropdown-item-hover { @mixin dropdown-item-hover {
...@@ -561,6 +568,10 @@ ...@@ -561,6 +568,10 @@
top: -1px; top: -1px;
} }
.dropdown-menu-close-icon {
vertical-align: middle;
}
.dropdown-menu-back { .dropdown-menu-back {
left: 7px; left: 7px;
top: 2px; top: 2px;
...@@ -572,9 +583,10 @@ ...@@ -572,9 +583,10 @@
padding: 0 10px; padding: 0 10px;
.fa, .fa,
.input-icon { .input-icon,
.ic-search {
position: absolute; position: absolute;
top: 10px; top: $gl-padding-8;
right: 20px; right: 20px;
color: $dropdown-input-fa-color; color: $dropdown-input-fa-color;
font-size: 12px; font-size: 12px;
......
...@@ -305,8 +305,7 @@ ...@@ -305,8 +305,7 @@
} }
.confidential-icon { .confidential-icon {
position: relative; vertical-align: text-top;
top: 1px;
margin-right: 5px; margin-right: 5px;
} }
} }
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
} }
} }
svg { .svg-container svg {
width: 136px; width: 136px;
height: 136px; height: 136px;
} }
......
...@@ -90,6 +90,7 @@ ...@@ -90,6 +90,7 @@
margin-right: 3px; margin-right: 3px;
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
display: inline-block; display: inline-block;
vertical-align: text-top;
.fa:nth-child(1) { .fa:nth-child(1) {
margin-right: 3px; margin-right: 3px;
......
...@@ -191,7 +191,7 @@ ...@@ -191,7 +191,7 @@
} }
} }
svg { .svg-container svg {
width: 62px; width: 62px;
height: 50px; height: 50px;
} }
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
- if cookies[:explore_groups_landing_dismissed] != 'true' - if cookies[:explore_groups_landing_dismissed] != 'true'
.explore-groups.landing.content-block.js-explore-groups-landing.hide .explore-groups.landing.content-block.js-explore-groups-landing.hide
%button.dismiss-button{ type: 'button', 'aria-label' => _('Dismiss') }= icon('times') %button.dismiss-button{ type: 'button', 'aria-label' => _('Dismiss') }= sprite_icon('close', size: 16)
.svg-container .svg-container
= custom_icon('icon_explore_groups_splash') = custom_icon('icon_explore_groups_splash')
.inner-content .inner-content
......
---
title: Replace i to icons in vue components
merge_request: 20748
author: George Tsiolis
type: changed
...@@ -158,12 +158,7 @@ describe('Environment', () => { ...@@ -158,12 +158,7 @@ describe('Environment', () => {
component.$el.querySelector('.folder-name').click(); component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => { Vue.nextTick(() => {
expect( expect(component.$el.querySelector('.folder-icon.ic-chevron-right')).toBe(null);
component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
).toContain('display: none');
expect(
component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
).not.toContain('display: none');
done(); done();
}); });
}, 0); }, 0);
...@@ -179,12 +174,7 @@ describe('Environment', () => { ...@@ -179,12 +174,7 @@ describe('Environment', () => {
component.$el.querySelector('.folder-name').click(); component.$el.querySelector('.folder-name').click();
Vue.nextTick(() => { Vue.nextTick(() => {
expect( expect(component.$el.querySelector('.folder-icon.ic-chevron-down')).toBe(null);
component.$el.querySelector('.folder-icon i.fa-caret-down').getAttribute('style'),
).toContain('display: none');
expect(
component.$el.querySelector('.folder-icon i.fa-caret-right').getAttribute('style'),
).not.toContain('display: none');
done(); done();
}); });
}); });
......
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