A monorepo containing jupyter-blocks and jupyter-tidyblocks. Blockly extension for JupyterLab.
Merge pull request #11 from DenisaCG/all_themes
added personalized JupyterLab theme
authored by
Carlos Herrero
and committed by
GitHub
6c7a102d
06969268
+28
-14
+6
-2
src/layout.ts
+6
-2
src/layout.ts
···
9
9
import * as Blockly from 'blockly';
10
10
11
11
import { BlocklyManager } from './manager';
12
+
import { THEME } from './utils';
12
13
13
14
/**
14
15
* A blockly layout to host the Blockly editor.
···
113
114
/**
114
115
* Handle `after-attach` messages sent to the widget.
115
116
*/
116
-
protected onAfterAttach(msg: Message): void {
117
+
protected onAfterAttach(msg: Message): void {
118
+
//inject Blockly with appropiate JupyterLab theme.
117
119
this._workspace = Blockly.inject(this._host, {
118
-
toolbox: this._manager.toolbox
120
+
toolbox: this._manager.toolbox,
121
+
theme: THEME
119
122
});
120
123
}
121
124
122
125
private _resizeWorkspace(): void {
126
+
//Resize logic.
123
127
const rect = this.parent.node.getBoundingClientRect();
124
128
const { height } = this._outputArea.node.getBoundingClientRect();
125
129
this._host.style.width = rect.width + 'px';
+22
-12
src/utils.ts
+22
-12
src/utils.ts
···
1
+
import * as Blockly from 'blockly';
2
+
3
+
// Creating a toolbox containing all the main (default) blocks.
1
4
export const TOOLBOX = {
2
-
//kind: 'flyoutToolbox',
3
-
// contents: [
4
-
// {
5
-
// kind: 'block',
6
-
// type: 'controls_if'
7
-
// },
8
-
// {
9
-
// kind: 'block',
10
-
// type: 'controls_whileUntil'
11
-
// }
12
-
// ]
13
-
//{
14
5
kind: 'categoryToolbox',
15
6
contents: [
16
7
{
···
360
351
}
361
352
]
362
353
};
354
+
355
+
// Defining a Blockly Theme in accordance with the current JupyterLab Theme.
356
+
const jupyterlab_theme = Blockly.Theme.defineTheme('jupyterlab', {
357
+
'base': Blockly.Themes.Classic,
358
+
'componentStyles': {
359
+
'workspaceBackgroundColour': 'var(--jp-layout-color0)',
360
+
'toolboxBackgroundColour': 'var(--jp-layout-color2)',
361
+
'toolboxForegroundColour': 'var(--jp-ui-font-color0)',
362
+
'flyoutBackgroundColour': 'var(--jp-border-color2)',
363
+
'flyoutForegroundColour': 'var(--jp-layout-color3)',
364
+
'flyoutOpacity': 1,
365
+
'scrollbarColour': 'var(--jp-border-color0)',
366
+
'insertionMarkerOpacity': 0.3,
367
+
'scrollbarOpacity': 0.4,
368
+
'cursorColour': 'var(--jp-scrollbar-background-color)',
369
+
}
370
+
});
371
+
372
+
export const THEME: Blockly.Theme = jupyterlab_theme;