From a60fcd05ec4a77f08747a2cbdf22667f7b6960d2 Mon Sep 17 00:00:00 2001 From: Dan Wells Date: Wed, 29 May 2019 13:06:50 -0400 Subject: [PATCH] LP#1823367 De-encapsulate holdings grid styles to fix row highlighting By default, Angular will encapsulate CSS styles at the component level, applying them only to the component who loads them. The encapsulation is helpful in some circumstances, a burden in others, and can be worked around in at least two ways. One way is the use of ':host /deep/' in the style declaration. This will in effect apply the style to all child components of the current component's host, and is what we were doing here to style the grid rows internal to the holdings component. This worked, but the encapsulated style is created in such a way that it overrides any global styles. In addition, /deep/ is deprecated (although with no clear replacement). A second way to work around CSS encapsulation is to simply disable it. Right now, our grid styles are all at the global level, as encapsulation is disabled in the grid. Combined with the facts above, the end result is that our new row styles always trump the grid highlight style, and the rows no longer highlight. There are a number of ways to work around this, but none seemed obviously better than the others at this stage of development. This commit does both the simplest option and the one which matches the existing grid practice. That is, it disables CSS encapsulation for the holdings component so that the holdings styles can coexist with, and be overridden by, the grid styles (as needed in this case). Signed-off-by: Dan Wells Signed-off-by: Bill Erickson Signed-off-by: Jane Sandberg --- .../catalog/record/holdings.component.css | 18 +++++------------- .../staff/catalog/record/holdings.component.ts | 6 ++++-- 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css index a5dbf13af6..0a604184ba 100644 --- a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css +++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css @@ -1,29 +1,21 @@ /* -:host /deep/ allows us to share style with child components. -In this case, the holdings components wants its grid to see -the CSS we have defined for different row types - -See https://v2.angular.io/docs/ts/latest/guide/component-styles.html -*/ - -/* -:host /deep/ .holdings-copy-row { +.holdings-copy-row { } */ /* colors are based on "Evergreen Green", tinted and desaturated */ -:host /deep/ .holdings-volume-row { +.holdings-volume-row { background-color: #c9efe4; } -:host /deep/ .holdings-org-row { +.holdings-org-row { color: rgba(0, 0, 0, .8); background-color: #e1efeb; } /* Add additional classes for more deeply nested org unit hierarchies */ /* e.g. -:host /deep/ .holdings-org-row-0 {} -:host /deep/ .holdings-org-row-1 {} +.holdings-org-row-0 {} +.holdings-org-row-1 {} */ diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts index a89444b868..a41252117c 100644 --- a/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts @@ -1,4 +1,5 @@ -import {Component, OnInit, Input, ViewChild} from '@angular/core'; +import {Component, OnInit, Input, ViewChild, ViewEncapsulation + } from '@angular/core'; import {Router} from '@angular/router'; import {Observable, Observer, of} from 'rxjs'; import {map} from 'rxjs/operators'; @@ -73,7 +74,8 @@ class HoldingsEntry { @Component({ selector: 'eg-holdings-maintenance', templateUrl: 'holdings.component.html', - styleUrls: ['holdings.component.css'] + styleUrls: ['holdings.component.css'], + encapsulation: ViewEncapsulation.None }) export class HoldingsMaintenanceComponent implements OnInit { -- 2.43.2