joplin-note-tabs
joplin-note-tabs copied to clipboard
Chrome-like tabs
This PR changes the tab style to (more-or-less) resemble Chrome's tabs. This is more of an aesthetic change and personal preference, but it also changes the CSS such that the tabs are always placed at the bottom (or top, configurable) of the plugin panel.
Changes
- Adds a chrome-like style to the tabs
- Adds rounded corners, and bend out rounded corners based on this web article: (Better) Tabs with Round Out Borders
- Pin/Unpin button is always visible.
- Adds code to make sure that the rounded out borders have the correct color, as configurable through the settings.
- Tabs automatically grow to the maximum size (150px width by default), and shrink if space is limited.
- Removes iframe borders, such that the tabs can seamlessly "connect" to the rest of Joplin's UI.
- Changed the "Force tabs layout" options:
- Replaced "Horizontal" option with "Horizontal (tabs above)" and "Horizontal (tabs below)".
- Changed the default of "Note Tabs height (px)" from 35 to 30.
- Breadcrumbs are placed above the tabs now when "Horizontal (tabs below)" is selected in the settings.
Screenshots
Three tabs on top, Joplin's light theme
Two tabs on top + Breadcrumbs, custom Catppuccin theme
Two tabs at bottom + Breadcrumbs, Joplin's dark theme
Vertical tabs still work as intended ("Auto" and "Vertical")