add better text truncation method

[michaelchadwick]

References ilios/ilios#3482

My first crack at changing our current <TruncateText> system to a <FadeText> system: instead of removing HTML and squishing text together, leave it all as-is but put a fade-to-bg effect on it. Only working on Session Objectives->Description for now, but could be expanded.

Old, Tired, Non-Ideal:

New, Wired, Superior(?):

The vertical spacing it takes up can be adjusted. Here's another one with more faded away:

[jrjohnson]

I like it on sessions, needs some attention on course objectives (and probably generically shouldn't specify it's own background, but should fade into whatever is behind it if possible)

[michaelchadwick]

@jrjohnson Good catch. I'm also realizing <TruncateText> is used in a few more places that I need to account for, so back to the drawing board.

[michaelchadwick]

Places where <TruncateText> is currently used and <FadeText> could replace:

• CourseObjectiveList
  • ObjectiveSortManager
• SessionObjectiveList
  • OfferingManager (this seems like it shouldn't change; only location, so usually short)
• SessionsGridOffering (this seems like it shouldn't change: only location, so usually short)
• WeekAtAGlance, as seen on an event's description (this seems like it shouldn't change: not in a grid)
  • LearningMaterialListItem, as seen on WaaG in an LM's "Public Notes" (this could use some discussion, as it's essentially the same as the parent list item, except that it displays slightly differently when expanded)
• MaterialListItem (this seems it shouldn't change: instructor name(s))

[michaelchadwick]

@jrjohnson I believe I fixed the background color issue, but had to be specific instead of general (thankfully, there are only three places to be specific about right now).

[jrjohnson]

Needs team discussion (and a couple tweaks).

[michaelchadwick]

Note to self: attempt to create a mixin that can be used to facilitate the gradient from transparent->text background color.

[michaelchadwick]

@jrjohnson I moved the component-specific styles in fade-text.scss into their respective component style files, which makes more sense. Two of them had to be in addition to the mixin they included because of different background colors, whereas the other one I was able to add to the mixin itself.

[jrjohnson]

I really love how this looks, I found a couple of new behavior / visual issues in testing:

1. Clicking on the unexpanded text does nothing. In the current implementation if you click on a collapsed objective the editor opens. I think that is good, but I'd also accept that clicking anywhere in the text expanded the entire block.
2. If the text is indented (like in a list) the control floats up into the middle instead of being at the bottom, this isn't an issue with our current control because the indentation never happens due to the HTML stripping:

3. Because we're using text length to collapse, but the actual behavior is height based it's a little confusing why only some things collapse (this may only be in tests and not in real life, and may not be fixable):

Not sure if we should go ahead with these or try and find fixes. Let's discuss.

[michaelchadwick]

@jrjohnson All good points. Will look into these.

[michaelchadwick]

@jrjohnson I fixed all the stuff mentioned in point 1, but not sure how to approach point 2 without re-architecting the whole truncation system.

[michaelchadwick]

@jrjohnson This has one failing testapp test, because it's testing for truncation length, and not the new visual fading thing. Not sure how to rewrite test, hmmm.

https://github.com/ilios/frontend/blob/master/packages/test-app/tests/integration/components/editable-field-test.js#L143-L154

[michaelchadwick]

Having some issues with getting a JS triggered click to target the correct item (thus, test won't pass). Manually clicking with a mouse/touch works fine, though. Frustrating -_-

[michaelchadwick]

@dartajax I finally got every test to pass; just have Percy to finish. Can you take a look, and bring this one home? Thanks a bunch.

[dartajax]

looks good to me