A multi-column Layout / Storyview

,
#72

Apologies - not @Mohammad 's, but the work of the mighty @EricShulman

‘Story saver’ demo’d in this thread on the other forum
https://groups.google.com/g/tiddlywiki/c/2WWN0Lf0G-E/m/Ah4r_Nu0AgAJ

#73

This is an example of unexpected benifits supporting the idea of “pure tiddlywiki” research and experiments.

#74

Is it possible to trigger this within a button?

Seeing how well this works I ask myself whether there is an implementation for a horizontal storyview where the tiddlers are placed in a horizontal row and how this could be elegantly realized
I guess I could be useful to start a new thread on this topic.
The basic concept I would like to have:

  • a horizontal storyriver
  • @Mohammad 's section plugin to be able to control long tiddlers
  • a mechanism to navigate from section to section
  • a toggle to switch the tiddlerwitdh to viewportwidth and sectionheight to min 100 vh.
    furthermore I’d like
  • the zoom mechanism of the singleTiddler storyview if links are followed.
1 Like
#75

Hi @JanJo - yes sure, that’s possible. I just don’t know where to get all those icons from for the various buttons ^^

that’s already implemented here, isn’t it?

that’s pretty easy to do

the zoom mechanism? you would like to have the zoomin animation, right?

Did you know that we can scroll to any place on the page by:

<$action-sendmessage $message="tm-scroll" selector="a css selector" animationDuration="your duration"/>
1 Like
#76

I could not find it yet in the sectioneditor-demo…
@Mohammad is something a scroll to sectionheader-mechanism implemented?
Perhaps it can be built with your scrolltrick

I could do that…for a slideshow I’d build a mix between fullscreen and playbutton.

#77

5 posts were split to a new topic: Widget Message tm-scroll and documentation

#78

Hi all, now I’ve resolved some bugs and made dragging smoother

You can change layout to horizontal and back by Alt-S then you can navigate smoothly from section to section by Alt-Right and Alt-Left

Do you have some ideas what I can implement?
I still have to make the layout usable with the various palettes, that’s the next thing on my list

Best wishes,
Simon

1 Like
#79

@BurningTreeC I have returned to test and play with this;

Design Ideas;

  • The ability to “pin” a tiddler for each column, acting as a column header would allow each column to be described and support various workflows.
    • In a similar vein imagine each story had its own emptyMessage like $:/config/EmptyStoryMessage
    • The ability to pin more than one tiddler and reorder etc… could be part of a more advanced future design

To document

  • The fact that selecting the different columns alters the behaviour of the sidebar, such as providing column specific open tab, Is something to remind people of.

Some notes:

  • I needed to import $:/config/OfficialPluginLibrary to be able to use the official plugins.
  • Installing the menu bar plugin it’s not appearing.
  • If I have three columns containing tiddlers, and I close the third, the User Interface no longer provides info or access to the story and the tiddler list. However the sidebar open tab will list the tiddlers if it was focused on the now missing column. New tiddler also now adds tiddlers to the missing column.
    • I have more ideas to resolve this, perhaps discuss in anothe4r thread?
  • I do not see content in the above story $:/tags/AboveStory tagged tiddlers

I continue to test and play, I am currently working on a generic switch the viewToolbar to a hamburger menu.

Love your work

#80

Hi @TW_Tones ,

thank you for your feedback!

I’ve now implemented the emptyMessages for each column.
You can set them by using the tiddler $:/EmptyMessage-<column-number>

Also the $:/tags/AboveStory-<column-number>tags are implemented

The menubar plugin should show up now

I’ve addressed the problem with the closed columns still being active

Thanks again for your help,
Simon

#81

Thanks for that @BurningTreeC, I tested it rightway. Lookin great.

Keep in mind until we can use the menu bar, or across all the columns above story $:/tags/AboveStory, it may be hard to create tiddlywikis that have the supporting tools and documentation etc… for naive users arriving at the site, or ourselves after an extended break.

This tool is already very powerful to tiddlywiki enthusiasts and is proving to generate a lot of interest. As always my mind always returns to “if I was to use this to publish something to the world, how can I make it easy for visitors?”.

