TruncatableComponent usability improvement

[atarix83]

References

• Fixes Improve usability of TruncatableComponet #1551

Description

This PR has the aim to improve the usability issues described in #1551

Instructions for Reviewers

To review this PR browse pages where the TruncatableComponent is used. It's usualy used for search result pages or item pages

List of changes in this PR:

• An additional button "Show more" it's been added after the gradient effect
  

Checklist

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes TSLint validation using yarn run lint
• My PR doesn't introduce circular dependencies
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR includes new, third-party dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.

[artlowel]

Thanks @atarix83! It looks unobtrusive, and it works.

The performance, while it's noticeably worse than the current main branch on higher page sizes, it is also better than I expected (at least on my machine), so I think this way of working may be feasible. I added some inline comments to the method that does the size calculations, because I think there are a few easy optimizations that can still be made

That said, @tdonohue it would be good if a few other people gave it a test with performance in mind as well (e.g. using high page sizes, grid view, resizing the window, etc), since I have an atypical setup

[atarix83]

@artlowel

we'll work to your feedback in the next days

[atarix83]

@artlowel

following your feedback we tried to improve performance issue, could you check again? thanks

[tdonohue]

👍 Thanks @atarix83 ! The code looks good. I tested it and it works well... I noticed that the "Show more" also works for long lists of authors (and longer titles when using the grid view)

I also paid close attention to performance, even using 100 items per page. I'm not seeing any noticeable change in performance with this usability improvement...if there is any change, it's very minor. The only very minor thing I noticed is that on grid view, sometimes the "Show more" link takes a brief moment to appear (less than a second) after the page loads. Overall, this all looks good to me! I feel it's good enough and we can always improve it later as needed. Thanks!

[atarix83]

@tdonohue

we have detected an issue where truncatable part that had the same number of line as the minimun number lines to show had the faded effect without the show more button. Now it's fixed, could you check again?

Before the fix

after the fix

[artlowel]

Thanks for the changes. The performance looks good!

I see a new issue on the grid view now though, perhaps related to the fix to @tdonohue's last feedback?

A fade-out is rendered on top right side of thumbnail

[atarix83]

@artlowel

issue should be fixed now, could you check again ?

[tdonohue]

👍 Thanks @atarix83 ! I re-tested this today, and I'm no longer able to reproduce any of the prior issues that I saw (e.g. the minor issue where "show more" appeared on grid view slightly after page load). I also can no longer reproduce the issue that @artlowel saw (where the fade out was rendered at the top of the thumbnail.)

All in all, this looks good to me, thanks!

[artlowel]

Thanks @atarix83! The issues are fixed

One more thing I noticed though: is it possible to leave out those "show more" links in the admin sidebar dso search popups? They almost double the height of each result, and you can't actually click them there

Perhaps leave them out any time the linkType of an object collection element is none because that means you won't be able to click the show more links anyway

[atarix83]

@artlowel

problem should be resolved

[artlowel]

Thanks @atarix83!

[tdonohue]

Merging as this is at +2. Thanks @atarix83 !