Announcing new "Menu Bar" plugin

[Jeremy Ruston]

I’ve committed the first version of a new “Menu Bar” plugin, and would welcome thoughts and feedback.

The main features are:

* Supports simple links and dropdowns

* Includes a built-in dropdown search box and a table of contents dropdown

* Menu items may be individually enabled/disabled

* Snaps down to a dropdown hamburger menu if the screen/window is narrower than a preset breakpoint

* Incorporates any items from the core top left/right menu bars (e.g. the sidebar chevron)

You can try it out on the prerelease:

https://tiddlywiki.com/prerelease/

There are still a few minor issues:

* The menubar overlaps the title when the window is narrow enough to show the sidebar above the story river

* It doesn’t work with sticky titles

I’ve enabled the menubar on the prerelease so that people can try it out. But a bigger question is whether we should enable it by default on tiddlywiki.com, and if so with what items?

I’m well aware that there is plenty of prior work in this area, and this plugin isn’t trying to replace all of those existing solutions. It’s an attempt to make the simplest thing that is responsive and works with dropdowns.

Feedback and questions are welcome,

Best wishes

Jeremy.

[Ton Gerner]

Hi Jeremy,

Linux Mint 19.3, Firefox 73.0.1

First impression:

* Nice simple menu bar
* Sidebar button (chevron) not visible although selected: 'Legacy Top Right Bar activated'
* Buttons tagged with $:/tags/TopRightBar are left aligned instead of right aligned as in Top Right Bar
* I do miss the added buttons in the Menu Bar Configuration (like in the 4 toolbar configuration tiddlers) ** Like I missed these for Left and Right Top Bar
* Legacy Top Left Bar & Leagcy Top Right Bar. Do I hear something like deprecate?
* What do you mean with: It doesn’t work with sticky titles?

Cheers,

Ton

[TonyM]

Jeremy

A welcome feature as we need a mobile appropriate interface out of the box. I will explore further and comment shortly.

I have recently being working on both tiddlywiki and other websites and specifically global fixed headers. I also use a site builder which provides some settings tiddlywiki's page layout could do with. For example if we could set the space at the top in or under a heading that will remain fixed so we can introduce menus and tabs including top left and right, above story and other content under which scrolling the story will scroll behind and will be recognised as top of story so once sticky titles work a new top can be set.

If these additions were adjustable elements on the page that may simply be set to zero unless required they would allow additional interface designs. The same could be said for a fixed or floating footer, including similar to the draft tiddlers line with the story scrolling within if such a story view is set.

The issue here is we need your leadership on the page elements and customizability because its a fundamental part of tiddlywiki structure. If we have the design flexibility plugins are less likely to interfere with each other.

I don't think there is much more needed just a little to enable some key page layout opportunities.

Thanks for you ongoing innovations.

Regards
Tony

[TonyM]

Jeremy,

A Few Desirable menu customisation;

• The ability to alter the width of the dropdowns, perhaps a % or a minimum/maximum width
• The ability to set the dropdowns justification so a right hand top drop down opens left and does not force scroll right
• Set new top for sticky titles
• Can we have content in the menu bar that remains, without collapsing into the hamburger, eg site title? this is valuable space on a mobile.
• A Dropdown menu option would be a nice reusable element we can use elsewhere, eg in toolbars, tiddlers. 

I am yet to look more closely at this, so I hope I have not ask for something that is already there, but its a welcome addition

Thanks

Tony

[David Gifford]

Nice!

Comments:

1. Yet again, Facebook is the inspiration for TiddlyWiki design and color choices. The transformation will be complete when we change the name to something that starts with F and put a white F to the left of the search bar. :-)

2. Another possible option for the topbar to offer in the configuration menu to consider: link(s) to the default tiddler(s). Turned off by default but there as an option for users.

3. Since TW detects scrunched mobile screens, and since key sidebar items can go in the topbar, could we finally hide the sidebar automatically for mobile? I find it frustrating that one's default tiddler is not the first thing a visitor sees on a small device, so on my pages I routinely hide the sidebar. Maybe that is worth considering by default for tiddlywiki.com.

4. I hope the stickies situation can be fixed. Love me my stickies and even use them in edittemplate...

5. Like Tony, I would like the customizability option to set this to zero to hide it if needed.

6. The topbar color should have its own line in the palette editor, for customizability.

7. Way to go, nice new feature for TW.

[Jeremy Ruston]

Hi Ton

* Sidebar button (chevron) not visible although selected: 'Legacy Top Right Bar activated'

I pushed an update after my original post to move the Top Right Bar buttons to the right. Is that area just blank for you? Can you share a screenshot?

* Buttons tagged with $:/tags/TopRightBar are left aligned instead of right aligned as in Top Right Bar

Thanks, I’ll post a fix shortly.

* I do miss the added buttons in the Menu Bar Configuration (like in the 4 toolbar configuration tiddlers)

Which buttons are you referring to? Perhaps again it might be clearer to show a screenshot? There is a new “Menu Bar” tab under Basics/Appearance/Toolbars in Control Panel.

** Like I missed these for Left and Right Top Bar

Do you mean that you’d like a UI for enabling and reordering the content of those bars?

* Legacy Top Left Bar & Leagcy Top Right Bar. Do I hear something like deprecate?

Not really. The menu bar clashes with those features and so something has to be done to disable them, and this seemed the neatest way.

