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 <dbw2@calvin.edu>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

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 a5dbf13..0a60418 100644 (file)
--- 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 a89444b..a412521 100644 (file)
--- 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 {