[TW5] the LeftBar theme (left sidebar / mainmenu )

[Mat]

Oooh... naughty student. Should have been focussing on studies but couldn't resist piecing together a thing I've missed: A simple way to get a left side bar (or "MainMenu" to use a TWc term). I believe this currently is the easiest and most direct way to get it:

leftbar.tiddlyspot.com

It is ready for use, but if you have guidance for any improvements please go ahead.

<:-)



Some search words and meta tags for this post:
sidebar "side bar" mainmenu "main menu" left side menu leftbar "left bar" "left menu" "left sidebar"

[Alberto Molina]

Hi Mat,

I guess you did know about: http://tw5topleft.tiddlyspot.com/

Is your solution easier/better?

Oooh... naughty student. Should have been focussing on studies but couldn't resist piecing together a thing I've missed:

Same here :)

I just figured out how to improve the centralised tw theme: when you show the right sidebar, its switches to vanilla, and when you hide the sidebar, its switches back to centralised. Check it out here: http://magictabs.tiddlyspot.com/

Best wishes and stop procrastinating (… I know, me too ;)

Alberto

[James]

Hi Mat,

It's great!.. I am looking forward to see some improvement suggest by Molina.  Thanks.

[Tobias Beer]

Hi Mat,

Thanks, an often asked topic, I believe... 

good to have a number of places to find instructions.

There's a typo in your instructions: $:_LeftBar

Could you perhaps turn those tiddlers to be dragged over

into a definition list and put a sentence each as to

what it is and what it does for the LeftBar to work?

I think it's important to understand how things work,

so as to be able to tweak the right spots,

because tweak we want and tweak we will.

For example, not everyone needs or wants tabs.

Some may want right aligned links,

some a toc, etc...

Mind you, I'm not asking you to

cram all this into the sidebar as examples.

Just so one would know where goes what,

just in case.

Best wishes, Tobias.

[Mat]

Hi Alberto,

I guess you did know about: http://tw5topleft.tiddlyspot.com/

Is your solution easier/better?

 
Yes, I should have commented on Tons nice creation when I posted. But in my, probably not so humble opinion, my version is a LOT easier to use. I suggest you do a quick test to compare. Also, I don't use the clever Matabele hide/show behaviour, but instead the non-clever-to-the-point behaviour; show/hide what you want.

I just figured out how to improve the centralised tw theme: when you show the right sidebar, its switches to vanilla, and when you hide the sidebar, its switches back to centralised. Check it out here: http://magictabs.tiddlyspot.com/

That is a good idea. How would I do this? Is there a "switcher" for this, whatever that would mean? Maybe if the're some kind of "batch toggle" so I can toggle on/off tag "$:/tags/PageTemplate" and "$:/tags/Stylesheet". What exactly should I do?

Such a batch toggler would actually be very useful as it could allow for multiple themes in one TW. And if it allowed multiple tags (or even fields?) to be toggled with a single, say, checkbox you could have a nice panel or drowpdown listing themes for immediate choice.


<:-)

[Alberto Molina]

Hi Mat,

Yes, I should have commented on Tons nice creation when I posted. But in my, probably not so humble opinion, my version is a LOT easier to use. I suggest you do a quick test to compare. Also, I don't use the clever Matabele hide/show behaviour, but instead the non-clever-to-the-point behaviour; show/hide what you want.

Ok, I'll give it a try. Precisely, yesterday I was playing with Ton's left menu.

 

I just figured out how to improve the centralised tw theme: when you show the right sidebar, its switches to vanilla, and when you hide the sidebar, its switches back to centralised. Check it out here: http://magictabs.tiddlyspot.com/

That is a good idea. How would I do this? Is there a "switcher" for this, whatever that would mean? Maybe if the're some kind of "batch toggle" so I can toggle on/off tag "$:/tags/PageTemplate" and "$:/tags/Stylesheet". What exactly should I do?

I just changed $:/core/ui/TopBar/menu adding an <action-setfield> to the button in order to change the content of $:/theme. Thus, when you show/hide the sidebar, it also changes the theme.

This and other UI changes are bundled as plugin. Look for "goodies": http://magictabs.tiddlyspot.com/#%24%3A%2Fplugins%2Famp%2Fgoodies

 