* What do you mean with: It doesn’t work with sticky titles?

If you turn on sticky titles you’ll see that they are partially obscured under the menu bar:

Best wishes

Jeremy

Cheers,

Ton

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7f5c7fcb-1b17-4cac-ad9b-df1d71b3a7f1%40googlegroups.com.

[Jeremy Ruston]

Hi Tony

I have recently being working on both tiddlywiki and other websites and specifically global fixed headers. I also use a site builder which provides some settings tiddlywiki's page layout could do with. For example if we could set the space at the top in or under a heading that will remain fixed so we can introduce menus and tabs including top left and right, above story and other content under which scrolling the story will scroll behind and will be recognised as top of story so once sticky titles work a new top can be set.

Extra space at the top of the story river can be added in a number of ways via CSS (eg padding-top on the body element). The challenge is that the menu bar can chance in height according to what entries are enabled, and so I’m looking for the best solution that can dynamically respond to changes in the toolbar height, rather than just setting a fixed offset.

The issue here is we need your leadership on the page elements and customizability because its a fundamental part of tiddlywiki structure. If we have the design flexibility plugins are less likely to interfere with each other.

Not entirely. The core is constrained to innovate carefully because of backwards compatibility, until we decide to make an update that breaks compatibility. In the meantime, innovation in TW page layouts can be found in the work of Thomas, Riz and others.

• The ability to alter the width of the dropdowns, perhaps a % or a minimum/maximum width

That can be done by CSS, and they are indeed set to a maximum size that’s a percentage of the available space.

• The ability to set the dropdowns justification so a right hand top drop down opens left and does not force scroll right

I think the best solution here is that on narrow screens the dropdowns should expand to fill nearly all the available space, enabling content scrolling if necessary.

• Set new top for sticky titles

See above.

• Can we have content in the menu bar that remains, without collapsing into the hamburger, eg site title? this is valuable space on a mobile.

Yes, just add a menu item with the field "show-when” set to “narrow”.

• A Dropdown menu option would be a nice reusable element we can use elsewhere, eg in toolbars, tiddlers. 

The dropdowns are the same standard ones as we use elsewhere in TW5.

Best wishes

Jeremy

[Jeremy Ruston]

Hi David

1. Yet again, Facebook is the inspiration for TiddlyWiki design and color choices. The transformation will be complete when we change the name to something that starts with F and put a white F to the left of the search bar. :-)

:) 

The toolbar is actually the standard TW5 blue colour that we use for links.

2. Another possible option for the topbar to offer in the configuration menu to consider: link(s) to the default tiddler(s). Turned off by default but there as an option for users.

The “Home” button can be added to the menu bar by enabling the “page control buttons”.

3. Since TW detects scrunched mobile screens, and since key sidebar items can go in the topbar, could we finally hide the sidebar automatically for mobile? I find it frustrating that one's default tiddler is not the first thing a visitor sees on a small device, so on my pages I routinely hide the sidebar. Maybe that is worth considering by default for tiddlywiki.com.

That is indeed my intention.

4. I hope the stickies situation can be fixed. Love me my stickies and even use them in edittemplate...

Yes indeed, I’m investigating solutions.

5. Like Tony, I would like the customizability option to set this to zero to hide it if needed.

Set what to zero? The height of the menu bar?

6. The topbar color should have its own line in the palette editor, for customizability.

In order for the menu bar colours to appear in the palette editor by default we’d have to define those colours in the standard core palettes, which is somewhat inconsistent with the fact that the menu bar is packaged as a plugin. In general, plugins should be independent of the core, and we try to avoid shipping components of plugins as part of the core.

