Add ellipsis to overflowing layer item name #559 #577
Conversation
I don't think we need the usual jquery tooltip here. Simply set the title attribute on the layer element to have the default HTML tooltip displayed after some time. No need to make it depend on the overflow either. |
| @@ -36,7 +36,7 @@ <h3 class="toolbox-title layers-title">Layers | |||
| <script type="text/template" id="layer-item-template"> | |||
| <li class="layer-item {{isselected:current-layer-item}}" | |||
| data-layer-index="{{layerindex}}"> | |||
| {{layername}} | |||
| <span class="layer-name">{{layername}}</span> | |||
There was a problem hiding this comment.
Everything looks good! let's just add title="{{layername}}" here and it should be good to go :)
Thanks!
|
Sorry for the spam 🙄, but it can be JQuery tooltip (init on the fly). I see that it's never done in the code base. Is that on purpose or it just never had the need ? |
|
I think we never had to dynamically add / remove tooltips yet. In this case I'm just leaning towards the default HTML tooltip, because I want it to be less intrusive than the jquery one. At least I would prefer if it was not displayed immediately (since it's a redundant information in case there is no ellipsis). If you have a solution in mind using the jquery tooltip, feel free to update the PR, I'll test it and give you my feedback. |
| if (layerItem.offsetWidth < layerItem.scrollWidth) { | ||
| $(layerItem).find('.layer-name') | ||
| .addClass('overflowing-name') | ||
| .attr('title', pskl.utils.TooltipFormatter.format(layer.getName())) |
There was a problem hiding this comment.
I don't think you need the TooltipFormatter here, it is only used for complex tooltips.
| @@ -70,6 +70,8 @@ | |||
| padding: 0 0 0 10px; | |||
| flex: 1 auto; | |||
| white-space: nowrap; | |||
| } | |||
| .layer-item .layer-name.overflowing-name { | |||
There was a problem hiding this comment.
nit: let's add en empty line before this new selector.
|
Thanks, merging! |
If I understand well your last comment on the issue, you want a tooltip when the layer name is overflowing ?
It's going to be hard to have tooltip only in case of overflowing (not impossible though) and lost native CSS performance.
This change is