joplin-note-tabs icon indicating copy to clipboard operation
joplin-note-tabs copied to clipboard

Chrome-like tabs

Open FelisDiligens opened this issue 1 year ago • 2 comments

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

Bildschirmfoto vom 2023-05-02 10-05-37

Three tabs on top, Joplin's light theme

Bildschirmfoto vom 2023-05-02 09-33-41

Two tabs on top + Breadcrumbs, custom Catppuccin theme

Bildschirmfoto vom 2023-05-02 09-07-31

Two tabs at bottom + Breadcrumbs, Joplin's dark theme

Bildschirmfoto vom 2023-05-02 09-36-36

Vertical tabs still work as intended ("Auto" and "Vertical")

FelisDiligens avatar May 02 '23 08:05 FelisDiligens