From 3143dd19476cbfbe3fb7c34ba08c3cbb4cdaefa7 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Wed, 3 Nov 2021 22:10:10 +0100 Subject: [PATCH 01/41] search always visible and centered --- core/src/navigation/GlobalSearch.html | 58 ++++++++++++++++++++++++++- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/core/src/navigation/GlobalSearch.html b/core/src/navigation/GlobalSearch.html index 9433f26cfc..9c624f8c65 100644 --- a/core/src/navigation/GlobalSearch.html +++ b/core/src/navigation/GlobalSearch.html @@ -2,7 +2,7 @@
- {/if} + {#if isSearchFieldCentered} + + {#if showX} + + {:else} + + {/if} + + {/if} {/if}
{#if !isCustomSearchRenderer}
+{#if !isSearchFieldCentered}
+{/if} + diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html index 5ff1a6f055..699040856f 100644 --- a/core/src/navigation/TopNav.html +++ b/core/src/navigation/TopNav.html @@ -22,8 +22,16 @@ on:handleClick="{handleClickExternal}" />
+ {#if globalSearchConfig && globalSearchConfig.searchFieldCentered} +
+ +
+ {/if}
{#if !authorizationEnabled || isLoggedIn} {#if globalSearchConfig} + {#if !globalSearchConfig.searchFieldCentered} {/if} + {/if} {}, // onEnter: () => {}, From ff268b6338047774d4af135e3aa002ac90afba5c Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Mon, 8 Nov 2021 22:19:34 +0100 Subject: [PATCH 04/41] Globalsearch screen l --- core/src/navigation/GlobalSearchCentered.html | 76 ++++++++++++++++--- core/src/navigation/TopNav.html | 31 ++++---- 2 files changed, 77 insertions(+), 30 deletions(-) diff --git a/core/src/navigation/GlobalSearchCentered.html b/core/src/navigation/GlobalSearchCentered.html index c29b5278e1..5edb63930e 100644 --- a/core/src/navigation/GlobalSearchCentered.html +++ b/core/src/navigation/GlobalSearchCentered.html @@ -1,5 +1,5 @@ -
+
+ diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html index 699040856f..9512efc35c 100644 --- a/core/src/navigation/TopNav.html +++ b/core/src/navigation/TopNav.html @@ -24,14 +24,12 @@
{#if globalSearchConfig && globalSearchConfig.searchFieldCentered}
- +
{/if}
- {#if !authorizationEnabled || isLoggedIn} {#if globalSearchConfig} - {#if !globalSearchConfig.searchFieldCentered} + {#if !authorizationEnabled || isLoggedIn} {#if globalSearchConfig} {#if + !globalSearchConfig.searchFieldCentered} - {/if} - {/if} + {/if} {/if} {#if (visibleNodeCount - globalNavNodeCount > 0) || isProductSwitcherAvailable || contextSwitcherConfig || globalSearchConfig } +
@@ -421,7 +426,7 @@ import ContextSwitcher from './ContextSwitcher.html'; import ProductSwitcher from './ProductSwitcher.html'; import GlobalSearch from './GlobalSearch.html'; - import GlobalSearchCentered from './GlobalSearchCentered.html' + import GlobalSearchCentered from './GlobalSearchCentered.html'; import TopNavNode from './TopNavNode.html'; import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte'; import { LuigiAuth, LuigiConfig, LuigiI18N } from '../core-api'; @@ -703,11 +708,6 @@ display: none; } - .lui-global-search{ - order: 2; - flex: 1; - } - .nav-icon { height: 100%; } @@ -742,11 +742,6 @@ :global(.lui-mobileOnly) .lui-burger { display: none; } - - .lui-global-search{ - min-width: 22rem; - } - } :global(.no-side-nav) { From a6e5d43ec7dba16ad7961f2a9dbcff4da20bcf65 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Tue, 16 Nov 2021 19:22:15 +0100 Subject: [PATCH 05/41] tmp and dirty solution --- core/src/App.html | 67 ++++++ core/src/navigation/GlobalSearch.html | 17 +- core/src/navigation/GlobalSearchCentered.html | 190 ++++++++++++++---- core/src/navigation/TopNav.html | 24 ++- 4 files changed, 232 insertions(+), 66 deletions(-) diff --git a/core/src/App.html b/core/src/App.html index f9f1015d94..fa226c6115 100644 --- a/core/src/App.html +++ b/core/src/App.html @@ -95,6 +95,7 @@ bind:inputElem bind:luigiCustomSearchRenderer__slot burgerTooltip="{burgerTooltip}" + bind:globalSearchContainerWidth /> {#if !(hideNav)} { + handleVisibilityGlobalSearch(); resizeMicrofrontendIframe(); const isMobileToDesktop = @@ -1681,6 +1698,13 @@ }; }); } + + // if(document.querySelector('.lui-global-search')){ + // globalSearchContainerWidth=document.querySelector('.lui-global-search').offsetWidth; + // console.log('clientWidth ', document.querySelector('.lui-global-search').offsetWidth) + // console.log('offsetWidth ', document.querySelector('.lui-global-search').clientWidth) + // } + handleVisibilityGlobalSearch(); }); afterUpdate(() => { @@ -2215,6 +2239,49 @@ } } + /* :global(.lui-global-search-input--visible){ + display:inline-block; + } + + :global(.lui-global-search-input--hidden){ + display:none; + } + + :global(.lui-global-search-btn--hidden){ + display:none; + background-color:green; + } + :global(.lui-global-search-btn--visible){ + display:inline-block; + background-color:red; + } + + @media (min-width: globalSearchContainerWidth){ + :global(.lui-global-search .lui-global-search-input--visible){ + display:none; + } + } + + @media (max-width: globalSearchContainerWidth - 1){ + :global(.lui-global-search .lui-global-search-input--visible){ + display:inline-block; + } + } */ + + /* @media (min-width:(800*1px) ){ + :global(.lui-global-search-btn--visibility){ + display:inline-block; + background-color:red; + } + } + + @media (max-width:globalSearchContainerWidth - 1){ + :global(.lui-global-search-btn--visibility){ + display:none; + background-color:green; + } + } */ + /*this is required after FD Styles v0.13.0 in order to make mobile and desktop shellbar work fine*/ @media (min-width: $desktopMaxWidth) { :global(.fd-shellbar__action--desktop) { diff --git a/core/src/navigation/GlobalSearch.html b/core/src/navigation/GlobalSearch.html index 66a28953b6..8ddba7aa80 100644 --- a/core/src/navigation/GlobalSearch.html +++ b/core/src/navigation/GlobalSearch.html @@ -2,7 +2,7 @@
-{#if !search.searchFieldCentered}
-{/if} diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html index 9512efc35c..1280a42699 100644 --- a/core/src/navigation/TopNav.html +++ b/core/src/navigation/TopNav.html @@ -24,7 +24,18 @@
{#if globalSearchConfig && globalSearchConfig.searchFieldCentered}
- +
{/if}
@@ -127,14 +138,6 @@ {#if (visibleNodeCount - globalNavNodeCount > 0) || isProductSwitcherAvailable || contextSwitcherConfig || globalSearchConfig } -
@@ -441,7 +444,7 @@ import { SemiCollapsibleNavigation } from './services/semi-collapsed-navigation'; const dispatch = createEventDispatcher(); - + export let globalSearchContainerWidth; export let authorizationEnabled; export let autologinEnabled; export let isLoggedIn = false; @@ -466,6 +469,7 @@ export let userInfo = {}; export let urlAuthError; export let globalSearchConfig; + export let isGlobalSearchMobileView; export let isSearchFieldVisible; export let inputElem; export let luigiCustomSearchRenderer__slot; From 95323ed9a732c968cf965fb393313648f4653396 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Wed, 17 Nov 2021 12:59:50 +0100 Subject: [PATCH 06/41] no message --- core/src/navigation/GlobalSearchCentered.html | 37 +++++++++---------- .../helpers/global-search-helpers.js | 12 ++++++ core/src/utilities/helpers/index.js | 1 + 3 files changed, 30 insertions(+), 20 deletions(-) create mode 100644 core/src/utilities/helpers/global-search-helpers.js diff --git a/core/src/navigation/GlobalSearchCentered.html b/core/src/navigation/GlobalSearchCentered.html index 38f377cfea..edfe472493 100644 --- a/core/src/navigation/GlobalSearchCentered.html +++ b/core/src/navigation/GlobalSearchCentered.html @@ -116,7 +116,7 @@ diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html index 1280a42699..02579354a7 100644 --- a/core/src/navigation/TopNav.html +++ b/core/src/navigation/TopNav.html @@ -24,18 +24,18 @@
{#if globalSearchConfig && globalSearchConfig.searchFieldCentered}
- + />
{/if}
@@ -444,7 +444,6 @@ import { SemiCollapsibleNavigation } from './services/semi-collapsed-navigation'; const dispatch = createEventDispatcher(); - export let globalSearchContainerWidth; export let authorizationEnabled; export let autologinEnabled; export let isLoggedIn = false; @@ -469,7 +468,6 @@ export let userInfo = {}; export let urlAuthError; export let globalSearchConfig; - export let isGlobalSearchMobileView; export let isSearchFieldVisible; export let inputElem; export let luigiCustomSearchRenderer__slot; diff --git a/core/src/utilities/helpers/global-search-helpers.js b/core/src/utilities/helpers/global-search-helpers.js index 8544ecdd08..df3a19b9bf 100644 --- a/core/src/utilities/helpers/global-search-helpers.js +++ b/core/src/utilities/helpers/global-search-helpers.js @@ -1,12 +1,15 @@ +/* istanbul ignore file */ class GlobalSearchHelperClass { - constructor() {} + constructor() {} - calculateGlobalSearchCtnWidth(){ - if(document.querySelector('.lui-global-search')){ - return document.querySelector('.lui-global-search').offsetWidth; - } - return null; + handleVisibilityGlobalSearch() { + const globalSearchCtn = document.querySelector('.lui-global-search'); + if (globalSearchCtn.offsetWidth <= 384) { + globalSearchCtn.classList.add('lui-global-search-toogle'); + } else { + globalSearchCtn.classList.remove('lui-global-search-toogle'); } + } } -export const GlobalSearchHelper = new GlobalSearchHelperClass(); \ No newline at end of file +export const GlobalSearchHelper = new GlobalSearchHelperClass(); From 27133f4a2a24cf3d887700ba746086aee6e5565a Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Thu, 18 Nov 2021 15:20:34 +0100 Subject: [PATCH 08/41] docs + tests --- core/src/navigation/GlobalSearchCentered.html | 22 ++++++---- docs/navigation-parameters-reference.md | 4 ++ .../tests/0-fiddle/fiddle-navigation.spec.js | 41 +++++++++++++++++++ .../src/luigi-config/extended/globalSearch.js | 2 +- 4 files changed, 60 insertions(+), 9 deletions(-) diff --git a/core/src/navigation/GlobalSearchCentered.html b/core/src/navigation/GlobalSearchCentered.html index 92ee6597c4..e30afb4931 100644 --- a/core/src/navigation/GlobalSearchCentered.html +++ b/core/src/navigation/GlobalSearchCentered.html @@ -109,7 +109,7 @@ aria-haspopup="true" aria-expanded="{!isSearchFieldVisible}" on:click="{toggleSearch}" - data-testid="luigi-search-btn-desktop" + data-testid="luigi-search-cancel-btn" > Cancel @@ -132,13 +132,10 @@ export let searchResult = []; export let displaySearchResult; export let displayCustomSearchResult; - export let isGlobalSearchMobileView; - export let globalSearchContainerWidth; export let inputElem; export let luigiCustomSearchRenderer__slot; export let luigiCustomSearchItemRenderer__slotContainer; export let globalSearchConfig; - export let isMobile; const dispatch = createEventDispatcher(); const searchApiObj = { fireItemSelected: item => { @@ -151,7 +148,6 @@ let isCustomSearchRenderer; let isCustomSearchResultItemRenderer; let clearSearchFieldBtn = false; - let globalSearchCtnWidth; onMount(async () => { search = globalSearchConfig; @@ -162,11 +158,9 @@ } getCustomRenderer(); GlobalSearchHelper.handleVisibilityGlobalSearch(); - //bind element in var (bind:this) - let globalSearchCtn = document.querySelector('.lui-global-search'); + const globalSearchCtn = document.querySelector('.lui-global-search'); const resizeObserver = new ResizeObserver(entries => { GlobalSearchHelper.handleVisibilityGlobalSearch(); - console.log('Size changed'); }); resizeObserver.observe(globalSearchCtn); @@ -346,6 +340,11 @@ } function toggleSearch() { + if (!isSearchFieldVisible){ + setTimeout(() => { + setFocusOnGlobalSearchFieldDesktop(); + }); + } isSearchFieldVisible = !isSearchFieldVisible; } @@ -418,6 +417,7 @@ } .lui-global-search-cancel-btn.lui-global-search-cancel-btn--active { + text-align: center; position: absolute; right: 0; display: block; @@ -447,4 +447,10 @@ :global(.fd-shellbar__group) { flex-grow: 0; } + + @media (max-width:599px){ + :global(.fd-shellbar__logo){ + display:none; + } + } diff --git a/docs/navigation-parameters-reference.md b/docs/navigation-parameters-reference.md index 85d7ffd4a6..0c13acb2fc 100644 --- a/docs/navigation-parameters-reference.md +++ b/docs/navigation-parameters-reference.md @@ -837,6 +837,10 @@ The global search is an input field available in the top navigation bar. The sea - **description**: disables the on:keyUp and other internal handlers on the search input field. It is a plain input field then, which can be used to attach your own handlers. If set to `true`, a **searchProvider** must be defined in order to show the search field, which can contain your custom logic. It is recommended to initialize your custom logic in the [**lifeCycle.luigiAfterInit**](lifecycle-hooks.md#luigiafterinit) hook. - **since**: 1.5.0 +### searchFieldCentered +- **type**: boolean +- **description**: The search input field will be rendered in the center of the shellbar. +- **since**: NEXTRELEASE ### searchProvider - **type**: Object - **description**: The search provider is an object which contains different events and the possibility to implement a custom result renderer or change only the search result item. diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js index 5e39e11152..5ab5616aae 100644 --- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js +++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js @@ -711,4 +711,45 @@ describe('Fiddle', () => { }); }); }); + describe('GlobalSearchCentered', ()=>{ + let newConfig; + beforeEach(() => { + newConfig = cloneDeep(fiddleConfig); + }); + beforeEach(()=>{ + newConfig.globalSearch={ + searchFieldCentered: true, + searchProvider:{} + }; + + cy.visitWithFiddleConfig('/home', newConfig); + }); + context('Desktop', () => { + it('Search on large viewport', ()=>{ + cy.get('.lui-global-search-btn').should('not.be.visible'); + cy.get('.lui-global-search-cancel-btn').should('not.be.visible'); + cy.get('.lui-global-search-input').should('be.visible'); + }); + }); + context('Mobile', () => { + it.only('Search on smaller viewport', ()=>{ + cy.viewport('iphone-6'); + cy.get('.lui-global-search-btn').should('be.visible'); + cy.get('.lui-global-search-cancel-btn').should('not.be.visible'); + cy.get('.lui-global-search-input').should('not.be.visible'); + + cy.get('.lui-global-search-btn').click(); + + cy.get('.lui-global-search-btn').should('not.be.visible'); + cy.get('.lui-global-search-cancel-btn').should('be.visible'); + cy.get('.lui-global-search-input').should('be.visible'); + + cy.get('.lui-global-search-cancel-btn').click(); + + cy.get('.lui-global-search-btn').should('be.visible'); + cy.get('.lui-global-search-cancel-btn').should('not.be.visible'); + cy.get('.lui-global-search-input').should('not.be.visible'); + }); + }); + }); }); diff --git a/test/e2e-test-application/src/luigi-config/extended/globalSearch.js b/test/e2e-test-application/src/luigi-config/extended/globalSearch.js index e5c5de93e3..04a658e87b 100644 --- a/test/e2e-test-application/src/luigi-config/extended/globalSearch.js +++ b/test/e2e-test-application/src/luigi-config/extended/globalSearch.js @@ -2,7 +2,7 @@ class GlobalSearch { constructor() { this.searchResult = []; } - searchFieldCentered= true; + // searchFieldCentered= true; searchProvider = { // onInput: () => {}, // onEnter: () => {}, From 915a03a41e534872fd9cac83fc8c7fe43c031e7f Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Thu, 18 Nov 2021 15:22:02 +0100 Subject: [PATCH 09/41] commit hook --- core/src/navigation/GlobalSearchCentered.html | 10 +++++----- .../e2e/tests/0-fiddle/fiddle-navigation.spec.js | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/core/src/navigation/GlobalSearchCentered.html b/core/src/navigation/GlobalSearchCentered.html index e30afb4931..506010326e 100644 --- a/core/src/navigation/GlobalSearchCentered.html +++ b/core/src/navigation/GlobalSearchCentered.html @@ -128,7 +128,6 @@ KEYCODE_ESC } from '../utilities/keycode.js'; import { CSS_BREAKPOINTS } from '../utilities/constants'; - let isSearchFieldVisible; export let searchResult = []; export let displaySearchResult; export let displayCustomSearchResult; @@ -142,6 +141,7 @@ search.searchProvider.onSearchResultItemSelected(item); } }; + let isSearchFieldVisible; let searchResults = {}; let showPopOverCustomSearch = false; let search = {}; @@ -340,7 +340,7 @@ } function toggleSearch() { - if (!isSearchFieldVisible){ + if (!isSearchFieldVisible) { setTimeout(() => { setFocusOnGlobalSearchFieldDesktop(); }); @@ -448,9 +448,9 @@ flex-grow: 0; } - @media (max-width:599px){ - :global(.fd-shellbar__logo){ - display:none; + @media (max-width: 599px) { + :global(.fd-shellbar__logo) { + display: none; } } diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js index 5ab5616aae..6c326cea69 100644 --- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js +++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js @@ -732,7 +732,7 @@ describe('Fiddle', () => { }); }); context('Mobile', () => { - it.only('Search on smaller viewport', ()=>{ + it('Search on smaller viewport', ()=>{ cy.viewport('iphone-6'); cy.get('.lui-global-search-btn').should('be.visible'); cy.get('.lui-global-search-cancel-btn').should('not.be.visible'); From 782846246b760baff34c991b05df9894ca1e8b46 Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Thu, 18 Nov 2021 15:57:31 +0100 Subject: [PATCH 10/41] bundlesize ie11 increase --- core/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/package.json b/core/package.json index 5d10824919..8627e6b393 100644 --- a/core/package.json +++ b/core/package.json @@ -86,7 +86,7 @@ }, { "path": "./public-ie11/luigi-ie11.js", - "maxSize": "799kB", + "maxSize": "850kB", "compression": "none" }, { From e8c28d70ecba5d6a68fcbbe096617ff538aca18b Mon Sep 17 00:00:00 2001 From: "Doberer, Johannes" Date: Thu, 18 Nov 2021 22:11:41 +0100 Subject: [PATCH 11/41] i18n for cancel button --- core/src/navigation/GlobalSearchCentered.html | 10 ++++++++-- core/src/utilities/luigi-config-defaults.js | 3 ++- docs/navigation-parameters-reference.md | 5 +++++ 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/core/src/navigation/GlobalSearchCentered.html b/core/src/navigation/GlobalSearchCentered.html index 506010326e..224adeab43 100644 --- a/core/src/navigation/GlobalSearchCentered.html +++ b/core/src/navigation/GlobalSearchCentered.html @@ -111,13 +111,13 @@ on:click="{toggleSearch}" data-testid="luigi-search-cancel-btn" > - Cancel + {$getTranslation(search.globalSearchCenteredCancelButton)}
{/if}