A demonstration of a tag based accordion menu

154 views
Skip to first unread message

Morris Gray

unread,
Jul 3, 2009, 1:00:14 PM7/3/09
to TiddlyWiki
I have put up a version of TWT-Blackicity with a tag based accordion
menu for comments. It can be built and rearranged by tags exactly the
same as Treeview because it is Treeview.

Several people have mentioned they would like to see something like
this. I wonder if this is what they had in mind. It does give a
different presentation from the folder/explorer look.

The sub sections are indented to give you a better idea of where you
are which I think is nicer than the boxy confined look of a lot of
accordion menus I've seen. I wonder what you think.

It's easy to apply to existing TWT-Treeview TiddlyWikis. I wonder if
it is worth pursuing?

http://twt-blackicity.tiddlyspot.com/index.html

Morris

FND

unread,
Jul 3, 2009, 1:51:17 PM7/3/09
to Tiddl...@googlegroups.com
> I have put up a version of TWT-Blackicity with a tag based accordion menu

That's really nice, Morris - very well done!

> The sub sections are indented to give you a better idea of where you are

I like that, but some subtle indication of where in the hierarchy we are
might be useful (e.g. gradually decreasing font size for labels) - I got
a little confused in the first few seconds of playing around with it.


-- F.

wolfgang

unread,
Jul 3, 2009, 4:12:13 PM7/3/09
to TiddlyWiki
Indeed, a master piece. I think that decreasing font sizes for sub
levels would be a good idea too. Additionally some more obvious ways,
like inverted gradients to show the active button would be great,
though that might not be to everyones liking.

Well done.

Eric Weir

unread,
Jul 3, 2009, 4:16:51 PM7/3/09
to Tiddl...@googlegroups.com

Oh, I really like it, Morris. As my previous post suggested, with lots
of tiddlers I wasn't all that happy with Treeview. And I believe I was
one of those who expressed interest in the accordion menu. This suits
my taste and my needs nearly perfectly. [You say this is Treeview, but
it doesn't look like Treeview.]

I take it I can just import the Blackicity StyleSheet, Edit, and
ViewTemplates from my tweak of the earlier TWT-Blackicity? I'll give
it a try.

Thanks also for your response to my earlier questions. After this, I
don't think I'll be needing the one regarding the look of the Treeview
tree, but I'll be using the others.

Sincerely,
------------------------------------------------------------------------------------------
Eric Weir
Decatur, GA USA
eew...@bellsouth.net


Eric Weir

unread,
Jul 3, 2009, 4:22:25 PM7/3/09
to Tiddl...@googlegroups.com

On Jul 3, 2009, at 4:12 PM, wolfgang wrote:

> I think that decreasing font sizes for sub
> levels would be a good idea too.

They're already pretty small. I didn't find it that confusing, though
I may not have played around with it enough. I would suggest a sharper
indentation of submenus as an alternative to decreasing font sizes.

Regards,

Eric Weir

unread,
Jul 3, 2009, 4:30:50 PM7/3/09
to Tiddl...@googlegroups.com

Something unrelated to the menu, Morris. I like what you did with the
sidebar tiddler list in your first TWT, where you had the lists
usually revealed by the "more" tab permanently displayed below that
top level lists, and replaced the "more" tab with a "plugins" tab for
a list of tiddlers tagged with configSystem.

I have a copy of that TWT. I've you can give me some pointers for
installing it in TWT-Blackicity-Accordion, I'd like to try to do so.

Thanks,

Tobias Beer

unread,
Jul 4, 2009, 6:31:17 AM7/4/09
to TiddlyWiki
This is definetely a very nice template for a tiddlywiki. I love how
the menu works as buttons as compared to the previously used
"triangles". This way it feels much more intuitive and powerful. The
"double-tabs" idea seems to work out quite well, too. I used
tiddlersBar as well but so far ignored content-tabs... funny, as
they're even in the standard tw distribution. Also, the black theme
just looks great. Finally, very good job!

Tobias Beer

unread,
Jul 4, 2009, 7:21:07 AM7/4/09
to TiddlyWiki
A few things...

1) As "add >> subtopic" is equivalent to "new here", I think it is an
important piece of information to say directly that the menu works
through tagging ...because, if you'd ever want to rearrange things,
you'd only have to tag differently.

