Skip to content

G
gitlab-ce
Commit 0fc520b0 authored by Robert Hunt's avatar Robert Hunt Committed by Natalia Tepluhina
Browse files
Options

Replace admin and group runners clear button FA icon with GlIcon close 

This covers both the admin runners search and the group runners search
parent ea9078dd
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 47 deletions
app/assets/javascripts/related_issues/components/issue_token.vue
View file @ 0fc520b0
......@@ -109,7 +109,7 @@ export default {
class="js-issue-token-remove-button"
@click="onRemoveRequest"
>
<i class="fa fa-times" aria-hidden="true"></i>
<gl-icon name="close" aria-hidden="true" />
</button>
</div>
</template>
app/assets/javascripts/vue_shared/components/file_finder/index.vue
View file @ 0fc520b0
......@@ -2,6 +2,7 @@
import fuzzaldrinPlus from 'fuzzaldrin-plus';
import Mousetrap from 'mousetrap';
import VirtualList from 'vue-virtual-scroll-list';
import { GlIcon } from '@gitlab/ui';
import Item from './item.vue';
import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
......@@ -13,6 +14,7 @@ const originalStopCallback = Mousetrap.prototype.stopCallback;
export default {
components: {
GlIcon,
Item,
VirtualList,
},
......@@ -235,12 +237,13 @@ export default {
aria-hidden="true"
class="fa fa-search dropdown-input-search"
></i>
<i
:aria-label="__('Clear search input')"
<gl-icon
name="close"
class="dropdown-input-clear"
role="button"
class="fa fa-times dropdown-input-clear"
:aria-label="__('Clear search input')"
@click="clearSearchInput"
></i>
/>
</div>
<div>
<virtual-list ref="virtualScrollList" :size="listHeight" :remain="listShowCount" wtag="ul">
......
app/assets/stylesheets/framework/filters.scss
View file @ 0fc520b0
......@@ -243,7 +243,7 @@
}
}
.fa-times {
.clear-search-icon {
right: 10px;
color: $gray-darkest;
}
......@@ -255,7 +255,7 @@
outline: none;
z-index: 1;
&:hover .fa-times {
&:hover .clear-search-icon {
color: $common-gray-dark;
}
}
......
app/assets/stylesheets/framework/variables.scss
View file @ 0fc520b0
......@@ -618,7 +618,6 @@ $award-emoji-width-xs: 90%;
$search-input-border-color: rgba($blue-400, 0.8);
$search-input-width: 200px;
$search-input-xl-width: 320px;
$location-icon-color: #e7e9ed;
/*
* Notes
......
app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
View file @ 0fc520b0
......@@ -84,7 +84,8 @@
color: var(--ide-input-border, $gl-text-color-tertiary);
}
.dropdown-input .fa {
.dropdown-input .fa,
.dropdown-input .dropdown-input-clear {
color: var(--ide-input-border, $dropdown-input-fa-color);
}
......
app/assets/stylesheets/pages/projects.scss
View file @ 0fc520b0
......@@ -1268,18 +1268,10 @@ pre.light-well {
position: relative;
.clear-icon {
@extend .fa-times;
display: none;
position: absolute;
right: 7px;
top: 7px;
color: $location-icon-color;
&::before {
font-family: FontAwesome;
font-weight: $gl-font-weight-normal;
font-style: normal;
}
right: 9px;
top: 9px;
}
&.has-value {
......
app/views/admin/runners/index.html.haml
View file @ 0fc520b0
......@@ -108,7 +108,7 @@
{{name}}
= button_tag class: %w[clear-search hidden] do
= icon('times')
= sprite_icon('close', size: 16, css_class: 'clear-search-icon')
.filter-dropdown-container
= render 'sort_dropdown'
......
app/views/admin/users/projects.html.haml
View file @ 0fc520b0
......@@ -16,8 +16,8 @@
.float-right
%span.light.vertical-align-middle= group_member.human_access
- unless group_member.owner?
= link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-sm btn btn-remove gl-ml-3", title: 'Remove user from group' do
%i.fa.fa-times.fa-inverse
= link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member), testid: 'remove-user' }, method: :delete, remote: true, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: _('Remove user from group') do
= sprite_icon('close', size: 16, css_class: 'gl-icon')
.row
.col-md-6
......@@ -46,5 +46,5 @@
%span.light.vertical-align-middle= member.human_access
- if member.respond_to? :project
= link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-sm btn btn-remove gl-ml-3", title: 'Remove user from project' do
%i.fa.fa-times
= link_to project_project_member_path(project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon gl-ml-3", title: 'Remove user from project' do
= sprite_icon('close', size: 16, css_class: 'gl-icon')
app/views/admin/users/show.html.haml
View file @ 0fc520b0
......@@ -38,8 +38,8 @@
%span.light Secondary email:
%strong
= render partial: 'shared/email_with_badge', locals: { email: email.email, verified: email.confirmed? }
= link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn-sm btn btn-remove float-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do
%i.fa.fa-times
= link_to remove_email_admin_user_path(@user, email), data: { confirm: "Are you sure you want to remove #{email.email}?" }, method: :delete, class: "btn btn-sm btn-danger gl-button btn-icon float-right", title: 'Remove secondary email', id: "remove_email_#{email.id}" do
= sprite_icon('close', size: 16, css_class: 'gl-icon')
%li
%span.light ID:
%strong
......
app/views/groups/runners/_index.html.haml
View file @ 0fc520b0
......@@ -73,7 +73,7 @@
{{name}}
= button_tag class: 'clear-search hidden' do
= icon('times')
= sprite_icon('close', size: 16, css_class: 'clear-search-icon')
.filter-dropdown-container
= render 'admin/runners/sort_dropdown'
......
app/views/shared/issuable/_search_bar.html.haml
View file @ 0fc520b0
......@@ -165,7 +165,7 @@
= render_if_exists 'shared/issuable/filter_epic', type: type
%button.clear-search.hidden{ type: 'button' }
= icon('times')
= sprite_icon('close', size: 16, css_class: 'clear-search-icon')
.filter-dropdown-container.d-flex.flex-column.flex-md-row
- if type == :boards
#js-board-labels-toggle
......
app/views/shared/members/_group.html.haml
View file @ 0fc520b0
......@@ -38,7 +38,7 @@
data: { id: role_id, el_id: dom_id }
.clearable-input.member-form-control.d-sm-inline-block
= text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: _('Expiration date'), id: "member_expires_at_#{group.id}", disabled: !can_admin_member
%i.clear-icon.js-clear-input
= sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
- if can_admin_member
= link_to group_link_path,
method: :delete,
......
app/views/shared/members/_invite_group.html.haml
View file @ 0fc520b0
......@@ -22,5 +22,5 @@
= label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
.clearable-input
= text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: _('Expiration date'), id: 'expires_at_groups'
%i.clear-icon.js-clear-input
= sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
= submit_tag _("Invite"), class: "btn btn-success", data: { qa_selector: 'invite_group_button' }
app/views/shared/members/_invite_member.html.haml
View file @ 0fc520b0
......@@ -19,10 +19,10 @@
- link_start = %q{<a href="%{url}">}.html_safe % { url: permissions_docs_path }
= _("%{link_start}Read more%{link_end} about role permissions").html_safe % { link_start: link_start, link_end: '</a>'.html_safe }
.form-group
= label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
.clearable-input
= label_tag :expires_at, _('Access expiration date'), class: 'label-bold'
= text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
%i.clear-icon.js-clear-input
= sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
= submit_tag _("Invite"), class: "btn btn-success", data: { qa_selector: 'invite_member_button' }
- if can_import_members
= link_to _("Import"), import_path, class: "btn btn-default", title: _("Import members from another project")
app/views/shared/members/_member.html.haml
View file @ 0fc520b0
......@@ -97,7 +97,7 @@
placeholder: _('Expiration date'),
id: "member_expires_at_#{member.id}",
data: { el_id: dom_id(member) }
%i.clear-icon.js-clear-input
= sprite_icon('close', size: 16, css_class: 'clear-icon js-clear-input gl-text-gray-200')
- else
%span.member-access-text.user-access-role= member.human_access
......
changelogs/unreleased/224534-replace-fa-times-with-gitlab-svg-close-icon-forms.yml 0 → 100644
View file @ 0fc520b0
---
title: Replace fa-times with GitLab SVG close icon in forms
merge_request: 40587
author:
type: performance
ee/app/assets/javascripts/boards/components/boards_list_selector/list_filter.vue
View file @ 0fc520b0
<script>
import { GlIcon } from '@gitlab/ui';
export default {
components: {
GlIcon,
},
data() {
return {
query: '',
......@@ -27,12 +32,11 @@ export default {
@keyup="handleInputChange"
/>
<i class="fa fa-search dropdown-input-search" aria-hidden="true" data-hidden="true"></i>
<i
role="button"
class="fa fa-times dropdown-input-clear"
<gl-icon
name="close"
class="dropdown-input-clear"
aria-hidden="true"
data-hidden="true"
@click="handleInputClear"
></i>
/>
</div>
</template>
ee/app/views/shared/epic/_search_bar.html.haml
View file @ 0fc520b0
......@@ -81,7 +81,7 @@
{{ title }}
%button.clear-search.hidden{ type: 'button' }
= icon('times')
= sprite_icon('close', size: 16, css_class: 'clear-search-icon')
- unless hide_sort_dropdown
.filter-dropdown-container
= render 'shared/epic/sort_dropdown', hide_extra_sort_options: hide_extra_sort_options
ee/app/views/shared/members/ee/_override_member_buttons.html.haml
View file @ 0fc520b0
......@@ -24,7 +24,7 @@
data: { el_id: dom_id(member), endpoint: override_group_group_member_path(group, member) } }
.spinner.mr-1
Change permissions
%button.btn.btn-default.js-ldap-permissions{ type: 'button',
%button.btn.btn-default.btn-icon.gl-button.js-ldap-permissions{ type: 'button',
'aria-label' => 'Close permissions override',
data: { el_id: dom_id(member) } }
= icon('times')
= sprite_icon('close', size: 16, css_class: 'gl-icon gl-text-black-normal!')
ee/spec/frontend/boards/components/board_list_selector/list_filter_spec.js
View file @ 0fc520b0
......@@ -36,7 +36,7 @@ describe('ListFilter', () => {
it('clears input field and emits `onSearchInput` event with empty value', () => {
expect(input.element.value).toBe('foobar');
wrapper.find('.dropdown-input-clear').trigger('click');
wrapper.find('.dropdown-input-clear').vm.$emit('click');
return Vue.nextTick().then(() => {
expect(input.element.value).toBe('');
......@@ -75,7 +75,7 @@ describe('ListFilter', () => {
it('renders search input icons', () => {
expect(wrapper.find('i.fa.fa-search.dropdown-input-search').exists()).toBe(true);
expect(wrapper.find('i.fa.fa-times.dropdown-input-clear').exists()).toBe(true);
expect(wrapper.find('.dropdown-input-clear').exists()).toBe(true);
});
});
});
locale/gitlab.pot
View file @ 0fc520b0
......@@ -20950,6 +20950,9 @@ msgstr ""
msgid "Remove user & report"
msgstr ""
msgid "Remove user from group"
msgstr ""
msgid "Removed"
msgstr ""
......
spec/features/admin/admin_users_spec.rb
View file @ 0fc520b0
......@@ -537,7 +537,7 @@ RSpec.describe "Admin::Users" do
it 'allows group membership to be revoked', :js do
page.within(first('.group_member')) do
accept_confirm { find('.btn-remove').click }
accept_confirm { find('.btn[data-testid="remove-user"]').click }
end
wait_for_requests
......
spec/frontend/vue_shared/components/file_finder/index_spec.js
View file @ 0fc520b0
......@@ -84,7 +84,7 @@ describe('File finder item spec', () => {
waitForPromises()
.then(() => {
vm.$el.querySelector('.dropdown-input-clear').click();
vm.clearSearchInput();
})
.then(waitForPromises)
.then(() => {
......@@ -94,13 +94,13 @@ describe('File finder item spec', () => {
.catch(done.fail);
});
it('clear button focues search input', done => {
it('clear button focuses search input', done => {
jest.spyOn(vm.$refs.searchInput, 'focus').mockImplementation(() => {});
vm.searchText = 'index';
waitForPromises()
.then(() => {
vm.$el.querySelector('.dropdown-input-clear').click();
vm.clearSearchInput();
})
.then(waitForPromises)
.then(() => {
......
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