[TW5] - Thoughts and questions about layout

[Ton Gerner]

When I first started with TW5 I thought: "What a waste of space".
When you open TW5 fullscreen on a widescreen monitor you see the open tiddlers at the left (the "story river"), the Sidebar in the middle and a very empty gray space at the right.

For sure I am biased. In all my TWc wikis there is no left sidebar ("main menu") visible, the right sidebar can be toggled invisible/visible , I use a "top menu" containing a search box and the most used commands and the rest of the space is for tiddler content. And I use often nested tabs, where these tabs are "part of my TWs TOC".
Some use cases are given in the thread about my question about a 'tabs' macro in TW5: https://groups.google.com/d/msg/tiddlywiki/fA23Z6qtQE8/VWCSE-vcWA0J

So I am playing around with TW5, digging in the styles and so on trying to mimic my TWc wikis.

The layout of TW5 looks like 2 'frames' besides each other: left the "story river" and at the right the Sidebar with "page controls" that can be scrolled separately.
In $:/ControlPanel/ThemeTweaks the Story right and Story width are set at 770px. This gives the behavior as mentioned in the first paragraph.
Here you can e.g. reverse the right sidebar and the story river.

This brings up the following questions:
1) Is it or will it be possible in future to do it the other way around: counting from the right side instead of counting from the left side?
2) Is it or will it be possible in future to do it more "dynamically", e.g. at the right a fixed width for the right sidebar (counting from the right) and the rest of the screen window filled automatically (tiddler width = screen width minus right sidebar)?
3) Is it or will it be possible in future to toggle the right sidebar on/off (dynamically adjusting the story river)?

Looking at the $:/core/ui/PageTemplate I saw 2 optional bars:
{{$:/TopSideBar}}
{{$:/LeftSideBar}}

So I tried to make a top menu with the new tiddler, control panel and save buttons in it, by copying the button code from the $:/core/ui/PageTemplate into the $:/TopSideBar tiddler.
Thus the $:/TopSideBar contains:
<div class="tw-page-controls">
<$button message="tw-new-tiddler" class="btn-invisible">{{$:/core/images/new-button}}</$button><$link to="$:/ControlPanel">{{$:/core/images/options-button}}</$link><$button message="tw-save-wiki" class="btn-invisible">{{$:/core/images/save-button}}</$button>
</div>

The buttons are shown and do work in the $:/TopSideBar tiddler itself.
Via the transclusion of $:/TopSideBar in the $:/core/ui/PageTemplate the "button images" show up in the top left corner of the screen but they do not work as buttons.
I also noted the button images scroll together with the open tiddlers and not with the sidebar as I expected.
After fiddling with styles (copied from the $:/core/templates/static.template.css) I ended with a working set of buttons at the top of the page but then I could not access the tiddlers and/or right sidebar anymore!
So at the moment it is beyond my (very basic) knowledge of CSS ;)

Question: Is it or will it be possible in future to add a top menu - in an easy way?

Cheers,

Ton

[David Gifford]

I will only address the last item. It is already possible to do a topmenu. See here: http://giffmex.org/5notes.htm

The three tiddlers I adjusted were $:/TopSideBar, $:/core/ui/PageTemplate and $:/StyleSheet

Cheers!

Dave

[Ton Gerner]

Hi Dave,

Thanks for the fast reply.
I'll have a look at your 5notes.
It is one of the best ways to learn: looking at others solutions.

Cheers,

Ton

[Tobias Beer]

As for the waste of space, unless you're in pursuit of a specific usecase, I think it's intuitive and refreshing as well as productivity and usability enhancing that the default layout is simplistic with as little clutter as possible and I sure hope it will keep that quality.

Today, there also is the need that things scale well in a mobile environment. In fact, word of the day is "Mobile first!".

Of course it should or will be easy to add custom components, e.g. a TopMenu or a LeftSidebar in the most simple form via entering content in the corresponding places.

What is often harder to do is to get rid of stuff once it's there, like those now superfluous headerForeground and headerBackground with horribly outdated gradients in TWc. I think, not only from a designers perspective, i.e. someone using TWc to develop a custom ui on top of it, less is more...

<=>

Tobias.

[Ton Gerner]

Hi Tobias,

Thanks for answering.

