TiddlyFlex - a new Flexbox Layout for TiddlyWiki

Plugins
, ,
#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

#26

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

1 Like
#27

That should allow me to approximate;

#28

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

#29

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

#30

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

1 Like
#31

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

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.

New TiddlyWiki Sidebar Resizer
#32

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)

#33

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

#34

if there are exactly 2 columns…

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

1 Like
#35

This would be really cool! Could you build it to be adaptable to work with other layouts as well?

#36

@JanJo no that’s impossible for me. It will be really custom-made for the TiddlyFlex layout.

#37

I guess here it would be usefull to have a 2+ columns css. Styles you implement to save sapce will remain usefull with more columns

#38

That would be a pity! Could you try to make it work with the standart-layout? Sorry for insisting…

#39

Therefor I would need to change the standard layout :grinning:

#40

Hi @JanJo

I have now added a sidebar resizer.
It needs testing though.
It can be enabled, it’s disabled by default

Best wishes,
Simon

1 Like