diff options
22 files changed, 99 insertions, 87 deletions
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index 28956c2f3c5..aa98f35786e 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -1,5 +1,6 @@ <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" diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue index a58b5afe970..c93fd9f415c 100644 --- a/app/assets/javascripts/boards/components/modal/list.vue +++ b/app/assets/javascripts/boards/components/modal/list.vue @@ -1,4 +1,5 @@ <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> diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue index 4622fd28220..3baac08d411 100644 --- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue +++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue @@ -1,11 +1,13 @@ <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> diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue index d4676914e02..4e8fe16160a 100644 --- a/app/assets/javascripts/boards/components/project_select.vue +++ b/app/assets/javascripts/boards/components/project_select.vue @@ -1,11 +1,15 @@ <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"> diff --git a/app/assets/javascripts/cycle_analytics/components/banner.vue b/app/assets/javascripts/cycle_analytics/components/banner.vue index 410d4873e55..88570160f26 100644 --- a/app/assets/javascripts/cycle_analytics/components/banner.vue +++ b/app/assets/javascripts/cycle_analytics/components/banner.vue @@ -1,7 +1,11 @@ <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" diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue index c3acc352d5e..f4b333f3700 100644 --- a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue +++ b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue @@ -115,7 +115,7 @@ export default { <span> {{ selectedVersionName }} </span> - <Icon + <icon :size="12" name="angle-down" class="position-absolute" diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue index e1f9248bc4c..2bc168a6b02 100644 --- a/app/assets/javascripts/environments/components/environment_actions.vue +++ b/app/assets/javascripts/environments/components/environment_actions.vue @@ -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> diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index ad5d16874f3..bb9c139727e 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -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 }} diff --git a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue index a6a265eb3fd..14c223c61a4 100644 --- a/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue +++ b/app/assets/javascripts/frequent_items/components/frequent_items_search_input.vue @@ -1,10 +1,14 @@ <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> diff --git a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue index ab7fab7e5ca..cdff4105335 100644 --- a/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue +++ b/app/assets/javascripts/sidebar/components/lock/lock_issue_sidebar.vue @@ -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') }} diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue index 5e0e7315e99..fc80e89d505 100644 --- a/app/assets/javascripts/vue_shared/components/icon.vue +++ b/app/assets/javascripts/vue_shared/components/icon.vue @@ -105,6 +105,7 @@ export default { :x="x" :y="y" :tabindex="tabIndex" + aria-hidden="true" > <use v-bind="{ 'xlink:href':spriteHref }"/> </svg> diff --git a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue index ca8ce554588..62f1ab27c1e 100644 --- a/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue +++ b/app/assets/javascripts/vue_shared/components/issue/issue_warning.vue @@ -37,7 +37,6 @@ :name="warningIcon" :size="16" class="icon inline" - aria-hidden="true" /> <span v-if="isLockedAndConfidential"> diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue index 2122d0a508e..de3c7a80365 100644 --- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue +++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue @@ -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" diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 7145a76db6d..f26b1fddae5 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -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; } } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 8603714f709..cdfad30e7ca 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -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; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index b3c5c693824..54fbd40cece 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -305,8 +305,7 @@ } .confidential-icon { - position: relative; - top: 1px; + vertical-align: text-top; margin-right: 5px; } } diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index f0228768b5a..ec2108b15be 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -21,7 +21,7 @@ } } - svg { + .svg-container svg { width: 136px; height: 136px; } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 79984c1a546..19a36061c45 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -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; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index fe792a53b44..f0cb81e0bc3 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -191,7 +191,7 @@ } } - svg { + .svg-container svg { width: 62px; height: 50px; } diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml index 1d8b9c5bc8f..a1a6bc3e743 100644 --- a/app/views/explore/groups/index.html.haml +++ b/app/views/explore/groups/index.html.haml @@ -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 diff --git a/changelogs/unreleased/replace-i-to-icons-in-vue-components.yml b/changelogs/unreleased/replace-i-to-icons-in-vue-components.yml new file mode 100644 index 00000000000..6de57b04338 --- /dev/null +++ b/changelogs/unreleased/replace-i-to-icons-in-vue-components.yml @@ -0,0 +1,5 @@ +--- +title: Replace i to icons in vue components +merge_request: 20748 +author: George Tsiolis +type: changed diff --git a/spec/javascripts/environments/environments_app_spec.js b/spec/javascripts/environments/environments_app_spec.js index 6968fbc7ce7..60787b4c88d 100644 --- a/spec/javascripts/environments/environments_app_spec.js +++ b/spec/javascripts/environments/environments_app_spec.js @@ -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(); }); }); |