Коммит 682d4c3a создал по автору Ezekiel Kigbo's avatar Ezekiel Kigbo
Просмотр файлов

Merge branch 'tbulva-expanding-search-bar' into 'master' 

Expand navbar search field when focused

See merge request gitlab-org/gitlab!84187
владельцы 30748d59 03402d5a
Скрыть пробелы
Построчно Рядом
app/assets/javascripts/header_search/components/app.vue
Просмотр файла @ 682d4c3a
......@@ -120,9 +120,11 @@ export default {
...mapActions(['setSearch', 'fetchAutocompleteOptions', 'clearAutocomplete']),
openDropdown() {
this.showDropdown = true;
this.$emit('toggleDropdown', this.showDropdown);
},
closeDropdown() {
this.showDropdown = false;
this.$emit('toggleDropdown', this.showDropdown);
},
submitSearch() {
return visitUrl(this.currentFocusedOption?.url || this.searchQuery);
......@@ -146,7 +148,7 @@ export default {
v-outside="closeDropdown"
role="search"
:aria-label="$options.i18n.searchGitlab"
class="header-search gl-relative gl-rounded-base"
class="header-search gl-relative gl-rounded-base gl-w-full"
:class="headerSearchActivityDescriptor"
>
<gl-search-box-by-type
......
app/assets/javascripts/header_search/index.js
Просмотр файла @ 682d4c3a
......@@ -7,6 +7,7 @@ Vue.use(Translate);
export const initHeaderSearchApp = (search = '') => {
const el = document.getElementById('js-header-search');
let navBarEl = null;
if (!el) {
return false;
......@@ -19,8 +20,21 @@ export const initHeaderSearchApp = (search = '') => {
return new Vue({
el,
store: createStore({ searchPath, issuesPath, mrPath, autocompletePath, searchContext, search }),
mounted() {
navBarEl = document.querySelector('.header-content');
},
render(createElement) {
return createElement(HeaderSearchApp);
return createElement(HeaderSearchApp, {
on: {
toggleDropdown: (isVisible = false) => {
if (isVisible) {
navBarEl?.classList.add('header-search-is-active');
} else {
navBarEl?.classList.remove('header-search-is-active');
}
},
},
});
},
});
};
app/assets/stylesheets/framework/header.scss
Просмотр файла @ 682d4c3a
......@@ -22,14 +22,6 @@
min-height: $header-height;
padding-left: 0;
.title-container {
display: flex;
align-items: stretch;
flex: 1 1 auto;
padding-top: 0;
overflow: visible;
}
.title {
padding-right: 0;
color: currentColor;
......
app/assets/stylesheets/pages/search.scss
Просмотр файла @ 682d4c3a
......@@ -2,6 +2,11 @@ $search-dropdown-max-height: 400px;
$search-avatar-size: 16px;
$search-sidebar-min-width: 240px;
$search-sidebar-max-width: 300px;
$search-input-field-x-min-width: 200px;
$search-input-field-min-width: 320px;
$search-input-field-max-width: 600px;
$border-radius-medium: 3px;
.search-results {
.search-result-row {
......@@ -37,8 +42,44 @@ input[type='checkbox']:hover {
0 0 0 1px lighten($dropdown-input-focus-shadow, 20%);
}
.header-content {
.header-search-new {
max-width: $search-input-field-max-width;
}
&.header-search-is-active {
.navbar-collapse {
flex-grow: 1;
}
@include media-breakpoint-down(lg) {
.title-container {
flex: 0;
overflow: hidden;
}
}
@include media-breakpoint-up(xl) {
.navbar-nav {
padding-left: 1rem;
}
}
}
}
// This is a temporary workaround!
// the button in GitLab UI Search components need to be updated to not be the small size
// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540
.header-search .gl-search-box-by-type-clear.btn-sm {
padding: 0.5rem !important;
}
.header-search {
width: 320px;
min-width: $search-input-field-min-width;
@include media-breakpoint-between(md, lg) {
min-width: $search-input-field-x-min-width;
}
input,
svg {
......@@ -66,9 +107,10 @@ input[type='checkbox']:hover {
border-width: 0;
border-style: solid;
border-image: none;
border-radius: 3px;
border-radius: $border-radius-medium;
box-shadow: none;
white-space: pre-wrap;
box-sizing: border-box;
// Safari
word-wrap: break-word;
overflow-wrap: break-word;
......
app/assets/stylesheets/startup/startup-dark.scss
Просмотр файла @ 682d4c3a
......@@ -351,9 +351,6 @@ h1 {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
}
.sr-only {
position: absolute;
......@@ -777,13 +774,6 @@ input {
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
display: flex;
align-items: stretch;
flex: 1 1 auto;
padding-top: 0;
overflow: visible;
}
.navbar-gitlab .header-content .title {
padding-right: 0;
color: currentColor;
......@@ -1513,8 +1503,16 @@ svg.s12 {
svg.s16 {
vertical-align: -3px;
}
.header-content .header-search-new {
max-width: 600px;
}
.header-search {
width: 320px;
min-width: 320px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.header-search {
min-width: 200px;
}
}
.header-search.is-not-active::after {
content: "/";
......@@ -1535,6 +1533,7 @@ svg.s16 {
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
......@@ -2063,12 +2062,29 @@ body.gl-dark {
display: block;
}
}
@media (min-width: 992px) {
.gl-lg-display-block {
display: block;
}
}
.gl-display-inline-block\! {
display: inline-block !important;
}
.gl-align-items-stretch {
align-items: stretch;
}
.gl-flex-grow-1 {
flex-grow: 1;
}
.gl-relative {
position: relative;
}
.gl-absolute {
position: absolute;
}
.gl-w-full {
width: 100%;
}
.gl-px-3 {
padding-left: 0.5rem;
padding-right: 0.5rem;
......@@ -2076,6 +2092,9 @@ body.gl-dark {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-pt-0 {
padding-top: 0;
}
.gl-ml-n2 {
margin-left: -0.25rem;
}
......@@ -2086,6 +2105,12 @@ body.gl-dark {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gl-text-right {
text-align: right;
}
.gl-white-space-nowrap {
white-space: nowrap;
}
.gl-font-sm {
font-size: 0.75rem;
}
......
app/assets/stylesheets/startup/startup-general.scss
Просмотр файла @ 682d4c3a
......@@ -336,9 +336,6 @@ h1 {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
}
.sr-only {
position: absolute;
......@@ -762,13 +759,6 @@ input {
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
display: flex;
align-items: stretch;
flex: 1 1 auto;
padding-top: 0;
overflow: visible;
}
.navbar-gitlab .header-content .title {
padding-right: 0;
color: currentColor;
......@@ -1498,8 +1488,16 @@ svg.s12 {
svg.s16 {
vertical-align: -3px;
}
.header-content .header-search-new {
max-width: 600px;
}
.header-search {
width: 320px;
min-width: 320px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.header-search {
min-width: 200px;
}
}
.header-search.is-not-active::after {
content: "/";
......@@ -1520,6 +1518,7 @@ svg.s16 {
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
......@@ -1723,12 +1722,29 @@ svg.s16 {
display: block;
}
}
@media (min-width: 992px) {
.gl-lg-display-block {
display: block;
}
}
.gl-display-inline-block\! {
display: inline-block !important;
}
.gl-align-items-stretch {
align-items: stretch;
}
.gl-flex-grow-1 {
flex-grow: 1;
}
.gl-relative {
position: relative;
}
.gl-absolute {
position: absolute;
}
.gl-w-full {
width: 100%;
}
.gl-px-3 {
padding-left: 0.5rem;
padding-right: 0.5rem;
......@@ -1736,6 +1752,9 @@ svg.s16 {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-pt-0 {
padding-top: 0;
}
.gl-ml-n2 {
margin-left: -0.25rem;
}
......@@ -1746,6 +1765,12 @@ svg.s16 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gl-text-right {
text-align: right;
}
.gl-white-space-nowrap {
white-space: nowrap;
}
.gl-font-sm {
font-size: 0.75rem;
}
......
app/views/layouts/_header_search.html.haml
Просмотр файла @ 682d4c3a
#js-header-search.header-search.is-not-active.gl-relative{ data: { 'search-context' => header_search_context.to_json,
#js-header-search.header-search.is-not-active.gl-relative.gl-w-full{ data: { 'search-context' => header_search_context.to_json,
'search-path' => search_path,
'issues-path' => issues_dashboard_path,
'mr-path' => merge_requests_dashboard_path,
......
app/views/layouts/header/_default.html.haml
Просмотр файла @ 682d4c3a
......@@ -4,8 +4,8 @@
%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { qa_selector: 'navbar' } }
%a.gl-sr-only.gl-accessibility{ href: "#content-body" } Skip to content
.container-fluid
.header-content
.title-container.hide-when-top-nav-responsive-open
.header-content.js-header-content
.title-container.hide-when-top-nav-responsive-open.gl-transition-medium.gl-display-flex.gl-align-items-stretch.gl-pt-0
%h1.title
%span.gl-sr-only GitLab
= link_to root_path, title: _('Dashboard'), id: 'logo', **tracking_attrs('main_navigation', 'click_gitlab_logo_link', 'navigation') do
......@@ -31,13 +31,13 @@
.gl-display-none.gl-sm-display-block
= render "layouts/nav/top_nav"
.navbar-collapse.collapse
%ul.nav.navbar-nav
.navbar-collapse.gl-transition-medium.collapse
%ul.nav.navbar-nav.gl-w-full
- if current_user
= render 'layouts/header/new_dropdown', class: 'gl-display-none gl-sm-display-block'
= render 'layouts/header/new_dropdown', class: 'gl-display-none gl-sm-display-block gl-white-space-nowrap gl-text-right'
- if top_nav_show_search
- search_menu_item = top_nav_search_menu_item_attrs
%li.nav-item.header-search-new.d-none.d-lg-block.m-auto
%li.nav-item.header-search-new.gl-display-none.gl-lg-display-block.m-auto.gl-w-full
- unless current_controller?(:search)
- if Feature.enabled?(:new_header_search)
= render 'layouts/header_search'
......
app/views/layouts/header/_new_dropdown.html.haml
Просмотр файла @ 682d4c3a
......@@ -6,8 +6,8 @@
- return if menu_sections.empty?
%li.header-new.dropdown{ class: top_class, data: { track_label: "new_dropdown", track_action: "click_dropdown" } }
= link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip", id: "js-onboarding-new-project-link", title: title, ref: 'tooltip', aria: { label: title }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static', qa_selector: 'new_menu_toggle' } do
%li.header-new.gl-flex-grow-1.gl-flex-shrink-1.dropdown{ class: top_class, data: { track_label: "new_dropdown", track_action: "click_dropdown" } }
= link_to new_project_path, class: "header-new-dropdown-toggle has-tooltip gl-display-inline-block!", id: "js-onboarding-new-project-link", title: title, ref: 'tooltip', aria: { label: title }, data: { toggle: 'dropdown', placement: 'bottom', container: 'body', display: 'static', qa_selector: 'new_menu_toggle' } do
= sprite_icon('plus-square')
= sprite_icon('chevron-down', css_class: 'caret-down')
.dropdown-menu.dropdown-menu-right.dropdown-extended-height
......
ee/app/assets/stylesheets/startup/startup-dark.scss
Просмотр файла @ 682d4c3a
......@@ -351,9 +351,6 @@ h1 {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
}
.sr-only {
position: absolute;
......@@ -777,13 +774,6 @@ input {
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
display: flex;
align-items: stretch;
flex: 1 1 auto;
padding-top: 0;
overflow: visible;
}
.navbar-gitlab .header-content .title {
padding-right: 0;
color: currentColor;
......@@ -1513,8 +1503,16 @@ svg.s12 {
svg.s16 {
vertical-align: -3px;
}
.header-content .header-search-new {
max-width: 600px;
}
.header-search {
width: 320px;
min-width: 320px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.header-search {
min-width: 200px;
}
}
.header-search.is-not-active::after {
content: "/";
......@@ -1535,6 +1533,7 @@ svg.s16 {
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
......@@ -2063,12 +2062,29 @@ body.gl-dark {
display: block;
}
}
@media (min-width: 992px) {
.gl-lg-display-block {
display: block;
}
}
.gl-display-inline-block\! {
display: inline-block !important;
}
.gl-align-items-stretch {
align-items: stretch;
}
.gl-flex-grow-1 {
flex-grow: 1;
}
.gl-relative {
position: relative;
}
.gl-absolute {
position: absolute;
}
.gl-w-full {
width: 100%;
}
.gl-px-3 {
padding-left: 0.5rem;
padding-right: 0.5rem;
......@@ -2076,6 +2092,9 @@ body.gl-dark {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-pt-0 {
padding-top: 0;
}
.gl-ml-n2 {
margin-left: -0.25rem;
}
......@@ -2086,6 +2105,12 @@ body.gl-dark {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gl-text-right {
text-align: right;
}
.gl-white-space-nowrap {
white-space: nowrap;
}
.gl-font-sm {
font-size: 0.75rem;
}
......
ee/app/assets/stylesheets/startup/startup-general.scss
Просмотр файла @ 682d4c3a
......@@ -336,9 +336,6 @@ h1 {
.d-lg-none {
display: none !important;
}
.d-lg-block {
display: block !important;
}
}
.sr-only {
position: absolute;
......@@ -762,13 +759,6 @@ input {
min-height: var(--header-height, 40px);
padding-left: 0;
}
.navbar-gitlab .header-content .title-container {
display: flex;
align-items: stretch;
flex: 1 1 auto;
padding-top: 0;
overflow: visible;
}
.navbar-gitlab .header-content .title {
padding-right: 0;
color: currentColor;
......@@ -1498,8 +1488,16 @@ svg.s12 {
svg.s16 {
vertical-align: -3px;
}
.header-content .header-search-new {
max-width: 600px;
}
.header-search {
width: 320px;
min-width: 320px;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.header-search {
min-width: 200px;
}
}
.header-search.is-not-active::after {
content: "/";
......@@ -1520,6 +1518,7 @@ svg.s16 {
border-radius: 3px;
box-shadow: none;
white-space: pre-wrap;
box-sizing: border-box;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
......@@ -1723,12 +1722,29 @@ svg.s16 {
display: block;
}
}
@media (min-width: 992px) {
.gl-lg-display-block {
display: block;
}
}
.gl-display-inline-block\! {
display: inline-block !important;
}
.gl-align-items-stretch {
align-items: stretch;
}
.gl-flex-grow-1 {
flex-grow: 1;
}
.gl-relative {
position: relative;
}
.gl-absolute {
position: absolute;
}
.gl-w-full {
width: 100%;
}
.gl-px-3 {
padding-left: 0.5rem;
padding-right: 0.5rem;
......@@ -1736,6 +1752,9 @@ svg.s16 {
.gl-pr-2 {
padding-right: 0.25rem;
}
.gl-pt-0 {
padding-top: 0;
}
.gl-ml-n2 {
margin-left: -0.25rem;
}
......@@ -1746,6 +1765,12 @@ svg.s16 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.gl-text-right {
text-align: right;
}
.gl-white-space-nowrap {
white-space: nowrap;
}
.gl-font-sm {
font-size: 0.75rem;
}
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать