Add counter variable to the list in the tag-pill

, ,
#1

I read that a counter attribute can be added to the ListWidget

I’ve been trying to include it in the pill-tag dropdown for a while now, but I haven’t figured out how to do it yet. Could anyone give me some advice?
I am playing around with this tiddler, but I’m not sure it’s the right one to modify: $:/core/ui/TagTemplate
I tought about making a new macro in place of: list-tagged-draggable (defined in $:/core/macros/list) and adding the counter attribute somewhere there, but I’m stuck.

P.S.
Could this have any major impact on performance?

#2

I think it’s not needed to use the counter attribute from the list-widget.

Use the count-widget or the count-operator instead.

1 Like
#3

This should be on the radar for @TW_Tones (tag-related tool specialist)

#4

@SteeringWheels could you say why you want this?

  • is it simply to have numbers next to the items in the tag pill dropdown?

Or is there some other reason?

1 Like
#5

Interesting, thanks

Yes, it is to have numbers next to the items. The numbers would help me when I sort the tiddlers: when I have a lot of tiddlers to be sorted with a single tag I often lose track of their position.

It’s not a big problem: if it does compromise the performance or it is too complicated for me to implement I don’t think I’ll worry too much about it. But I thought I was close to the solution

#6

Try this:

First, in $:/core/ui/TagTemplate, replace this line:

<$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>>/>

with this:

<ol><$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>> itemTemplate="NumberedListTemplate"/></ol>

This will cause the contents of the tag dropdown to be wrapped within an <ol> element (an “ordered list”, aka “numbered bullet items”). It also tells the <<list-tagged-draggable>> macro to use a custom list item template to render the list of tagged tiddlers.

Next, create a new tiddler named “NumberedListTemplate”, containing:

<li><$link/></li>

This provides the custom list item template that wraps each tag item link within an <li> element, which will display the links with bullets… and, since the first change wraps the entire list within an <ol> element, the bullet items will be shown as numbers.

AND… for an extra bit of nice formatting, in the first change above, instead of using just a plain <ol>, use

<ol style="max-height:30vh;overflow:auto;">

This will add scrolling to the dropdown list of tagged tiddlers if it is longer than 30vh (30% of the browser window height).

enjoy,
-e

3 Likes
#7

This is it! Thank you very much for the help! :smile:

I see, thank you for the explanation!

Not very important but there is a lot of white space, is there a way to reduce the space between numbers and list items?

#8

Create a new tiddler (e.g., “NumberedListTemplateStyles”), tagged with $:/tags/Stylesheet, containing:

ol .tc-menu-list-item li a { padding:0; }

You can also eliminate the top/bottom whitespace around the ol element in $:/core/ui/TagTemplate by using:

<ol style="margin:0;max-height:30vh;overflow:auto;">

enjoy,
-e

1 Like
#9

This is really nice. Thank you!
I did it like this, to keep just a little space:

ol .tc-menu-list-item li a { padding:0 14px 0 1px; }

Sure did :wink: