From 9aeafafc8d2ba07dcfa95f9a70b97f8195e5d961 Mon Sep 17 00:00:00 2001 From: Andreas Steinmann Date: Fri, 14 Oct 2022 15:42:13 +0200 Subject: [PATCH] fix: remove active_catalog.png and budget-bar-indicator.png and replace with CSS styling (#1319) - remove the image active catalog (header) and the budget bar indicator (my account) image and replace with CSS only styling - add migration documentation BREAKING CHANGES: The active_catalog.png and budget-bar-indicator.png are removed and replaced with CSS styling. --- docs/guides/migrations.md | 2 ++ .../budget-bar/budget-bar.component.scss | 16 +++++++-- .../header-navigation.component.html | 1 + .../header-navigation.component.spec.ts | 24 +++++++++++-- src/assets/img/active_catalog.png | Bin 242 -> 0 bytes src/assets/img/budget-bar-indicator.png | Bin 202 -> 0 bytes .../components/header/main-navigation.scss | 34 ++++++++++++++++-- 7 files changed, 69 insertions(+), 8 deletions(-) delete mode 100644 src/assets/img/active_catalog.png delete mode 100644 src/assets/img/budget-bar-indicator.png diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md index 164170d4d5..959cce5c7a 100644 --- a/docs/guides/migrations.md +++ b/docs/guides/migrations.md @@ -16,6 +16,8 @@ Formly has been upgraded from version 5 to 6. Find more information in the [Formly Upgrade Guide](https://github.com/ngx-formly/ngx-formly/blob/main/UPGRADE-6.0.md). We still use deprecated form properties like 'templateOptions' and 'expressionProperties' for compatibility reasons but we are going to replace them in the next major release. +The two small black triangle images `active_catalog.png` (header: when hovering a catalog) and `budget-bar-indicator.png` (my account: budget bar) are removed and replaced by CSS styling. + ## 3.0 to 3.1 The SSR environment variable 'ICM_IDENTITY_PROVIDER' will be removed in a future release ( PWA 5.0 ). diff --git a/projects/requisition-management/src/app/pages/requisition-detail/budget-bar/budget-bar.component.scss b/projects/requisition-management/src/app/pages/requisition-detail/budget-bar/budget-bar.component.scss index a7e93abcda..2396197f48 100644 --- a/projects/requisition-management/src/app/pages/requisition-detail/budget-bar/budget-bar.component.scss +++ b/projects/requisition-management/src/app/pages/requisition-detail/budget-bar/budget-bar.component.scss @@ -36,8 +36,20 @@ position: absolute; z-index: 2; height: 30px; - margin-top: -9px; - background: transparent (url('/assets/img/budget-bar-indicator.png')) 100% -8px no-repeat; + margin-top: -7px; + + &::before { + // small arrow budget bar indicator + position: absolute; + top: 0; + right: -3px; + width: 0; + height: 0; + content: ''; + border-top: 6px solid #2f2f2f; + border-right: 6px solid transparent; + border-left: 6px solid transparent; + } .overflow-display { float: right; diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html index 0629505826..3aab3ea11c 100644 --- a/src/app/shell/header/header-navigation/header-navigation.component.html +++ b/src/app/shell/header/header-navigation/header-navigation.component.html @@ -12,6 +12,7 @@ [routerLink]="category.url" [attr.data-testing-id]="category.uniqueId + '-link'" [ngStyle]="{ width: !(0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren) ? '100%' : '' }" + class="main-navigation-link" > {{ category.name }} diff --git a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts index 33eb80df51..45036366f8 100644 --- a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts +++ b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts @@ -46,17 +46,35 @@ describe('Header Navigation Component', () => { expect(element).toMatchInlineSnapshot(`