Presenting: ListTree - bullet lists to trees

[Mat]

The TWaddler proudly presents...

ListTree is a stylesheet plugin - no actual code - to reshape common TW asterisk/bullet lists into list trees.

Apply the style list-tree by use of the standard WikiText @@ technique.

@@.list-tree
*your
*bullet
*list
@@

<:-)

[Jed Carty]

After seeing what you manage to do with just css I think I need to study css more now.

[Webcorerad Bot]

Fantastic share. Thanks Mat. I didn’t even know we could make a plugin from a css file (newbie here…). I have to research more about this :)

Thank you again :)

On Wed, Jan 25, 2017 at 8:07 AM, Jed Carty <inmy...@gmail.com> wrote:

After seeing what you manage to do with just css I think I need to study css more now.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/38406b9e-1371-48fa-9c2a-9ae7f9dace59%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[PMario]

Hi Mat,

Very nice!

I did play a little bit with it and can barely see the lines, that's why I did tweak the stylesheet a bit.

At the top is a macro, that lets you easily change the line css, in only one line. Have a look. the \rules are needed, to make it "core conform" to stylesheets that use macros.

eg:

\define line(element)
    $element$: 2px solid gray;
\end

And I did some line breaks, to improve the readability. If you like it ... take it :)

have fun!
mario

[David Gifford]

Nice!

[Tobias Beer]

Hi Mat,

Me too... says: Nice! ;-)

Best wishes,

Tobias.

[Danielo Rodríguez]

That is awesome and looks stunning on my mobile phone,so you have a 10/10 on my scale.

Do you know what would be even more awesome? Turn it into a plugin and add a toolbar button to create a list tree easily. Wow,that would be even more than awesome ...

[Danielo Rodríguez]

Funny site title by the way ...

[Mat]

Thanks for all the compliments guys!!! :-D


@PMario

Thank you for improving it. I agree it would be nice to give user control of it but I'm at the same time afraid to overkill what is intended to be a small and very simple stylesheet. The ideal is a tiddler that people will accept as a "Ok, I'll add this to my TW because even if I rarely use it, it is so small/simple."

Now, your point about user settings (not least for visibility) is important so I would like to use CSS variables (see caniuse and e.g this intro). For some reason I can't get CSS variables to work in TW though. I'll raise a separate discussion on this in the dev group.


@Danielo

Do you know what would be even more awesome? Turn it into a plugin and add a toolbar button to create a list tree easily. Wow,that would be even more than awesome ...

Well, it is a plugin (...and it is actually thanks to your arguments elsewhere, defending plugins even if it only has a single tiddler!!!)

A toolbar button, by which I assume you refer to the "editor text field toolbar", is an interesting idea. I have not played much with these yet. But IMO the concept of applying styles via the click of a button is much greater than this ListTree fringe case. We should be able to easily style text segments as well as whole tiddlers by the click of a button and e.g some option list. I've dabbled with this elsewhere and might pick it up at some point.


<:-)

[Mat]

@PMario

Wohoo I am getting CSS variables to work after all! What I've missed before, that you brought attention to here, was the need for pragma rules.

Unfortunately the docs are pretty thin on pragma rules and no guidance on their parameters. In my dabbling it seems to be enough with "\rules only" (no clue what that means) - but is that sufficient or do I need more?

Here's the current code:

\rules only

/* Change line color and thickness here */
.list-tree {
  --list-tree-color: silver;
  --list-tree-thickness: 1px;
}

.list-tree, .list-tree ul, .list-tree li { position: relative; }

.list-tree li { list-style: none; }

.list-tree ul { padding: 0 0 0 2em; }

.list-tree li::before, .list-tree li::after {
    content: "";
    position: absolute;
    left: -1em;
}

/* horizontal line */
.list-tree li::before {
    border-bottom: var(--list-tree-thickness) solid var(--list-tree-color);
    top: .6em;
    width: 7px;
}

/* vertical line */
.list-tree ul li::after {
    border-left: var(--list-tree-thickness) solid var(--list-tree-color);
    height: 100%;
    top: .1em;
}

.list-tree ul > li:last-child::after { height: .5em; }

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

.list-tree > li:last-of-type:before { display:none; }

.list-tree > li:first-of-type:before { border-top:var(--list-tree-thickness) solid var(--list-tree-color); }

.list-tree > li:before {
    border-left: var(--list-tree-thickness) solid var(--list-tree-color);
    height: 100%;
}

Thank you!


<:-)

[PMario]

On Thursday, January 26, 2017 at 12:01:33 PM UTC+1, Mat wrote:

@PMario

Wohoo I am getting CSS variables to work after all! What I've missed before, that you brought attention to here, was the need for pragma rules.

pragma rules are only needed if you want to use TW-macros. The core uses it the way I did suggest.

IMO you should _not_ use css variables for the official plugin. You'll miss minimum 20% of browsers in use. So the plugin will cause a lot of support problems.

That's why TW macros are preferable!

-mario

[Jed Carty]

To go with what Mario said, it is easy to use macros and transclusions in css, I use that a lot in the things I make for plugin settings. In the context of tiddlywiki I think that transclusions are a better choice even if all browsers supported css variables because it gives easier control to users.

[Mat]

Updated

Having encountered Mario and Jed IRL I know these are not fellas to mess with... so no css variables: there are now standard transclusions and a minimal UI so the user can set the color and line thickness himself. At this stage, even a minimal UI as bordering on overkill for such a small creation but I'm hoping to eventually add some more stuff to style e.g lists.

<:-)

[Mat]

Addendum:

Birthe kindly informed me that @Stephan Hradek already several years ago presented dirtree stylesheet. Same concept but a somewhat different css approach using images for the lines instead of borders. Thanks Birthe - good to know!

<:-)

[PMario]

On Thursday, January 26, 2017 at 3:00:31 PM UTC+1, Mat wrote:

Updated

Great stuff! ... Much better than my approach :)
 

Having encountered Mario and Jed IRL I know these are not fellas to mess with...

Harrrr
 

.. At this stage, even a minimal UI as bordering on overkill for such a small creation but I'm hoping to eventually add some more stuff to style e.g lists.

Yea, it's hard to keep the balance. Sometimes the docs is much more then the plugin. Especially with CSS plugins.

-mario