Show me how you use Note Toolbar!

[chrisgurney]

I'd love to see examples of how you use Note Toolbar, and any plugins you may have used in the process!

Have any examples that use scripting (Dataview, Javascript, Templater)? Share it in the Scripting discussion.

Don't have a GitHub account? Fill out this Google form instead.

[omeraloni]

Periodic Notes navigation bar:

made using toolbar callout, since the static menu does not have templating support.

[chrisgurney]

@omeraloni Thank you for sharing!

I'm curious, are those values (2024, Q2, April, W16) available in the Properties, or your folder structure?

It wouldn't take too much work to support the substitution of Properties (or the note title) into variables in menu labels (as it works today for URIs). However, this will become non-trivial when those values don't come from a consistent location.

Open to ideas on templating!

[omeraloni]

folder structure.
I have a templater script that generates it for daily, weekly, monthly, etc.

That's how the daily callout is generated:

    let prev = moment(date).subtract(1, offset).format(fmt);
    let next = moment(date).add(1, offset).format(fmt);
    let year = date.format('YYYY');
    let quarter = date.format('YYYY-[Q]Q');
    let month = date.format('YYYY-MMMM');
    let week = date.format('YYYY-[W]ww');

    if (key == 'Daily') {

        str = `> [!note-toolbar|border-even-sticky]\n`
        str += `> - [[${root}/${key}/${moment(prev, fmt).format('YYYY/MM-MMMM')}/${prev}|❮❮]]\n`
        str += `> - [[${root}/Yearly/${year}|${year}]]\n`
        str += `> - [[${root}/Quarterly/${year}/${quarter}|${date.format('[Q]Q')}]]\n`
        str += `> - [[${root}/Monthly/${year}/${month}|${date.format('MMMM')}]]\n`
        str += `> - [[${root}/Weekly/${year}/${week}|${date.format('[W]ww')}]]\n`
        str += `> - [[${root}/${key}/${moment(next, fmt).format('YYYY/MM-MMMM')}/${next}|❯❯]]`
    }

I've also created a non-callout (static?) version of the navigation bar that call commands (Journal plugin) instead:

Currently I use the callout version as I like seeing the actual dates.

[Moyf]

Very interesting method, thanks for sharing!

And I got a kind-of tricky way to make it more "Dynamic" with Dataview plugin..
(Maybe too weird lol)

(1) with DV's inline script support,

we can get make a link like this:

`$="[[" + moment().format("[root/]YYYY") + "|" +moment().format("YYYY")+"]]"`

It would be rendered as the actual year (2024), and would link to the actual note (you can change the note link's code)

(2) And if we put this code into Callout..

walla!

We can make it "dynamic" - no matter where you put this callout, it would automatically show the real-time links.

---

It might be a bit redundant, but I think it's quite fun. 😄

[kmaustral]

Please keep examples coming.

[MrComputron]

I'll add my own for basic navigation:

This little axe closes all other tabs, which is particularly useful for me as on mobile using that command takes both too many steps and instead of closing all other tabs it only closes half at a time.

The little sofa is to switch themes...because it's decor.

[chrisgurney]

Thanks for sharing @MrComputron !

I'm assuming you're using a theme? If so, which one? The fact that the text and the icons don't vertically align bothers me. 😅

(If I need a font please let me know which one.)

[MrComputron]

Theme is Chime, styled "Macaroon" in style settings.
Do you mean the alignment of the button icon to the drop down icons? If so I never noticed until now and now I can't unsee...

[MrComputron]

I assume that there is some default Obsidian UI thing that makes button pop ups and drop downs slide up from the bottom of the screen on mobile.
Do you know if there is a way to change how pop ups behave? The issue with the drop downs on mobile is that if you're hitting buttons at the top of your screen, you have to move your fingers all the way to the bottom to continue in the drop down.
This makes it harder to use the drop down menus one handedly as you have to awkwardly juggle your phone past the first touch. Would be nice if possible to have drop downs behave more as they do on desktop.

[MrComputron]

Mostly because there is a lot of negative space by the thumb making it harder to easily and accurately target the intended button.

[chrisgurney]

I'll continue to look into whether I can style that menu at all.

What if I can get the icons to right-align down the right edge of the menu, while leaving the labels on the left?

Reversing the order is also an interesting idea.

By the way, for that icon without a label, if you add a tooltip it will show up in the menu.

[MrComputron]

I think right-aligning the icons is a good start. Maybe worth trying with right align icon and right align text to its left?

I tried several variations of label vs tooltip and and was unable to make the tooltip show when there was no label. But your comment gave me an idea:

Since on mobile the tools are stacked vertically and each has a lot more room horizontally, it could be interesting to display the tooltip in the pop up and the label on the toolbar to make use of that horizontal space.

[chrisgurney]

Hmm that's odd. Can you share a screenshot of the settings for that item?

Here's one of mine:

And the menu:

[chrisgurney]

@MrComputron Did you try/manage to get your icon without a label to display text (in the menu)?

[Moyf]

For my daily note, I would put those buttons:

• Today: Jump to today's daily note
  • rather than using the command "Open daily note", I wrote a TP script to automatically decide:
    1. Switch to the tab if it's already open;
    2. Open in new tab
    3. Create the daily not if it's not exists
• Daily Home: Go to my "Daily" homepage where I can view more information
• Morning Journal: Go to today's journal note
• Cur Week: Go to this week's weekly note
• Cur Month: Same
• ---
• Re-order list: A TP Script to re-order selected list
• Common Functions: My another toolbar, which contains the shortcuts I usually use
  • Open today's daily note - repeated with "Today" but I would need it elsewhere ; )
  • Work Doc Note: A TP Script to open the newest created note in my "WorkDoc" Folder
  • Open in VSCode: Call the command of "Open In VSCode" Plugin
  • Repeat Command: Repeat the last command

BTW, I would also use the "Common Functions" as my Default floating button for all those pages without NTB config:

Actually I would like it to be displayed in all notes ;)

[Moyf]

Oh, and today I saw this image in one of my chat group:

It appears that someone is using NTB as a "Buttons" plugin, allowing a single note to contain multiple buttons (With no content but a fixed-top NTB!) - which can then be moved into the sidebar.

I utilized the Buttons plugin to achieve this, but I was also surprised by this method of usage. 😄

[chrisgurney]

Now that you can share toolbars in v1.14, I'd love to see more examples of how you use Note Toolbar.

I'll be adding links to the wiki so installing toolbars is just a click away!

[brucetm]

This is a great idea. I'd love to be able to browse other people's toolbar creations, pick one I like, and customize it. Instead of starting from scratch.