So, since we don’t want to add colour entries to the core for every plugin that might want to introduce new ones, the present situation is that the colours fallback to values in the plugin (see https://github.com/Jermolene/TiddlyWiki5/commit/4afde5a722afc91c826305800ba536c5fe8ef2e5), but can be defined in the palette editor by adding the entries menubar-foreground and menubar-background to the current palette.

7. Way to go, nice new feature for TW.

Thanks!

Best wishes

Jeremy

On Friday, February 28, 2020 at 10:41:39 AM UTC-6, Jeremy Ruston wrote:

I’ve committed the first version of a new “Menu Bar” plugin, and would welcome thoughts and feedback.

The main features are:

* Supports simple links and dropdowns

* Includes a built-in dropdown search box and a table of contents dropdown

* Menu items may be individually enabled/disabled

* Snaps down to a dropdown hamburger menu if the screen/window is narrower than a preset breakpoint

* Incorporates any items from the core top left/right menu bars (e.g. the sidebar chevron)

You can try it out on the prerelease:

https://tiddlywiki.com/prerelease/

There are still a few minor issues:

* The menubar overlaps the title when the window is narrow enough to show the sidebar above the story river

* It doesn’t work with sticky titles

I’ve enabled the menubar on the prerelease so that people can try it out. But a bigger question is whether we should enable it by default on tiddlywiki.com, and if so with what items?

I’m well aware that there is plenty of prior work in this area, and this plugin isn’t trying to replace all of those existing solutions. It’s an attempt to make the simplest thing that is responsive and works with dropdowns.

Feedback and questions are welcome,

Best wishes

Jeremy.

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6209fdc9-9122-4c7f-8c2c-ada1752e2c30%40googlegroups.com.

[TonyM]

Jeremy,

Thanks so much for your rapid response. A few quick replys;

Extra space at the top of the story river can be added in a number of ways via CSS (eg padding-top on the body element). The challenge is that the menu bar can chance in height according to what entries are enabled, and so I’m looking for the best solution that can dynamically respond to changes in the toolbar height, rather than just setting a fixed offset.

 

Here my ignorance is exposed but highlights a need to document such possibilities and "how to" for common or garden users. If there is a class name or style sheet entry great, but a configurable value as an option would be helpful. There are many sites now using single line fixed menus and simply being able to set a fixed height at the top would help many (although not all cases) with or without the menu bar plugin.

 

Not entirely. The core is constrained to innovate carefully because of backwards compatibility, until we decide to make an update that breaks compatibility. In the meantime,

understood

 

innovation in TW page layouts can be found in the work of Thomas, Riz and others.

 

OK 

                Can we have content in the menu bar that remains, without collapsing into the hamburger, eg site title? this is valuable space on a mobile.

Yes, just add a menu item with the field "show-when” set to “narrow”.

Great, this show-when is specific to your plugin?, could this be generalised?

 

• A Dropdown menu option would be a nice reusable element we can use elsewhere, eg in toolbars, tiddlers. 

The dropdowns are the same standard ones as we use elsewhere in TW5.

I am thinking of a macro or widget for easy use since all user may want to introduce them, and the select widget is a little different. My own work with these showed me it can be a little complex, although I am fine now it seems hard to empower others to use them.

Thanks

Tony

[David Gifford]

See my replies in ITALIC NUMBERS

On Friday, February 28, 2020 at 3:16:27 PM UTC-6, Jeremy Ruston wrote:

Hi David

1. Yet again, Facebook is the inspiration for TiddlyWiki design and color choices. The transformation will be complete when we change the name to something that starts with F and put a white F to the left of the search bar. :-)

:) 

The toolbar is actually the standard TW5 blue colour that we use for links.

2. Another possible option for the topbar to offer in the configuration menu to consider: link(s) to the default tiddler(s). Turned off by default but there as an option for users.

The “Home” button can be added to the menu bar by enabling the “page control buttons”.

Ah, gotcha. Home = default tiddlers. Should have thought of that

3. Since TW detects scrunched mobile screens, and since key sidebar items can go in the topbar, could we finally hide the sidebar automatically for mobile? I find it frustrating that one's default tiddler is not the first thing a visitor sees on a small device, so on my pages I routinely hide the sidebar. Maybe that is worth considering by default for tiddlywiki.com.

That is indeed my intention.

Yayyyy

4. I hope the stickies situation can be fixed. Love me my stickies and even use them in edittemplate...

Yes indeed, I’m investigating solutions.

5. Like Tony, I would like the customizability option to set this to zero to hide it if needed.

Set what to zero? The height of the menu bar?

Yes. I saw your reply to Tony. My interest is not in having a number like zero, just the ability to hide the topbar when I don't want it.

6. The topbar color should have its own line in the palette editor, for customizability.

In order for the menu bar colours to appear in the palette editor by default we’d have to define those colours in the standard core palettes, which is somewhat inconsistent with the fact that the menu bar is packaged as a plugin. In general, plugins should be independent of the core, and we try to avoid shipping components of plugins as part of the core.

So, since we don’t want to add colour entries to the core for every plugin that might want to introduce new ones, the present situation is that the colours fallback to values in the plugin (see https://github.com/Jermolene/TiddlyWiki5/commit/4afde5a722afc91c826305800ba536c5fe8ef2e5), but can be defined in the palette editor by adding the entries menubar-foreground and menubar-background to the current palette.

Okay.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[A Gloom]

>.< now you make it after I prefected my topbar : D but good idea m/ I'm confident will have something that will help my design >> << (you should understand-- I did it my way and ain't abandoning it so quickly after all the time n effort and accomplishment achieved by figuring it out myself)

(my topbar is now much better than what was shown in screenshots and the video I'm making of the RagsGrimoire in action (screenshots don't portray its features and function adequately) )

[Mohammad]

Thank you Jeremy!

I really welcome such official plugins and I think users shall have options to customize their wiki using the official plugins.

On Friday, February 28, 2020 at 8:11:39 PM UTC+3:30, Jeremy Ruston wrote:

I’ve committed the first version of a new “Menu Bar” plugin, and would welcome thoughts and feedback.

The main features are:

* Supports simple links and dropdowns

* Includes a built-in dropdown search box and a table of contents dropdown

* Menu items may be individually enabled/disabled

* Snaps down to a dropdown hamburger menu if the screen/window is narrower than a preset breakpoint

* Incorporates any items from the core top left/right menu bars (e.g. the sidebar chevron)

You can try it out on the prerelease:

https://tiddlywiki.com/prerelease/

There are still a few minor issues:

* The menubar overlaps the title when the window is narrow enough to show the sidebar above the story river

* It doesn’t work with sticky titles

I’ve enabled the menubar on the prerelease so that people can try it out. But a bigger question is whether we should enable it by default on tiddlywiki.com, and if so with what items?

I prefer to have menuabar as a plugin!

I support the philosophy of having the TW core as light and fast as possible and editions rich of tools and deatures!

So, the empty can have ONLY essential codes and for example tw5.com has such menubar!

The empty.html can be kept as empty as possible.

