TiddlyFlex - a new Flexbox Layout for TiddlyWiki

[BurningTreeC]

Hi @pmario ,

the TiddlyFlex layout is rebuilt from the ground up with many optimizations and using procedures and functions. It’s also up to date with the improvements in the TiddlyWiki core layout tiddlers where MCL has fallen behind.
It tries not to make mistakes that I made building MCL and wants to be cleaner and easier to customize.
For me it feels faster than MCL and more responsive.
There are ui Elements present in MCL which I omit in TiddlyFlex because they are not needed.
In TiddlyFlex I added a messagecatcher for navigations that looks in all columns for the matching tiddlers and scrolls them into view, MCL only looked in the current column / currently active column.
Further, drag&drop has been improved and the filtering of story rivers is more advanced.

Thank you,
Simon Huber

[pmario]

Thanks for the info. I did create a new issue at GH about the settings, which I think should be part of the ControlPanel → Settings tab, which is now easy to do with the latest TW editions.

[BurningTreeC]

Hi all,

I just pushed a very big update of this (ALPHA state) plugin.
If you could test it on the plugin website and report me all the bugs you encounter I would be very grateful. I’m sure there are many because I’ve completely refactored navigation inside and outside the story river and the filtering of the story rivers.

Navigation is now handled by messagecatcher widgets that trap every message that a navigator widget would handle. Then some actions and logic is performed on the trapped message. Finally an action is invoked which is wrapped inside a navigator widget.

Best wishes to all,
Simon

[linonetwo]

Thanks for develop this. I’m still learning how to use it, to replace the “multi column layout” I’m using.

Some feature request:

1. Could you add an icon to the layout, so it shows better in layout manu? Like Add icon to default page layout and show in switcher · Jermolene/TiddlyWiki5@34643a4 · GitHub
2. Could you release a JSON format plugin, with constant name, on github release, so it is easier to add it to the CPL? So it is easier to update it in our wiki.\
   1. You can release it manually
   2. or automatically via github action usein GitHub - tiddly-gittly/Modern.TiddlyDev: Modern TiddlyWiki Developing Environment

Thanks in advance

[BurningTreeC]

Hi @linonetwo

I’ve added the icon, I’ve switched from feather icons to lucide icons now.

@linonetwo

Could you release a JSON format plugin, with constant name, on github release, so it is easier to add it to the CPL? So it is easier to update it in our wiki.

What are the prerequisities for that?
Does it need to be the plugin exported as JSON?
And where in the GitHub repo should I put it?

Thank you,
Simon

[linonetwo]

Once you have icon, it will be beautifuly show in the launcher What mobile launcher are you using, how will you design the TW layout launcher?

I don’t know how you can export JSON manually, maybe use Gacha? I only know how to use Modern.TiddlyDev.
@Alren22 managed to do this, but with the wrong format. Release a plugin in proper format · Issue #5 · twcloud/tiddlyweb-sse · GitHub

Maybe you can install github-action-ts-run-api and tw5-plugin-packer from npm and use this script https://github.com/tiddly-gittly/Tiddlywiki-WikiText-Plugin-Template/blob/master/scripts/run-action.mjs

And you can create a new release in Releases · BurningTreeC/TiddlyFlex · GitHub , then upload the JSON there, if created manually. Or add a vx.x.x tag in git commit and modern framework will build json and upload it for you.

[TW_Tones]

Its looking beautiful @BurningTreeC and the ease of adding elements, especially the left toobar is very nice. The first thing that still hits me, as it did for MCL is how as we add columns the Tiddler titles and buttons don’t change in line with more data on screen.

• I recall you did not like to change it last time, but I do think it would make a big difference. Not only usability but the "Quality if its ‘look’ "

The idea may be, to do one or more of the following, and they may even be done with an independent plugin, as it could help with other layouts.

• Move the buttons up and right perhaps shrinking them so they do not get in the way of titles
• Find a way to trigger the view toolbar buttons to become a hamburger menu like we may do on mobile, after a set number of columns are visible.
• Provide a way to scale the titles to a smaller font size.