I'am still learning and there are at the moment not many examples of TW5 'in the wild'.
Therefore I appreciate when I can have a look at others TW5's (so thanks to Dave Gifford).
Today I saw David Johnston submitting a demo about using the list filter. Excellent, I'll have a look.

On Tuesday, October 1, 2013 10:13:31 AM UTC+2, Tobias Beer wrote:

As for the waste of space, unless you're in pursuit of a specific usecase, I think it's intuitive and refreshing as well as productivity and usability enhancing that the default layout is simplistic with as little clutter as possible and I sure hope it will keep that quality.

 

 As I already wrote: I am biased. Therefore I mentioned 2 of my use cases you have seen: the ones with lots of nested sliders.

In general, I like the minimalistic design.

Today, there also is the need that things scale well in a mobile environment. In fact, word of the day is "Mobile first!".

 

 That is just what my second question addresses: dynamically adjusting the width instead of fixed width for the story river.

Of course it should or will be easy to add custom components, e.g. a TopMenu or a LeftSidebar in the most simple form via entering content in the corresponding places.

Yesterday I succeeded (thanks to Dave Gifford) in getting a top menu with the 'new tiddler', 'control panel' and 'save' buttons in it (the 3 buttons from the sidebar).
I also managed to add a 4th button - 'close all' - to the top menu; temporarely I use the "standard" 'close' button. I have to design a 'close all' icon. Any ideas?

What is often harder to do is to get rid of stuff once it's there, like those now superfluous headerForeground and headerBackground with horribly outdated gradients in TWc.

 

I totally agree. When I started using TWc it took some time before I knew how to change things.

I think, not only from a designers perspective, i.e. someone using TWc to develop a custom ui on top of it, less is more...

<=>

;)

Cheers,

Ton

Tobias.

[David Gifford]

Okay, I will weigh in.

I for one am patiently looking forward to toggle on an off the right sidebar, since usually I like to clear the decks and focus on content.

I do agree with the principle that the tiddlers should normally be a limited width to facilitate reading. For reading text, narrower is better. And most tiddlers will be text.

Having the tiddlers be on the left took some getting used to, and still doesn't feel as natural to me as having them on the right, but there are mechanical reasons for which Jeremy put them on the left, and I can live with that.

I am not really keen on the wideness of the right sidebar, and the fact that the story river is too narrow for some tables and images I use in TW. But I have noticed that in zoomin mode, the tiddler width adjusts to the content, and in the case of wide tiddlers, covers over the sidebar. So that is enough to please me, though it must be frustrating to people who need to access the sidebar when that happens.

One thing I hope gets fixed is the extra wide tiddler titles for the state tiddlers in the system tab. I tend to have the system tab open in order to access my stylesheet and other custom system tiddlers. But that extra wide title is annoying to look at and also causes a horizontal scrollbar to appear.

Ton, you seem pretty pumped about tabs! They are handy, but I can see that in TW5 they will have less room to breathe, unless you can toggle the sidebar. I am using tag pills to access things in TW5 rather than tabs. You can create a wall of tab pills, which you can then click to access all the tiddlers in that category. See http://giffmex.org/recursosgiffmex.htm and search for the tiddler Muro de etiquetas to see an example which you can edit to see how it's done. I am also attaching a screenshot of my TW5 to do list. You may find that this is a cleaner open than tabs. Just a thought.

Blessings,

Dave

[Ton Gerner]

Hi Dave,

On Tuesday, October 1, 2013 2:10:50 PM UTC+2, David Gifford wrote:

Okay, I will weigh in.

I for one am patiently looking forward to toggle on an off the right sidebar, since usually I like to clear the decks and focus on content.

Me too. I already do have a working topmenu with 4 buttons (new tiddler, control panel, save and close all tiddlers), see https://dl.dropboxusercontent.com/u/2638511/TW5_Test.htm
I only need a new 'close all' icon but do not know yet how to create - or borrow - one and embed it in a tiddler.
 

I do agree with the principle that the tiddlers should normally be a limited width to facilitate reading. For reading text, narrower is better. And most tiddlers will be text.

