From 6b162395e039fda5958eb10078ea65b6cfba8c86 Mon Sep 17 00:00:00 2001 From: kaddy645 Date: Tue, 26 Jul 2022 19:23:19 +0000 Subject: [PATCH 01/10] Issue-1858 Restyle global breadcrumbs Signed-off-by: kaddy645 --- src/core/public/_variables.scss | 3 ++ .../chrome/ui/header/header_breadcrumbs.scss | 49 +++++++++++++++++++ .../chrome/ui/header/header_breadcrumbs.tsx | 17 ++++++- 3 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/core/public/chrome/ui/header/header_breadcrumbs.scss diff --git a/src/core/public/_variables.scss b/src/core/public/_variables.scss index 9d8077b50ad..1a7b32e7f99 100644 --- a/src/core/public/_variables.scss +++ b/src/core/public/_variables.scss @@ -1,3 +1,6 @@ @import "@elastic/eui/src/global_styling/variables/header"; $osdHeaderOffset: $euiHeaderHeightCompensation; +$osdPacificSky: #b9d9eb; +$osdSanFranciscoFog: #d9e1e2; +$osdDarkCyanBlue: #003b5c; diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.scss b/src/core/public/chrome/ui/header/header_breadcrumbs.scss new file mode 100644 index 00000000000..d831adbd9a5 --- /dev/null +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.scss @@ -0,0 +1,49 @@ +@import "../../../../public/variables"; + +@mixin backround($color,$shape) { + background-color: #{$color}; + clip-path: $shape; + padding: $euiSizeXS - 2.5 $euiSizeL - $euiSizeXS; + border-radius: $euiSizeXS - 2; +} + +.osdHeaderBreadcrumbs { + [data-background="osdHeaderBreadcrumbs first"] { + @include backround($osdSanFranciscoFog, polygon(0% 0%,100% 0%,calc(100% - #{ + $euiSizeS + 2}) 100%,0% 100%)); + } + + [data-background="osdHeaderBreadcrumbs middle"] { + @include backround($osdSanFranciscoFog, + polygon($euiSizeS + 2 0%,100% 0%,calc(100% - #{$euiSizeS + 2}) 100%,0% 100%)); + } + + [data-background="osdHeaderBreadcrumbs last"] { + @include backround($osdPacificSky,polygon( + $euiSizeS + 2 0%, 100% 0%, calc(100% - #{$euiSizeS + 2}) 100%, 0% 100%)); + } + + [data-background="osdHeaderBreadcrumbs first last"] { + @include backround($osdPacificSky,polygon(0% 0%,100% 0%,calc(100% - #{$euiSizeS + 2}) 100%,0% 100%)); + } + + .euiBreadcrumbSeparator { + display: none; + } + + .euiBreadcrumb:not(.euiBreadcrumb--collapsed) { + max-width: 170px; + } + + .euiBreadcrumb__collapsedLink { + color: $osdDarkCyanBlue; + } + + .euiPopover__anchor { + padding: 0 $euiSizeS; + } + + .euiBreadcrumb:not(.euiBreadcrumb--last) { + margin-right: 0; + } +} diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx index ca50b15d5af..07e15ecd008 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx @@ -35,6 +35,8 @@ import useObservable from 'react-use/lib/useObservable'; import { Observable } from 'rxjs'; import { ChromeBreadcrumb } from '../../chrome_service'; +import './header_breadcrumbs.scss'; + interface Props { appTitle$: Observable; breadcrumbs$: Observable; @@ -57,7 +59,20 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) { i === 0 && 'first', i === breadcrumbs.length - 1 && 'last' ), + 'data-background': classNames( + 'osdHeaderBreadcrumbs', + i === 0 && 'first', + i > 0 && i < crumbs.length - 1 && 'middle', + i === crumbs.length - 1 && 'last' + ), })); - return ; + return ( + + ); } From 09f19823bce5493fea0e812a039a25db67f1e909 Mon Sep 17 00:00:00 2001 From: kaddy645 Date: Tue, 26 Jul 2022 19:31:38 +0000 Subject: [PATCH 02/10] Undo max count Signed-off-by: kaddy645 --- src/core/public/chrome/ui/header/header_breadcrumbs.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx index 07e15ecd008..ff7d47aa11b 100644 --- a/src/core/public/chrome/ui/header/header_breadcrumbs.tsx +++ b/src/core/public/chrome/ui/header/header_breadcrumbs.tsx @@ -70,7 +70,7 @@ export function HeaderBreadcrumbs({ appTitle$, breadcrumbs$ }: Props) { return ( From 39015bc8481578356937a7c7cfff8c8d30472dfc Mon Sep 17 00:00:00 2001 From: kaddy645 Date: Tue, 26 Jul 2022 20:44:09 +0000 Subject: [PATCH 03/10] update snapshot Signed-off-by: kaddy645 --- .../ui/header/__snapshots__/header.test.tsx.snap | 16 ++++++++++++---- .../header_breadcrumbs.test.tsx.snap | 3 +++ 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index a3ee7aec2cd..4b0d738696e 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3595,11 +3595,13 @@ exports[`Header handles visibility and lock changes 1`] = ` breadcrumbs={ Array [ Object { + "data-background": "osdHeaderBreadcrumbs first last", "data-test-subj": "breadcrumb first last", "text": "test", }, ] } + className="osdHeaderBreadcrumbs" data-test-subj="breadcrumbs" max={10} > @@ -3607,25 +3609,27 @@ exports[`Header handles visibility and lock changes 1`] = ` breadcrumbs={ Array [ Object { + "data-background": "osdHeaderBreadcrumbs first last", "data-test-subj": "breadcrumb first last", "text": "test", }, ] } - className="euiHeaderBreadcrumbs" + className="euiHeaderBreadcrumbs osdHeaderBreadcrumbs" data-test-subj="breadcrumbs" max={10} truncate={true} >