2) I know it is stupid, but if you'd (accidentally) tag a topmenu item
with the name of a submenu item, you'd get a macro error (infinite
loop?)... don't know if that's supposed to be so.

3) If I create a tiddler and tag it with the name of any of the items
already in the menu, it will be displayed in the menu... I think it
were better if only those items ended up in a treeview menu, that are
actually tagged "treeview" ...or even better tagged with the rootnode.

4) Whatever happened to "tagging"?!? To remove it seems quite bad. If
you had tiddlers that were not in the menu, but still use tagging, you
would only see the tag relation in the tiddler that is tagging but no
reference in the tiddler which is the tag.


Some grammar:

"Thunb (flash) drive"
"TiddlersBar tabs that can be toggled and off."

Morris Gray

unread,
Jul 4, 2009, 9:18:24 AM7/4/09
to TiddlyWiki

On Jul 4, 3:51 am, FND <F...@gmx.net> wrote:

> That's really nice, Morris - very well done!

> I like that, but some subtle indication of where in the hierarchy we are
> might be useful (e.g. gradually decreasing font size for labels) - I got
> a little confused in the first few seconds of playing around with it.

Thanks FND. Yes the confusion you mention has been a major worry.
Second or third level items with no sub topic seem to become very lost
orphans.

There are limited solutions to this problem but I think I have come up
with a hybrid that may do it. Clarity is paramount in a menu.

Hopefully it is the best of both worlds. It may just be the way to go
- of course the rough edges need to be filed off but here's what my
idea is.

What's your thoughts on this way of doing it?

http://twt-blackicity.tiddlyspot.com/index.html

Morris Gray

Eric Weir

unread,
Jul 4, 2009, 9:39:21 AM7/4/09
to Tiddl...@googlegroups.com

On Jul 4, 2009, at 9:18 AM, Morris Gray wrote:

> What's your thoughts on this way of doing it?
>
> http://twt-blackicity.tiddlyspot.com/index.html

Frankly, I don't see the problem. I suppose if you're really, REALLY
literal-minded, this would help. To me it's just clutter. I like the
clean version.

Regards,

FND

unread,
Jul 4, 2009, 11:16:27 AM7/4/09
to Tiddl...@googlegroups.com
>> What's your thoughts on this way of doing it?
>> http://twt-blackicity.tiddlyspot.com/index.html
>
> I like the clean version.

I do like the guiding lines indicating hierarchy.
I don't like the additional gradients on nested items, as that seems to
add unnecessary noise and makes the items' text hard to read.

So from my perspective, just keeping those lines - perhaps in black
though - is the way to go.


-- F.

Eric Weir

unread,
Jul 4, 2009, 11:32:10 AM7/4/09
to Tiddl...@googlegroups.com

On Jul 4, 2009, at 11:16 AM, FND wrote:

> I do like the guiding lines indicating hierarchy.
> I don't like the additional gradients on nested items, as that seems
> to
> add unnecessary noise and makes the items' text hard to read.
>
> So from my perspective, just keeping those lines - perhaps in black
> though - is the way to go.

I've been working with TWT-Treeview-Accordion, as I've named it, a bit
now. [1] Since Morris has fixed the problem of the extra line between
items in Treeview trees, I could definitely live with the fix. [2]
Having worked with it a bit now I can see that it could be a little
confusing.

On another note, I'd like to create new main menu items, but the
MainMenu tiddlers in the original TWT-Blackicity-Treview and the new
Accordion version don't look at all the same, i.e., when open for
editing.

I'm not sure how to create new items in the latter. The instructions
for the former don't appear relevant. Or do I simply copy the base
code for a new item from the instructions tiddler to the MainMenu file
and then editing them according to the instructions?

I know I've said more than once already, but one more time, I really
like this TW.

