TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
8.06k stars 1.19k forks source link

layout with fixed story river? #4257

Open akizuha opened 5 years ago

akizuha commented 5 years ago

When editing a tiddler, if the content becomes longer than the screen, then toolbar will disappear. So user have to scroll up to use the toolbar, and it will be very annoying scroll between the toolbar and the current paragraph. Besides editing, viewing a long list of tiddlers can also be frustrating. It can be easily lost in a long sequence of tiddlers. Is it possible to design a fixed layout that only one tiddler is showed and the only element has scrollbar which is the tiddler’s content?

Jermolene commented 5 years ago

Hi @akizuha

When editing a tiddler, if the content becomes longer than the screen, then toolbar will disappear

One way around this to make the editor itself have a fixed height (and therefore scroll bars if required):

image

Is it possible to design a fixed layout that only one tiddler is showed and the only element has scrollbar which is the tiddler’s content?

We are working on a simpler single tiddler view, but it's not ready yet. You might be interested in @twMat's side editor.

akizuha commented 5 years ago

Hi @Jermolene Thanks for your reply. I know that fixed height. But it will be better if the tiddler can fit the window automatically, thus not more setting is needed such as resize the window. @twMat's side editor is interesting. But what I am looking for is something like conventional note taking software layout like Evernote. All the menu, heading, toolbar… is fixed, except the content has a scrollbar when needed.

Jermolene commented 5 years ago

Thanks @akizuha, understood. There has been some discussion along the lines you describe in #2748.

akizuha commented 5 years ago

Simplenote has a very clean and responsive UI (~however the function sucks~ I mean just a pretty face). I believe it also uses HTML. Is it doable to make a theme clone that layout?

Jermolene commented 5 years ago

Hi @akizuha yes the Simplenote layout could be cloned, I'm kind of surprised it hasn't been done. One downside of the Simplenote approach is that it is no longer possible to see multiple tiddlers at once, which is one of the key features of TiddlyWiki.

akizuha commented 5 years ago

the Simplenote layout could be cloned, I'm kind of surprised it hasn't been done.

So, will this be done? Or can I expect this be implemented in the next or few next version?

One downside of the Simplenote approach is that it is no longer possible to see multiple tiddlers at once, which is one of the key features of TiddlyWiki.

Well, the current layout will still be there for those who want see multiple tiddlers.

twMat commented 5 years ago

@akizuha - contrary to @Jermolene , I interpret your wish to be that the editor (or perhaps the whole edited tiddler) is enlarged but you're still using classic story view. Correct? Something like this:

The red is the viewport - and the viewport is filled by the currently edited tiddler. The blue is the scrollbar for the current tiddler/editor (appearing when needed) And the orange is the wiki scrollbar.

image

Another variant that more easily gives access to the sidebar could be this where only the editor is enlarged leaving some room for the sidebar to stick out. This could allow for the sidebar to come to front by hovering or clicking on it.

image

akizuha commented 5 years ago

Actually, what I would like to depict is a totally fixed view. And nothing move in the story river. The only way to switch tiddler is via the sidebar. a

twMat commented 5 years ago

OK, so Jeremy was right about single tiddler mode then.

Here's an unpolished, pure CSS solution. You'd need to experiment a bit with titles that have quotes in them.

tags: $:/tags/Stylesheet
type: text/vnd.tiddlywiki
text:
[data-tiddler-title="{{$:/HistoryList!!current-tiddler}}"] {
  height:100vh;
}
[data-tiddler-title="{{$:/HistoryList!!current-tiddler}}"] .tc-tiddler-body {
  height:90%;
  overflow: auto;
}

Is this enough for you?

akizuha commented 5 years ago

@twMat Thanks. But not working. Even it's working, it's not good enough. The tiddlers, the sidebar, borders etc all should be adjusted.