/
tabbarsvg.ts
126 lines (116 loc) · 3.46 KB
/
tabbarsvg.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { ITranslator, nullTranslator } from '@jupyterlab/translation';
import { hpass, VirtualElement } from '@lumino/virtualdom';
import { DockPanel, TabBar, TabPanel, Widget } from '@lumino/widgets';
import { LabIconStyle } from '../../style';
import { classes } from '../../utils';
import { addIcon, closeIcon } from '../iconimports';
/**
* a widget which displays titles as a single row or column of tabs.
* Tweaked to use an inline svg as the close icon
*/
export class TabBarSvg<T> extends TabBar<T> {
/**
* Translator object
*/
static translator: ITranslator | null = null;
/**
* Construct a new tab bar. Overrides the default renderer.
*
* @param options - The options for initializing the tab bar.
*/
constructor(options: TabBar.IOptions<T> = {}) {
super({ renderer: TabBarSvg.defaultRenderer, ...options });
const trans = (TabBarSvg.translator ?? nullTranslator).load('jupyterlab');
addIcon.element({
container: this.addButtonNode,
title: trans.__('New Launcher')
});
}
}
export namespace TabBarSvg {
/**
* A modified implementation of the TabBar Renderer.
*/
export class Renderer extends TabBar.Renderer {
/**
* Render the close icon element for a tab.
*
* @param data - The data to use for rendering the tab.
*
* @returns A virtual element representing the tab close icon.
*/
renderCloseIcon(data: TabBar.IRenderData<any>): VirtualElement {
const trans = (TabBarSvg.translator ?? nullTranslator).load('jupyterlab');
const title = data.title.label
? trans.__('Close %1', data.title.label)
: trans.__('Close tab');
const className = classes(
'jp-icon-hover lm-TabBar-tabCloseIcon',
LabIconStyle.styleClass({
elementPosition: 'center',
height: '16px',
width: '16px'
})
);
return hpass(
'div',
{ className, title },
closeIcon
) as unknown as VirtualElement;
}
}
export const defaultRenderer = new Renderer();
}
/**
* a widget which provides a flexible docking area for widgets.
* Tweaked to use an inline svg as the close icon
*/
export class DockPanelSvg extends DockPanel {
/**
* Construct a new dock panel.
*
* @param options - The options for initializing the panel.
*/
constructor(options: DockPanel.IOptions = {}) {
super({
renderer: DockPanelSvg.defaultRenderer,
...options
});
}
}
export namespace DockPanelSvg {
/**
* A modified implementation of the DockPanel Renderer.
*/
export class Renderer extends DockPanel.Renderer {
/**
* Create a new tab bar (with inline svg icons enabled
* for use with a dock panel.
*
* @returns A new tab bar for a dock panel.
*/
createTabBar(): TabBarSvg<Widget> {
const bar = new TabBarSvg<Widget>();
bar.addClass('lm-DockPanel-tabBar');
return bar;
}
}
export const defaultRenderer = new Renderer();
}
/**
* A widget which combines a `TabBar` and a `StackedPanel`.
* Tweaked to use an inline svg as the close icon
*/
export class TabPanelSvg extends TabPanel {
/**
* Construct a new tab panel.
*
* @param options - The options for initializing the tab panel.
*/
constructor(options: TabPanel.IOptions = {}) {
options.renderer = options.renderer || TabBarSvg.defaultRenderer;
super(options);
}
}