Such a batch toggler would actually be very useful as it could allow for multiple themes in one TW. And if it allowed multiple tags (or even fields?) to be toggled with a single, say, checkbox you could have a nice panel or drowpdown listing themes for immediate choice.

It's something possible to do, I guess.

Regards,

Alberto

[Mat]

Hi Tobias,

There's a typo in your instructions: $:_LeftBar

 
Corrected. Thanx.
 

Could you perhaps turn those tiddlers to be dragged over

into a definition list and put a sentence each as to

what it is and what it does for the LeftBar to work?

What is a "definition list", and how to they work? I find no info on tw.com and only this on Encyclopedia tb5'ica.

I think it's important to understand how things work,

so as to be able to tweak the right spots,

because tweak we want and tweak we will.

I agree. I just changed so that the tabs are not included by default. Do you have any particular further
suggestions how to make things easier to understand? I think I'm covering most in the Instructions
 tiddler and in the tiddlers liked to from there.

Thank you!

<:-)

[Tobias Beer]

Hi Mat,

 

What is a "definition list", and how to they work? 

I find no info on tw.com and only this on Encyclopedia tb5'ica.

• http://tiddlywiki.com/#Definitions%20in%20WikiText
  
• http://tb5.tiddlyspot.com/#definition-lists

; term
: definition

e.g.

; [[$:/foo/bar]]
: defines bla
: do blop to make blip

Do you have any particular further suggestions how to make things easier to understand?

Not at the moment :-) 

Best wishes, Tobias.

[Mat]

What is a "definition list", and how to they work? 

I find no info on tw.com and only this on Encyclopedia tb5'ica.

• http://tiddlywiki.com/#Definitions%20in%20WikiText
  
• http://tb5.tiddlyspot.com/#definition-lists

Ok, misunderstanding on my side.

I've now included summary fields and would like to automatically generate such a definition list, as a table, from these. No problem in with a fET in TWc, but in TW5 I don't know how. Here's an attempt that doesn't work:

<$list filter="[all[shadows+tiddlers]field[summary]]">
|{{!!title}}|{{!!summary}}|
</$list>

Suggestions, anybody?

@Tobias - I think a solution for this could be valuable in tb5.


<:-)

[Alberto Molina]

I've now included summary fields and would like to automatically generate such a definition list, as a table, from these. No problem in with a fET in TWc, but in TW5 I don't know how. Here's an attempt that doesn't work:

<$list filter="[all[shadows+tiddlers]field[summary]]">
|{{!!title}}|{{!!summary}}|
</$list>

Suggestions, anybody?

<table>
<$list filter="[all[shadows+tiddlers]has[summary]]">
<tr>
<td>{{!!title}}</td>
<td>{{!!summary}}</td>
</tr>
</$list>
</table>

[Mat]

<table>
<$list filter="[all[shadows+tiddlers]has[summary]]">
<tr>
<td>{{!!title}}</td>
<td>{{!!summary}}</td>
</tr>
</$list>
</table>

Thank you Alberto! Is it possible to do this without html markup? Just feels like a step backward to me. Isn't there something more polished in TW?

Also, anybody knows how to linkify:

{{!!title}}

I tried the obvious

[[{{!!title}}]]

...but no cigarr. BTW, I know I've seen a discussion on this but fail to find it.

And an href yields external links. (And there's that primitive backward feeling again...)


<:-)

[Jed Carty]

There are some things that WikiText can't do well, and for the moment at least building a table using the list widget is one of them. So for now at least we are stuck with using html.

You can make the link by using the link widget: <$link to=<<currentTiddler>>><$view field='title'/></$link>

[Tobias Beer]

<$list filter="[all[shadows+tiddlers]field[summary]]">
|{{!!title}}|{{!!summary}}|
</$list>

Suggestions, anybody?

That's what definition lists are for, imho.

Pay attention to block-mode.

<$list filter="[all[shadows+tiddlers]has[summary]]">



; <$link><$view field=title/></$link>
: {{!!summary}}
</$list>

See http://xlist.tiddlyspot.com/#Examples

Also, here's a bit of css I use to prettify definition lists in $:/.tb/styles @ tb5:

dl{
margin:0;
}

dd{
margin-left:14px;
}

dd:before{
content: "» ";
}

.no-before:before{
content:none;
}

