Is it possible to use custom fields to apply list-tree instead of wrapping the content in list-tree style

#1

I like @twMat http://listtree.tiddlyspot.com/ which gives styled list.
Currently we have to wrap the tiddler content within style list-tree to get the tree like styling . Is it possible to apply this style by using custom fields instead.

Multicolumn tiddler layout of shiraz plug in uses a custom field called class with field values multicol , multicol2 , multicol3 etc to get multicolumn layout for tiddler contents. And I use a custom viewtoolbar button as shown here to toggle between various multicolumn layout as needed - see this demo - Use this image viewtoolbar button to change the field values.

Is it possible to apply listtree styling in a similar way using custom style fields ? This helps to avoid any changes to the tiddler text field and the styles can be toggled using a viewtoolbar button.

Edit: It seems to work if I add a field class with field value list-tree to the tiddler - see these two tiddler - one uses style wrapping and other using class field for list tree.

But there is a difference in the styling between those two tiddlers. Also it won’t work if I want to use the class field for multicol at the same time

#2

I didn’t examine the links you provide but it should be possible to make the existence of some specific field make the tiddler apply a style to bullet lists in that tiddler. It would, however, probably apply it to all bullet lists in that tiddler (or, specifically, e.g always the first bullet list, or some other exact location).

One general idea to implement it (you’ll have to experiment and maybe there are better methods) would be a dynamic stylesheet that investigates if a tiddler has the field, e.g

tags: $:/tags/Stylesheet
text:
<$list filter='[all[tiddlers]has[stylefield]stylefield[listtree]]'>

      and here you paste the whole original listtree stylesheet but with
      [data-tiddler-title="{{!!title}}"] before each style definition

</$list>

…yeah, will take some fiddling :wink:

#3

I will try your suggestion.

In the meantime I did some experiments. It seems to work if I add a field class with field value list-tree to the tiddler - see these two tiddler - one uses style wrapping and other using class field for list tree.

But there is a difference in the styling between those two tiddlers. Also it won’t work if I want to use the class field for multicol at the same time

So I will return after trying your suggestions

#4

I tried this code

<$list filter='[all[tiddlers]has[stylefield]stylefield[listtree]]'>
<pre>
 [data-tiddler-title="{{!!title}}"] .list-tree, .list-tree ul, .list-tree li { position: relative; }

 [data-tiddler-title="{{!!title}}"] .list-tree li { list-style: none; }

 [data-tiddler-title="{{!!title}}"] .list-tree ul { padding: 0 0 0 2em; }

 [data-tiddler-title="{{!!title}}"] .list-tree li::before, .list-tree li::after {
    content: "";
    position: absolute;
    left: -1em;
}

/* horizontal line */
 [data-tiddler-title="{{!!title}}"] .list-tree li::before {
    border-bottom: {{!!list-tree-thickness}} solid {{!!list-tree-color}};
    top: .6em; 
    width: 7px;
}

/* vertical line */
 [data-tiddler-title="{{!!title}}"] .list-tree ul li::after {
    border-left: {{!!list-tree-thickness}} solid {{!!list-tree-color}};
    height: 100%;
    top: .1em;
}

 [data-tiddler-title="{{!!title}}"] .list-tree ul > li:last-child::after { height: .5em; }

/* top-level: Lines if multiple top elements. No lines if single top element. */

 [data-tiddler-title="{{!!title}}"] .list-tree > li:last-of-type:before { display:none; }

 [data-tiddler-title="{{!!title}}"] .list-tree > li:first-of-type:before { border-top: {{!!list-tree-thickness}} solid {{!!list-tree-color}}; }

 [data-tiddler-title="{{!!title}}"] .list-tree > li:before {
    border-left: {{!!list-tree-thickness}} solid {{!!list-tree-color}};
    height: 100%;
}
<pre>
</$list>

But its not working - see this tiddler.

#5

Based on a quick peek at your link:

In the resulting stylesheet it looks like this:

[data-tiddler-title="Polycystic Ovaries 2"] .list-tree, .list-tree ul, .list-tree li { position: relative; }

You must insert the [...] part also after every comma, i.e the above needs to be

[data-tiddler-title="Polycystic Ovaries 2"] .list-tree, 
[data-tiddler-title="Polycystic Ovaries 2"] .list-tree ul,
[data-tiddler-title="Polycystic Ovaries 2"] .list-tree li { position: relative; }

This must be done throughout the stylesheet.

#6

Ah, no, you probably need to exchange the string .list-tree for the [...] part since you’re no longer wrapping the list in the list-tree style, i.e it is just an “ul”.

As I said, it’ll take some fiddling to test stuff :slight_smile:

#7

I did this and made some more tweaks - stylesheet tiddler. Now its working somewhat ok.

But if two tiddlers have the stylefield, only one is showing the horizontal line. See these two tiddlers - 1 and 2

image
image1920×885 167 KB

Also how to hide the outermost vertical line?