I also support the download starter.html with a wizard like the one which proposed by Matt and Mario on GitHub as PR.

 

I’m well aware that there is plenty of prior work in this area, and this plugin isn’t trying to replace all of those existing solutions. It’s an attempt to make the simplest thing that is responsive and works with dropdowns.

Feedback and questions are welcome,

Best wishes

Jeremy.

Best

Mohammad 

[Jeremy Ruston]

Hi Tony

Here my ignorance is exposed but highlights a need to document such possibilities and "how to" for common or garden users.

Indeed, it would be good to have more of that material in the docs.

If there is a class name or style sheet entry great, but a configurable value as an option would be helpful.

We already provide user interfaces for some common CSS options (everything in the Theme Tweaks tab of control panel is a UI for customising the core CSS). But we can’t provide UIs for every possibility, at best we can identify the most universal requirements and embody them as UIs.

There are many sites now using single line fixed menus and simply being able to set a fixed height at the top would help many (although not all cases) with or without the menu bar plugin.

Sorry for the confusion. I’m trying to develop a more dynamic solution than using a simple fixed numerical height.

                Can we have content in the menu bar that remains, without collapsing into the hamburger, eg site title? this is valuable space on a mobile.

Yes, just add a menu item with the field "show-when” set to “narrow”.

Great, this show-when is specific to your plugin?, could this be generalised?

I don’t quite understand. In general, we use CSS media queries to change how things appear depending on the screen size. The subtlety of the menu bar implementation is that it renders two entirely separate menu bars, one for narrow screens and one for wide screens, and switched between them dynamically using CSS.

I am thinking of a macro or widget for easy use since all user may want to introduce them, and the select widget is a little different. My own work with these showed me it can be a little complex, although I am fine now it seems hard to empower others to use them.

A macro to make it easier to create dropdowns could certainly be useful.

Best wishes

Jeremy

Thanks

Tony

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/eeb3f5fd-d67a-41e4-bfa5-dc967e9522cd%40googlegroups.com.

[Jeremy Ruston]

Hi David

Yes. I saw your reply to Tony. My interest is not in having a number like zero, just the ability to hide the topbar when I don't want it.

At the moment you can hide the topbar by removing all the menu items, or disabling/removing the plugin.

Best wishes

Jeremy

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/0ae8cdfa-a124-4763-b21d-8a8d0c4753f0%40googlegroups.com.

[Jeremy Ruston]

Hi A Gloom

On 29 Feb 2020, at 04:09, A Gloom <barro...@gmail.com> wrote:

>.< now you make it after I prefected my topbar : D but good idea m/ I'm confident will have something that will help my design >> << (you should understand-- I did it my way and ain't abandoning it so quickly after all the time n effort and accomplishment achieved by figuring it out myself)

(my topbar is now much better than what was shown in screenshots and the video I'm making of the RagsGrimoire in action (screenshots don't portray its features and function adequately) )

Indeed, the intention with the new plugin is to provide something simple and flexible, and there’s plenty of room for different approaches.

Best wishes

Jeremy

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f38fec32-a625-443c-9a48-d5d9f2c34411%40googlegroups.com.

[BurningTreeC]

I’ve committed the first version of a new “Menu Bar” plugin, and would welcome thoughts and feedback.

The main features are:

* Supports simple links and dropdowns

* Includes a built-in dropdown search box and a table of contents dropdown

* Menu items may be individually enabled/disabled

* Snaps down to a dropdown hamburger menu if the screen/window is narrower than a preset breakpoint

* Incorporates any items from the core top left/right menu bars (e.g. the sidebar chevron)

Hi Jeremy, this is a great addition :) 

You can try it out on the prerelease:

https://tiddlywiki.com/prerelease/

There are still a few minor issues:

* The menubar overlaps the title when the window is narrow enough to show the sidebar above the story river

* It doesn’t work with sticky titles

Can't we just set the top value of the titles to something like 25px through a plugin stylesheet?

[Jeremy Ruston]

On 29 Feb 2020, at 12:16, BurningTreeC <hypnotize...@gmail.com> wrote:

Can't we just set the top value of the titles to something like 25px through a plugin stylesheet?

Yes, that’s one solution, but the trouble is that the height of the menubar is actually dynamic (e.g. it can wrap to two lines), and so I’m trying to find a dynamic approach. We do already have a cunning technique for allowing for the top menu when navigating (search for tc-adjust-top-of-scroll).

Best wishes

Jeremy.

[BurningTreeC]

On 29 Feb 2020, at 12:16, BurningTreeC <hypnotize...@gmail.com> wrote:

Can't we just set the top value of the titles to something like 25px through a plugin stylesheet?

Yes, that’s one solution, but the trouble is that the height of the menubar is actually dynamic (e.g. it can wrap to two lines), and so I’m trying to find a dynamic approach. We do already have a cunning technique for allowing for the top menu when navigating (search for tc-adjust-top-of-scroll).

Yes, I was thinking about a tc-adjust-top-of-scroll option but can't imagine a mechanism 

Best wishes

Jeremy.

[Ton Gerner]

Hi Jeremy,

I have mixed feelings about the menubar.

We do have several full blown toolbars (Edit, Editor, Page and View toolbar) with complete configuration options via Contropl Panel > Appearance > Toolbars.
Top Left bar and Top Right Bar did not have these complete configuration options and I expexted they would be added at a certain time but that was not true.

