Plugin: Note Tabs

[benji300]

A new version of the plugin has just been released: v1.1.1

I've published this release also to the new plugin repository. So you should be able to install it via the new Search option in Joplin v1.6.6 or newer. The old manual way is still possible.

But please be patient... it will take some time until the plugin is uploaded to the repo and thus visible within the App.

Unfortunately due to some naming restrictions of npmjs, I had to rename the jpl package again. I hope this was for the last time...

Here's the complete list of all new features and changes in this release:

Added:

• Option Show breadcrumbs below tabs to show full breadcrumbs for selected note below tabs (#17)

  NOTE - When you enable this feature for the first time, consider to increase the panel size to see the breadcrumbs.

Changed:

• Consider Option View > Show completed to-dos to display completed to-dos on tabs only if enabled (#15)
• Removed tabsPinToTabs command. tabsPinNote can now be used from context menu and command palette
• tabsUnpinNote command to work also with multiple selected notes
• Renamed jpl package to joplin.plugin.note.tabs respectively joplin-plugin-note-tabs for npm
  • Neccessary due to npmjs package naming restrictions

The release on GitHub:

Release v1.1.1 · benji300/joplin-note-tabs

CAUTION - Requires Joplin v1.5.7 or newer

[benji300]

Thanks for your feedback.

Does the new Option Show breadcrumbs below tabs meet your requirements?

[philip-n]

Wow, that was quick!

I just tested it and it is not exactly what I am looking for. For the breadcrumbs to show, I need to click the tab first. As I'm often switching between current and last note via keyboard shortcut, I'd prefer a solution where I do not have to "activate" a tab (and thereby "mess up" my previous-tab-order) to see the information. So for my purposes, a tooltip / hover-style method of showing the information of the breadcrumb would be perfect

Thanks again for your great work!

[uxamanda]

Love the breadcrumbs! This was a feature I've been wanting for awhile. Thanks. FYI, I think you can remove .breadcrumb{min-width: 50px}. I have a lot of very short 2 letter folder names, and it causes a gap. Played with the CSS, and it doesn't seem to be needed. Thanks again!

[benji300]

Thanks for the hint. I will check it. Maybe it is a relict from the development.

[laurent]

@benji300

I've published this release also to the new plugin repository. So you should be able to install it via the new Search option in Joplin v1.6.6 or newer. The old manual way is still possible.

But please be patient... it will take some time until the plugin is uploaded to the repo and thus visible within the App.

It's in and seems to work fine

[joeschmoe]

Hi, are the tabs supposed to look like it's doing in mine ? did I do something!
wrong? it's just empty space where the tabs are. Joplin version 1.6.7

[blank]

You need to adjust your layout : menu View > Change application layout

[joeschmoe]

thank you

[whitewall]

Great Plugin!! Honestly I think this should be a core feature.

I notice that as I add tabs, the text of the tabg starts to be cut down until there is almost none of the post title. Not so useful.

Is there consideration to allow the tabs to be scroll-able left and right once the tab bar fills?

For me, I am used to the behavior of tabs in a browser (as I'm guessing most people are). One thing I find "unnatural" is that I can't close the current note by clicking on the x of the current tab. I understand why it acts the way it does, but usually clicking on an x closes something.

Any way, sorry if these have been mentioned. I read the thread but don't remember seeing.

Thanks for the plugin! It's awesome!

[benji300]

@whitewall

I notice that as I add tabs, the text of the tabg starts to be cut down until there is almost none of the post title. Not so useful.

Is there consideration to allow the tabs to be scroll-able left and right once the tab bar fills?

Have you tried to increase the Minimum Tab width (px)? Then the panel becomes "ealier" scrollable. Generally, it first tries to reduce the tabs to the minimum size to suppress the scrollbar as long as possible. Only when all have reached the minimum size, they will go beyond the panel.

@whitewall

For me, I am used to the behavior of tabs in a browser (as I'm guessing most people are). One thing I find "unnatural" is that I can't close the current note by clicking on the x of the current tab. I understand why it acts the way it does, but usually clicking on an x closes something.

I've planned an additional option to select the unpin behavior. See here and on GitHub. But this is blocked by an issue (I guess it is) in the App.

[whitewall]

@benji300

Have you tried to increase the Minimum Tab width (px) ? Then the panel becomes "ealier" scrollable. Generally, it first tries to reduce the tabs to the minimum size to suppress the scrollbar as long as possible. Only when all have reached the minimum size, they will go beyond the panel.

Ah, ok. So I changed it to be 100. Now what is happening is that new tabs are opening off screen to the right. I'm used to the current tab always being present. I actually thought the tab wasn't appearing at all, because the behaviour for me in Firefox and Notepad++ is that when I hover over the tab bar with the mouse, the scrollwheel scrolls the bar.

With the plugin now (on Windows 10) you have to hover over the tab bar and hold shift while you scroll. I've never seen this behaviour before (I think I haven't!)

Also, the breadcrumbs scroll with the tabs so it disappears off the left when you scroll.

And while I'm pointing things out, it would be great if the tab bar could run the entire width of the Joplin window, although I realize there may be core limitations on that.

Again, thanks for the plugin!!!

[benji300]

@whitewall

Now what is happening is that new tabs are opening off screen to the right. I'm used to the current tab always being present.

This is indeed not a nice behavior. I will check if it is possible to scroll when changing the selected note so that the tab is also visible.

@whitewall

With the plugin now (on Windows 10) you have to hover over the tab bar and hold shift while you scroll. I've never seen this behaviour before (I think I haven't!)

This is an Electron behavior. I don't think this is something I can change in the plugin.

@whitewall

Also, the breadcrumbs scroll with the tabs so it disappears off the left when you scroll.

You're right. I will make the breadcrumbs "fixed".

[whitewall]

@benji300

You're right. I will make the breadcrumbs "fixed".

Someone in the future may ask if the breadcrumbs could be their own screen element to be positioned where they like. Don't know if that is possible.

@benji300

This is an Electron behavior. I don't think this is something I can change in the plugin.

Ah, that makes sense. Not that I know what Electron is! But I can understand that you may be using code that you have to take as is.

Thanks so much!!

[tatoosh]

switching is not working here on Manjaro.
How to help to solve the issue? Or can i manually control it?

[benji300]

You mean the layout does not switch from horizontal to vertical when the width of the panel is reduced below 400px as you can see on the screencast from the README?

Could you provide a screenshot of your App layout? In fact, I wouldn't expect the behavior on Manjaro (I'm guessing that's an operating system) to be any different than on others. An option to force the vertical layout is currently not available.

[benji300]

@whitewall

Someone in the future may ask if the breadcrumbs could be their own screen element to be positioned where they like. Don't know if that is possible.

Technically it would be possible to put the breadcrumbs in an own panel. So they could be located anywhere in the layout. But I will wait to implement this until further requests. Don't know if this is a real use case for users.

@whitewall

Ah, that makes sense. Not that I know what Electron is! But I can understand that you may be using code that you have to take as is.

Maybe I found a workaround to change this behavior. I will look into it, but can't make any promises.

[whitewall]

I just realized there is a scroll bar in the tab area. I'm using a dark them and it's really obscure.

I found this css that seems to stlye the other scroll bars, but it doesn't affect the tab area.

::-webkit-scrollbar-thumb{
background: silver
}

::-webkit-scrollbar-track{
border: 4px solid black

I've inspected the element but I can't figure out how to get it to work. Any suggestions? @uxamanda have you tried? You seem to be the the resident Joplyn CSS wizzard.

[uxamanda]

Hmm, I took a look, but for some reason, I can't affect those specific areas using CSS selectors. My guess is that it is because the plugin classes have dots in the name, i.e. .rli-plugin-view-joplin.plugin.note.tabs-note.tabs.panel. Normally dots are used to chain classes.

@dpoulton do you know?

[dpoulton]

@uxamanda

@dpoulton do you know?

Thanks for the unwarranted vote of confidence!

I have the tabs set horizontally and I do not get a scroll bar. I set the tabs to be vertical and one appeared but I could not isolate it.

Then I remembered that when the plugin was first released @benji300 was asked about fonts in the plugin (this thread, above) the reply included

I guess the plugin has no access to the App fonts as is "lives" in an iframe which is decoupled from the App itself.

(my emphasis)

So would the plugin even be aware of custom css in the app itself??? All other colour options appear to have to be customised from defaults in the advanced settings for the plugin.