The last class I use when I actually don't want that raquo;, e.g.:

; term
:.no-before definition

Best wishes, Tobias.

[Mat]

 <$link to=<<currentTiddler>>><$view field='title'/></$link>

Thanks Jed, that worked! I have now added a Deinition list.


@Alberto or anyone, regarding switching between themes and 

I just figured out how to improve the centralised tw theme: when you show the right sidebar, its switches to vanilla, and when you hide the sidebar, its switches back to centralised. Check it out here: http://magictabs.tiddlyspot.com/

That is a good idea. How would I do this? Is there a "switcher" for this, whatever that would mean? Maybe if the're some kind of "batch toggle" so I can toggle on/off tag "$:/tags/PageTemplate" and "$:/tags/Stylesheet". What exactly should I do?

I just changed $:/core/ui/TopBar/menu adding an <action-setfield> to the button in order to change the content of $:/theme. Thus, when you show/hide the sidebar, it also changes the theme.

This and other UI changes are bundled as plugin. Look for "goodies": http://magictabs.tiddlyspot.com/#%24%3A%2Fplugins%2Famp%2Fgoodies

1) How are "this and other UI changes" actually bundled into a plugin? That would make it easier so that people only have to drag over one tiddler.

2) ...and it seems this is needed in order to have all UI changes switch in one go, using the setting ot $:/theme. I.e is it a "bundle" that enables this - and is this then the same "bundle" that constitutes the plugin?

BTW, if it is easy to "bundle" in this way, then a user could use something like themeswitcher (that I just threw together) to change between things. This could allow e.g a family to use one TW (theme switch to see only relevant stuff) or to have multiple "applications" with both differents sets of tools and seen content, but all in one TW.

Thank you!

<:-)

[Leo Staley]

Hey, thanks! This is much better and more effective than the tw5topleft.tiddlyspot! 

Now, If someone could just make a css theme to make the whole thing compact again like TWC, I just might return to using Tiddlywiki! :) Keep up the good work. 

[Leo Staley]

By the way, How did you get the right sidebar to scroll with the rest of the story river, just like TWC??? 

[Mat]

Thanx for the compliments.

By the way, How did you get the right sidebar to scroll with the rest of the story river, just like TWC??? 

Ehum... actually, it just came out that way. I'm hoping to understand how to make stick/scroll an option.

BTW, I'm currently experimenting with a totally different setup to get a left bar by increasing the story left position and putting a floating div with the menu there. Soon to be released, accompanied by totally unproportional pride.


<:-)

[Leo Staley]

Yeah, I quit Tiddlywiki about a year ago because I couldn't get it to do that, and basically emulate a TWC classic look and feel. and then you come strolling out here doin it by accident. 

I've got a $15 (small, but hey, i'm broke) reward for anybody who makes a full fledged TWC theme; font size, space between lines, and tiddlers, button size/style (no icons), etc. I'm not hot about the color options though since i always changed those anyway.  

[Mat]

I've got a $15 (small, but hey, i'm broke) reward for anybody who makes a full fledged TWC theme; font size, space between lines, and tiddlers, button size/style (no icons), etc.

While I'm not the right guy for such an undertaking I still think you'd better be very precise in what you're asking for. The "etc" can be a bit of a Pandoras box. But including "font size" as a request makes me wonder if you've made any attempt yourself?

However... if font size is too difficult then I'm wondering how well things would proceed even if you did get a TWc theme... Having used TW for many years, I've found myself forced to tiddle-fiddle pretty soon regardless of how a TW was set up. The major difference between TWc and TW5 is not the visuals you mention in your request so you'd still have to, hm, "reconceptualize" much more than the theme-specifics you're asking for. I mean, those visuals are "the small part" of making the switch. That said - the switch is worth it.

An idea is to take one of your "theme tweaks" at a time and try and ask on the boards until it's what you want (and probably more!). In the process you'll get more familiar with TW5.

<:-)

[Dave]

Mat,

Did you ever get the this left menu to stick instead of scroll with the rest of the tiddler story?

[Riz]

Try creating a stylesheet and adding.

.tc-leftbar-scrollable {   
    position: fixed;
}

[Mat]

Dave wrote:

Mat,

Did you ever get the this left menu to stick instead of scroll with the rest of the tiddler story?