Already in the alpha phase of TW5 I experimented with a top toolbar. One of the reasons was to get most the functionality of the sidebar in the top toolbar.
In time it became a full blown toolbar with buttons and dropdown lists that mimic the sidebar functionality and with the same configuration options of the other toolbars see Top_toolbar.png below and /or http://tw5toolbar.tiddlyspot.com/

The new Menu bar misses these configuration options; you can add buttons tagged with $:/tags/TopLeftbar and/or $:/tags/TopRightbar and that's it; there is no possibility to switch them on/off or reorder them.
So the question is: Why not creating a toolbar based on Top Left Bar / Top Right Bar and the existing structure? Then I can dump my own Top toolbar and concentrate on special buttons ;-)

But I understand you want to have a simple and flexible menubar without all the bells and whistles.

Answering your questions (I am using the prerelease at www.tiddlywiki.com/prerelease so not downloaded).

* Sidebar button (chevron) not visible although selected: 'Legacy Top Right Bar activated'

I pushed an update after my original post to move the Top Right Bar buttons to the right. Is that area just blank for you? Can you share a screenshot?

See attached No_sidebar_button.png

On your screenshot the chevron is visible next to the search bar. On my image no chevron is visible (I made a screen shot of the whole menu bar in case you changed the aligning). I tried with Linux Mint 19.3 + Firefox and Chrome. Even an iPad did not show the chevron.

* Buttons tagged with $:/tags/TopRightBar are left aligned instead of right aligned as in Top Right Bar

Thanks, I’ll post a fix shortly.

* I do miss the added buttons in the Menu Bar Configuration (like in the 4 toolbar configuration tiddlers)

Which buttons are you referring to? Perhaps again it might be clearer to show a screenshot? There is a new “Menu Bar” tab under Basics/Appearance/Toolbars in Control Panel.

I mean the configuration buttons available via Contrl Panel > Appearanmce Toolbars  see Top_toolbar.png

** Like I missed these for Left and Right Top Bar

Do you mean that you’d like a UI for enabling and reordering the content of those bars?

Yes, as I wrote above.

* Legacy Top Left Bar & Leagcy Top Right Bar. Do I hear something like deprecate?

Not really. The menu bar clashes with those features and so something has to be done to disable them, and this seemed the neatest way.

* What do you mean with: It doesn’t work with sticky titles?

If you turn on sticky titles you’ll see that they are partially obscured under the menu bar:

In case of my plugins (Top toolbar, Top menu, Tiddlersbar and combinations of these plugins, see e.g http://tongerner.tiddlyspot.com/ Control Panel > Appearance > Plugin tweaks > Layout tweaks) I made a setting for the Top position of the sticky title. In your case with a dynamic height there must be a smarter solution.

Cheers,

Ton

[Jeremy Ruston]

Hi Ton

We do have several full blown toolbars (Edit, Editor, Page and View toolbar) with complete configuration options via Contropl Panel > Appearance > Toolbars.

Top Left bar and Top Right Bar did not have these complete configuration options and I expexted they would be added at a certain time but that was not true.

They don’t get widely used, perhaps because of the lack of responsiveness.

Already in the alpha phase of TW5 I experimented with a top toolbar. One of the reasons was to get most the functionality of the sidebar in the top toolbar.

In time it became a full blown toolbar with buttons and dropdown lists that mimic the sidebar functionality and with the same configuration options of the other toolbars see Top_toolbar.png below and /or http://tw5toolbar.tiddlyspot.com/

The new Menu bar misses these configuration options; you can add buttons tagged with $:/tags/TopLeftbar and/or $:/tags/TopRightbar and that's it; there is no possibility to switch them on/off or reorder them.
So the question is: Why not creating a toolbar based on Top Left Bar / Top Right Bar and the existing structure? Then I can dump my own Top toolbar and concentrate on special buttons ;-)

If we’d extended either one to be a full width menu bar then we’d have run into the same problem: it would clash with the other one, and we’d need a strategy to deal with that along the lines of what we do here.

I also wanted to make it easier for end users to create dropdown menu items than it is currently is to create a toolbar button with a dropdown.

See attached No_sidebar_button.png

On your screenshot the chevron is visible next to the search bar. On my image no chevron is visible (I made a screen shot of the whole menu bar in case you changed the aligning). I tried with Linux Mint 19.3 + Firefox and Chrome. Even an iPad did not show the chevron.

Ah, OK, I can duplicate it on iPad and Safari, and will look into it.

* I do miss the added buttons in the Menu Bar Configuration (like in the 4 toolbar configuration tiddlers)

Which buttons are you referring to? Perhaps again it might be clearer to show a screenshot? There is a new “Menu Bar” tab under Basics/Appearance/Toolbars in Control Panel.

I mean the configuration buttons available via Contrl Panel > Appearanmce Toolbars  see Top_toolbar.png

Do you mean you’d like to see all the page control buttons available as menu bar items?

** Like I missed these for Left and Right Top Bar

Do you mean that you’d like a UI for enabling and reordering the content of those bars?

Yes, as I wrote above.

That might be a good PR for someone?