This would certainly help me with the way I use tiddlywiki (And I expect others) because, I commonly have a range of 1 to 10 + words in my titles.

• I did this myself with MCL however more tightly integrated with the layout would make a lot of sense.
• This includes when we use zoom in and out to alter the appearance.

A related feature would be to provide an easier way to adjust the right side bar width, because different tools in the side bar need different widths, on zooming out the side bar seems to waste more and more space, that space could be given back to the tiddler columns, increasing the tiddlers sizes and readability.

Love your work

Post script: It is easier to ask for more when you approachg the near perfect, than even start for fix things, when its a dogs breakfast, this is getting close to making a perfect work environment.

Proposal: Evolution of standard layout options

I’m enjoying following what @BurningTreeC is doing with the new TiddlyFlex - very impressive! That said, it has gone far past what I’m looking for personally, and thus I’m left with trying to figure out how to disable / remove the parts I don’t need. This has happened many times throughout the years, and it makes me think of the new user experience. One of the neat things about the default empty.html is that it gives you some easy ways to tweak the layout without need for CSS knowledge. The co…

[Springer]

Hello @BurningTreeC

The demo looks fantastic! I played around with Palettes, and appreciate that the second column’s subtle vertical stripe effect is accomplished through the palette, very helpful!

Minor comment on the column background effect: One odd thing for me was that the vertical stripe background shows up in the second column by default, but when the second column disappears, the vertical stripes appear behind the first column. Perhaps there’s a reason for that shift, but I found it a bit disorienting.

EDIT: On attempting to install at my own demo site, the drag interface (between columns) AT FIRST was not happening — not sure why. On second re-load, it did work.

Still, I wondered whether there should be additional methods for populating the second column or moving stuff between columns.

If I recall correctly, there was a version of multi-column that made use of a view toolbar button that would move its tiddler between columns. Something like that might be useful for your plugin, in case anyone else has some other cursor-focused plugin that doesn’t play nicely with your drag-and-drop interface.

Cheers!

[BurningTreeC]

Hello @Springer !

@Springer

The demo looks fantastic! I played around with Palettes, and appreciate that the second column’s subtle vertical stripe effect is accomplished through the palette, very helpful!

Thank you, I like those stripes, too.

@Springer

Minor comment on the column background effect: One odd thing for me was that the vertical stripe background shows up in the second column by default, but when the second column disappears, the vertical stripes appear behind the first column. Perhaps there’s a reason for that shift, but I found it a bit disorienting.

By default it should show up in the first column (if there’s no current-column other than the first one selected). If the currently selected column disappears then the column before that one should be selected as current column. If you cannot get used to this, I may make it configurable.

@Springer

EDIT: On attempting to install at my own demo site, the drag interface (between columns) AT FIRST was not happening — not sure why. On second re-load, it did work.

I’ll check that. The drag&drop mechanism works with a Javascript modification which needs one reload of the wiki. But not two…

@Springer

Still, I wondered whether there should be additional methods for populating the second column or moving stuff between columns.

Please tell me your ideas, I’m all ears!

@Springer

If I recall correctly, there was a version of multi-column that made use of a view toolbar button that would move its tiddler between columns. Something like that might be useful for your plugin, in case anyone else has some other cursor-focused plugin that doesn’t play nicely with your drag-and-drop interface.

I will add those buttons to TiddlyFlex, too. I just forgot about them because I use the keyboard shortcuts shift+alt+Right and shift+alt+Left

Thank you for your comments,
Simon

[JanJo]

@BurningTreeC

What can be customized?

• Top toolbars and bottom toolbars can easily be added or removed
• Each column can have its own header(s) and footer(s)
• I will probably add the possibility to add left and right bars (after some experimentation)
• And of course, columns can be added or removed

Hi Simon, did you already implement a way to change the template for the display of tiddlers especially for your layout? That would be very useful because everything gets more narrow and tiny…

[BurningTreeC]

Hi @JanJo ,

the TiddlyFlex View- and Edittemplates use the same class mechanism to apply classes like the core View- and Edittemplates.

