Commit e0e75e0f authored by Tomas Bulva's avatar Tomas Bulva

Increase the visibility of the keyboard shortcut for Global Search

closes issue: https://gitlab.com/gitlab-org/gitlab/-/issues/342427/

This commit adds a keyboard shortcut visual cue to search the input field.
It is automatically hidden when input fields become active.
Visual cue adjusts to all possible color themes. It also overpowers
the clear button when there is input in the field but the field is not active.

Changelog: fixed
parent 712fd7f3
...@@ -112,6 +112,9 @@ export default { ...@@ -112,6 +112,9 @@ export default {
count: this.searchOptions.length, count: this.searchOptions.length,
}); });
}, },
headerSearchActivityDescriptor() {
return this.showDropdown ? 'is-active' : 'is-not-active';
},
}, },
methods: { methods: {
...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']), ...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
...@@ -143,7 +146,8 @@ export default { ...@@ -143,7 +146,8 @@ export default {
v-outside="closeDropdown" v-outside="closeDropdown"
role="search" role="search"
:aria-label="$options.i18n.searchGitlab" :aria-label="$options.i18n.searchGitlab"
class="header-search gl-relative" class="header-search gl-relative gl-rounded-base"
:class="headerSearchActivityDescriptor"
> >
<gl-search-box-by-type <gl-search-box-by-type
id="search" id="search"
......
...@@ -45,6 +45,36 @@ input[type='checkbox']:hover { ...@@ -45,6 +45,36 @@ input[type='checkbox']:hover {
transition: border-color ease-in-out $default-transition-duration, transition: border-color ease-in-out $default-transition-duration,
background-color ease-in-out $default-transition-duration; background-color ease-in-out $default-transition-duration;
} }
&.is-not-active {
.btn.gl-clear-icon-button {
display: none;
}
&::after {
content: '/';
display: inline-block;
position: absolute;
top: 0;
right: 8px;
transform: translateY(calc(50% - 4px));
padding: 4px 5px;
font-size: $gl-font-size-small;
font-family: $monospace-font;
line-height: 1;
vertical-align: middle;
border-width: 0;
border-style: solid;
border-image: none;
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
// Safari
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
}
} }
.header-search-dropdown-menu { .header-search-dropdown-menu {
......
...@@ -1516,6 +1516,29 @@ svg.s16 { ...@@ -1516,6 +1516,29 @@ svg.s16 {
.header-search { .header-search {
width: 320px; width: 320px;
} }
.header-search.is-not-active::after {
content: "/";
display: inline-block;
position: absolute;
top: 0;
right: 8px;
transform: translateY(calc(50% - 4px));
padding: 4px 5px;
font-size: 12px;
font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
"Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
line-height: 1;
vertical-align: middle;
border-width: 0;
border-style: solid;
border-image: none;
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
.search { .search {
margin: 0 8px; margin: 0 8px;
} }
...@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder { ...@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
body.gl-dark .header-search input:active::placeholder { body.gl-dark .header-search input:active::placeholder {
color: #868686; color: #868686;
} }
body.gl-dark .header-search.is-not-active::after {
color: #fafafa;
background-color: rgba(250, 250, 250, 0.2);
}
body.gl-dark .search form { body.gl-dark .search form {
background-color: rgba(250, 250, 250, 0.2); background-color: rgba(250, 250, 250, 0.2);
} }
......
...@@ -1502,6 +1502,29 @@ svg.s16 { ...@@ -1502,6 +1502,29 @@ svg.s16 {
.header-search { .header-search {
width: 320px; width: 320px;
} }
.header-search.is-not-active::after {
content: "/";
display: inline-block;
position: absolute;
top: 0;
right: 8px;
transform: translateY(calc(50% - 4px));
padding: 4px 5px;
font-size: 12px;
font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
"Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
line-height: 1;
vertical-align: middle;
border-width: 0;
border-style: solid;
border-image: none;
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
.search { .search {
margin: 0 8px; margin: 0 8px;
} }
......
...@@ -176,6 +176,11 @@ ...@@ -176,6 +176,11 @@
} }
} }
} }
&.is-not-active::after {
color: $search-and-nav-links;
background-color: rgba($search-and-nav-links, 0.2);
}
} }
.search { .search {
......
#js-header-search.header-search{ data: { 'search-context' => header_search_context.to_json, #js-header-search.header-search.is-not-active.gl-relative{ data: { 'search-context' => header_search_context.to_json,
'search-path' => search_path, 'search-path' => search_path,
'issues-path' => issues_dashboard_path, 'issues-path' => issues_dashboard_path,
'mr-path' => merge_requests_dashboard_path, 'mr-path' => merge_requests_dashboard_path,
......
...@@ -1516,6 +1516,29 @@ svg.s16 { ...@@ -1516,6 +1516,29 @@ svg.s16 {
.header-search { .header-search {
width: 320px; width: 320px;
} }
.header-search.is-not-active::after {
content: "/";
display: inline-block;
position: absolute;
top: 0;
right: 8px;
transform: translateY(calc(50% - 4px));
padding: 4px 5px;
font-size: 12px;
font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
"Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
line-height: 1;
vertical-align: middle;
border-width: 0;
border-style: solid;
border-image: none;
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
.search { .search {
margin: 0 8px; margin: 0 8px;
} }
...@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder { ...@@ -1854,6 +1877,10 @@ body.gl-dark .header-search input::placeholder {
body.gl-dark .header-search input:active::placeholder { body.gl-dark .header-search input:active::placeholder {
color: #868686; color: #868686;
} }
body.gl-dark .header-search.is-not-active::after {
color: #fafafa;
background-color: rgba(250, 250, 250, 0.2);
}
body.gl-dark .search form { body.gl-dark .search form {
background-color: rgba(250, 250, 250, 0.2); background-color: rgba(250, 250, 250, 0.2);
} }
......
...@@ -1502,6 +1502,29 @@ svg.s16 { ...@@ -1502,6 +1502,29 @@ svg.s16 {
.header-search { .header-search {
width: 320px; width: 320px;
} }
.header-search.is-not-active::after {
content: "/";
display: inline-block;
position: absolute;
top: 0;
right: 8px;
transform: translateY(calc(50% - 4px));
padding: 4px 5px;
font-size: 12px;
font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
"Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
line-height: 1;
vertical-align: middle;
border-width: 0;
border-style: solid;
border-image: none;
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
.search { .search {
margin: 0 8px; margin: 0 8px;
} }
......
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