In case of my plugins (Top toolbar, Top menu, Tiddlersbar and combinations of these plugins, see e.g http://tongerner.tiddlyspot.com/ Control Panel > Appearance > Plugin tweaks > Layout tweaks) I made a setting for the Top position of the sticky title. In your case with a dynamic height there must be a smarter solution.

I don’t think the situations are all that different: if the content of your topbar wraps to two lines when the screen gets narrow then you’ll also have a dynamic height for the top bar.

Best wishes

Jeremy.

Cheers,

Ton

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/bf913fed-a76b-4f88-ba4b-e1a3ee87de88%40googlegroups.com.
<Top_toolbar.png><No_sidebar_button.png>

[Jeremy Ruston]

Hi Ton

On 29 Feb 2020, at 15:31, Jeremy Ruston <jeremy...@gmail.com> wrote:

See attached No_sidebar_button.png

On your screenshot the chevron is visible next to the search bar. On my image no chevron is visible (I made a screen shot of the whole menu bar in case you changed the aligning). I tried with Linux Mint 19.3 + Firefox and Chrome. Even an iPad did not show the chevron.

Ah, OK, I can duplicate it on iPad and Safari, and will look into it.

That should be fixed now (or in a couple of minutes; the site takes 5 minutes to rebuild). The problem was that I had browser local storage enabled for the prerelease which messed up some of my testing.

Best wishes

Jeremy.

[Ton Gerner]

Hi Jeremy,

I am using TW only on a desktop PC not on mobile; you have to deal with mobile devices as well. That's different.

On Saturday, February 29, 2020 at 4:31:53 PM UTC+1, Jeremy Ruston wrote:

Hi Ton

We do have several full blown toolbars (Edit, Editor, Page and View toolbar) with complete configuration options via Contropl Panel > Appearance > Toolbars.

Top Left bar and Top Right Bar did not have these complete configuration options and I expexted they would be added at a certain time but that was not true.

They don’t get widely used, perhaps because of the lack of responsiveness.

OK

Already in the alpha phase of TW5 I experimented with a top toolbar. One of the reasons was to get most the functionality of the sidebar in the top toolbar.

In time it became a full blown toolbar with buttons and dropdown lists that mimic the sidebar functionality and with the same configuration options of the other toolbars see Top_toolbar.png below and /or http://tw5toolbar.tiddlyspot.com/

The new Menu bar misses these configuration options; you can add buttons tagged with $:/tags/TopLeftbar and/or $:/tags/TopRightbar and that's it; there is no possibility to switch them on/off or reorder them.
So the question is: Why not creating a toolbar based on Top Left Bar / Top Right Bar and the existing structure? Then I can dump my own Top toolbar and concentrate on special buttons ;-)

If we’d extended either one to be a full width menu bar then we’d have run into the same problem: it would clash with the other one, and we’d need a strategy to deal with that along the lines of what we do here.

I also wanted to make it easier for end users to create dropdown menu items than it is currently is to create a toolbar button with a dropdown.

Yes I see, a simple flexible menu bar for desktop and mobile.

See attached No_sidebar_button.png

On your screenshot the chevron is visible next to the search bar. On my image no chevron is visible (I made a screen shot of the whole menu bar in case you changed the aligning). I tried with Linux Mint 19.3 + Firefox and Chrome. Even an iPad did not show the chevron.

Ah, OK, I can duplicate it on iPad and Safari, and will look into it.

No idea what's happening; nobody else did complain so I think the chevron can be seen with Windows //MaOS /Firefox / Chrome but not with Linux Mint / Firefox ?chrom and iPad. Very strange. I am curious what is happening.

* I do miss the added buttons in the Menu Bar Configuration (like in the 4 toolbar configuration tiddlers)

Which buttons are you referring to? Perhaps again it might be clearer to show a screenshot? There is a new “Menu Bar” tab under Basics/Appearance/Toolbars in Control Panel.

I mean the configuration buttons available via Contrl Panel > Appearanmce Toolbars  see Top_toolbar.png

Do you mean you’d like to see all the page control buttons available as menu bar items?

For a simple menu bar only a few buttons are of importance I think. E.g. Home, New tiddler, Save, Control Panel, ... For experienced TW fans no problem to add them by adding $:/tags/TopLeftBar / $:/tags/TopRightBar but how do newbies it when they can't select buttons the way is done for the other toolbars?

Or may be add a few default buttons?

 

** Like I missed these for Left and Right Top Bar

Do you mean that you’d like a UI for enabling and reordering the content of those bars?

Yes, as I wrote above.

That might be a good PR for someone?

You wrote: "They don’t get widely used" so who is interested? I made my own configuration panel and documented it.

In case of my plugins (Top toolbar, Top menu, Tiddlersbar and combinations of these plugins, see e.g http://tongerner.tiddlyspot.com/ Control Panel > Appearance > Plugin tweaks > Layout tweaks) I made a setting for the Top position of the sticky title. In your case with a dynamic height there must be a smarter solution.

I don’t think the situations are all that different: if the content of your topbar wraps to two lines when the screen gets narrow then you’ll also have a dynamic height for the top bar.

The content of my topbar does not wrap. So if you decrease the window width, my toolbar buttons fall off the screen ;-) But the Top Right Bar buttons overlap my Top Left Bar buttons, but that's another problem. As I wrote I only use a desktop PC where the problem does not exist (and there is a more button).

Cheers,

Ton

Best wishes

Jeremy.

Cheers,

Ton

--
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 tiddl...@googlegroups.com.

[Ton Gerner]

Hi Jeremy,