Thanks, Morris.

Sincerely,

shavinder

unread,
Jul 6, 2009, 12:35:57 AM7/6/09
to TiddlyWiki
Guys maybe I am misunderstanding something obvious but nevertheless I
shall bring it to your notice.
When the tw first open and I click on the Main Menu the drop-down
reveals both 'Intro TreeView' and the second 'Main Menu' in their
expanded state with their children revealed. They also have a '+'
displayed on their left end. I think two things are wrong here:
1. They should not reveal their chidren just yet. Only when I click
again on them should they do that.
2. The '+' should not be there when the children are already revealed.
It should be a '-'

Further this error state is rectified when you have expanded and
collapsed first menu once and then click on the second menu. Then the
'+' and '-' start displaying correctly.

Morris Gray

unread,
Jul 6, 2009, 2:16:24 AM7/6/09
to TiddlyWiki
On Jul 6, 2:35 pm, shavinder <shavinderpalsi...@gmail.com> wrote:

> When the tw first open and I click on the Main Menu the drop-down
> reveals both 'Intro TreeView' and the second 'Main Menu' in their
> expanded state with their children revealed.

Thanks for your comments about the state of the menu.

As for as the initial state of the menu when loaded (open/closed)
there are a few things that can add to your confusion. Some of these
depend upon the original settings (below) by the author. These also
may be controlled by either local or remote cookies that may persist
on your browser.

1: (persist: "cookie") means the state of the Treemenu persists and
will remain where you left it between sessions.
2: (persist: true) means the state will only persist during a single
session.
3: (persist: false) means the state will not persist.

Because it is still being experimented with the 'persist' you have may
have been in any setting. The latest upload should have had all
individual menus set to 'persist:false'

In addition to the persist command; any branch can be set to be open/
closed on loading by tagging it with the tag 'closed'. Again the
latest upload should have all major branches tagged as closed.

You can check the persist setting on the menus here:
http://twt-blackicity.tiddlyspot.com/index.html#TreeviewAccordion

Individual branch heading settings can be checked by seeing if they
are tagged closed or not.

Please delete all cookies and try it again.

Morris Gray

Morris Gray

unread,
Jul 6, 2009, 3:15:21 AM7/6/09
to TiddlyWiki
On Jul 5, 1:16 am, FND <F...@gmx.net> wrote:

> So from my perspective, just keeping those lines - perhaps in black
> though - is the way to go.

I agree and have done as you suggest.

Morris

On Jul 4, 6:30 am, Eric Weir <eew...@bellsouth.net> wrote:
> Something unrelated to the menu, Morris.
> I have a copy of that TWT. I've you can give me some pointers for
> installing it in TWT-Blackicity-Accordion, I'd like to try to do so.

Sorry Eric, for me that ship may have already sailed along with the
code:-) If you have a copy of it email it to me along with
instructions as to what you mean and I'll let you know.

On Jul 4, 9:21 pm, Tobias Beer <beertob...@googlemail.com> wrote:
> A few things...
>
> 1) As "add >> subtopic" is equivalent to "new here", I think it is an
> important piece of information to say directly that the menu works
> through tagging ...because, if you'd ever want to rearrange things,
> you'd only have to tag differently.

See CreateNewBranches.

> 2) I know it is stupid, but if you'd (accidentally) tag a topmenu item
> with the name of a submenu item, you'd get a macro error (infinite
> loop?)... don't know if that's supposed to be so.

Yes it is the case that if you tell a tiddler to refer to itself in
any form you get a loop. TiddlyWiki is a goal seeking machine and will
do what you tell it to even if sometimes it's ill advised. If it's an
accident you should be more careful:-) If you do it on purpose it's
time consuming and you have time to go out and get another beer, no
pun intended :-)

> 3) If I create a tiddler and tag it with the name of any of the items
> already in the menu, it will be displayed in the menu... I think it
> were better if only those items ended up in a treeview menu, that are
> actually tagged "treeview" ...or even better tagged with the rootnode.

