Visual improvements to Nested Content (U4-10742)

[kjac]

As outlined in U4-10742, Nested Content breaks visually when using anything but very basic properties with very short values as label templates.

This PR proposes limiting the text to only one line (with an ellipsis text overflow), thus ensuring a harmonic look in all cases.

Additionally the PR introduces support for media, member and multitreenode pickers as well as richtext editors in the built-in filters for handling label templates.

I'm attaching before and after images of various scenarios that are handled by this PR.

Note that this is not a complete fix for U4-10742, as it calls for support for all built-in property editors. But it goes a long way for supporting more cases than is currently.

If this PR is accepted, the Nested Content documentation should be updated with info on how to use these filters - the current (and now updated) ncNodeName and the new ncRichtext.

Using richtext as label template

Using textarea as label template

Using media picker as label template

Using media picker with multiselect as label template

Using multinode treepicker as label template

Using member picker as label template

[kjac]

Please note that there's just been submitted another PR that might conflict with this.

[poornimanayar]

Hi @kjac ,

Many thanks for this work. I think its a really good improvement. I am going to review this PR and let you know about the outcome soon.

Regards,
Poornima, Community Pull Request team

[poornimanayar]

Hi @kjac ,

Just to let you know initial testing it looks all good. Its an awesome piece of work! I ll test it a bit more before I approve it :-)

Poornima

[kjac]

Awesome!

[poornimanayar]

Hi @kjac ,

I have tested the below in nested content

1. Rich Text editor
2. Textarea
3. media picker (single & multiple)
4. MNTP
5. Member Picker

In the multiple media picker I could recreate a scenario where only the name of the first item was being shown. However I could do that only once. I am going to test it all again. I also tried combining RichText and Media together and using them as named template as
{{content|ncRichtext}}-{{picture|ncNodeName}} . Its showing a comma separated list . Do you think you can look at this? Also I think it will be nice if we could rename the rich text filter as "ncRichText" to ensure consistency. I shall let you know how my testing goes :-)

Poornima

[kjac]

I'll have a look at it tonight, time permitting 😊

As for the multiple nodes I've got a vague recollection that it only displays the name of the first node (for performance considerations) and "..." to hint there are more selected. But it's been a bit so I am not sure.

Anyway I'll have a look. Thanks for testing so thoroughly!

[kjac]

@poornimanayar OK. I've made a few changes.

First and foremost the ncRichtext filter is now called ncRichText. Remember to update your NC configurations accordingly when you test it, or things will fail (check the console).

I've redone the hint that multiple items are selected in ncNodeName - from ", ..." to " (+4)" (if 4 additional items are selected):

I've tested combined label templates, and I think the comma separation you saw was due to the previous multiple item selection hint in ncNodeName. This is how it looks now if you use the label template {{nodes | ncNodeName}} ## {{text | ncRichText}} (given an RTE editor text and a multiple media picker nodes):

[poornimanayar]

Brilliant! It looks more positive. I shall give it another good round of test and let you know.

Poornima

[poornimanayar]

Hi @kjac,

I have tested it all again and I am happy with the changes :-)

Poornima

[kjac]

That's awesome!

[poornimanayar]

This is ace work! Really! I am pretty sure I have encounted atleast one of these scenarios in the past and wondered whether its possible to achieve. So to see that working is really great :-)

[nul800sebastiaan]

Thanks @kjac and sorry it has taken a while to get to this PR!

This all looks and works really great, well done! 👏 🙌

I noticed that this is your first accepted PR so I've added the well-deserved contrib badge to your Our profile: https://our.umbraco.com/member/25455

Thanks again and congrats! Keep up the great work!

[kjac]

Awesome 😁

[dawoe]

@kjac Could you update the docs of nested content with the new ncRichText filter ?
https://our.umbraco.com/documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Nested-Content

[kjac]

@dawoe it's on my to do list for next week 😁

[kjac]

@dawoe PR for the docs update is here.

[ronaldbarendse]

As mentioned in the documentation PR (umbraco/UmbracoDocs#940), should we also add additional filters to limit the amount of characters/words to display and show an indicator if more text is available (e.g. using an elipsis)?

Also, adding support for the Umbraco.MultipleTextstring property editor could be something like this:

angular.module("umbraco.filters").filter("ncMultipleTextstring", function () { return function (input) { return input.map(function (item) { return item.value; }).join(', '); }; });

What's wise? Create another issue and/or PR for this?

[kjac]

@ronaldbarendse this PR already ensures that the label text overflows with ellipsis. See the original screens in the very first comment.

[ronaldbarendse]

@kjac Yes, if the whole line is longer (probably done using CSS text-overflow), but not if you'd like to start with the first 5 words followed by something else (e.g. content/media/member names or even multiple richtext fields).