Skip to content

G
gitlab-ce
Commit e657c9a9 authored by Clement Ho's avatar Clement Ho
Browse files
Options

Merge branch 'replace-i-to-icons-in-vue-components' into 'master' 

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

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