That should be fixed now (or in a couple of minutes; the site takes 5 minutes to rebuild). The problem was that I had browser local storage enabled for the prerelease which messed up some of my testing.

Ha, that explains it. Never thought about that .

And yes it is working now. I see the chevron at it's original position so the right aligning is there as well.

Cheers,

Ton

P.S. I totally missed the checkbox for Page Conrol buttons which adds the active Page Control buttons. The right way to add buttons for a simple menu bar!

[Damon Pritchett]

I very much like this plugin! I tried using it in the current release and it works great (haven't tried the prerelease yet). One thing I noticed when I enabled the page controls is that the buttons for the page controls were terribly small. It's probably got something to do with my custom stylesheets, but I like those and would like to independently set the size of the buttons for the MenuBar. I would also like to independently size the page controls and the chevron for hiding/showing the sidebar. Maybe it's because I have a headache today, but it wasn't clear to me how to make these all independent.

Damon 

[A Gloom]

Jeremy,

 

Indeed, the intention with the new plugin is to provide something simple and flexible, and there’s plenty of room for different approaches.

My kudos, your plugin should make it easier for users to use the topbar especially with it working with the media query for screensize-- topbar menus would be great for mobile devices.

I made a TopLeftBar hide/reveal version of the core right sidebar hide/reveal button and it resides with the right sidebar hide/reveal button in the TopBarMenu div.

The TopBarMenu I also use for streaming audio since streaming audio gets interrupted by tiddler closing and sidebar tab switching or sidebar hiding-- the TopBarMenu is always visible and won't interrupt a controls disabled html audio element there (controls disabled pretty much hides an audio element and you end up with a collapsed container div)

[Damon Pritchett]

I've also noticed that if the table of contents has a tabbed interface, vertical or horizontal, then it take multiple clicks to navigate to where you want to go. The first click opens the table of contents from the MenuBar, then you click on the tab of choice, then you have to click to open the table of contents from the MenuBar again because the click on the tab closes the drop-down from the MenuBar. Clicking on the MenuBar to open the table of contents again shows the desired tab selected and then you can click on your tiddler of choice. Mat's LeftBar plugin does not behave this way. It stays open until you've clicked the desired tiddler. It doesn't close when clicking a tab. What might it take to keep the drop-down from the MenuBar open when clicking tabs?

Damon

[Damon Pritchett]

I forgot to mention that when the page controls are turned on and the TW has been edited, the save button is not red.

Damon

[Damon Pritchett]

Sorry for  all of the posts. I just wanted to mention that I figured out the size of the page control buttons this morning. Amazing what a clearer head will do. I just created a stylesheet that had this in it:

nav.tc-menubar .tc-btn-rounded { font-size: 0.6em; }

Now I'm good to go from a button size point of view. The other questions still remain. I tried the pre-release version and it does the same thing.

Damon

[Damon Pritchett]

Last post, I promise. A little more investigation into the MenuBar behavior reveals that if the menu item is a table of contents based on tags, then you can select the different levels without having to open the menu again. However, if you're using the ToCP plugin where the table of contents is based on the parent field or you're using the tree widget, then you must reopen the drop-down every time an item is clicked. I hope that this is a simple thing to improve (certainly beyond my current knowledge).

Damon

[Jan]

Hi Jeremy,
thanks for this enhancement. I think this is necessary epecially for mobile use.
I have been working on a similar project some time ago.
http://szen.io/MultiMenu/
The difference to yours is that it is not always visible, because space is so valuable on my tiny oldschool-smartphone. It only comes into view if you scroll up by using this snippet:  $:/plugins/JJ/multimenu/navbar.js.

The entire concept of the multimenu is not ready yet. The navbar is meant for mobile use. For Desktops the content shall be integratet into a left menu.
Yours Jan

Am 28.02.2020 um 17:41 schrieb Jeremy Ruston:

I’ve committed the first version of a new “Menu Bar” plugin, and would welcome thoughts and feedback.

The main features are:

* Supports simple links and dropdowns

* Includes a built-in dropdown search box and a table of contents dropdown

* Menu items may be individually enabled/disabled

* Snaps down to a dropdown hamburger menu if the screen/window is narrower than a preset breakpoint

* Incorporates any items from the core top left/right menu bars (e.g. the sidebar chevron)

You can try it out on the prerelease:

https://tiddlywiki.com/prerelease/

There are still a few minor issues:

* The menubar overlaps the title when the window is narrow enough to show the sidebar above the story river

* It doesn’t work with sticky titles

I’ve enabled the menubar on the prerelease so that people can try it out. But a bigger question is whether we should enable it by default on tiddlywiki.com, and if so with what items?

I’m well aware that there is plenty of prior work in this area, and this plugin isn’t trying to replace all of those existing solutions. It’s an attempt to make the simplest thing that is responsive and works with dropdowns.

Feedback and questions are welcome,

Best wishes

Jeremy.

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/00D114E4-959D-4A5B-8381-6A1AAB9C6E14%40gmail.com.

[A Gloom]

<!-- The menubar plugin overrides this tiddler to remove the core top left menu. The menu items that it would include are instead included in the menubar -->

this is for both TopRightBar & TopLeftBar in pre-release

does this mean than when I upgrade to 5.1.22 that is will disable any previous customized TopRightBar & TopLeftBar shadow tiddlers?

I assume I would have to enter the content of my custom top bars into the new Menubar plugin

[Ton Gerner]

Hi A Gloom,

Can it be related to the z-index used?

Some time ago I listed all used z-index values in TW see http://tw5custom.tiddlyspot.com/#Z-index

The Menu bar used  a z-index of 1100 but has been changed to 1050, see Github issue

Hope that helps.

Cheers,

Ton

[A Gloom]

Ton

Some time ago I listed all used z-index values in TW see http://tw5custom.tiddlyspot.com/#Z-index
The Menu bar used a z-index of 1100 but has been changed to 1050, see Github issue

Many thanks, a cool reference-- not sure about z-index, I just saw that in the pre-release core topbar templates and was wondering if 5.1.22 will require me to incorporate my custom topbar content to be integrated into the new menubar plugin-- I saw a legacy selection for topright items.  Sut then this was going to be a plugin, the menubar, but will it bw a core plugin that I won't have to worry about unless I install it.  I haven't tried it with my wiki yet-- would the plugin work in 5.1.21 or do I have to wait for the 5.1.22 upgrader to br put up.  Perhaps those override comment were installed by the plugin installation  I need to reread Jeremy's original release post...

 

[Jeremy Ruston]

Hi A Gloom

The menu bar plugin disables the two core tiddlers that display the top left bar and the top right bar because the core CSS clashes with the menu bar, and the elements themselves are not in the right place in the DOM tree to be part of the menu bar. So instead, there are two optional buttons that contain the buttons from the top left and top right bars.

Thus, if you add the menubar plugin to a wiki that already uses top left bar or top right bar buttons, then you’ll just need to enable those buttons in control button so that they are displayed within the menu bar instead.

Best wishes

Jeremy

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7dc250c6-52ac-4f26-a231-b26d3ab3b67f%40googlegroups.com.

[A Gloom]

Hello Jeremy

 

The menu bar plugin disables the two core tiddlers that display the top left bar and the top right bar because the core CSS clashes with the menu bar, and the elements themselves are not in the right place in the DOM tree to be part of the menu bar. So instead, there are two optional buttons that contain the buttons from the top left and top right bars.

Understood, so I will want this improvement-- I saw the legacy selection for righttopbar but didn't see one for left-- but unless I double, triple quadepal check things I can easily miss something-- I shall look again.

 

Thus, if you add the menubar plugin to a wiki that already uses top left bar or top right bar buttons, then you’ll just need to enable those buttons in control button so that they are displayed within the menu bar instead.

Most excellent, appears you fore-planned this implementation : )  Will it be part of 5.1.22 or a separate plugin?

 