Very funny you should ask - I made exactly that a mere few days ago!!! I have not yet put it into the official leftbar site because it is not polished and I'm not sure it is a good UI (it shows a button to easily switch between fixed/notfixed).

Here is the basic code. I'm currently too much in a hurry and too morning-confused to recall or investigate if it required anything more than this code. Tell me if it works for you:

title:LeftBar
tags: $:/LeftBar

<$reveal type="nomatch"

    state="$:/.TWaddle/LeftBar/Reveal!!position" text="absolute">

<$button set="$:/.TWaddle/LeftBar/Reveal!!position"

               setTo="absolute"

               class="tc-btn-invisible">

              ⦿

</$button></$reveal>

<$reveal type="match"

    state="$:/.TWaddle/LeftBar/Reveal!!position" text="absolute">

<$button set="$:/.TWaddle/LeftBar/Reveal!!position"

               setTo="fixed"

               class="tc-btn-invisible">

              ⦾

</$button>

</$reveal>[[LeftBar]]<br>

<$edit-text tiddler="$:/.TWaddle/LeftBar/StyleSheet" field="width"/>

<<list-links "[tag[LeftBar]]">>

 

And here's the stylesheet... which I assume I must have changed for this but can't quite remember ATM:

title: $:/.TWaddle/LeftBar/StyleSheet
tags: $:/tags/Stylesheet

html .tc-story-river {
 position: absolute;
 width:auto;
 z-index: 999;
}

.leftbarpin {display:}

.tc-leftbar-scrollable {
 position:{{$:/.TWaddle/LeftBar/Reveal!!position}}; top:-2em;
  left:0;
 overflow-y: hidden;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
 margin: 0 0 0 0px;
}


<<if-no-leftbar "

html .tc-story-river {  padding-left: 42px; left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}; }
.tc-leftbar-scrollable { width: 0; padding:0; }

">>


<<if-leftbar """

.tc-leftbar-scrollable { width: {{!!width}}; padding:{{!!padding}}; }
.tc-sidebar-scrollable { left:calc({{!!width}} + {{$:/themes/tiddlywiki/vanilla/metrics/storyright}}); margin-left:-84px; }
.tc-story-river { left: {{!!width}}; margin-right:0px; padding-left: 0em; padding-right:42px; }

""">>


<<if-sidebar "

.tc-story-river { width: calc({{$:/themes/tiddlywiki/vanilla/metrics/storyright}} -  {{!!width}} ); }

">>


<<if-no-sidebar "

.tc-story-river { right:0; }

">>

<:-)

[Jan]

Hi Mat, Riz and Dave...
There has been a morphogenetic field, my LeftbarTheme is just in a state where you can test it: http://drilldown.tiddlyspot.com

Thanks again to you Riz for giving me the initial help...
Enjoy
Jan

--
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 https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d0876967-9b1a-459d-9c50-20824d2a9ef8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Riz]

You really took the ball and ran with it :-) It works well. Planning to pack it into a plugin? We should have a collection of all left bars together somewhere.

[Jan]

Hi Riz,
Thanks, you are right, there should be a collection of left-menus..and of UI-Tweaks in general.
I would be happy if you incorporated to Reddit-page. Somehow the Reddit-Register-Mechanism just counted me out.

I have not made a plugin yet, mostly for three reasons:
1. I do not know how to do it correctly yet
2. MultiMenu like most of my tools often has a modular structure so that you might like to skip some of the tiddlers.
3. In some Plugins I depend on code that is programmed by someone else like here BJ's drag and drop Plugin. I think it is better to take the original in order to avoid double-installations.

...so I came up with the Json-trick
...but I also know the disadvantages and I was happy that - for example ghostwriter was published as a theme because this allows you to switch...
so I am a little puzzled.

Greetings Jan

Am 02.01.2017 um 15:08 schrieb Riz:

You really took the ball and ran with it :-) It works well. Planning to pack it into a plugin? We should have a collection of all left bars together somewhere.

--
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 https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5533eb0e-cea1-4b1d-a589-ccf4db64a18a%40googlegroups.com.

[Mat]

Jan wrote:

There has been a morphogenetic field, my LeftbarTheme is just in a state where you can test it: http://drilldown.tiddlyspot.com

Very slick! Impressive!

<:-)