You could probably do this if you wish. I might consider adopting it
if you do.

> 4) Whatever happened to "tagging"?!? To remove it seems quite bad. If
> you had tiddlers that were not in the menu, but still use tagging, you
> would only see the tag relation in the tiddler that is tagging but no
> reference in the tiddler which is the tag.

I'm not exactly sure what you mean.

> Some grammar:
>
> "Thunb (flash) drive"
> "TiddlersBar tabs that can be toggled and off."

Thanks, fixed

Morris

Tobias Beer

unread,
Jul 6, 2009, 7:21:11 AM7/6/09
to TiddlyWiki
> > 2) I know it is stupid, but if you'd (accidentally) tag a topmenu item
> > with the name of a submenu item, you'd get a macro error (infinite
> > loop?)... don't know if that's supposed to be so.
>
> Yes it is the case that if you tell a tiddler to refer to itself in
> any form you get a loop. TiddlyWiki is a goal seeking machine and will
> do what you tell it to even if sometimes it's ill advised...

I don't know which bad case of self referencing "breaks" tiddlywiki
core. Tiddlers can cross reference each other via tagging just fine.
What I do see is that treemenu gets an overload by cross references.


> > 3) If I create a tiddler and tag it with the name of any of the items
> > already in the menu, it will be displayed in the menu... I think it
> > were better if only those items ended up in a treeview menu, that are
> > actually tagged "treeview" ...or even better tagged with the rootnode.
>
> You could probably do this if you wish. I might consider adopting it
> if you do.
Though the idea with the rootnode doesn't quite make sense, listing
only tiddler tagged "treeview" in the menu does make sense... I'll see
if I can get a working example.


> > 4) Whatever happened to "tagging"?!? To remove it seems quite bad. If
> > you had tiddlers that were not in the menu, but still use tagging, you
> > would only see the tag relation in the tiddler that is tagging but no
> > reference in the tiddler which is the tag.
>
> I'm not exactly sure what you mean.
I mean that there is no indication what tiddlers are tagging to a
tiddler. You know, that "tagging" box in tw core or any of the lists
provided by tagglyTagging. Or do I just not see it?
See here: http://easycaptures.com/fs/uploaded/287/1921843680.png

Morris Gray

unread,
Jul 6, 2009, 7:30:19 PM7/6/09
to TiddlyWiki
On Jul 6, 9:21 pm, Tobias Beer <beertob...@googlemail.com> wrote:

> I don't know which bad case of self referencing "breaks" tiddlywiki
> core. Tiddlers can cross reference each other via tagging just fine.
> What I do see is that treemenu gets an overload by cross references.

Treeview doesn't do anything new in the tagging department it simply
references tiddlers to list them on the menu. With any logical
sequence of building a menu the problem should never come up. You
don't have to be anymore careful than with any other tagging sequence.
To try to anticipate every mistake someone could make is an
unnecessary complication.

> Though the idea with the rootnode doesn't quite make sense, listing
> only tiddler tagged "treeview" in the menu does make sense... I'll see
> if I can get a working example.

Note that creating a subtopic already tags those tiddlers with
'treeview'. It is only used for reference and then not a very good
one because people can add to the menu in other ways and not include
it. If someone tags a tiddler accidentally with a menu item it is
glaringly obvious because it shows up on the menu. If it creates an
endless loop that is even more obvious. If you can find a simple way
to prevent the rare occurrence of a loop before it occurs I'm sure it
would be welcomed.

> I mean that there is no indication what tiddlers are tagging to a
> tiddler. You know, that "tagging" box in tw core or any of the lists
> provided by tagglyTagging. Or do I just not see it?

You are right it is not there. I routinely remove it from all my
TiddlyWikis, it is not aesthetically pleasing and for most
applications it is unnecessary. The Tags: ▾ button on the toolbar
allows you to see the tags on any tiddler without editing if you
wish. If someone wishes the tagging box displayed they can simply add
it to the ViewTemplate - it is a matter of user preference.

Morris

.
Reply all
Reply to author
Forward
0 new messages