Commit efec7e08 authored by Dennis Tang's avatar Dennis Tang Committed by Phil Hughes

Resolve "Frontend for clarifying the usefulness of the search bar"

parent 8a1d55a3
This diff is collapsed.
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
*/ */
@mixin gitlab-theme( @mixin gitlab-theme(
$location-badge-color,
$search-and-nav-links, $search-and-nav-links,
$active-tab-border, $active-tab-border,
$border-and-box-shadow, $border-and-box-shadow,
...@@ -119,12 +118,6 @@ ...@@ -119,12 +118,6 @@
} }
} }
.location-badge {
color: $location-badge-color;
background-color: rgba($search-and-nav-links, 0.1);
border-right: 1px solid $sidebar-text;
}
.search-input::placeholder { .search-input::placeholder {
color: rgba($search-and-nav-links, 0.8); color: rgba($search-and-nav-links, 0.8);
} }
...@@ -141,10 +134,6 @@ ...@@ -141,10 +134,6 @@
background-color: $white-light; background-color: $white-light;
} }
.location-badge {
color: $gl-text-color;
}
.search-input-wrap { .search-input-wrap {
.search-icon { .search-icon {
fill: rgba($search-and-nav-links, 0.8); fill: rgba($search-and-nav-links, 0.8);
...@@ -200,7 +189,6 @@ ...@@ -200,7 +189,6 @@
body { body {
&.ui-indigo { &.ui-indigo {
@include gitlab-theme( @include gitlab-theme(
$indigo-100,
$indigo-200, $indigo-200,
$indigo-500, $indigo-500,
$indigo-700, $indigo-700,
...@@ -212,7 +200,6 @@ body { ...@@ -212,7 +200,6 @@ body {
&.ui-light-indigo { &.ui-light-indigo {
@include gitlab-theme( @include gitlab-theme(
$indigo-100,
$indigo-200, $indigo-200,
$indigo-500, $indigo-500,
$indigo-500, $indigo-500,
...@@ -224,7 +211,6 @@ body { ...@@ -224,7 +211,6 @@ body {
&.ui-blue { &.ui-blue {
@include gitlab-theme( @include gitlab-theme(
$theme-blue-100,
$theme-blue-200, $theme-blue-200,
$theme-blue-500, $theme-blue-500,
$theme-blue-700, $theme-blue-700,
...@@ -236,7 +222,6 @@ body { ...@@ -236,7 +222,6 @@ body {
&.ui-light-blue { &.ui-light-blue {
@include gitlab-theme( @include gitlab-theme(
$theme-light-blue-100,
$theme-light-blue-200, $theme-light-blue-200,
$theme-light-blue-500, $theme-light-blue-500,
$theme-light-blue-500, $theme-light-blue-500,
...@@ -248,7 +233,6 @@ body { ...@@ -248,7 +233,6 @@ body {
&.ui-green { &.ui-green {
@include gitlab-theme( @include gitlab-theme(
$theme-green-100,
$theme-green-200, $theme-green-200,
$theme-green-500, $theme-green-500,
$theme-green-700, $theme-green-700,
...@@ -260,7 +244,6 @@ body { ...@@ -260,7 +244,6 @@ body {
&.ui-light-green { &.ui-light-green {
@include gitlab-theme( @include gitlab-theme(
$theme-green-100,
$theme-green-200, $theme-green-200,
$theme-green-500, $theme-green-500,
$theme-green-500, $theme-green-500,
...@@ -272,7 +255,6 @@ body { ...@@ -272,7 +255,6 @@ body {
&.ui-red { &.ui-red {
@include gitlab-theme( @include gitlab-theme(
$theme-red-100,
$theme-red-200, $theme-red-200,
$theme-red-500, $theme-red-500,
$theme-red-700, $theme-red-700,
...@@ -284,7 +266,6 @@ body { ...@@ -284,7 +266,6 @@ body {
&.ui-light-red { &.ui-light-red {
@include gitlab-theme( @include gitlab-theme(
$theme-light-red-100,
$theme-light-red-200, $theme-light-red-200,
$theme-light-red-500, $theme-light-red-500,
$theme-light-red-500, $theme-light-red-500,
...@@ -296,7 +277,6 @@ body { ...@@ -296,7 +277,6 @@ body {
&.ui-dark { &.ui-dark {
@include gitlab-theme( @include gitlab-theme(
$theme-gray-100,
$theme-gray-200, $theme-gray-200,
$theme-gray-500, $theme-gray-500,
$theme-gray-700, $theme-gray-700,
...@@ -308,7 +288,6 @@ body { ...@@ -308,7 +288,6 @@ body {
&.ui-light { &.ui-light {
@include gitlab-theme( @include gitlab-theme(
$theme-gray-900,
$theme-gray-700, $theme-gray-700,
$theme-gray-800, $theme-gray-800,
$theme-gray-700, $theme-gray-700,
...@@ -357,10 +336,6 @@ body { ...@@ -357,10 +336,6 @@ body {
&:hover { &:hover {
background-color: $white-light; background-color: $white-light;
box-shadow: inset 0 0 0 1px $blue-200; box-shadow: inset 0 0 0 1px $blue-200;
.location-badge {
box-shadow: inset 0 0 0 1px $blue-200;
}
} }
} }
...@@ -373,13 +348,6 @@ body { ...@@ -373,13 +348,6 @@ body {
color: $gl-text-color; color: $gl-text-color;
} }
} }
.location-badge {
color: $theme-gray-700;
box-shadow: inset 0 0 0 1px $border-color;
background-color: $nav-badge-bg;
border-right: 0;
}
} }
.nav-sidebar li.active { .nav-sidebar li.active {
......
...@@ -467,7 +467,8 @@ $award-emoji-positive-add-lines: #bb9c13; ...@@ -467,7 +467,8 @@ $award-emoji-positive-add-lines: #bb9c13;
*/ */
$search-input-border-color: rgba($blue-400, 0.8); $search-input-border-color: rgba($blue-400, 0.8);
$search-input-focus-shadow-color: $dropdown-input-focus-shadow; $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
$search-input-width: 220px; $search-input-width: 240px;
$search-input-active-width: 320px;
$location-badge-active-bg: $blue-500; $location-badge-active-bg: $blue-500;
$location-icon-color: #e7e9ed; $location-icon-color: #e7e9ed;
......
$search-dropdown-max-height: 400px;
$search-avatar-size: 16px;
.search-results { .search-results {
.search-result-row { .search-result-row {
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
...@@ -24,8 +27,9 @@ ...@@ -24,8 +27,9 @@
box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%); box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
} }
input[type="checkbox"]:hover { input[type='checkbox']:hover {
box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%); box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%),
0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
} }
.search { .search {
...@@ -40,24 +44,15 @@ input[type="checkbox"]:hover { ...@@ -40,24 +44,15 @@ input[type="checkbox"]:hover {
height: 32px; height: 32px;
border: 0; border: 0;
border-radius: $border-radius-default; border-radius: $border-radius-default;
transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration; transition: border-color ease-in-out $default-transition-duration,
background-color ease-in-out $default-transition-duration,
width ease-in-out $default-transition-duration;
&:hover { &:hover {
box-shadow: none; box-shadow: none;
} }
} }
.location-badge {
white-space: nowrap;
height: 32px;
font-size: 12px;
margin: -4px 4px -4px -4px;
line-height: 25px;
padding: 4px 8px;
border-radius: $border-radius-default 0 0 $border-radius-default;
transition: border-color ease-in-out $default-transition-duration;
}
.search-input { .search-input {
border: 0; border: 0;
font-size: 14px; font-size: 14px;
...@@ -104,17 +99,28 @@ input[type="checkbox"]:hover { ...@@ -104,17 +99,28 @@ input[type="checkbox"]:hover {
} }
.dropdown-header { .dropdown-header {
text-transform: uppercase; // Necessary because glDropdown doesn't support a second style of headers
font-size: 11px; font-weight: $gl-font-weight-bold;
// .dropdown-menu li has 1px side padding
padding: $gl-padding-8 17px;
color: $gl-text-color;
font-size: $gl-font-size;
line-height: 16px;
} }
// Custom dropdown positioning // Custom dropdown positioning
.dropdown-menu { .dropdown-menu {
left: -5px; left: -5px;
max-height: $search-dropdown-max-height;
overflow: auto;
@include media-breakpoint-up(xl) {
width: $search-input-active-width;
}
} }
.dropdown-content { .dropdown-content {
max-height: none; max-height: $search-dropdown-max-height - 18px;
} }
} }
...@@ -124,6 +130,10 @@ input[type="checkbox"]:hover { ...@@ -124,6 +130,10 @@ input[type="checkbox"]:hover {
border-color: $dropdown-input-focus-border; border-color: $dropdown-input-focus-border;
box-shadow: none; box-shadow: none;
@include media-breakpoint-up(xl) {
width: $search-input-active-width;
}
.search-input-wrap { .search-input-wrap {
.search-icon, .search-icon,
.clear-icon { .clear-icon {
...@@ -141,12 +151,6 @@ input[type="checkbox"]:hover { ...@@ -141,12 +151,6 @@ input[type="checkbox"]:hover {
color: $gl-text-color-tertiary; color: $gl-text-color-tertiary;
} }
} }
.location-badge {
transition: all $default-transition-duration;
background-color: $nav-badge-bg;
border-color: $border-color;
}
} }
&.has-value { &.has-value {
...@@ -160,10 +164,24 @@ input[type="checkbox"]:hover { ...@@ -160,10 +164,24 @@ input[type="checkbox"]:hover {
} }
} }
&.has-location-badge { .inline-search-icon {
.search-input-wrap { position: relative;
width: 68%; margin-right: 4px;
color: $gl-text-color-secondary;
}
.identicon,
.search-item-avatar {
flex-basis: $search-avatar-size;
flex-shrink: 0;
margin-right: 4px;
} }
.search-item-avatar {
width: $search-avatar-size;
height: $search-avatar-size;
border-radius: 50%;
border: 1px solid $avatar-border;
} }
} }
......
...@@ -82,16 +82,16 @@ module SearchHelper ...@@ -82,16 +82,16 @@ module SearchHelper
ref = @ref || @project.repository.root_ref ref = @ref || @project.repository.root_ref
[ [
{ category: "Current Project", label: "Files", url: project_tree_path(@project, ref) }, { category: "In this project", label: "Files", url: project_tree_path(@project, ref) },
{ category: "Current Project", label: "Commits", url: project_commits_path(@project, ref) }, { category: "In this project", label: "Commits", url: project_commits_path(@project, ref) },
{ category: "Current Project", label: "Network", url: project_network_path(@project, ref) }, { category: "In this project", label: "Network", url: project_network_path(@project, ref) },
{ category: "Current Project", label: "Graph", url: project_graph_path(@project, ref) }, { category: "In this project", label: "Graph", url: project_graph_path(@project, ref) },
{ category: "Current Project", label: "Issues", url: project_issues_path(@project) }, { category: "In this project", label: "Issues", url: project_issues_path(@project) },
{ category: "Current Project", label: "Merge Requests", url: project_merge_requests_path(@project) }, { category: "In this project", label: "Merge Requests", url: project_merge_requests_path(@project) },
{ category: "Current Project", label: "Milestones", url: project_milestones_path(@project) }, { category: "In this project", label: "Milestones", url: project_milestones_path(@project) },
{ category: "Current Project", label: "Snippets", url: project_snippets_path(@project) }, { category: "In this project", label: "Snippets", url: project_snippets_path(@project) },
{ category: "Current Project", label: "Members", url: project_project_members_path(@project) }, { category: "In this project", label: "Members", url: project_project_members_path(@project) },
{ category: "Current Project", label: "Wiki", url: project_wikis_path(@project) } { category: "In this project", label: "Wiki", url: project_wikis_path(@project) }
] ]
else else
[] []
......
...@@ -6,21 +6,19 @@ ...@@ -6,21 +6,19 @@
- group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) } - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) }
- if @project && @project.persisted? - if @project && @project.persisted?
- project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: project_issues_path(@project), mr_path: project_merge_requests_path(@project), issues_disabled: !@project.issues_enabled? } - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: project_issues_path(@project), mr_path: project_merge_requests_path(@project), issues_disabled: !@project.issues_enabled? }
.search.search-form{ class: "#{'has-location-badge' if label.present?}" } .search.search-form
= form_tag search_path, method: :get, class: 'form-inline' do |f| = form_tag search_path, method: :get, class: 'form-inline' do |f|
.search-input-container .search-input-container
- if label.present?
.location-badge= label
.search-input-wrap .search-input-wrap
.dropdown{ data: { url: search_autocomplete_path } } .dropdown{ data: { url: search_autocomplete_path } }
= search_field_tag 'search', nil, placeholder: _('Search'), = search_field_tag 'search', nil, placeholder: _('Search or jump to…'),
class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options',
spellcheck: false, spellcheck: false,
tabindex: '1', tabindex: '1',
autocomplete: 'off', autocomplete: 'off',
data: { issues_path: issues_dashboard_path, data: { issues_path: issues_dashboard_path,
mr_path: merge_requests_dashboard_path }, mr_path: merge_requests_dashboard_path },
aria: { label: _('Search') } aria: { label: _('Search or jump to…') }
%button.hidden.js-dropdown-search-toggle{ type: 'button', data: { toggle: 'dropdown' } } %button.hidden.js-dropdown-search-toggle{ type: 'button', data: { toggle: 'dropdown' } }
.dropdown-menu.dropdown-select .dropdown-menu.dropdown-select
= dropdown_content do = dropdown_content do
......
---
title: UX improvements to top nav search bar
merge_request: 20537
author:
type: changed
doc/user/search/img/project_search.png

40.9 KB | W: | H:

doc/user/search/img/project_search.png

86.9 KB | W: | H:

doc/user/search/img/project_search.png
doc/user/search/img/project_search.png
doc/user/search/img/project_search.png
doc/user/search/img/project_search.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -4606,12 +4606,39 @@ msgstr "" ...@@ -4606,12 +4606,39 @@ msgstr ""
msgid "Search milestones" msgid "Search milestones"
msgstr "" msgstr ""
msgid "Search or jump to…"
msgstr ""
msgid "Search project" msgid "Search project"
msgstr "" msgstr ""
msgid "Search users" msgid "Search users"
msgstr "" msgstr ""
msgid "SearchAutocomplete|All GitLab"
msgstr ""
msgid "SearchAutocomplete|Issues I've created"
msgstr ""
msgid "SearchAutocomplete|Issues assigned to me"
msgstr ""
msgid "SearchAutocomplete|Merge requests I've created"
msgstr ""
msgid "SearchAutocomplete|Merge requests assigned to me"
msgstr ""
msgid "SearchAutocomplete|in all GitLab"
msgstr ""
msgid "SearchAutocomplete|in this group"
msgstr ""
msgid "SearchAutocomplete|in this project"
msgstr ""
msgid "Seconds before reseting failure information" msgid "Seconds before reseting failure information"
msgstr "" msgstr ""
......
...@@ -62,10 +62,6 @@ describe 'User uses header search field' do ...@@ -62,10 +62,6 @@ describe 'User uses header search field' do
end end
end end
it 'contains location badge' do
expect(page).to have_selector('.has-location-badge')
end
context 'when clicking the search field', :js do context 'when clicking the search field', :js do
before do before do
page.find('#search').click page.find('#search').click
......
.search.search-form.has-location-badge .search.search-form
%form.navbar-form %form.form-inline
.search-input-container .search-input-container
%div.location-badge
This project
.search-input-wrap .search-input-wrap
.dropdown .dropdown
%input#search.search-input.dropdown-menu-toggle %input#search.search-input.dropdown-menu-toggle
......
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