[Birthe C]

Hi Jan,

Waw, you have done a wonderful job with you leftbar. But your incorporation of the miniversion of Metabs with the Index tab and sorting is what make this a must have for me.


Birthe

[Riz]

I would be happy if you incorporated to Reddit-page. Somehow the Reddit-Register-Mechanism just counted me out.

Oh no, last time you posted, you said you were still working on it. I assumed you will announce whenever you polish it up.


PS: Also, if anyone else felt like their work was ignored or is missing from Reddit, please feel free to PM me or post it yourselves. The forum itself is open to public, only the wiki part is restricted for editing access. Things will last longer if it was a community effort rather than an individual one.

[Jan]

Hi Riz,
This was no reproach...I meant the real Reddit-Register/signup dialogue, who did not accept my EMail when I tried to post it this evening.
I think it is quite presentable now.

I only have a problem hiding the vertical scrollbar of the leftmenuwrapper in FF. Perhaps you can help me with that.
I tried to make the leftmenuwrapper 17px wider
and then hide the overflow of the  outer .menu
Strangely this won't work

Do you have a tweak?

best wishes
Jan

--
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 https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/eedf03c8-48f1-45e6-838a-a9d56a0c14fc%40googlegroups.com.

[Riz]

Try changing .leftmenuwrapper {position:fixed} to .leftmenuwrapper{position:absolute}. Since you already have a parent container with positioned relative to screen, the children can be positioned as absolute.

I see you already have taken care of the chrome side of things. Clever.

PS: You need not give an email id when signing up for reddit. You can always add it later, or never if you wish you keep your personal details hidden. try signing up without an email id and do post.

[Dave]

Thanks!  I tried copying and pasting it into my current TW with your previous Leftbar and the menu disappeared.  Maybe I'll wait until the official update is out and start over from scratch

- Dave

[Jan]

Hej Riz,
what a difference a word makes... Thanks so much I searched so long the
it started to turn me mad.
It's a pleasure working with you.

Working on a mobile theme I encountered difficulties to keep the Tiddler
clean and dense without hiding the toolbar to unfindable or too small to
use.
I think you encounterd similar problems with the ghostwriter-theme.

Looking around I found http://materializecss.com/buttons.html
Especially the Item Fab to Toolbar seems to be interesting.

I would like clicking a TiddlerTitle to open the Toolbar redisigned like
the one in the example. It should stay there if you save after editing
but disappear after clicking another Tiddler.
What do you think of this?

Jan

[Riz]

 It would be cool if you could pull it off. I guess you will have to hack the title viewtemplate to pull it off

Personally I would love to see someone attempting a pop-up tiddler viewtoolbar that appears if I long press anywhere in the tiddler body. Given that long tiddlers in desktop will become super extra long in mobile, the whole go back to the top of tiddler becomes tedious.

[Jan]

Ahh!
I see a narrow bar with save and discard button fixed to the top of the screen for editing, to be able to scroll below.
Ingenious...
I very much like the solution found by As Noted. http://asnoted.com/

Jan

Am 03.01.2017 um 11:38 schrieb Riz:

 It would be cool if you could pull it off. I guess you will have to hack the title viewtemplate to pull it off

Personally I would love to see someone attempting a pop-up tiddler viewtoolbar that appears if I long press anywhere in the tiddler body. Given that long tiddlers in desktop will become super extra long in mobile, the whole go back to the top of tiddler becomes tedious.

--
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 https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/72d1a597-3028-4432-b37b-054156075945%40googlegroups.com.

[Jed Carty]

That is similar to what I was hoping to make with my icon menus, but I never got that far with it.

[Mat]

    LeftBar is updated and plugin... ified.  

You can now toggle between scrolling or affixing the LeftBar content and if you want the arrow to be visible, among other things.

<:-)

[Pit.W.]

+1

Much appreciated, Mat.

Big progress. Easy to handle. Quote: "Anything tagged $:/LeftBar will have it's content shown in the LeftBar." Yes, this is easy to manage. And having it as a plugin is really elegant. This allows a completely new way of knowledge management, because it adds a second dimension to the GUI.

Possibilities galore!

Capeau!

Thanks!

Pit

--
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 https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/399f5499-902e-47e5-b1ae-1eebc3085bef%40googlegroups.com.