You can tag a tiddler with the tag $:/tags/ClassFilters/TiddlerTemplate and put the following inside (for example):

[subfilter<tdff.tiddlyflex-enlist-columns>count[]match[3]then[tc-tiddlyflex-narrow-3]] [subfilter<tdff.tiddlyflex-enlist-columns>count[]match[4]then[tc-tiddlyflex-narrow-4]] [subfilter<tdff.tiddlyflex-enlist-columns>count[]compare:number:gteq[5]then[tc-tiddlyflex-very-narrow]]

And put the following in a stylesheet tiddler:

.tc-tiddlyflex-narrow-3 .tc-tiddler-frame {
	padding: 28px;
}

.tc-tiddlyflex-narrow-4 .tc-tiddler-frame {
	padding: 18px;
}

.tc-tiddlyflex-very-narrow .tc-tiddler-frame {
	padding: 10px;
}

This is just an example what can be done

Best wishes,
Simon

[BurningTreeC]

Hi @JanJo ,

now by default each tiddler gets a class that represents the amount of shown columns:

.tc-tiddlyflex-column-1 if one column is shown, .tc-tiddlyflex-column-2 if two are shown and so on.

That enables you to style tiddlers by the amount of shown columns:

.tc-tiddlyflex-column-5 .tc-tiddler-frame {
padding: 10px;
}

for example

[TW_Tones]

@BurningTreeC

now by default each tiddler gets a class that represents the amount of shown columns:

That should allow me to approximate;

@TW_Tones

• Find a way to trigger the view toolbar buttons to become a hamburger menu like we may do on mobile, after a set number of columns are visible.
• Provide a way to scale the titles to a smaller font size.

[JanJo]

This is very smart…how would you organize to have different tiddler controls when eg showing more than one column?

[BurningTreeC]

Hi @JanJo ,

one could create a hamburger menu with the tag $:/tags/ViewToolbar that shows all tiddler controls in a popup and is wrapped in a div with the class tc-tiddlyflex-shown-when-narrow

then you hide the page control buttons above a certain amount of columns:

.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: none;
}

<$list filter="[subfilter<tdff.tiddlyflex-enlist-columns>count[]compare:number:gteq[3]]" variable="column">

.tc-tiddlyflex-column-<<column>> .tc-tiddler-controls:not(.tc-tiddlyflex-shown-when-narrow) {
display: none;
}

.tc-tiddlyflex-column-<<column>> .tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: block;
}

</$list>

I haven’t tested this though

[BurningTreeC]

I will add such a button tonight, it really makes sense. I’ve got a working prototype now and it’s nice

[JanJo]

@BurningTreeC

.tc-tiddlyflex-column-2

…will be used if there are exactly two columns, or two or more columns?

@BurningTreeC

I don’t know about the sidebar resizer as the width of the sidebar is specified in a percentage, not in pixels.

I checked that pixels work as well in your layout-options, so it would be possible to use it with the sidebar-resizer I made a quick test combining the two…so far the line to controlbar does not appear on the right…but on the left interestingly, where it of course cannot anything anything with the current code. But I guess @oeyoews would be willing to cooperate on this if a stable state is reached.

[BurningTreeC]

Hi all,

the Hamburger menu is now added in version 0.0.64
It can be configured when the hamburger is shown (4 columns is standard) when the sidebar is hidden and when the sidebar is shown (3 columns)

[TW_Tones]

I hope we can implement a hamburger menu on tiddlers viewtoolbar in a similar way.

[BurningTreeC]

@JanJo

…will be used if there are exactly two columns, or two or more columns?

if there are exactly 2 columns…

@JanJo

I checked that pixels work as well in your layout-options, so it would be possible to use it with the sidebar-resizer I made a quick test combining the two…so far the line to controlbar does not appear on the right…but on the left interestingly, where it of course cannot anything anything with the current code. But I guess @oeyoews would be willing to cooperate on this if a stable state is reached.

Yes, I’ve seen that pixels work for the width of the sidebar.
I’m about to implement my own sidebar resizer using eventcatcher widgets.
No need for additional Javascript, just wikitext and css