LP#1823367 De-encapsulate holdings grid styles to fix row highlighting
authorDan Wells <dbw2@calvin.edu>
Wed, 29 May 2019 17:06:50 +0000 (13:06 -0400)
committerJane Sandberg <sandbej@linnbenton.edu>
Thu, 18 Jul 2019 16:53:35 +0000 (09:53 -0700)
commita60fcd05ec4a77f08747a2cbdf22667f7b6960d2
tree673de4481eb6a36c5ac80b129b6eb9cfdee130b0
parent0ef978c6d5f1f7eeeece184d00ec76c80710d9bd
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>
Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.css
Open-ILS/src/eg2/src/app/staff/catalog/record/holdings.component.ts