-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Customize the shell layout with the settings (#6921)
* Add settings file * Add support for layout customization * Fix tests * Add `type` option * Fix opening document widgets * Fix opening documents * Add defaults for Markdown Preview * Add docs * Add screenshots * Add `@jupyterlab/attachments` * Fix integrity * Add simple UI tests for layout customization * Lint * Update Playwright Snapshots * Update Playwright Snapshots * Update docs * Add missing null --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
33a383d
commit ab57fa1
Showing
14 changed files
with
2,715 additions
and
2,407 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| # Interface Customization | ||
|
|
||
| Multiple elements in the Notebook interface can be customized via the Settings Editor. | ||
|
|
||
| ## Layout | ||
|
|
||
| By default some widgets are displayed in pre-defined parts of the user interface, which are often called "areas" or "regions". | ||
| For example the table of contents will be displayed in the `left` area by default, while the debugger will be displayed in the `right` area. | ||
|
|
||
| However the positioning of some of these components can also be customized via the Settings Editor. Below are a few examples of how to do this. | ||
|
|
||
| ### Open the Markdown Preview on the left | ||
|
|
||
| It is often useful to be able to see a rendered preview of a Markdown document while editing it. | ||
|
|
||
| By default the Markdown Preview opens on the right side of the application. However it is also possible to open it on the left side by changing the Notebook Shell settings in the Advanced Settings Editor: | ||
|
|
||
| ```json | ||
| { | ||
| "layout": { | ||
| "Markdown Preview": { | ||
| "area": "left" | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ### Configuring a third-party widget | ||
|
|
||
| Third-party extensions can also add widgets to the application shell. This is for example the case with the [Voila extension](https://github.com/voila-dashboards/voila), which adds a preview widget to visualize a notebook as a dashboard. | ||
|
|
||
| By default in JupyterLab the Voila Preview is added to the `main` area next to the corresponding notebook. With Notebook 7 it is possible to move the Voila Preview to the `right` area by changing the Notebook Shell setting in the Advanced Settings Editor as follows: | ||
|
|
||
| ```json | ||
| { | ||
| "layout": { | ||
| "Voila Preview": { | ||
| "area": "right" | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| ```{note} | ||
| Refer to the [JupyterLab Layout Documentation](https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html#layout) | ||
| to learn more about the default positioning of other UI elements. | ||
| ``` | ||
|
|
||
| ## Toolbars, Menu bar and Context Menu | ||
|
|
||
| It is also possible to customize toolbars, menus and context menu entries via the Settings Editor. | ||
|
|
||
| For example the items of the notebook toolbar can be reordered, or some menu entries can be hidden. | ||
|
|
||
| ```{note} | ||
| Refer to the [JupyterLab Documentation](https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html) | ||
| to learn more about general interface customization via the settings editor. | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| { | ||
| "$schema": "http://json-schema.org/draft-07/schema", | ||
| "title": "Notebook Shell", | ||
| "description": "Notebook Shell layout settings.", | ||
| "properties": { | ||
| "layout": { | ||
| "$ref": "#/definitions/layout", | ||
| "type": "object", | ||
| "title": "Customize shell widget positioning", | ||
| "description": "Overrides default widget position in the application layout", | ||
| "default": { | ||
| "Markdown Preview": { "area": "right" } | ||
| } | ||
| } | ||
| }, | ||
| "additionalProperties": false, | ||
| "type": "object", | ||
| "definitions": { | ||
| "layout": { | ||
| "type": "object", | ||
| "properties": { | ||
| "[\\w-]+": { | ||
| "type": "object", | ||
| "properties": { | ||
| "area": { | ||
| "enum": ["left", "right"] | ||
| } | ||
| }, | ||
| "additionalProperties": false | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.