ilios
add better text truncation method
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:
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)
@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.
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))
@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).
Note to self: attempt to create a mixin that can be used to facilitate the gradient from transparent->text background color.
@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 fixed all the stuff mentioned in point 1, but not sure how to approach point 2 without re-architecting the whole truncation system.
@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
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 -_-
@dartajax Excellent catch. The fade overlay is too tall and interfering. Back to the drawing board.
@stopfstedt @jrjohnson This needs a review again, and also there are two skipped tests in the fade-text-test.js file because I keep getting random results from the tests: sometimes it loads the text faded, sometimes it doesn't, almost like a race condition. Need another pair of eyes/brain cells on them, if possible.
Comments and probably useless advice added but I tried. I did discover a maybe bug, it seems like expanding doesn't work, it only gets bigger for this objective? I clicked and the icon changed, but the text is still faded.
Excellent bug catch. I made an uneducated change and introduced this bug, but figuring out why the bug happens now informs me to why not to make that uneducated change again.
@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.