Skip to content

Commit

Permalink
Release v1.2.0 (#33)
Browse files Browse the repository at this point in the history
* Prepare version v1.2.0
* Merge latest changes from favorites plugin
* Update to latest plugin generator version
* Fixed breadcrumbs + Add option to specify min width of breadcrumb
* Add command to toggle panel visibility (#16)
* Improved scrollbar style
* Merge file structure with latest one from favorites plugin
* Improve reading and updating values from plugin settings (#24)
* Improve overflow behavior for tabs and breadcrumbs
* Add option to specify font size for the panel
* Improve handling of click events
* Add option to specify hover background + improve drag&drop implementation
* Add support to drag notes from note list to tabs (#31)
* Add support to drag&drop favorite notes onto tabs and vice versa
* Add option to display navigation buttons below the tabs
* Release v1.2.0
  • Loading branch information
benji300 authored Feb 5, 2021
1 parent 63cc646 commit a323692
Show file tree
Hide file tree
Showing 20 changed files with 1,555 additions and 966 deletions.
17 changes: 17 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- None

## [1.2.0] - 2021-02-05

### Added

- User option to specify minimum width for a single breadcrumb entry ([#30](https://github.com/benji300/joplin-note-tabs/issues/30))
- User option to specify the font size for the panel
- User option to specify the background color when hovering over tabs
- User option to display navigation buttons (backward/forward) below the tabs
- Command to toggle panel visibility ([#16](https://github.com/benji300/joplin-note-tabs/issues/16))
- Support to drag & drop notes from note list to pin as tabs ([#31](https://github.com/benji300/joplin-note-tabs/issues/31))
- Support to drag & drop notes from [favorites plugin](https://github.com/benji300/joplin-favorites) to pin as tabs

### Changed

- Breadcrumbs scroll independently from tabs ([#29](https://github.com/benji300/joplin-note-tabs/issues/29))
- Improved reading and updating values from plugin settings ([#24](https://github.com/benji300/joplin-note-tabs/issues/24))

## [1.1.1] - 2021-01-12

### Changed
Expand Down
133 changes: 73 additions & 60 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
# Joplin Note Tabs

Joplin Note Tabs is a plugin to extend the UX and UI of [Joplin's](https://joplinapp.org/) desktop application.
Note Tabs is a plugin to extend the UX and UI of [Joplin's](https://joplinapp.org/) desktop application.

It allows to open several notes at once in tabs and pin them to be kept open.

> :warning: **CAUTION** - Requires Joplin **v1.5.7** or newer
> :warning: **CAUTION** - Requires Joplin **v1.6.7** or newer
## Table of contents

- [Features](#features)
- [Screenshots](#screenshots)
- [Commands](#Commands)
- [Installation](#installation)
- [Usage](#usage)
- [Place the panel](#place-the-panel)
- [Commands](#commands)
- [Keyboard shortcuts](#keyboard-shortcuts)
- [User options](#user-options)
- [UI Tweaks](#ui-tweaks)
- [Installation](#installation)
- [Uninstallation](#uninstallation)
- [Feedback](#feedback)
- [Support](#support)
- [Development](#development)
Expand All @@ -24,15 +26,18 @@ It allows to open several notes at once in tabs and pin them to be kept open.
## Features

- Display selected note as tab
- Display full breadcrumbs for selected note below tabs
- Additional display options below the tabs
- Full breadcrumbs for selected note
- Navigation buttons (`historyBackward/Forward`)
- Pin note(s) to the tabs
- Either via command or drag & drop from the note list
- Save pinned tabs permanently
- Stored in database (not synced with other devices!)
- Remember last opened and unpinned note
- Change position of tabs within the panel
- Either via drag & drop or keyboard shortcuts (which have been assigned to the corresponding commands)
- Toggle to-do state from tabs
- Automatically unpin completed to-dos ([configurable](#user-options))
- Toggle to-do state directly on the tabs
- Optionally unpin completed to-dos automatically
- [Configurable](#user-options) style attributes
- Support horizontal and vertical layout

Expand All @@ -56,24 +61,64 @@ It allows to open several notes at once in tabs and pin them to be kept open.

> **NOTE** - The used UI theme on this screenshot can be downloaded [here](https://github.com/benji300/joplin-milford-ui).
## Installation

### Automatic (Joplin v1.6.4 and newer)

- Open Joplin and navigate to `Tools > Options > Plugins`
- Search for `tabs` and press install
- Restart Joplin to enable the plugin
- By default the panel will appear on the right side of the screen, see how to [place the panel](#place-the-panel)

### Manual

- Download the latest released JPL package (`*.jpl`) from [here](https://github.com/benji300/joplin-note-tabs/releases)
- Open Joplin and navigate to `Tools > Options > Plugins`
- Press `Install plugin` and select the previously downloaded `jpl` file
- Confirm selection
- Restart Joplin to enable the plugin
- By default the panel will appear on the right side of the screen, see how to [place the panel](#place-the-panel)

### Uninstall

- Open Joplin and navigate to `Tools > Options > Plugins`
- Search for the `Note Tabs` plugin
- Press `Delete` to remove the plugin completely
- Alternatively you can also disable the plugin by clicking on the toggle button
- Restart Joplin

## Usage

### Place the panel

By default the panel will be on the right side of the screen, this can be adjusted by:

- `View > Change application layout`
- Use the arrow keys (the displayed ones, not keyboard keys) to move the panel at the desired position
- Move the splitter to reach the desired height/width of the panel
- As soon as the width of the panel goes below `400px`, it automatically switches from horizontal to vertical layout
- Press `ESC` to save the layout and return to normal mode

## Commands

This plugin provides additional commands as described in the following table.

| Command Label | Command ID | Description | Menu contexts |
| ------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------- |
| Tabs: Pin note | `tabsPinNote` | Pin selected note(s) to the tabs. | `Tools>Tabs`, `NoteListContext`,`EditorContext` |
| Tabs: Unpin note | `tabsUnpinNote` | Unpin selected note(s) from the tabs. | `Tools>Tabs` |
| Tabs: Switch to last active tab | `tabsSwitchLastActive` | Switch to the last active tab, i.e. to previous selected note. | `Tools>Tabs` |
| Tabs: Switch to left tab | `tabsSwitchLeft` | Switch to the left tab next to the active, i.e. select the left note. | `Tools>Tabs` |
| Tabs: Switch to right tab | `tabsSwitchRight` | Switch to the right tab next to the active, i.e. select the right note. | `Tools>Tabs` |
| Tabs: Move tab left | `tabsMoveLeft` | Move active tab one position to the left. | `Tools>Tabs` |
| Tabs: Move tab right | `tabsMoveRight` | Move active tab one position to the right. | `Tools>Tabs` |
| Tabs: Remove all pinned tabs | `tabsClear` | Remove all pinned tabs. In case no note is selected, the tabs list might be empty afterwards. | `Tools>Tabs` |
| Command Label | Command ID | Description | Menu contexts |
| ------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| Tabs: Pin note | `tabsPinNote` | Pin selected note(s) to the tabs. | `Tools>Tabs`, `NoteListContext`, `EditorContext`, `Command palette` |
| Tabs: Unpin note | `tabsUnpinNote` | Unpin selected note(s) from the tabs. | `Tools>Tabs`, `Command palette` |
| Tabs: Switch to last active tab | `tabsSwitchLastActive` | Switch to the last active tab, i.e. to previous selected note. | `Tools>Tabs`, `Command palette` |
| Tabs: Switch to left tab | `tabsSwitchLeft` | Switch to the left tab next to the active, i.e. select the left note. | `Tools>Tabs`, `Command palette` |
| Tabs: Switch to right tab | `tabsSwitchRight` | Switch to the right tab next to the active, i.e. select the right note. | `Tools>Tabs`, `Command palette` |
| Tabs: Move tab left | `tabsMoveLeft` | Move active tab one position to the left. | `Tools>Tabs`, `Command palette` |
| Tabs: Move tab right | `tabsMoveRight` | Move active tab one position to the right. | `Tools>Tabs`, `Command palette` |
| Tabs: Remove all pinned tabs | `tabsClear` | Remove all pinned tabs. In case no note is selected, the tabs list might be empty afterwards. | `Tools>Tabs`, `Command palette` |
| Tabs: Toggle visibility | `tabsToggleVisibility` | Toggle panel visibility. | `Tools>Tabs`, `Command palette` |

> **NOTE** - Keyboard shortcuts can be assigned in user options via `Tools > Options > Keyboard Shortcuts`. Search for the command label where shortcuts shall be added.
### Keyboard shortcuts

> **NOTE** - All commands can also be accessed via the `Command palette`.
Keyboard shortcuts can be assigned in user options via `Tools > Options > Keyboard Shortcuts` to all [commands](#commands) which are assigned to the `Tools>Favorites` menu context.
In the keyboard shortcut editor, search for the command label where shortcuts shall be added.

## User options

Expand Down Expand Up @@ -107,40 +152,6 @@ Follow these steps to hide it via the `userchrome.css` stylesheet:

> **NOTE** - 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.
## Installation

### Joplin v1.6.4 and newer

- Open Joplin and navigate to `Tools > Options > Plugins`
- Search for `tabs` and press install
- Restart Joplin to enable the plugin

### Joplin v1.6.2 and previous

- Download the latest released JPL package (`joplin.plugin.note.tabs.jpl`) from [here](https://github.com/benji300/joplin-note-tabs/releases)
- Open Joplin and navigate to `Tools > Options > Plugins`
- Press `Install plugin` and select the previously downloaded `jpl` file
- Confirm selection
- Restart Joplin to enable the plugin

### Place tabs

By default the tabs will be on the right side of the screen, this can be adjusted by:

- `View > Change application layout`
- Use the arrow keys (the displayed ones, not keyboard keys) to move the panel at the desired position
- Move the splitter (between content and tabs panel) up to reach the desired height of the panel
- Press `ESC` to save the layout and return to normal mode

## Uninstallation

- Open Joplin
- Navigate to `Tools > Options > Plugins`
- Search for the `Note Tabs` plugin
- Press `Delete` to remove the plugin from the user profile directory
- Alternatively you can also disable the plugin by clicking on the toggle button
- Restart Joplin

## Feedback

- :question: Need help?
Expand All @@ -152,19 +163,21 @@ By default the tabs will be on the right side of the screen, this can be adjuste

## Support

You like this plugin as much as I do and it helps you in your daily work with Joplin?
You like this plugin as much as I do and it improves your daily work with Joplin?

Then I would be very happy if you would buy me a beer via [PayPal](https://www.paypal.com/donate?hosted_button_id=6FHDGK3PTNU22) :wink::beer:
Then I would be very happy if you buy me a beer via [PayPal](https://www.paypal.com/donate?hosted_button_id=6FHDGK3PTNU22) :wink::beer:

## Development

The npm package of the plugin can be found [here](https://www.npmjs.com/package/joplin-plugin-note-tabs).

### Building the plugin

If you want to build the plugin by your own simply run:
If you want to build the plugin by your own simply run `npm run dist`.

```
npm run dist
```
### Updating the plugin framework

To update the plugin framework, run `npm run update`.

## Changes

Expand Down
3 changes: 3 additions & 0 deletions api/Joplin.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import JoplinCommands from './JoplinCommands';
import JoplinViews from './JoplinViews';
import JoplinInterop from './JoplinInterop';
import JoplinSettings from './JoplinSettings';
import JoplinContentScripts from './JoplinContentScripts';
/**
* This is the main entry point to the Joplin API. You can access various services using the provided accessors.
*
Expand All @@ -31,10 +32,12 @@ export default class Joplin {
private views_;
private interop_;
private settings_;
private contentScripts_;
constructor(implementation: any, plugin: Plugin, store: any);
get data(): JoplinData;
get plugins(): JoplinPlugins;
get workspace(): JoplinWorkspace;
get contentScripts(): JoplinContentScripts;
/**
* @ignore
*
Expand Down
40 changes: 40 additions & 0 deletions api/JoplinContentScripts.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import Plugin from '../Plugin';
import { ContentScriptType } from './types';
export default class JoplinContentScripts {
private plugin;
constructor(plugin: Plugin);
/**
* Registers a new content script. Unlike regular plugin code, which runs in
* a separate process, content scripts run within the main process code and
* thus allow improved performances and more customisations in specific
* cases. It can be used for example to load a Markdown or editor plugin.
*
* Note that registering a content script in itself will do nothing - it
* will only be loaded in specific cases by the relevant app modules (eg.
* the Markdown renderer or the code editor). So it is not a way to inject
* and run arbitrary code in the app, which for safety and performance
* reasons is not supported.
*
* The plugin generator provides a way to build any content script you might
* want to package as well as its dependencies. See the [Plugin Generator
* doc](https://github.com/laurent22/joplin/blob/dev/packages/generator-joplin/README.md)
* for more information.
*
* * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
* * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
*
* See also the [postMessage demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
*
* @param type Defines how the script will be used. See the type definition for more information about each supported type.
* @param id A unique ID for the content script.
* @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
*/
register(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
/**
* Listens to a messages sent from the content script using postMessage().
* See {@link ContentScriptType} for more information as well as the
* [postMessage
* demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages)
*/
onMessage(contentScriptId: string, callback: any): Promise<void>;
}
23 changes: 1 addition & 22 deletions api/JoplinPlugins.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,28 +20,7 @@ export default class JoplinPlugins {
*/
register(script: Script): Promise<void>;
/**
* Registers a new content script. Unlike regular plugin code, which runs in
* a separate process, content scripts run within the main process code and
* thus allow improved performances and more customisations in specific
* cases. It can be used for example to load a Markdown or editor plugin.
*
* Note that registering a content script in itself will do nothing - it
* will only be loaded in specific cases by the relevant app modules (eg.
* the Markdown renderer or the code editor). So it is not a way to inject
* and run arbitrary code in the app, which for safety and performance
* reasons is not supported.
*
* The plugin generator provides a way to build any content script you might
* want to package as well as its dependencies. See the [Plugin Generator
* doc](https://github.com/laurent22/joplin/blob/dev/packages/generator-joplin/README.md)
* for more information.
*
* * [View the renderer demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/content_script)
* * [View the editor demo plugin](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/codemirror_content_script)
*
* @param type Defines how the script will be used. See the type definition for more information about each supported type.
* @param id A unique ID for the content script.
* @param scriptPath Must be a path relative to the plugin main script. For example, if your file content_script.js is next to your index.ts file, you would set `scriptPath` to `"./content_script.js`.
* @deprecated Use joplin.contentScripts.register()
*/
registerContentScript(type: ContentScriptType, id: string, scriptPath: string): Promise<void>;
}
14 changes: 14 additions & 0 deletions api/JoplinSettings.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import Plugin from '../Plugin';
import { SettingItem, SettingSection } from './types';
export interface ChangeEvent {
/**
* Setting keys that have been changed
*/
keys: string[];
}
export declare type ChangeHandler = (event: ChangeEvent)=> void;
/**
* This API allows registering new settings and setting sections, as well as getting and setting settings. Once a setting has been registered it will appear in the config screen and be editable by the user.
*
Expand All @@ -12,6 +19,7 @@ import { SettingItem, SettingSection } from './types';
export default class JoplinSettings {
private plugin_;
constructor(plugin: Plugin);
private get keyPrefix();
private namespacedKey;
/**
* Registers a new setting. Note that registering a setting item is dynamic and will be gone next time Joplin starts.
Expand Down Expand Up @@ -40,4 +48,10 @@ export default class JoplinSettings {
* https://github.com/laurent22/joplin/blob/dev/packages/lib/models/Setting.ts#L142
*/
globalValue(key: string): Promise<any>;
/**
* Called when one or multiple settings of your plugin have been changed.
* - For performance reasons, this event is triggered with a delay.
* - You will only get events for your own plugin settings.
*/
onChange(handler: ChangeHandler): Promise<void>;
}
16 changes: 16 additions & 0 deletions api/JoplinViewsPanels.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,22 @@ export default class JoplinViewsPanels {
addScript(handle: ViewHandle, scriptPath: string): Promise<void>;
/**
* Called when a message is sent from the webview (using postMessage).
*
* To post a message from the webview to the plugin use:
*
* ```javascript
* const response = await webviewApi.postMessage(message);
* ```
*
* - `message` can be any JavaScript object, string or number
* - `response` is whatever was returned by the `onMessage` handler
*
* Using this mechanism, you can have two-way communication between the
* plugin and webview.
*
* See the [postMessage
* demo](https://github.com/laurent22/joplin/tree/dev/packages/app-cli/tests/support/plugins/post_messages) for more details.
*
*/
onMessage(handle: ViewHandle, callback: Function): Promise<void>;
/**
Expand Down
Loading

0 comments on commit a323692

Please sign in to comment.