]> git.evergreen-ils.org Git - Evergreen.git/commit
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:55:57 +0000 (09:55 -0700)
commitccc4c5d847ecddc6edb6731108156f3480a7a00b
tree821fff319992b112536a206fd5b8af0606bb2239
parent4372d5da3dd163a07db048e92a2eecd26518388f
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