Breadcrubs (tiddlersbar) browser-like funcionality

[Bartosz Wilinski]

Hello there.

I have been using TW since late December. I have no real experience with programming, but with help of Google and some lucky guessing I have managed to do quite well.

But still some things are beyond me, so I would be grateful for Your help. Could you tell me how could I program:

1)     A funcional max width of breadcrumbs tabs. As I thought max-width causes text to reach outside of tabs.

2)     A dynamic width of breadcrumbs tabs e.g. when there are enough tabs to reach right side of the screen they would get thinner with each additional tab till some minimal width.

3)     An ability to see the end of tiddlers titles, while in less wide form. It could be especial useful with shadow and system ones.

I am looking forward to seeing your answers.

 Lastly I will show off my work and hope that you will find it interesting. Tongerner did truly an amazing job with this plugin and customizing it for my personal use was a great experience.

I really like boxed buttons style, so I made breadcrumbs similar in appearance and added on hover highlight. The current tiddler is an exception of course. X buttons also have this highlight instead of „going bold” and excess tabs will go outside the screen instead of overflowing into the lower row. And I also added impromptu dividers between toolsbar butons.

[PMario]

Hi, 

Well done!

But

It would make it much easier, if you add a link to the plugin you use.

I could find it myself, but I just don't want to spend the time searching.

On the other hand I do find the problem interesting. I think the "shortened text" in tabs would be interesting for others too.

May be there is a way with some tricky CSS. I think I saw an article somewhere.

-mario

[PMario]

Hi,

Many of the TW system tiddlers do have "caption-field" or many plugins do have a "name-field". So the tabs macro could be changed to show 1 of them instead of the title. Not really a solution, since this will hide the real name. But at least it makes the text shorter :/

-m

[Bartosz Wilinski]

My bad. Rookie mistake.

This proof of concept is based on Tiddlersbar (http://tw5breadcrumbs.tiddlyspot.com/) and Toolbar (http://tw5toolbar.tiddlyspot.com/) plugins by Tongerner.

[Odin]

Hi!

About the dynamic width of the tabs, shrinking when there are more tabs. I think this can be done with CSS flexbox. Check out the flex-shrink property:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Op vrijdag 5 februari 2021 om 16:04:56 UTC+1 schreef bartosz.w...@gmail.com:

[Bartosz Wilinski]

Oooo. Seems promising. Thank You very much.

[Ton Gerner]

Hi,

Glad you do like my plugin and nice to see how you customized it.
According your questions I have to say it is beyond my capabilities. Others may chime in with good ideas.

Just for the record: since TiddlySpot cannot be used anymore, I decided to host my TW5 stuff at my Raspberry Pi home server available at http://www.tongerner.nl/TW5/TW5_index.html

Cheers,

Ton

[PMario]

On Friday, February 5, 2021 at 5:16:02 PM UTC+1 PMario wrote:

On the other hand I do find the problem interesting. I think the "shortened text" in tabs would be interesting for others too.

May be there is a way with some tricky CSS. I think I saw an article somewhere.

The CSS that I could remember was: text-overflow: ellipsis, but that can only be used to truncate longer texts. What we want is something like this:

eg: $:/plugins/wikilabs/abcdef/plugin-name.js ... should become ... $:/plug.../plugin-name.js ... or $:/plu./wik./abc./plugin-name.js

This will need JS support.

So we may have some rules for a "to be created" macro eg:

<$trunc-text text=<<tiddler-title-or-something-else>> chars-start=7 chars-end=12 spacer="…" />

or something similar. It could also be more intelligent, if it sees TW system titles. So we can use the namespace, as shown in my last example.

-mario

[PMario]

On Monday, February 8, 2021 at 7:37:05 PM UTC+1 PMario wrote:

 

eg: $:/plugins/wikilabs/abcdef/plugin-name.js ... should become ... $:/plug.../plugin-name.js ... or $:/plu./wik./abc./plugin-name.js

We could also provide a lookup table like eg:

pluigins/: p../    or   {{icon-name}}

wikilabs/: WL/

And the rest could have other rules. The widget would get a title to the lookup-table

just an idea

-mario

[History Buff]

Hey Ton,

I tried your Tiddlersbar plugin today and am having an interesting issue (see screenshot). You can see on the left side that the tab for the open tiddlers is hidden behind the current tiddler. The only way I can make the tabs visible is to make the story top position at least 90px which puts a huge gap between the menubar and the top of the tabs. I can't for the life of me figure out how to move the tiddlersbar. I've used the inspect feature in Chrome and cannot make it budge. I had just tried your deprecated Breadcrumbs plugin when I found your updated one so maybe there's something left over from uninstalling that? Any help would be greatly appreciated. I'm usually pretty good at finding style type issues, but this one has me stumped.

Damon

[Ton Gerner]

Hi Damon,

What strikes me is the tiddlersbar displays behind the tiddlers; normally it is the other way around.
It can be caused by leftovers from the old breadcrumbs plugin: look for overridden shadow tiddlers
(Controlpanel > Info > Basics; click the search at 'Number of overridden shadow tiddlers).
Look for $:/plugins/tongerner/breadcrumbs/... and $:/plugins/tongerner/layout_adjustment/...
Delete all these overridden shadow tiddlers.

Note that the tiddlersbar plugin and the matching layout plugin will have overridden shadow tiddlers as well ($:/plugins/tg/...)!

Check if you have the newest versions of the Tiddlersbar plugin (v 0.0.21) and Layout tweaks plugin (v 0.5.4) available at www.tongerner.nl/TW5/TW5_playground.html. In case of upgrading be sure to delete overridden shadow tiddlers of both plugins (if required note down adjusted settings).

The position of the tiddlersbar is controlled by the Tiddlerbar settings: Left Tiddlersbar and Top Tiddlersbar.

Hope that helps,

Ton

[History Buff]

Ton,

Thanks for the suggestions. I will see where they take me and let you know.

Damon

[History Buff]

Ton,

After playing around with your suggestions and not making any progress (not sure why), I decided to start with an empty TW and slowly add the content of my TW to it after first installing Tiddlersbar. It took a while, but after doing so, all is working well. I'm not sure what it was that was in the original TW, but there was something in there that was causing the Tiddlersbar to be misplaced. As a matter of fact, at one point, the Tiddlersbar appeared underneath the tiddler. That started when I edited a tiddler and then reverted back to being behind the tiddler after editing. I could not repeat it. Anyway, it all seems to be working now, so there was something left over that was pushing Tiddlersbar to the odd position. I think I've decided that I'm going to do this periodically just to clean up my TW.

Thanks for the help,

Damon

[Ton Gerner]

Hi Damon,

Glad it is working now.

Cheers,

Ton

[History Buff]

One additional comment. In the new TW, I don't have the menubar installed. The Tiddlersbar seems to be in roughly the same position as the menubar so don't know if that has anything to do with it or not. I'll have to play with that aspect a bit further.

Damon