This is a json package of tiddlers using the above story tags including the non-working page abovestory $:/tags/AboveStory

above-multi-columns.json (530 Bytes)

  • Notice how the 3rd column/RHSTop tiddler is not wikifying the “!!” markup.

Other tests

  • I activated ControlPanel > Settings > Display Tiddler titles as links
    • This works fine as long as you use the title to drag to other wikis and elsewhere to drag between columns.

Other ideas;

  • Get a theme / layout that makes this look like trello as was done with another kanban solution.
  • Create a button to click done, that also moves it to the second/done column (how I wonder)

To test the menubar plugin we first need to install the oficial library config_OfficialPluginLibrary.json (237 Bytes)

  • I can now see part of the Menu Bar (unlike before) but insufficient to use it.
  • The menu bar toggle sidebar not longer works, only the one you provided.

Continue to love your work. I am such a :nerd_face:

#82

Oh, Another issue.

  • If we want to select text in a tiddler we can not because the draggable zone interferes.
  • Personally I would be happy if we only had a drag icon appear on all tiddlers.
    • This may also help when a button has a drag feature built into it.
#83

@TW_Tones ,

the current solution for selecting text is disabling dragging by Alt-D

1 Like
#84

I can imagine doing this when everything is done

Yes there’s an issue
But wouldn’t it overall make more sense to make the AboveStory divs sticky to the top?

I haven’t tested the menubar yet to be honest

Yes, I’m using a different state tiddler for my sidebar … maybe I’ll need to use the same as the original tiddlywiki does

Thanks again for your comments,
Simon

#85

Now I’ve seen that my layout isn’t really made for the menubar plugin

I’ll see if I can make the needed adjustments

#86

Ok now. The tiddler $:/plugins/tiddlywiki/menubar/menu needs the tag $:/tags/PageTemplate removed and the tag $:/tags/Toolbar added (works now with the latest build from some minutes ago)

1 Like
#87

Yes, sounds good.

Yes, I did not say anything different.
It is just wiki markup is not working in above story tiddlers. They need to wikify/transclude the tagged tiddlers. HTML works for now.

  • The $:/tags/AboveStory in the core does wikify the tiddlers.

That is OK, I did test it.

  • Have a look (use my attached library tiddler) when it suits you.
  • I expect when you look at t will be obvious - possibly it is too high CSS z-index for the menu bar

Found in $:/plugins/tiddlywiki/menubar/styles

nav.tc-menubar {
	position: fixed;
	z-index: 850;
	display: inline-block;
	top: 0;
	right: 0;
	left: 0;
}

increasing above z-index to a high number 100K+ did not work

#88

Menu bar working nicely, will explore further.

#89

I’ve now added a search dropdown on top of the page, accessible through Ctrl-F (That may change later)

It’s currently without function, but it should manage somehow the different columns

Do you have any ideas?

Best wishes,
Simon

1 Like
#90

Thanks for solving the text selection issue. I’ve been experimenting with your great innovation for storyboarding. Works great but in combination with dynanotate on an ipad keyboard shortcuts (like the alt-D to toggle dragging) aren’t accessible. Any ideas for the code to use for a sidebar button instead of alt-D? Keyboard shortcuts in general aren’t always usable on tablets/mobiles because the keyboard isn’t easily summoned to appear outside of text entry. Not your fault though!

Other buttons that would be useful I think - ‘close-all’, ‘save-multistory’, ‘import/export multi-column’. In a perfect world the ability to rename/relink titles according to their position in the multi-columns would be good, but that’s a bluesky thought. It works very well already, thanks a lot BTC!

Edit
Removed my amateur hack of @EricShulman 's excellent save story as BTC has added an official ‘multi-story saver’ function and also a button to toggle draggable/selectable text. @JanJo ‘s .json below is also redundant now, the function is already included in the multi-column plugin-to-be.

1 Like
#91

Thanks @Watt , a very usefull accessory! Here it is packed to a .json
Slightly modified to appear in the sidebar:

Obsolete now because it’s integrated!

Multi Column Saver.json (2.9 KB)

2 Likes