A monorepo containing jupyter-blocks and jupyter-tidyblocks. Blockly extension for JupyterLab.
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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;