TiddlyFlex - a new Flexbox Layout for TiddlyWiki

Plugins
, ,
#1

Hello all,

In another thread I showed a prototype of a new flexbox layout

Now I’m creating a plugin on GitHub

Here’s the plugin website: TiddlyFlex — a non-linear flexible personal web notebook
Here’s the GitHub project page: GitHub - BurningTreeC/TiddlyFlex: a Flexbox Layout for TiddlyWiki5

What should this plugin achieve?

  • It should be responsive and faster than MCL
  • It should be easy to use and customize
  • It should add functionality in terms of navigation
  • It should be good for mobile use, too
  • It should be cool :grin:

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

What does it do navigation-wise?

  • Clicking a link to a tiddler that is already open in one of the columns scrolls that tiddler into view
  • Clicking a link to a tiddler that isn’t already open in one of the columns opens it in the current column
  • Optionally, clicking a link to a missing tiddler edits that tiddler right away
  • shift - click opens a link to a tiddler in the next column
  • alt - click opens a link to a tiddler in the previous column

If you’re interested, have a look at the links above
Please let me know what you like and what not
I’m very interested to know what can be improved
Ideas and criticism are very welcome

Thank you for now,
Simon

11 Likes
New TiddlyWiki Sidebar Resizer
Virtual tiddlers
#2

I’m not sure what approach you should take, but CP/Appearance/Theme Tweaks/Settings should be addressed. I think the things you’re overriding (ignoring?) need to be documented clearly as no longer working or replaced with something that makes sense for your Flex layout.

The settings below should have had a dramatic (catastrophic) effect on the wiki, but in fact they were completely ignored:

image
image1040×777 45.1 KB

#3

Hi @CodaCoder

Yes, these settings are ignored.
They make no sense in this Layout.
They only make sense in the standard TiddlyWiki Layout where they still work.

Best wishes,
Simon

#4

Hi @BurningTreeC, lovely to see this new project!

I was impressed by your multi-column layout but found it a little to cluttered/invasive for my own use.

What I personally would love to see is something like a more modern version of the two column layout in Stroll. Stroll has story view that behaves/looks more or less like the default, with the option of opening tiddlers in a second column as required. This turns out to be amazingly useful for comparing and developing ideas. Importantly the second column closes automatically when it no longer contains any open tiddlers.

I look forward to seeing where you go with this :slight_smile:

#5

Thank you for your reply @Sii !

Yes, the multi-column layout has been a great way to explore the possibilities.
Now I try to create a Layout that is clean, not that cluttered.

I think I can resemble the features of Stroll. What’s needed is a configuration option that, when enabled, closes columns when they are empty. I think I can and will do that.

There are many things in the multi-column layout that I also want to implement here, but in a more sensible way.

Thank you,
Simon

#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.