[Mohammad]

Reporting an issue

Hi Jeremy,

 With the current top menubar, the print page shows the top menu bar in every page!

I do not recommend to resolve this issue on its own. This will make an organic growth of Tiddlywiki which seems not good!

I have commented here https://github.com/Jermolene/TiddlyWiki5/issues/4352

Also consider the new proposal by yourself on page layout!

I think both page layout and CSS needs an overhaul to consider all of these!

--Mohammad

[A Gloom]

an interim idea-- I did a topbar hide/eveal based off the sidebar hise/reveal

my video isn't close to ready, so a screenshot will have to do (2 screenshots in one actually-- top- topbar revealed, lower-- hidden, the 3rd icon from right side-- chevron-down/up controls it)

[Jeremy Ruston]

Hi Mohammad

 With the current top menubar, the print page does shows the top menu bar in every page!

Thanks, I’d missed that.

I do not recommend to resolve this issue on its own.

I think it has to be solved on its own; all the visual components of a theme need to be aware of printing (and are), there’s no generic way of specifying it in advance.

This will make an organic growth of Tiddlywiki which seems not good!

It’s really not a big deal, I just forgot to include print media rules for the toolbar.

I have commented here https://github.com/Jermolene/TiddlyWiki5/issues/4352

Also consider the new proposal by yourself on page layout!

I think both page layout and CSS needs an overhaul to consider all of these!

It does indeed, and the tricky thing is just figuring out when we’d do it, and how we’d manage backwards compatibility.

Best wishes

Jeremy

--Mohammad

--
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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/12e97c1f-ce23-4b83-812f-ad1f92e38ac4%40googlegroups.com.

[Mohammad]

Thank you Jeremy for clarification!

On Monday, March 16, 2020 at 5:35:57 PM UTC+3:30, Jeremy Ruston wrote:

Hi Mohammad

 With the current top menubar, the print page does shows the top menu bar in every page!

Thanks, I’d missed that.

I do not recommend to resolve this issue on its own.

I think it has to be solved on its own; all the visual components of a theme need to be aware of printing (and are), there’s no generic way of specifying it in advance.

This will make an organic growth of Tiddlywiki which seems not good!

It’s really not a big deal, I just forgot to include print media rules for the toolbar.

I have commented here https://github.com/Jermolene/TiddlyWiki5/issues/4352

Also consider the new proposal by yourself on page layout!

I think both page layout and CSS needs an overhaul to consider all of these!

It does indeed, and the tricky thing is just figuring out when we’d do it, and how we’d manage backwards compatibility.

Best wishes

Jeremy

--Mohammad

--
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 tiddl...@googlegroups.com.

[Mark S.]

Never mind. I just found the controls.

On Friday, March 27, 2020 at 8:48:36 AM UTC-7, Mark S. wrote:

Would it be possible to have the "Save" button in the menu?