Yes in many cases it will be true: mainly text.
But one of my use cases ( http://dl.dropboxusercontent.com/u/2638511/Amsterdam_1822-2009.html ) contains more than 2500 photos.
And that is one of the reasons I use tabs. It will be clear if you check the photo album, menu Diversen > Fotalbum, tab Nostalgie. If you click a photo an enlarged version of it will be opened in a new tab of the browser.

Having the tiddlers be on the left took some getting used to, and still doesn't feel as natural to me as having them on the right, but there are mechanical reasons for which Jeremy put them on the left, and I can live with that.

 
You can easily reverse the tiddlers/sidebar order in $:/ControlPanel/ThemetWeaks. Change e.g.:
Story left position 0 => 400
Story right 770 => 20

I am not really keen on the wideness of the right sidebar, and the fact that the story river is too narrow for some tables and images I use in TW. But I have noticed that in zoomin mode, the tiddler width adjusts to the content, and in the case of wide tiddlers, covers over the sidebar. So that is enough to please me, though it must be frustrating to people who need to access the sidebar when that happens.

One thing I hope gets fixed is the extra wide tiddler titles for the state tiddlers in the system tab. I tend to have the system tab open in order to access my stylesheet and other custom system tiddlers. But that extra wide title is annoying to look at and also causes a horizontal scrollbar to appear.

Ton, you seem pretty pumped about tabs! They are handy, but I can see that in TW5 they will have less room to breathe, unless you can toggle the sidebar. I am using tag pills to access things in TW5 rather than tabs. You can create a wall of tab pills, which you can then click to access all the tiddlers in that category. See http://giffmex.org/recursosgiffmex.htm and search for the tiddler Muro de etiquetas to see an example which you can edit to see how it's done. I am also attaching a screenshot of my TW5 to do list. You may find that this is a cleaner open than tabs. Just a thought.

Your screenshot looks very clean, but as I already wrote I prefer tabs in my use case with many photos.
But it's all a matter of taste as well.

Cheers, Ton

Blessings,

Dave

[nathan....@gmail.com]

I've been playing around with a lot of stuff on TW5 and I've used a lot of the great tips from your TW5 Mall page.  One thing, however, has me stumped regarding the "tag wall" example you gave.  You mentioned in the tiddler that to display a specific tag, one can type 

{{NAMEOFTAG||$:/core/ui/MoreSideBar/Tags}}

with the desired tag name to display in the body of the tiddler.

However, when I write this in ... any non-space character(s) that replace(s) NAMEOFTAG will display all tags from ~/MoreSideBar/Tags ... not just a single desired tag.

I'm guessing there's a filter somewhere to control this, but I'm not sure how to fix this problem.  I'm using Firefox, if that matters, on both OS X and Windows 8.

Thanks for reading,
Nate

[David Gifford]

Hi Nate

Hmmm...that is how the tag wall worked at that point, and still does work on http://www.giffmex.org/recursosgiffmex.htm (tiddler = Muro de etiquetas). But apparently something in TW5 has been changed and it now functions differently. I will let the powers that be weigh in as the best way to do that. For a list I used on the mall, try this, though it, too, may be outdated...

<$list filter="[tag[NAMEOFTAG]sort[title]] -[is[system]]" itemClass="tw-menu-list-item"><$transclude tiddler="$:/core/ui/TagTemplate"/></$list>

Dave

[Jeremy Ruston]

Nate - to display a single tag pill you just need this:

{{introduction||$:/core/ui/TagTemplate}}

I'm not sure what this snippet is trying to do:

<$list filter="[tag[NAMEOFTAG]sort[title]] -[is[system]]" itemClass="tw-menu-list-item"><$transclude tiddler="$:/core/ui/TagTemplate"/></$list>

It looks like this is trying to display a list of pills for all the tags that are tagged "NAMEOFTAG". If so, the current equivalent would be:

<$list filter="[tag[NAMEOFTAG]]" template="$:/core/ui/TagTemplate"/>

Best wishes

Jeremy

 

Dave

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[David Gifford]

Yeah, never mind my snippet!

Dave

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/GD57EMl7fbo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
David Gifford
Christian Reformed World Missions, Mexico City

[Nate McElroy]

Thank you both for the prompt replies. Jeremy's suggestion worked perfectly for what I wanted.

Cheers,
Nate

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/GD57EMl7fbo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.