From 4e9e2b25e12cf346c8553a42f012644a1fa8d16a Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Thu, 11 May 2023 17:17:16 +0300 Subject: [PATCH 1/4] [Library & openaire-theme & Explore | explore-redesign]: Added search form in menu (navbar) in landing pages. 1. search.less: Added css for modifier .small-vertical for .input-wrapper of . 2. layout.service.ts: Added hasMenuSearchBarSubject: BehaviorSubject = new BehaviorSubject(false), parsing and getter/setter methods. 3. navigationBar.module.ts: Imported SearchInputModule. 4. navigationBar.component.ts: a. Added searchMode: boolean = false; and hasSearchBar: boolean = false; (and other helpful fields) b. Subscribe to queryParams to hide search bar and reset keyword | Subscribe to layoutService.hasMenuSearchBar to check if search should be included in navbar or not. c. Added methods "openSearch()" to show the search form and "goTo()" to trigger the search action and navigate to the search page. 5. navigationBar.component.html: Added
and search-icon button to show search bar | Added checks if searchMode is enabled (search form visible) or not. 6. app-routing.module.ts: In routes for landing pages added in data: hasMenuSearchBar: true. --- less/search.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/less/search.less b/less/search.less index 4a29f67..e514a3f 100644 --- a/less/search.less +++ b/less/search.less @@ -116,6 +116,14 @@ } } } + + &.small-vertical { + --search-input-icon-padding-vertical: 10px; + + & .search { + --input-padding-vertical: 10px; + } + } } .hook-inverse-misc() { -- 2.17.1 From 856e4827243cbbfd71d8fbe636d0aa019e99867b Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 12 May 2023 17:27:11 +0300 Subject: [PATCH 2/4] Add background modifier in search-input --- less/search.less | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/less/search.less b/less/search.less index e514a3f..ff701ba 100644 --- a/less/search.less +++ b/less/search.less @@ -10,9 +10,14 @@ --search-input-border-focus: var(--search-input-border); --search-input-border-style-focus: var(--search-input-border-style); /* Icon */ + --search-input-icon-ratio: 1.3; --search-input-icon-color: @global-secondary-background; --search-input-icon-color-collapsed: @global-color; --search-input-icon-color-disabled: @global-muted-color; + --search-input-icon-display: inline; + --search-input-icon-background-color: transparent; + --search-input-icon-background-color-disabled: transparent; + --search-input-icon-background-padding: 0px; --search-input-divider: @global-border-width solid @global-border; --search-input-icon-padding-horizontal: 15px; --search-input-icon-padding-vertical: 16px; @@ -37,7 +42,7 @@ } &.collapsed { - width: calc(2 * var(--search-input-icon-padding-horizontal) + 26px); + width: calc(2 * (var(--search-input-icon-padding-horizontal) + var(--search-input-icon-background-padding)) + var(--search-input-icon-ratio)*20px); & .search-icon { color: var(--search-input-icon-color-collapsed); @@ -66,10 +71,22 @@ cursor: pointer; user-select: none; + & > icon { + padding: var(--search-input-icon-background-padding); + border-radius: 50%; + display: var(--search-input-icon-display); + background-color: var(--search-input-icon-background-color); + } + + &.disabled { color: var(--search-input-icon-color-disabled); cursor: default; pointer-events: none; + + & > icon { + background-color: var(--search-input-icon-background-color-disabled); + } } } @@ -115,13 +132,30 @@ --input-font-size: 14px; } } - } - &.small-vertical { - --search-input-icon-padding-vertical: 10px; + &.small-vertical { + --search-input-icon-padding-vertical: 10px; - & .search { - --input-padding-vertical: 10px; + & .search { + --input-padding-vertical: 10px; + } + } + + &.background { + --search-input-icon-ratio: 1; + --search-input-icon-color: @global-inverse-color; + --search-input-icon-color-collapsed: @global-inverse-color; + --search-input-icon-color-disabled: @global-meta-color; + --search-input-icon-display: inline-block; + --search-input-icon-background-color: @global-secondary-background; + --search-input-icon-background-color-disabled: @global-muted-color; + --search-input-icon-background-padding: 7px; + --search-input-icon-padding-horizontal: 10px; + --search-input-icon-padding-vertical: 10px; + + &.small-vertical { + --search-input-icon-padding-vertical: 6px; + } } } } -- 2.17.1 From 976591a2476a8cd995fb26d6f797310ae9e8a788 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 12 May 2023 18:06:58 +0300 Subject: [PATCH 3/4] Add mofifier background in input also for action-icon --- less/input.less | 28 ++++++++++++++++++++++++++++ less/search.less | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/less/input.less b/less/input.less index 58f3c1a..91bf11f 100644 --- a/less/input.less +++ b/less/input.less @@ -35,6 +35,10 @@ /* Action */ --input-action-icon-color: @global-secondary-background; --input-action-icon-color-disabled: @global-muted-color; + --input-action-icon-display: inline; + --input-action-icon-background-color: transparent; + --input-action-icon-background-color-disabled: transparent; + --input-action-icon-background-padding: 0px; } /** Input Wrapper */ @@ -151,10 +155,21 @@ cursor: pointer; user-select: none; + & > icon { + padding: var(--input-action-icon-background-padding); + border-radius: 50%; + display: var(--input-action-icon-display); + background-color: var(--input-action-icon-background-color); + } + &.disabled { color: var(--input-action-icon-color-disabled); cursor: default; pointer-events: none; + + & > icon { + background-color: var(--input-action-icon-background-color-disabled); + } } } @@ -317,6 +332,19 @@ &.normal-font-size { --input-font-size: 16px; } + + &.background { + --input-action-icon-color: @global-inverse-color; + --input-action-icon-color-disabled: @global-meta-color; + --input-action-icon-display: block; + --input-action-icon-background-color: @global-secondary-background; + --input-action-icon-background-color-disabled: @global-muted-color; + --input-action-icon-background-padding: 5px; + + &.small, &.small-vertical { + --input-action-icon-background-padding: 3px; + } + } } .uk-dropdown.options { diff --git a/less/search.less b/less/search.less index ff701ba..9cf4c12 100644 --- a/less/search.less +++ b/less/search.less @@ -146,7 +146,7 @@ --search-input-icon-color: @global-inverse-color; --search-input-icon-color-collapsed: @global-inverse-color; --search-input-icon-color-disabled: @global-meta-color; - --search-input-icon-display: inline-block; + --search-input-icon-display: block; --search-input-icon-background-color: @global-secondary-background; --search-input-icon-background-color-disabled: @global-muted-color; --search-input-icon-background-padding: 7px; -- 2.17.1 From a49dca9a915f04fb85f86eb446d045056bbe229c Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 15 May 2023 14:41:19 +0300 Subject: [PATCH 4/4] Change input text color to black. Remove background from disabled action-icon and search-icon on background modifier --- less/input.less | 4 +--- less/search.less | 2 -- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/less/input.less b/less/input.less index 91bf11f..cddde85 100644 --- a/less/input.less +++ b/less/input.less @@ -5,7 +5,7 @@ --input-placeholder-color: @global-meta-color; --input-placeholder-weight: 400; --input-hint-color: @global-meta-color; - --input-color: @global-color; + --input-color: @global-emphasis-color; --input-border-radius: @global-border-radius; /* Size modifiers */ --input-padding-vertical: 12px; @@ -335,10 +335,8 @@ &.background { --input-action-icon-color: @global-inverse-color; - --input-action-icon-color-disabled: @global-meta-color; --input-action-icon-display: block; --input-action-icon-background-color: @global-secondary-background; - --input-action-icon-background-color-disabled: @global-muted-color; --input-action-icon-background-padding: 5px; &.small, &.small-vertical { diff --git a/less/search.less b/less/search.less index 9cf4c12..19db6de 100644 --- a/less/search.less +++ b/less/search.less @@ -145,10 +145,8 @@ --search-input-icon-ratio: 1; --search-input-icon-color: @global-inverse-color; --search-input-icon-color-collapsed: @global-inverse-color; - --search-input-icon-color-disabled: @global-meta-color; --search-input-icon-display: block; --search-input-icon-background-color: @global-secondary-background; - --search-input-icon-background-color-disabled: @global-muted-color; --search-input-icon-background-padding: 7px; --search-input-icon-padding-horizontal: 10px; --search-input-icon-padding-vertical: 10px; -- 2.17.1