Merge pull request #6487 from brichet/left-right-widgets
Left right panel in Notebook view
Jeremy Tuloup
4 years ago
committed by
GitHub
@ -0,0 +1,114 @@
|
||||
import { ICommandPalette } from '@jupyterlab/apputils';
|
||||
import { IDisposable } from '@lumino/disposable';
|
||||
import { Widget } from '@lumino/widgets';
|
||||
|
||||
/**
|
||||
* A class to manages the palette entries associated to the side bar.
|
||||
*/
|
||||
export class SideBarPalette {
|
||||
/**
|
||||
* Construct a new side bar palette.
|
||||
*/
|
||||
constructor(options: SideBarPaletteOption) {
|
||||
this._commandPalette = options.commandPalette;
|
||||
this._command = options.command;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a command palette item from the widget id and the area.
|
||||
*/
|
||||
getItem(
|
||||
widget: Readonly<Widget>,
|
||||
area: 'left' | 'right'
|
||||
): SideBarPaletteItem | null {
|
||||
const itemList = this._items;
|
||||
for (let i = 0; i < itemList.length; i++) {
|
||||
const item = itemList[i];
|
||||
if (item.widgetId == widget.id && item.area == area) {
|
||||
return item;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add an item to the command palette.
|
||||
*/
|
||||
addItem(widget: Readonly<Widget>, area: 'left' | 'right'): void {
|
||||
// Check if the item does not already exist.
|
||||
if (this.getItem(widget, area)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add a new item in command palette.
|
||||
const disposableDelegate = this._commandPalette.addItem({
|
||||
command: this._command,
|
||||
category: 'View',
|
||||
args: {
|
||||
side: area,
|
||||
title: `Show ${widget.title.caption}`,
|
||||
id: widget.id
|
||||
}
|
||||
});
|
||||
|
||||
// Keep the disposableDelegate objet to be able to dispose of the item if the widget
|
||||
// is remove from the side bar.
|
||||
this._items.push({
|
||||
widgetId: widget.id,
|
||||
area: area,
|
||||
disposable: disposableDelegate
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove an item from the command palette.
|
||||
*/
|
||||
removeItem(widget: Readonly<Widget>, area: 'left' | 'right'): void {
|
||||
const item = this.getItem(widget, area);
|
||||
if (item) {
|
||||
item.disposable.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
_command: string;
|
||||
_commandPalette: ICommandPalette;
|
||||
_items: SideBarPaletteItem[] = [];
|
||||
}
|
||||
|
||||
type SideBarPaletteItem = {
|
||||
/**
|
||||
* The ID of the widget associated to the command palette.
|
||||
*/
|
||||
widgetId: string;
|
||||
|
||||
/**
|
||||
* The area of the panel associated to the command palette.
|
||||
*/
|
||||
area: 'left' | 'right';
|
||||
|
||||
/**
|
||||
* The disposable object to remove the item from command palette.
|
||||
*/
|
||||
disposable: IDisposable;
|
||||
};
|
||||
|
||||
/**
|
||||
* An interface for the options to include in SideBarPalette constructor.
|
||||
*/
|
||||
type SideBarPaletteOption = {
|
||||
/**
|
||||
* The commands palette.
|
||||
*/
|
||||
commandPalette: ICommandPalette;
|
||||
|
||||
/**
|
||||
* The command to call from each sidebar menu entry.
|
||||
*
|
||||
* ### Notes
|
||||
* That command required 3 args :
|
||||
* side: 'left' | 'right', the area to toggle
|
||||
* title: string, label of the command
|
||||
* id: string, id of the widget to activate
|
||||
*/
|
||||
command: string;
|
||||
};
|
||||
@ -0,0 +1,48 @@
|
||||
/*-----------------------------------------------------------------------------
|
||||
| Copyright (c) Jupyter Development Team.
|
||||
| Distributed under the terms of the Modified BSD License.
|
||||
|
|
||||
| Adapted from JupyterLab's packages/application/style/sidepanel.css.
|
||||
|----------------------------------------------------------------------------*/
|
||||
|
||||
/*-----------------------------------------------------------------------------
|
||||
| Variables
|
||||
|----------------------------------------------------------------------------*/
|
||||
|
||||
:root {
|
||||
--jp-private-sidebar-tab-width: 32px;
|
||||
}
|
||||
|
||||
/*-----------------------------------------------------------------------------
|
||||
| SideBar
|
||||
|----------------------------------------------------------------------------*/
|
||||
|
||||
/* Stack panels */
|
||||
|
||||
#jp-right-stack,
|
||||
#jp-left-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: var(--jp-sidebar-min-width);
|
||||
}
|
||||
|
||||
#jp-left-stack .jp-SidePanel-collapse,
|
||||
#jp-right-stack .jp-SidePanel-collapse {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#jp-left-stack .jp-SidePanel-collapse {
|
||||
justify-content: right;
|
||||
}
|
||||
|
||||
#jp-right-stack .jp-SidePanel-collapse {
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
#jp-left-stack .lm-StackedPanel,
|
||||
#jp-right-stack .lm-StackedPanel {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 8.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,65 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# part 1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## subpart 1"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"## subpart 2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# part 2"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"# part 3"
|
||||
]
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"kernelspec": {
|
||||
"display_name": "Python 3 (ipykernel)",
|
||||
"language": "python",
|
||||
"name": "python3"
|
||||
},
|
||||
"language_info": {
|
||||
"codemirror_mode": {
|
||||
"name": "ipython",
|
||||
"version": 3
|
||||
},
|
||||
"file_extension": ".py",
|
||||
"mimetype": "text/x-python",
|
||||
"name": "python",
|
||||
"nbconvert_exporter": "python",
|
||||
"pygments_lexer": "ipython3",
|
||||
"version": "3.10.5"
|
||||
},
|
||||
"vscode": {
|
||||
"interpreter": {
|
||||
"hash": "0508733a7f73e6ddc798c911e704189485d436785f398d29dd8c20885fc63cb3"
|
||||
}
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 4
|
||||
}
|
||||