Truncation #221
Truncation #221
Conversation
Conflicts: src/app/object-list/item-list-element/item-list-element.component.ts src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.scss src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts src/styles/_custom_variables.scss src/styles/_mixins.scss
ghost
assigned …ncation-implementation-test-fixes Conflicts: src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts
Conflicts: src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts
There was a problem hiding this comment.
👍 Gave this a test today, and it seems to work well. The code looks fine to me too, no objections.
I think this is ready to merge. Although, with master currently broken (see #232), I'm going to wait to push the green button until we can fix master.
|
Works visually very well on Fedora 27 in Firefox 58.0.1. |
|
It looks good to me too |
|
I've retested this today, and I do see the same behavior as @PTrottier around selecting text in Chrome. However, I noticed this only occurs if the text is faded/truncated. If you click on the text, it appears fully and you can easily select it. But, if the fade is in place, selecting the faded text is harder to achieve. That said, I think this is a relatively minor UX issue (and, as I said, if you click to expand the text first, it can be easily selected). So, I think this PR should still be merged as-is, and we can always open up a new ticket to describe this minor UX issue, as necessary. |
|
Agreed, this behaviour also does not occur in Firefox. |
|
Merged, and logged the minor UX bug here: #234 |
I implemented a truncation component that can contain one or more "truncatable" parts.
The truncation component itself can have one of the following 2 state: collapsed or expanded.
When the component is expanded, all its child "truncatable" parts are either totally expanded or capped at a specified amount of lines (@input() max-lines).
When the component is collapsed, all its child "truncatable' parts are capped at a specified amount of lines (@input() min-lines).
I tried a lot of different approaches to implement the multiline clamping, including libraries like shave, ellipsis, clamp...
The issue with all these libraries is that heights can only be calculated when the content is already displayed. At the moment, there's no way of knowing when a component is totally loaded, the default Angular Lifecycle Hooks can't provide us with a solution.
This is why @artlowel and I chose to implement this with CSS instead. We took some inspiration for this from popular websites with a comparable layout. The text is now fading out at the end of a clamped line.
You might expect an ellipsis at the end of a clamped line instead, but with CSS this is only possible outside of a text block. This did not give us the expected results, especially in list views.
For now, the truncation has been applied to the search result items (both list and grid view). Clicking a truncated component, will expand it, clicking it again will collapse it again.