Plugin: Note Tabs

It's in and seems to work fine :slight_smile:

1 Like

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

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

1 Like

thank you

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!

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.

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.

1 Like

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!!!

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.

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

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

1 Like

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.

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

Thanks so much!!

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

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.

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.

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

1 Like

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.

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?

1 Like

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.

2 Likes

Currently it is the case that the plugin panels cannot be changed via userchrome.css. They don't "know" this file by default. But it should technically be possible to load the userchrome.css also into the plugin. I've already thought about this, but I'm not sure if it is currently supported by the plugin API.

Technical background:
It should be possible to add the stylesheet via joplin.views.panels.addScript('<PathToAppData>/userchrome.css'). However, I'm not sure if I can get the <PathToAppData> with the current plugin API or simply use a relative path like '../../userchrome.css'. I need to check that first.

1 Like

I know zero about plugin development, but I have seen wordpress plugins that just have a textbox where you can put whatever css you want to be applied to the plugin aspect. Would that be an option? I realize it could be a nightmare. But maybe there is a way to filter the user input.

Thanks for the plugin!

joplin.settings.globalSetting("profileDir")

Writing from memory so names might be slightly different but the general idea is the same.

Honestly, I like the idea of having a central stylesheet where I can define the style of the App and all of its plugins. With this you also don't have to specify global styles (like font family) at multiple locations.
I guess I will add an option to "enable" the userchrome.css for the plugin. So users can still use the provided style options in the plugin settings.

2 Likes

Thanks for the hint @roman_r_m, didn't know that settings value. I will check if it works as excpected.