TiddlyFlex - a new Flexbox Layout for TiddlyWiki

Plugins
, ,
#6

Hi Simon,
I was not able to check out yet: Does it have the famous Muuri dragimation?

#7

Hi @JanJo ,

it has drag&drop of tiddlers, but not using Muuri. It uses the native TiddlyWiki drag&drop mechanisms with an additional enhancement I made

#8

Just a little suggestion.

When two or more columns are in use it can get very busy quickly. When someone is trying to find an open tiddler although they may be organised into columns the tiddler can be hard to find.

  • With single column wikis I like to use the “story tabs” plugin $:/plugins/bj/storytabs however I would like it to remain fixed at the top so it is always visible below the menu bar.
    • Simon does your current design allow such a sticky header?
    • Effectively a full width line above $:/tags/AboveStory eg with a tag $:/tags/page-header
  • My idea with your solution is to have a single storytabs for all open tiddlers as an alternate navigation that is fixed and always visible. In this case we need not differentiate between columns. The tabs could be in the opened order, like the story tabs plugin.

We could also assist navigation by providing (optional) drop down lists in the menu bar for all open tiddlers, and separate dropdowns all in colum1, column2 etc…

  • If you know which column, you can select from there, if you do not know which column select from the story tabs or all dropdown.
  • This is all without the sidebar open.
  • Other history and today menu options can also help but can be sourced elsewhere.

I would be happy to assist building these.

#9

Hi @BurningTreeC I just checked it out. It has become really great.

Great!!! Thank you!!!

It could definitely profit from
a sidebar resizer (which should be able to manage left and right sidebar) and a single-Tiddler-view (which is at the same time enlarging the Tiddler. )

#10

Hi @JanJo ,

I don’t know about the sidebar resizer as the width of the sidebar is specified in a percentage, not in pixels.
Also, putting the sidebar on the left appears to be difficult by design but I’ll investigate.
Single-Tiddler view should be possible, but not using the single-tiddler storyview. I’ll make some tests

Best wishes,
Simon

#11

I meant something like single Tiddler Fullscreen Apply style by [data-tiddler-title="<$view field=title/>"] transcluded from a temp tiddler (to make another fullscreen button)

Here I meant something like the sidebar you already implemented…You are right: I think a lefthand sidebar/menu should be narrower than on the right and thus would work differently.

#12

Hi all,

There’s a new feature: Tiddlers in the Story Rivers can be filtered by what’s in the search field

Therefor you need to toggle the filter button in the top right corner on or toggle filtering by alt-F

You can specifiy the search fields in the tiddler $:/config/tiddlyflex/story-river/filter/fields and the search flags in the tiddler $:/config/tiddlyflex/story-river/filter/flags

By default it looks in all fields and uses the words flag

What’s coming is, that empty columns are also filtered out, for that I have a little bit of work to do, I will finish it tonight and release a new version of the plugin

Best wishes,
Simon

1 Like
#13

Hi @JanJo ,

yes, the fullscreen button known from the MCL layout will come also to TiddlyFlex.

Best wishes,
Simon

1 Like
#14

What’s the difference between the MCL and TFlex layout?

#15

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

#16

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.

#17

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

#18

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

#19

Hi @linonetwo

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

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

#20

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.

#21

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 :nerd_face:

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.

#22

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!

#23

Hello @Springer !

Thank you, I like those stripes, too.

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.

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

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

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

1 Like
#24

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…

#25

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