Better readability of long file and event names #3295
Conversation
Signed-off-by: Jérôme Herbinet <[email protected]> Signed-off-by: Jérôme Herbinet <[email protected]>
|
This property is only part of the CSS Overflow Module Level 3 specification which is not yet finalized. While the browser support seems to be surprisingly good, I am not sure, we should/want to use this property already. @skjnldsv @marcoambrosini for opinions. This PR would supersede #1788. |
| text-overflow: ellipsis; | ||
| display: -webkit-box; |
There was a problem hiding this comment.
Would be good to also add the non webkit variant
There was a problem hiding this comment.
Hello @juliushaertl, I did some research this morning, and it seems that there are no specific tags for non-webkit browsers.
"display: -webkit-box" has no equivalent and seems to be compatible with all current browsers, except maybe Opera Mini and Internet Explorer (which is no longer maintained ... thank god). Moreover, the Firefox development tool does not know "display: -moz-box" for example and there is no "display: box" (for exemple as well). Also, "-webkit-line-clamp" and "-webkit-box-orient" seem to have no equivalent either and are, against all current appearances, compatible with the vast majority of current browsers. No CSS error in the Firefox inspector tool. All the research I've done on information on this subject, dating back less than a year, all leads to this set of properties, whether it's discussions, forums, blog posts, docs, etc:
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
What I say is not gospel, but I think these properties are worth trying (the risk of a problem seems very low if there is one). What do you think?
There was a problem hiding this comment.
Yep, this property is weird and unfortunately there is no non-webkit options.
Firefox supports it though https://caniuse.com/?search=webkit-box
|
And what do you think of the question I was asking myself, concerning the hyphenation with the use of the CSS hyphen property. I said: |
|
cypress if failing :( |
What should I do in this case ? 🤔 |
@skjnldsv can you tell me how to solve this problem (first time for me) ? Thx |
|
|
|
You need to download the snapshots from the Github Cypress action. Updating the snapshots on your local machine likely won't work, as the snapshots generated will be different. |
|
New PR #4194 |
Signed-off-by: Jérôme Herbinet [email protected]
Signed-off-by: Jérôme Herbinet [email protected]
Currently, in the right side panel, the labels end too easily with ellipsis dots. This is, from my personal and professional experience, too restrictive because we often cannot see the continuation of the file or event name (potentially also in any other similar case using this "vue"). It's a pain especially in Nextcloud Calendar but in Nextcloud Files too and probably in other apps.
I propose, with this change, to allow 3 lines to be displayed before the ellipsis.
Nextcloud Calendar test :
Nextcloud Files test :
Note :
My only point of hesitation concerns the management of long (or even very long) unbreakable words with the "hyphens" CSS property, which sometimes causes a hyphen to appear just above the suspension points.