website/docs/plugins/plugin/joplin.plugin.note.tabs/index.html

541 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Common page configuration that goes in the <head></head> tag -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,viewport-fit=cover"/>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: ; style-src 'self' 'unsafe-inline' ; child-src 'none' ; connect-src 'self' raw.githubusercontent.com ;"/>
<link rel="icon" type="image/x-icon" href="&#x2F;plugins/favicon.png" />
<link rel="stylesheet" href="&#x2F;plugins/fontawesome-6.4.2/css/all.min.css" type="text/css"/>
<!-- Allow included JavaScipt files to determine the root directory of this site. -->
<script id="site-root" type="text/plain">/plugins</script>
<!-- Scripts used by all pages -->
<script src="&#x2F;plugins/bundle-main.js"></script>
<script src="&#x2F;plugins/bundle-components.js"></script>
<title>Joplin Plugins - Note Tabs</title>
<meta property="og:title" content="Joplin Plugin: Note Tabs"/>
<meta property="og:description" content="Allows to open several notes at once in tabs and pin them."/>
<meta property="og:image" content=""/>
<script src="&#x2F;plugins/bundle-pluginPage.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
<div class="container">
<a class="navbar-brand" href="https://joplinapp.org/">
<img src="/plugins/joplin-logo.png" alt="Home"/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-2 mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/plugins">Plugins</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://joplinapp.org/news/">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://joplinapp.org/help/">Help</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://discourse.joplinapp.org/">Forum</a>
</li>
</ul>
<div class="search-field col-12 col-lg-3 mb-3 mb-lg-0 me-lg-3">
<i class="fa-solid fa-magnifying-glass search-icon" alt=""></i>
<input
type="search"
class="form-control search-input"
placeholder="Search..."
id="search-input"/>
<div class="search-results" id="search-results-container" aria-live="polite"></div>
</div>
</div>
</div>
</nav>
<main class="plugin-details">
<nav aria-label="breadcrumb" class="container breadcrumb-container">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="&#x2F;plugins"><i class="fas fa-home"></i> Home</a>
</li>
<li class="breadcrumb-item"><a id="current-category-nav-link" href="&#x2F;plugins/">All</a></li>
<li class="breadcrumb-item active" aria-current="page">Note Tabs</li>
</ol>
</nav>
<div class="plugin-overview">
<div class="spacer">
</div>
<div class="plugin-page-header">
<div class="title plugin-page-title">
<img
class="icon plugin-icon -missing"
src=""
alt="Plugin icon"
/>
<div>
<h1 class="card-title">Note Tabs</h1>
<div class="card-title pb-2">
by
<a
href="./?search=author%3D%22Benji300%22%20max-results%3D20"
style="display: inline;"
>
Benji300
</a>
</div>
</div>
</div>
<div class="categories">
<a href="&#x2F;plugins/#recommended-section">
<span class="plugin-recommended me-2 badge"><i class="fas fa-crown"></i> Recommended</span>
</a>
<a class="plugin-category me-2 badge" href="&#x2F;plugins/#tab-productivity">
<i class="fas fa-tag"></i> productivity
</a>
<a class="plugin-category me-2 badge" href="&#x2F;plugins/#tab-search">
<i class="fas fa-tag"></i> search
</a>
</div>
</div>
<div class="download-link-container">
<a
href="/plugins/downloadPlugin.html?plugin=joplin.plugin.note.tabs"
class="btn btn-primary process--append-parent-tab-to-href"
>
Install Plugin
</a>
</div>
</div>
<div class="plugin-content">
<div class="secondary-section">
<div class="content" id="screenshots-container">
<div id="raw-screenshots">
</div>
<!-- See https://getbootstrap.com/docs/5.3/components/carousel/ -->
<div id="screenshots-carousel" class="carousel slide">
<button
class="carousel-control-prev"
type="button"
data-bs-target="#screenshots-carousel"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#screenshots-carousel"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<div class="container section">
<h3>Description</h3>
<p class="card-text pb-4">Allows to open several notes at once in tabs and pin them.</p>
</div>
<div class="container section">
<h3>Additional Information</h3>
<table class="additional-information-table">
<tbody>
<tr>
<th>Links:</th>
<td>
<ul class="list-group list-group-flush text-break">
<li><a href=https:&#x2F;&#x2F;github.com&#x2F;benji300&#x2F;joplin-note-tabs style="display: block;"><i class="fa-solid fa-link"></i> Repository</a></li>
<li><a href=https:&#x2F;&#x2F;github.com&#x2F;benji300&#x2F;joplin-note-tabs style="display: block;"><i class="fa-solid fa-link"></i> Homepage</a></li>
<li>
<a
id="view-plugin-source-link"
href="&#x2F;plugins/view-source.html?plugin=joplin.plugin.note.tabs"
class="process--append-parent-tab-to-href"
>
<i class="fa-solid fa-code"></i> View source
</a>
</li>
</ul>
</td>
</tr>
<tr>
<th>Maintainers:</th>
<td>
<a href="./?search=maintainer%3D%22tessus%22%20max-results%3D20" class="maintainer-link">
tessus
</a>
<a href="./?search=maintainer%3D%22benji300%22%20max-results%3D20" class="maintainer-link">
benji300
</a>
</td>
</tr>
<tr><th>Version:</th><td>1.4.0</td></tr>
<tr><th>Minimum app version:</th><td>1.8.2</td></tr>
<tr><th>Downloads: This version:</th><td>37657</td></tr>
<tr><th>Last updated:</th><td class="process--format-as-local-time">2021-08-10T18:32:14Z</td></tr>
</tbody>
</table>
</div>
<div class="container section" id="readme" data--is-rendered-markdown>
<h1>Joplin Note Tabs</h1>
<p>Note Tabs is a plugin to extend the UX and UI of <a href="https://joplinapp.org/">Joplin's</a> desktop application.</p>
<p>It allows to open several notes at once in tabs and pin them to be kept open.</p>
<blockquote>
<p>:warning: <strong>CAUTION</strong> - Requires Joplin <strong>v1.8.2</strong> or newer</p>
</blockquote>
<h2>Features</h2>
<ul>
<li>Display selected note as tab</li>
<li>Additional display options below the tabs
<ul>
<li>Navigation buttons (<code>historyBackward/Forward</code>)</li>
<li>Completion status of all checklists in selected note</li>
<li>Full breadcrumbs for selected note</li>
</ul>
</li>
<li>Pin note(s) to the tabs
<ul>
<li>Either via command or drag &amp; drop from the note list</li>
</ul>
</li>
<li>Save pinned tabs permanently
<ul>
<li>Stored in database (not synced with other devices!)</li>
</ul>
</li>
<li>Remember last opened and unpinned note</li>
<li>Change position of tabs within the panel
<ul>
<li>Either via drag &amp; drop or keyboard shortcuts (which have been assigned to the corresponding commands)</li>
</ul>
</li>
<li>Toggle to-do state directly on the tabs
<ul>
<li>Optionally unpin completed to-dos automatically</li>
</ul>
</li>
<li><a href="#user-options">Configurable</a> style attributes</li>
<li>Support horizontal and vertical layout</li>
</ul>
<p><img src="https://raw.githubusercontent.com/benji300/joplin-note-tabs/HEAD/assets/screencast.gif" alt="screencast" /></p>
<h3>Screenshots</h3>
<h4>Tabs above note content</h4>
<p><img src="https://raw.githubusercontent.com/benji300/joplin-note-tabs/HEAD/assets/tabs-top-horizontal.png" alt="tabs-top-horizontal" /></p>
<h4>Tabs below note content</h4>
<p><img src="https://raw.githubusercontent.com/benji300/joplin-note-tabs/HEAD/assets/tabs-bottom-horizontal.png" alt="tabs-bottom-horizontal" /></p>
<blockquote>
<p><strong>NOTE</strong> - The used UI theme on this screenshot can be downloaded <a href="https://github.com/benji300/joplin-wanaka-ui">here</a>.</p>
</blockquote>
<h4>Tabs beside note content (vertical layout)</h4>
<p><img src="https://raw.githubusercontent.com/benji300/joplin-note-tabs/HEAD/assets/tabs-right-vertical.png" alt="tabs-right-vertical" /></p>
<blockquote>
<p><strong>NOTE</strong> - The used UI theme on this screenshot can be downloaded <a href="https://github.com/benji300/joplin-milford-ui">here</a>.</p>
</blockquote>
<h2>Installation</h2>
<h3>Automatic (Joplin v1.6.4 and newer)</h3>
<ul>
<li>Open Joplin and navigate to <code>Tools &gt; Options &gt; Plugins</code></li>
<li>Search for the plugin name and press install</li>
<li>Restart Joplin to enable the plugin</li>
<li>By default the panel will appear on the right side of the screen, see how to <a href="#place-the-panel">place the panel</a></li>
</ul>
<h3>Manual</h3>
<ul>
<li>Download the latest released JPL package (<code>*.jpl</code>) from <a href="https://github.com/benji300/joplin-note-tabs/releases">here</a></li>
<li>Open Joplin and navigate to <code>Tools &gt; Options &gt; Plugins</code></li>
<li>Press <code>Install plugin</code> and select the previously downloaded <code>jpl</code> file</li>
<li>Confirm selection</li>
<li>Restart Joplin to enable the plugin</li>
<li>By default the panel will appear on the right side of the screen, see how to <a href="#place-the-panel">place the panel</a></li>
</ul>
<h3>Uninstall</h3>
<ul>
<li>Open Joplin and navigate to <code>Tools &gt; Options &gt; Plugins</code></li>
<li>Search for the plugin name and press <code>Delete</code> to remove the plugin completely
<ul>
<li>Alternatively you can also disable the plugin by clicking on the toggle button</li>
</ul>
</li>
<li>Restart Joplin</li>
</ul>
<h2>Usage</h2>
<h3>Place the panel</h3>
<p>By default the panel will be on the right side of the screen, this can be adjusted by:</p>
<ul>
<li><code>View &gt; Change application layout</code></li>
<li>Use the arrow keys (the displayed ones, not keyboard keys) to move the panel at the desired position</li>
<li>Move the splitter to reach the desired height/width of the panel
<ul>
<li>As soon as the width of the panel goes below <code>400px</code>, it automatically switches from horizontal to vertical layout</li>
</ul>
</li>
<li>Press <code>ESC</code> to save the layout and return to normal mode</li>
</ul>
<h2>Commands</h2>
<p>This plugin provides additional commands as described in the following table.</p>
<table class="table table-hover undefined">
<thead>
<tr>
<th>Command Label</th>
<th>Command ID</th>
<th>Description</th>
<th>Menu contexts</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pin note to Tabs</td>
<td><code>tabsPinNote</code></td>
<td>Pin selected note(s) to the tabs.</td>
<td><code>Tools&gt;Tabs</code>, <code>NoteListContext</code>, <code>EditorContext</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Unpin note from Tabs</td>
<td><code>tabsUnpinNote</code></td>
<td>Unpin selected note(s) from the tabs.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Switch to last active Tab</td>
<td><code>tabsSwitchLastActive</code></td>
<td>Switch to the last active tab, i.e. to previous selected note.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Switch to left Tab</td>
<td><code>tabsSwitchLeft</code></td>
<td>Switch to the left tab next to the active, i.e. select the left note.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Switch to right Tab</td>
<td><code>tabsSwitchRight</code></td>
<td>Switch to the right tab next to the active, i.e. select the right note.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Move active Tab left</td>
<td><code>tabsMoveLeft</code></td>
<td>Move active tab one position to the left.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Move active Tab right</td>
<td><code>tabsMoveRight</code></td>
<td>Move active tab one position to the right.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Remove all pinned Tabs</td>
<td><code>tabsClear</code></td>
<td>Remove all pinned tabs. In case no note is selected, the tabs list might be empty afterwards.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
<tr>
<td>Toggle Tabs visibility</td>
<td><code>tabsToggleVisibility</code></td>
<td>Toggle panel visibility.</td>
<td><code>Tools&gt;Tabs</code>, <code>Command palette</code></td>
</tr>
</tbody>
</table>
<h3>Keyboard shortcuts</h3>
<p>Keyboard shortcuts can be assigned in user options via <code>Tools &gt; Options &gt; Keyboard Shortcuts</code> to all <a href="#commands">commands</a> which are assigned to the <code>Tools &gt; Tabs</code> menu context.
In the keyboard shortcut editor, search for the command label where shortcuts shall be added.</p>
<h4>Manual workaround</h4>
<ol>
<li>Go to Joplin <code>Settings &gt; Keyboard Shortcuts &gt; Export</code>.</li>
<li>Open the Export .json file with notepad, follow the structure to add command hotkey.</li>
<li>Example:</li>
</ol>
<pre class="hljs"><code>[
{
"command": "newTodo",
"accelerator": null
},
{
"command": "textCode",
"accelerator": null
},
{
"command": "tabsPinNote",
"accelerator": "Ctrl+T"
},
{
"command": "tabsSwitchLeft",
"accelerator": "Ctrl+Left"
},
{
"command": "tabsSwitchRight",
"accelerator": "Ctrl+Right"
},
{
"command": "tabsUnpinNote",
"accelerator": "Ctrl+W"
},
{
"command": "tabsSwitchLastActive",
"accelerator": "Ctrl+Tab"
}
]
</code></pre>
<ol>
<li>Save the file then import at Joplin <code>Settings &gt; Keyboard Shortcuts</code>.</li>
</ol>
<h2>User options</h2>
<p>This plugin provides user options which can be changed via <code>Tools &gt; Options &gt; Note Tabs</code> (Windows App).</p>
<blockquote>
<p><strong>NOTE</strong> - If <code>default</code> is set for an advanced style setting, the corresponding default color, font family, etc. will be used to match the common App look.</p>
</blockquote>
<blockquote>
<p><strong>NOTE</strong> - In case color settings shall be overwritten, they must be specified as valid CSS attribute values, e.g. <code>#ffffff</code>, <code>rgb(255,255,255)</code>, etc.</p>
</blockquote>
<h2>UI Tweaks</h2>
<p>If option <code>Show breadcrumbs below tabs</code> is enabled in the settings it might be useful to disable the default breadcrumbs below the note title.
Follow these steps to hide it via the <code>userchrome.css</code> stylesheet:</p>
<ul>
<li>Open Joplin</li>
<li>Navigate to <code>Tools &gt; Options &gt; Appearance</code> and open <code>Show Advanced Settings</code></li>
<li>Click <code>Edit</code> below <code>Custom stylesheet for Joplin-wide app styles</code> to open <code>userchrome.css</code> in a text editor</li>
<li>Paste the following snippet into the file</li>
<li>Save your changes and restart Joplin to see the changes</li>
</ul>
<pre class="hljs"><code><span class="hljs-selector-class">.rli-editor</span>
&gt; <span class="hljs-selector-tag">div</span>
&gt; <span class="hljs-selector-tag">div</span>
&gt; <span class="hljs-selector-tag">div</span>
&gt; <span class="hljs-selector-tag">div</span><span class="hljs-selector-attr">[style^=<span class="hljs-string">"padding-top: 10px; padding-bottom: 10px;"</span>]</span>
&gt; <span class="hljs-selector-tag">button</span> {
<span class="hljs-attribute">display</span>: none <span class="hljs-meta">!important</span>;
}
</code></pre>
<blockquote>
<p><strong>NOTE</strong> - Since there is currently no unique attribute for the breadcrumbs, this can only be done using the workaround from above. However, the behavior may change with each version and it may happen that it no longer works.</p>
</blockquote>
<h2>Feedback</h2>
<ul>
<li>:question: Need help?
<ul>
<li>Ask a question on the <a href="https://discourse.joplinapp.org/t/plugin-note-tabs/12752">Joplin Forum</a></li>
</ul>
</li>
<li>:bulb: An idea to improve or enhance the plugin?
<ul>
<li>Start a new discussion on the <a href="https://discourse.joplinapp.org/t/plugin-note-tabs/12752">Forum</a> or upvote <a href="https://github.com/benji300/joplin-note-tabs/issues?q=is%3Aissue+is%3Aopen+label%3Aenhancement+sort%3Areactions-%2B1-desc+">popular feature requests</a></li>
</ul>
</li>
<li>:bug: Found a bug?
<ul>
<li>Check the <a href="https://discourse.joplinapp.org/t/plugin-note-tabs/12752">Forum</a> if anyone else already reported the same issue. Otherwise report it by yourself.</li>
</ul>
</li>
</ul>
<h2>Support</h2>
<p>You like this plugin as much as I do and it improves your daily work with Joplin?</p>
<p>Then I would be very happy if you buy me a :beer: or :coffee: via <a href="https://www.paypal.com/donate?hosted_button_id=6FHDGK3PTNU22">PayPal</a> :wink:</p>
<h2>Contributing</h2>
<p>Contributions to this plugin are most welcome. Feel free to open a pull request or an issue.
Make sure to use conventional <a href="https://github.com/pvdlg/conventional-commit-types">commit messages</a> if you're creating a pull request.</p>
<h2>Development</h2>
<p>The npm package of the plugin can be found <a href="https://www.npmjs.com/package/joplin-plugin-note-tabs">here</a>.</p>
<h3>Building the plugin</h3>
<p>If you want to build the plugin by your own simply run <code>npm run dist</code>.</p>
<h3>Updating the plugin framework</h3>
<p>To update the plugin framework, run <code>npm run update</code>.</p>
<h2>Changes</h2>
<p>See <a href="https://raw.githubusercontent.com/benji300/joplin-note-tabs/HEAD/CHANGELOG.md">CHANGELOG</a> for details.</p>
<h2>License</h2>
<p>Copyright (c) 2021 Benjamin Seifert</p>
<p>MIT License. See <a href="https://raw.githubusercontent.com/benji300/joplin-note-tabs/HEAD/LICENSE">LICENSE</a> for more information.</p>
</div>
</div>
</main>
<footer class="page-footer">
<div class="plugin-documentation-section">
<div class="heading">
Would you like to submit or develop a plugin? Consult our documentation:
</div>
<a class="btn btn-outline-primary" href="https://joplinapp.org/help/api/get_started/plugins">
See documentation
</a>
</div>
<div class="links legal-and-about-links">
<div class="copyright">© Joplin 2023 - 2024</div>
<a class="link terms-and-conditions" href="&#x2F;plugins/terms-and-conditions.html">Terms and conditions</a>
<a class="link privacy" href="&#x2F;plugins/privacy-policy.html">Privacy policy</a>
</div>
<div class="site-links">
<a
class="a-github"
href="https://github.com/joplin/website-plugin-discovery"
aria-label="GitHub"
title="GitHub"
>
<i class="fab fa-github"></i>
</a>
<a
class="a-discord"
href="https://discord.com/invite/VSj7AFHvpq"
aria-label="Discord"
title="Discord"
>
<i class="fab fa-discord"></i>
</a>
<a
class="a-linkedin"
href="https://www.linkedin.com/company/joplin"
aria-label="LinkedIn"
title="LinkedIn"
>
<i class="fab fa-linkedin"></i>
</a>
<a
class="a-twitter"
href="https://twitter.com/joplinapp"
aria-label="Twitter"
title="Twitter"
>
<i class="fab fa-twitter"></i>
</a>
<a
class="a-mastodon"
href="https://mastodon.social/@joplinapp"
aria-label="Mastodon"
title="Mastodon"
>
<i class="fab fa-mastodon"></i>
</a>
<a
class="a-patreon"
href="https://www.patreon.com/joplin"
aria-label="Patreon"
title="Patreon"
>
<i class="fab fa-patreon"></i>
</a>
</div>
</footer>
</body>
</html>