From c937e9ea577fef7ac7fe30533bd21d5f810b5e29 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 28 Aug 2020 17:59:15 -0400 Subject: [PATCH 01/35] wip icon picker main area widget --- packages/completion-theme/src/index.ts | 23 ++- .../completion-theme/src/theme-picker.tsx | 148 ++++++++++++++++++ packages/completion-theme/src/types.ts | 4 + packages/completion-theme/style/index.css | 23 +++ 4 files changed, 194 insertions(+), 4 deletions(-) create mode 100644 packages/completion-theme/src/theme-picker.tsx diff --git a/packages/completion-theme/src/index.ts b/packages/completion-theme/src/index.ts index 6fc214b72..541c6c5f2 100644 --- a/packages/completion-theme/src/index.ts +++ b/packages/completion-theme/src/index.ts @@ -3,7 +3,8 @@ import { Dialog, ICommandPalette, IThemeManager, - showDialog + showDialog, + MainAreaWidget } from '@jupyterlab/apputils'; import { JupyterFrontEndPlugin } from '@jupyterlab/application'; import { @@ -15,6 +16,7 @@ import { } from './types'; import { render_themes_list } from './about'; import '../style/index.css'; +import { IconThemePicker } from './theme-picker'; export class CompletionThemeManager implements ILSPCompletionThemeManager { protected current_icons: Map; @@ -37,6 +39,14 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { return this.themeManager.isLight(current); } + theme_ids() { + return [...this.themes.keys()]; + } + + get_theme(id: string) { + return this.themes.get(id); + } + get_icons_set( theme: ICompletionTheme ): Map { @@ -136,7 +146,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { */ display_themes() { showDialog({ - title: 'LSP Completer Themes', + title: 'Code Symbols', body: render_themes_list({ themes: [...this.themes.values()], current: this.current_theme, @@ -159,9 +169,14 @@ export const COMPLETION_THEME_MANAGER: JupyterFrontEndPlugin { let manager = new CompletionThemeManager(themeManager); app.commands.addCommand('lsp-completer-about-themes', { - label: 'Display the completer themes', + label: 'Configure code symbol display', execute: () => { - manager.display_themes(); + const model = new IconThemePicker.Model(); + model.manager = manager; + const content = new IconThemePicker(model); + const main = new MainAreaWidget({ content }); + main.title.label = 'Code Symbols'; + app.shell.add(main); } }); commandPalette.addItem({ diff --git a/packages/completion-theme/src/theme-picker.tsx b/packages/completion-theme/src/theme-picker.tsx new file mode 100644 index 000000000..d3cc70530 --- /dev/null +++ b/packages/completion-theme/src/theme-picker.tsx @@ -0,0 +1,148 @@ +import { VDomRenderer, VDomModel } from '@jupyterlab/apputils'; + +import * as React from 'react'; +import { ILSPCompletionThemeManager } from './types'; +import { LabIcon } from '@jupyterlab/ui-components'; + +type TThemeKindIcons = Map; + +const PICKER_CLASS = 'jp-LSPIconThemePicker'; + +export class IconThemePicker extends VDomRenderer { + protected render() { + const { theme_ids, kinds, icons } = this.model; + + this.addClass(PICKER_CLASS); + + return ( +
+
+

Symbol Icon Themes

+
+ Pick an icon theme to use for symbol references, such as completion + hints. +
+

Icon Color Scheme

+
Pick an icon color scheme
+
    + {['colorful', 'monochrome'].map(v => ( +
  • + +
    • + ))} +
+
+ + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} + +
Current Theme + +
Theme Name + {id} +
+
+ ); + } + + protected renderKind( + kind: string, + theme_ids: string[], + icons: TThemeKindIcons + ) { + return ( + + {kind} + {theme_ids.map(id => + this.renderThemeKind(id, icons.get(`${kind}-${id}`)) + )} + + ); + } + + protected renderThemeKind(theme_id: string, icon: LabIcon | null) { + if (icon != null) { + return ( + + + + ); + } else { + return ; + } + } +} + +export namespace IconThemePicker { + export class Model extends VDomModel { + _manager: ILSPCompletionThemeManager; + _theme_ids: string[]; + _icons: TThemeKindIcons; + _kinds: string[]; + + get manager() { + return this._manager; + } + + get theme_ids() { + return this._theme_ids; + } + + get kinds() { + return this._kinds; + } + + get icons() { + return this._icons; + } + + set manager(manager) { + this._manager = manager; + if (manager != null) { + let theme_ids = manager.theme_ids(); + theme_ids.sort(); + + let icons: TThemeKindIcons = new Map(); + let kinds: string[] = []; + + for (const id of theme_ids) { + const theme = manager.get_theme(id); + const theme_icons = manager.get_icons_set(theme); + for (const [kind, icon] of theme_icons.entries()) { + icons.set(`${kind}-${id}`, icon as LabIcon); + if (kinds.indexOf(kind) < 0) { + kinds.push(kind); + } + } + } + + kinds.sort(); + this._theme_ids = theme_ids; + this._kinds = kinds; + this._icons = icons; + } else { + this._theme_ids = []; + this._kinds = []; + this._icons = new Map(); + } + this.stateChanged.emit(void 0); + } + } +} diff --git a/packages/completion-theme/src/types.ts b/packages/completion-theme/src/types.ts index 5249750e0..363cdba53 100644 --- a/packages/completion-theme/src/types.ts +++ b/packages/completion-theme/src/types.ts @@ -109,11 +109,15 @@ export interface ILSPCompletionThemeManager { set_theme(theme_id: string | null): void; + get_theme(theme_id: string): ICompletionTheme; + register_theme(theme: ICompletionTheme): void; get_icons_set( theme: ICompletionTheme ): Map; + + theme_ids(): string[]; } export const ILSPCompletionThemeManager = new Token( diff --git a/packages/completion-theme/style/index.css b/packages/completion-theme/style/index.css index 1606a91fd..ac14cc1c5 100644 --- a/packages/completion-theme/style/index.css +++ b/packages/completion-theme/style/index.css @@ -16,3 +16,26 @@ display: flex; justify-content: space-between; } + +.jp-LSPIconThemePicker { + display: flex; + flex-direction: column; + padding: var(--jp-notebook-padding); +} + +.jp-LSPIconThemePicker > div { + flex: 1; + overflow-y: auto; + display: flex; +} + +.jp-LSPIconThemePicker header { + flex: 1; + max-width: 400px; + min-width: 300px; +} + +.jp-LSPIconThemePicker table { + flex: 1; + overflow-y: auto; +} From 5887eeb225623cd17a03aad48590f93632795143 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 28 Aug 2020 18:05:05 -0400 Subject: [PATCH 02/35] linting --- packages/completion-theme/src/theme-picker.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/completion-theme/src/theme-picker.tsx b/packages/completion-theme/src/theme-picker.tsx index d3cc70530..d7b8ec006 100644 --- a/packages/completion-theme/src/theme-picker.tsx +++ b/packages/completion-theme/src/theme-picker.tsx @@ -97,10 +97,6 @@ export namespace IconThemePicker { _icons: TThemeKindIcons; _kinds: string[]; - get manager() { - return this._manager; - } - get theme_ids() { return this._theme_ids; } @@ -113,6 +109,10 @@ export namespace IconThemePicker { return this._icons; } + get manager() { + return this._manager; + } + set manager(manager) { this._manager = manager; if (manager != null) { From 07062bb3df858fd550b4a6dc72c3f17ee3228b76 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 28 Aug 2020 23:25:53 -0400 Subject: [PATCH 03/35] get round-tripping icon theme working --- .gitignore | 2 +- packages/completion-theme/src/index.ts | 14 +++- .../completion-theme/src/theme-picker.tsx | 66 ++++++++++++------- packages/completion-theme/src/types.ts | 5 ++ .../src/features/completion/completion.ts | 6 ++ .../src/features/completion/index.ts | 12 +++- 6 files changed, 80 insertions(+), 25 deletions(-) diff --git a/.gitignore b/.gitignore index 3be49c475..3011f3b3c 100644 --- a/.gitignore +++ b/.gitignore @@ -113,6 +113,6 @@ atest/output/ junit.xml coverage/ .vscode/ -_schema.d.ts +_*.d.ts _build .virtual_documents/ diff --git a/packages/completion-theme/src/index.ts b/packages/completion-theme/src/index.ts index a620a2e96..c573f315d 100644 --- a/packages/completion-theme/src/index.ts +++ b/packages/completion-theme/src/index.ts @@ -1,3 +1,4 @@ +import { Signal } from '@lumino/signaling'; import { kernelIcon, LabIcon } from '@jupyterlab/ui-components'; import { Dialog, @@ -24,13 +25,19 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { protected themes: Map; private current_theme_id: string; private icons_cache: Map; + private _current_theme_changed: Signal; constructor(protected themeManager: IThemeManager) { + this._current_theme_changed = new Signal(this); this.themes = new Map(); this.icons_cache = new Map(); themeManager.themeChanged.connect(this.update_icons_set, this); } + get current_theme_changed() { + return this._current_theme_changed; + } + protected is_theme_light() { const current = this.themeManager.theme; if (!current) { @@ -44,6 +51,10 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { return [...this.themes.keys()]; } + get_current_theme_id() { + return this.current_theme_id; + } + get_theme(id: string) { return this.themes.get(id); } @@ -116,6 +127,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { this.current_theme_id = id; document.body.classList.add(this.current_theme_class); this.update_icons_set(); + this._current_theme_changed.emit(void 0); } protected get current_theme(): ICompletionTheme | null { @@ -169,7 +181,7 @@ export const COMPLETION_THEME_MANAGER: JupyterFrontEndPlugin { const model = new IconThemePicker.Model(); model.manager = manager; diff --git a/packages/completion-theme/src/theme-picker.tsx b/packages/completion-theme/src/theme-picker.tsx index d7b8ec006..58e28fde9 100644 --- a/packages/completion-theme/src/theme-picker.tsx +++ b/packages/completion-theme/src/theme-picker.tsx @@ -9,11 +9,19 @@ type TThemeKindIcons = Map; const PICKER_CLASS = 'jp-LSPIconThemePicker'; export class IconThemePicker extends VDomRenderer { + onThemeChanged = (evt: React.ChangeEvent) => { + const { value } = evt.currentTarget as HTMLInputElement; + this.model.manager.set_theme(value); + }; + protected render() { const { theme_ids, kinds, icons } = this.model; + const currentThemeId = this.model.manager.get_current_theme_id(); this.addClass(PICKER_CLASS); + this.model.manager.get_theme; + return (
@@ -41,7 +49,13 @@ export class IconThemePicker extends VDomRenderer { Current Theme {theme_ids.map((id, i) => ( - + ))} @@ -116,27 +130,10 @@ export namespace IconThemePicker { set manager(manager) { this._manager = manager; if (manager != null) { - let theme_ids = manager.theme_ids(); - theme_ids.sort(); - - let icons: TThemeKindIcons = new Map(); - let kinds: string[] = []; - - for (const id of theme_ids) { - const theme = manager.get_theme(id); - const theme_icons = manager.get_icons_set(theme); - for (const [kind, icon] of theme_icons.entries()) { - icons.set(`${kind}-${id}`, icon as LabIcon); - if (kinds.indexOf(kind) < 0) { - kinds.push(kind); - } - } - } - - kinds.sort(); - this._theme_ids = theme_ids; - this._kinds = kinds; - this._icons = icons; + this.manager.current_theme_changed.connect(() => { + this.stateChanged.emit(void 0); + }); + this.refresh(); } else { this._theme_ids = []; this._kinds = []; @@ -144,5 +141,30 @@ export namespace IconThemePicker { } this.stateChanged.emit(void 0); } + + refresh() { + const { manager } = this; + let theme_ids = manager.theme_ids(); + theme_ids.sort(); + + let icons: TThemeKindIcons = new Map(); + let kinds: string[] = []; + + for (const id of theme_ids) { + const theme = manager.get_theme(id); + const theme_icons = manager.get_iconset(theme); + for (const [kind, icon] of theme_icons.entries()) { + icons.set(`${kind}-${id}`, icon as LabIcon); + if (kinds.indexOf(kind) < 0) { + kinds.push(kind); + } + } + } + + kinds.sort(); + this._theme_ids = theme_ids; + this._kinds = kinds; + this._icons = icons; + } } } diff --git a/packages/completion-theme/src/types.ts b/packages/completion-theme/src/types.ts index be4471dd6..f6ae1fbec 100644 --- a/packages/completion-theme/src/types.ts +++ b/packages/completion-theme/src/types.ts @@ -1,5 +1,6 @@ import { Token } from '@lumino/coreutils'; import { LabIcon } from '@jupyterlab/ui-components'; +import { Signal } from '@lumino/signaling'; export const COMPLETER_THEME_PREFIX = 'lsp-completer-theme-'; @@ -113,6 +114,10 @@ export interface ILSPCompletionThemeManager { get_theme(theme_id: string): ICompletionTheme; + current_theme_changed: Signal; + + get_current_theme_id(): string; + register_theme(theme: ICompletionTheme): void; get_iconset( diff --git a/packages/jupyterlab-lsp/src/features/completion/completion.ts b/packages/jupyterlab-lsp/src/features/completion/completion.ts index fd08db282..333efc2d5 100644 --- a/packages/jupyterlab-lsp/src/features/completion/completion.ts +++ b/packages/jupyterlab-lsp/src/features/completion/completion.ts @@ -79,6 +79,12 @@ export class CompletionLabIntegration implements IFeatureLabIntegration { settings.changed.connect(() => { completionThemeManager.set_theme(this.settings.composite.theme); }); + completionThemeManager.current_theme_changed.connect(() => { + const new_theme_id = completionThemeManager.get_current_theme_id(); + if (this.settings.composite.theme !== new_theme_id) { + this.settings.set('theme', new_theme_id); + } + }); } private swap_adapter( diff --git a/packages/jupyterlab-lsp/src/features/completion/index.ts b/packages/jupyterlab-lsp/src/features/completion/index.ts index 3dc43139c..ccc1390eb 100644 --- a/packages/jupyterlab-lsp/src/features/completion/index.ts +++ b/packages/jupyterlab-lsp/src/features/completion/index.ts @@ -14,6 +14,7 @@ import { CompletionCM, CompletionLabIntegration } from './completion'; import { LabIcon } from '@jupyterlab/ui-components'; import completionSvg from '../../../style/icons/completion.svg'; import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; +import { CodeCompletion } from '../../_completion'; export const completionIcon = new LabIcon({ name: 'lsp:completion', @@ -40,7 +41,10 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { adapterManager: ILSPAdapterManager, iconsThemeManager: ILSPCompletionThemeManager ) => { - const settings = new FeatureSettings(settingRegistry, FEATURE_ID); + const settings = new FeatureSettings( + settingRegistry, + FEATURE_ID + ); const labIntegration = new CompletionLabIntegration( app, completionManager, @@ -49,6 +53,12 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { iconsThemeManager ); + app.commands.addCommand('lsp:set-completion-icon-theme', { + execute: (args: Partial) => { + settings.set('theme', args.theme); + } + }); + featureManager.register({ feature: { editorIntegrationFactory: new Map([['CodeMirrorEditor', CompletionCM]]), From df45ac54ba1759dad798b8d97ec0bcc5a502c691 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 00:12:43 -0400 Subject: [PATCH 04/35] re-home completion configurer, style --- packages/completion-theme/src/about.tsx | 71 ------------------- packages/completion-theme/src/index.ts | 54 +------------- packages/completion-theme/style/index.css | 48 ------------- .../jupyterlab-lsp/src/command_manager.ts | 4 +- .../src/features/completion/config.tsx} | 46 ++++++------ .../src/features/completion/index.ts | 62 ++++++++++++---- packages/jupyterlab-lsp/style/completion.css | 6 ++ .../style/config/completion.css | 22 ++++++ 8 files changed, 109 insertions(+), 204 deletions(-) delete mode 100644 packages/completion-theme/src/about.tsx delete mode 100644 packages/completion-theme/style/index.css rename packages/{completion-theme/src/theme-picker.tsx => jupyterlab-lsp/src/features/completion/config.tsx} (79%) create mode 100644 packages/jupyterlab-lsp/style/completion.css create mode 100644 packages/jupyterlab-lsp/style/config/completion.css diff --git a/packages/completion-theme/src/about.tsx b/packages/completion-theme/src/about.tsx deleted file mode 100644 index 3c2431bf5..000000000 --- a/packages/completion-theme/src/about.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { ReactElement } from 'react'; -import { - ICompletionTheme, - ILicenseInfo, - COMPLETER_THEME_PREFIX -} from './types'; -import { LabIcon } from '@jupyterlab/ui-components'; - -function render_licence(licence: ILicenseInfo): ReactElement { - return ( -
- - {licence.abbreviation} - {' '} - {licence.licensor} -
- ); -} - -type IconSetGetter = (theme: ICompletionTheme) => Map; - -function render_theme( - theme: ICompletionTheme, - get_set: IconSetGetter, - is_current: boolean -): ReactElement { - let icons: ReactElement[] = []; - for (let [name, icon] of get_set(theme)) { - icons.push( -
-
{name}
-
- -
-
- ); - } - return ( -
-

- {theme.name} - {is_current ? ' (current)' : ''} -

-
    -
  • - ID: {theme.id} -
    • -
  • Licence: {render_licence(theme.icons.licence)}
    • -
  • - {typeof theme.icons.dark === 'undefined' - ? '' - : 'Includes dedicated dark mode icons set'} -
    • -
-
{icons}
-
- ); -} - -export function render_themes_list(props: { - themes: ICompletionTheme[]; - current: ICompletionTheme; - get_set: IconSetGetter; -}): React.ReactElement { - let themes = props.themes.map(theme => - render_theme(theme, props.get_set, theme == props.current) - ); - return
{themes}
; -} diff --git a/packages/completion-theme/src/index.ts b/packages/completion-theme/src/index.ts index c573f315d..e06582bfa 100644 --- a/packages/completion-theme/src/index.ts +++ b/packages/completion-theme/src/index.ts @@ -1,13 +1,8 @@ import { Signal } from '@lumino/signaling'; import { kernelIcon, LabIcon } from '@jupyterlab/ui-components'; -import { - Dialog, - ICommandPalette, - IThemeManager, - showDialog, - MainAreaWidget -} from '@jupyterlab/apputils'; +import { ICommandPalette, IThemeManager } from '@jupyterlab/apputils'; import { JupyterFrontEndPlugin } from '@jupyterlab/application'; + import { ICompletionIconSet, ICompletionTheme, @@ -16,9 +11,6 @@ import { COMPLETER_THEME_PREFIX, KernelKind } from './types'; -import { render_themes_list } from './about'; -import '../style/index.css'; -import { IconThemePicker } from './theme-picker'; export class CompletionThemeManager implements ILSPCompletionThemeManager { protected current_icons: Map; @@ -148,53 +140,13 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { this.themes.set(theme.id, theme); this.update_icons_set(); } - - /** - * Display the registered themes in a dialog, - * both for the user to know what they can choose from, - * and for the developer to quickly check how the icons - * from each theme would look rendered. - */ - display_themes() { - showDialog({ - title: 'Code Symbols', - body: render_themes_list({ - themes: [...this.themes.values()], - current: this.current_theme, - get_set: this.get_iconset.bind(this) - }), - buttons: [Dialog.okButton()] - }).catch(console.warn); - } } -const LSP_CATEGORY = 'Language server protocol'; - export const COMPLETION_THEME_MANAGER: JupyterFrontEndPlugin = { id: PLUGIN_ID, requires: [IThemeManager, ICommandPalette], - activate: ( - app, - themeManager: IThemeManager, - commandPalette: ICommandPalette - ) => { + activate: (app, themeManager: IThemeManager) => { let manager = new CompletionThemeManager(themeManager); - const command_id = 'lsp:completer-about-themes'; - app.commands.addCommand(command_id, { - label: 'Configure Code Completion', - execute: () => { - const model = new IconThemePicker.Model(); - model.manager = manager; - const content = new IconThemePicker(model); - const main = new MainAreaWidget({ content }); - main.title.label = 'Code Symbols'; - app.shell.add(main); - } - }); - commandPalette.addItem({ - category: LSP_CATEGORY, - command: command_id - }); return manager; }, provides: ILSPCompletionThemeManager, diff --git a/packages/completion-theme/style/index.css b/packages/completion-theme/style/index.css deleted file mode 100644 index cff737102..000000000 --- a/packages/completion-theme/style/index.css +++ /dev/null @@ -1,48 +0,0 @@ -.lsp-completer-themes .lsp-licence { - display: inline; -} - -.lsp-completer-themes ul { - list-style: none; - padding-left: 10px; -} - -.lsp-completer-theme-icons { - margin-left: 10px; -} - -.lsp-completer-icon-row { - width: 50%; - display: flex; - justify-content: space-between; -} - -.jp-LSPIconThemePicker { - display: flex; - flex-direction: column; - padding: var(--jp-notebook-padding); -} - -.jp-LSPIconThemePicker > div { - flex: 1; - overflow-y: auto; - display: flex; -} - -.jp-LSPIconThemePicker header { - flex: 1; - max-width: 400px; - min-width: 300px; -} - -.jp-LSPIconThemePicker table { - flex: 1; - overflow-y: auto; -} - -/* a workaround for scrollbars being always on in the completer documentation panel, see - https://github.com/krassowski/jupyterlab-lsp/pull/322#issuecomment-682724175 - */ -.jp-Completer-docpanel { - overflow: auto; -} diff --git a/packages/jupyterlab-lsp/src/command_manager.ts b/packages/jupyterlab-lsp/src/command_manager.ts index f27cd0897..dfc40628b 100644 --- a/packages/jupyterlab-lsp/src/command_manager.ts +++ b/packages/jupyterlab-lsp/src/command_manager.ts @@ -10,6 +10,8 @@ import { CodeEditor } from '@jupyterlab/codeeditor'; import { IDocumentWidget } from '@jupyterlab/docregistry'; import { ILSPAdapterManager } from './tokens'; +export const LSP_CATEGORY = 'Language Server Protocol'; + function is_context_menu_over_token(adapter: WidgetAdapter) { let position = adapter.get_position_from_context_menu(); if (!position) { @@ -55,7 +57,7 @@ abstract class LSPCommandManager { abstract is_enabled(command: IFeatureCommand): boolean; abstract is_visible(command: IFeatureCommand): boolean; add_to_palette: boolean = true; - category: string = 'Language Server Protocol'; + category: string = LSP_CATEGORY; add(commands: Array) { for (let cmd of commands) { diff --git a/packages/completion-theme/src/theme-picker.tsx b/packages/jupyterlab-lsp/src/features/completion/config.tsx similarity index 79% rename from packages/completion-theme/src/theme-picker.tsx rename to packages/jupyterlab-lsp/src/features/completion/config.tsx index 58e28fde9..11381c09b 100644 --- a/packages/completion-theme/src/theme-picker.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/config.tsx @@ -1,31 +1,32 @@ -import { VDomRenderer, VDomModel } from '@jupyterlab/apputils'; - import * as React from 'react'; -import { ILSPCompletionThemeManager } from './types'; + import { LabIcon } from '@jupyterlab/ui-components'; +import { VDomRenderer, VDomModel } from '@jupyterlab/apputils'; + +import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; + +import '../../../style/config/completion.css'; type TThemeKindIcons = Map; -const PICKER_CLASS = 'jp-LSPIconThemePicker'; +const CONFIG_CLASS = 'jp-LSPCompletion-Config'; -export class IconThemePicker extends VDomRenderer { +export class Configurer extends VDomRenderer { onThemeChanged = (evt: React.ChangeEvent) => { const { value } = evt.currentTarget as HTMLInputElement; - this.model.manager.set_theme(value); + this.model.iconsThemeManager.set_theme(value); }; protected render() { const { theme_ids, kinds, icons } = this.model; - const currentThemeId = this.model.manager.get_current_theme_id(); - - this.addClass(PICKER_CLASS); + const currentThemeId = this.model.iconsThemeManager.get_current_theme_id(); - this.model.manager.get_theme; + this.addClass(CONFIG_CLASS); return (
-

Symbol Icon Themes

+

Code Completion Settings

Pick an icon theme to use for symbol references, such as completion hints. @@ -85,26 +86,31 @@ export class IconThemePicker extends VDomRenderer { {kind} {theme_ids.map(id => - this.renderThemeKind(id, icons.get(`${kind}-${id}`)) + this.renderThemeKind(kind, id, icons.get(`${kind}-${id}`)) )} ); } - protected renderThemeKind(theme_id: string, icon: LabIcon | null) { + protected renderThemeKind( + kind: string, + theme_id: string, + icon: LabIcon | null + ) { + const key = `${kind}-${theme_id}`; if (icon != null) { return ( - + ); } else { - return ; + return ; } } } -export namespace IconThemePicker { +export namespace Configurer { export class Model extends VDomModel { _manager: ILSPCompletionThemeManager; _theme_ids: string[]; @@ -123,14 +129,14 @@ export namespace IconThemePicker { return this._icons; } - get manager() { + get iconsThemeManager() { return this._manager; } - set manager(manager) { + set iconsThemeManager(manager) { this._manager = manager; if (manager != null) { - this.manager.current_theme_changed.connect(() => { + this.iconsThemeManager.current_theme_changed.connect(() => { this.stateChanged.emit(void 0); }); this.refresh(); @@ -143,7 +149,7 @@ export namespace IconThemePicker { } refresh() { - const { manager } = this; + const { iconsThemeManager: manager } = this; let theme_ids = manager.theme_ids(); theme_ids.sort(); diff --git a/packages/jupyterlab-lsp/src/features/completion/index.ts b/packages/jupyterlab-lsp/src/features/completion/index.ts index ccc1390eb..24dcdeec5 100644 --- a/packages/jupyterlab-lsp/src/features/completion/index.ts +++ b/packages/jupyterlab-lsp/src/features/completion/index.ts @@ -1,20 +1,30 @@ -import { - ILSPAdapterManager, - ILSPFeatureManager, - PLUGIN_ID -} from '../../tokens'; +import { LabIcon } from '@jupyterlab/ui-components'; +import { MainAreaWidget, ICommandPalette } from '@jupyterlab/apputils'; import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application'; import { ISettingRegistry } from '@jupyterlab/settingregistry'; import { ICompletionManager } from '@jupyterlab/completer'; + +import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; + import { FeatureSettings } from '../../feature'; +import { CodeCompletion } from '../../_completion'; + +import { + ILSPAdapterManager, + ILSPFeatureManager, + PLUGIN_ID +} from '../../tokens'; + +import { LSP_CATEGORY } from '../../command_manager'; + import { CompletionCM, CompletionLabIntegration } from './completion'; -import { LabIcon } from '@jupyterlab/ui-components'; + +// style imports +import '../../../style/completion.css'; import completionSvg from '../../../style/icons/completion.svg'; -import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; -import { CodeCompletion } from '../../_completion'; export const completionIcon = new LabIcon({ name: 'lsp:completion', @@ -23,21 +33,28 @@ export const completionIcon = new LabIcon({ const FEATURE_ID = PLUGIN_ID + ':completion'; +export namespace CommandIds { + export const configure = 'lsp:show-completion-config'; + export const setTheme = 'lsp:set-completion-theme'; +} + export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { id: FEATURE_ID, requires: [ - ILSPFeatureManager, + ICommandPalette, ISettingRegistry, ICompletionManager, + ILSPFeatureManager, ILSPAdapterManager, ILSPCompletionThemeManager ], autoStart: true, activate: ( app: JupyterFrontEnd, - featureManager: ILSPFeatureManager, + commandPalette: ICommandPalette, settingRegistry: ISettingRegistry, completionManager: ICompletionManager, + featureManager: ILSPFeatureManager, adapterManager: ILSPAdapterManager, iconsThemeManager: ILSPCompletionThemeManager ) => { @@ -53,12 +70,31 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { iconsThemeManager ); - app.commands.addCommand('lsp:set-completion-icon-theme', { - execute: (args: Partial) => { - settings.set('theme', args.theme); + app.commands.addCommand(CommandIds.setTheme, { + execute: (args: Partial) => + settings.set('theme', args.theme) + }); + + const label = 'Code Completion Settings'; + app.commands.addCommand(CommandIds.configure, { + label, + execute: async () => { + const { Configurer } = await import('./config'); + const model = new Configurer.Model(); + model.iconsThemeManager = iconsThemeManager; + const content = new Configurer(model); + const main = new MainAreaWidget({ content }); + main.title.label = label; + main.title.icon = completionIcon; + app.shell.add(main); } }); + commandPalette.addItem({ + category: LSP_CATEGORY, + command: CommandIds.configure + }); + featureManager.register({ feature: { editorIntegrationFactory: new Map([['CodeMirrorEditor', CompletionCM]]), diff --git a/packages/jupyterlab-lsp/style/completion.css b/packages/jupyterlab-lsp/style/completion.css new file mode 100644 index 000000000..01045a39d --- /dev/null +++ b/packages/jupyterlab-lsp/style/completion.css @@ -0,0 +1,6 @@ +/* a workaround for scrollbars being always on in the completer documentation panel, see + https://github.com/krassowski/jupyterlab-lsp/pull/322#issuecomment-682724175 + */ +.jp-Completer-docpanel { + overflow: auto; +} diff --git a/packages/jupyterlab-lsp/style/config/completion.css b/packages/jupyterlab-lsp/style/config/completion.css new file mode 100644 index 000000000..936d3ca01 --- /dev/null +++ b/packages/jupyterlab-lsp/style/config/completion.css @@ -0,0 +1,22 @@ +.jp-LSPCompletion-Config { + display: flex; + flex-direction: column; + padding: var(--jp-notebook-padding); +} + +.jp-LSPCompletion-Config > div { + flex: 1; + overflow-y: auto; + display: flex; +} + +.jp-LSPCompletion-Config header { + flex: 1; + max-width: 400px; + min-width: 300px; +} + +.jp-LSPCompletion-Config table { + flex: 1; + overflow-y: auto; +} From ab1f8e57a98c79f641b6dcbd87cd3373c3530a80 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 00:41:26 -0400 Subject: [PATCH 05/35] work on license url --- .../src/features/completion/config.tsx | 118 ++++++++++++------ .../style/config/completion.css | 9 +- 2 files changed, 85 insertions(+), 42 deletions(-) diff --git a/packages/jupyterlab-lsp/src/features/completion/config.tsx b/packages/jupyterlab-lsp/src/features/completion/config.tsx index 11381c09b..9cf88d56d 100644 --- a/packages/jupyterlab-lsp/src/features/completion/config.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/config.tsx @@ -3,11 +3,16 @@ import * as React from 'react'; import { LabIcon } from '@jupyterlab/ui-components'; import { VDomRenderer, VDomModel } from '@jupyterlab/apputils'; -import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; +import { + ILSPCompletionThemeManager, + ICompletionTheme, + ILicenseInfo +} from '@krassowski/completion-theme/lib/types'; import '../../../style/config/completion.css'; type TThemeKindIcons = Map; +type TThemeMap = Map; const CONFIG_CLASS = 'jp-LSPCompletion-Config'; @@ -18,20 +23,21 @@ export class Configurer extends VDomRenderer { }; protected render() { - const { theme_ids, kinds, icons } = this.model; + const { theme_ids, kinds, icons, themes } = this.model; const currentThemeId = this.model.iconsThemeManager.get_current_theme_id(); this.addClass(CONFIG_CLASS); + this.addClass('jp-RenderedHTMLCommon'); return ( -
+

Code Completion Settings

-
- Pick an icon theme to use for symbol references, such as completion - hints. -
-

Icon Color Scheme

+
+
+

+ TBD: Icon Color Scheme +

Pick an icon color scheme
    {['colorful', 'monochrome'].map(v => ( @@ -43,40 +49,67 @@ export class Configurer extends VDomRenderer { ))}
-
- - - - - {theme_ids.map((id, i) => ( - - ))} - - - - {theme_ids.map((id, i) => ( - - ))} - - - - {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} - -
Current Theme - -
Theme Name - {id} -
+ +
+

+ Icon Theme {currentThemeId} +

+
+ Pick an icon theme to use for symbol references, such as completion + hints. +
+ + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => + this.renderLicense(themes.get(id).icons.licence, i) + )} + + + + {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} + +
Current Theme + +
Theme Name{themes.get(id).name}
License
+
); } + protected renderLicense(license: ILicenseInfo, key: number) { + return ( + + + {license.abbreviation} + + + ); + } + protected renderKind( kind: string, theme_ids: string[], @@ -116,11 +149,16 @@ export namespace Configurer { _theme_ids: string[]; _icons: TThemeKindIcons; _kinds: string[]; + _themes: TThemeMap; get theme_ids() { return this._theme_ids; } + get themes() { + return this._themes; + } + get kinds() { return this._kinds; } @@ -144,6 +182,7 @@ export namespace Configurer { this._theme_ids = []; this._kinds = []; this._icons = new Map(); + this._themes = new Map(); } this.stateChanged.emit(void 0); } @@ -155,9 +194,11 @@ export namespace Configurer { let icons: TThemeKindIcons = new Map(); let kinds: string[] = []; + const themes: TThemeMap = new Map(); for (const id of theme_ids) { const theme = manager.get_theme(id); + themes.set(id, theme); const theme_icons = manager.get_iconset(theme); for (const [kind, icon] of theme_icons.entries()) { icons.set(`${kind}-${id}`, icon as LabIcon); @@ -171,6 +212,7 @@ export namespace Configurer { this._theme_ids = theme_ids; this._kinds = kinds; this._icons = icons; + this._themes = themes; } } } diff --git a/packages/jupyterlab-lsp/style/config/completion.css b/packages/jupyterlab-lsp/style/config/completion.css index 936d3ca01..9ca4f79df 100644 --- a/packages/jupyterlab-lsp/style/config/completion.css +++ b/packages/jupyterlab-lsp/style/config/completion.css @@ -8,15 +8,16 @@ flex: 1; overflow-y: auto; display: flex; + flex-wrap: wrap; } .jp-LSPCompletion-Config header { - flex: 1; - max-width: 400px; - min-width: 300px; + min-width: 100%; } -.jp-LSPCompletion-Config table { +.jp-LSPCompletion-Config section { flex: 1; overflow-y: auto; + max-height: 80vh; + min-width: 25vw; } From ba2ddfc0fedfc358f046ef81b151dcbd9fd5b8d7 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 20:39:16 -0400 Subject: [PATCH 06/35] flesh out rest of settings --- .../src/features/completion/config.tsx | 179 ++++++++++++------ .../style/config/completion.css | 19 +- 2 files changed, 133 insertions(+), 65 deletions(-) diff --git a/packages/jupyterlab-lsp/src/features/completion/config.tsx b/packages/jupyterlab-lsp/src/features/completion/config.tsx index 9cf88d56d..d4950a75e 100644 --- a/packages/jupyterlab-lsp/src/features/completion/config.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/config.tsx @@ -33,65 +33,127 @@ export class Configurer extends VDomRenderer {

Code Completion Settings

-
-
-

- TBD: Icon Color Scheme -

-
Pick an icon color scheme
-
-
-

- Icon Theme {currentThemeId} -

-
- Pick an icon theme to use for symbol references, such as completion - hints. -
- - - - - {theme_ids.map((id, i) => ( - - ))} - - - - {theme_ids.map((id, i) => ( - - ))} - - - - {theme_ids.map((id, i) => - this.renderLicense(themes.get(id).icons.licence, i) - )} - - - - {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} - -
Current Theme - -
Theme Name{themes.get(id).name}
License
-
+ + +
+
+
+

+ Show Documentation Box +

+
+ Whether to show documentation box next to the completion + suggestions. +
+ +
+ +
+

+ Continuous Hinting +

+
+ Whether to enable continuous hinting (Hinterland mode). +
+ +
+ +
+

Suppress Invoke

+
+ An array of CodeMirror tokens for which the auto-invoke should be + suppressed. The token names vary between languages (modes). +
+
+
+

+ Icon Theme {currentThemeId} +

+
+ Pick an icon theme to use for symbol references, such as + completion hints. +
+ + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => + this.renderLicense(themes.get(id).icons.licence, i) + )} + + + + {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} + +
Current Theme + +
Theme Name{themes.get(id).name}
License
+
+ +
+

+ TBD: Icon Color Scheme +

+
Pick an icon color scheme
+
    + {['colorful', 'monochrome'].map(v => ( +
  • + +
    • + ))} +
+
+
); } @@ -103,6 +165,7 @@ export class Configurer extends VDomRenderer { href={license.link} title={`${license.name} by ${license.licensor}`} target="_blank" + rel="noreferrer" > {license.abbreviation} diff --git a/packages/jupyterlab-lsp/style/config/completion.css b/packages/jupyterlab-lsp/style/config/completion.css index 9ca4f79df..62dcd3d25 100644 --- a/packages/jupyterlab-lsp/style/config/completion.css +++ b/packages/jupyterlab-lsp/style/config/completion.css @@ -1,23 +1,28 @@ +.jp-LSPCompletion-Config h1 { + padding-top: 0; + margin-top: 0; +} .jp-LSPCompletion-Config { display: flex; - flex-direction: column; + flex-direction: row; padding: var(--jp-notebook-padding); } .jp-LSPCompletion-Config > div { flex: 1; - overflow-y: auto; display: flex; - flex-wrap: wrap; + flex-direction: row; + max-height: 100%; } .jp-LSPCompletion-Config header { - min-width: 100%; + max-width: 400px; + min-width: 200px; + flex: 1; } -.jp-LSPCompletion-Config section { +.jp-LSPCompletion-Config article { flex: 1; overflow-y: auto; - max-height: 80vh; - min-width: 25vw; + max-height: 100%; } From 69813077c9d6468b3b1d545bd8d5ff45463e5ed8 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 20:53:43 -0400 Subject: [PATCH 07/35] wire up simple booleans --- .../src/features/completion/config.tsx | 58 ++++++++++++++++--- .../src/features/completion/index.ts | 22 +++---- 2 files changed, 62 insertions(+), 18 deletions(-) diff --git a/packages/jupyterlab-lsp/src/features/completion/config.tsx b/packages/jupyterlab-lsp/src/features/completion/config.tsx index d4950a75e..d389a5771 100644 --- a/packages/jupyterlab-lsp/src/features/completion/config.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/config.tsx @@ -9,7 +9,10 @@ import { ILicenseInfo } from '@krassowski/completion-theme/lib/types'; +import { CodeCompletion as LSPCompletionSettings } from '../../_completion'; + import '../../../style/config/completion.css'; +import { FeatureSettings } from '../../feature'; type TThemeKindIcons = Map; type TThemeMap = Map; @@ -17,15 +20,12 @@ type TThemeMap = Map; const CONFIG_CLASS = 'jp-LSPCompletion-Config'; export class Configurer extends VDomRenderer { - onThemeChanged = (evt: React.ChangeEvent) => { - const { value } = evt.currentTarget as HTMLInputElement; - this.model.iconsThemeManager.set_theme(value); - }; - protected render() { - const { theme_ids, kinds, icons, themes } = this.model; + const { theme_ids, kinds, icons, themes, settings } = this.model; const currentThemeId = this.model.iconsThemeManager.get_current_theme_id(); + const { composite } = settings; + this.addClass(CONFIG_CLASS); this.addClass('jp-RenderedHTMLCommon'); @@ -61,6 +61,7 @@ export class Configurer extends VDomRenderer { +

@@ -71,7 +72,14 @@ export class Configurer extends VDomRenderer { suggestions.

@@ -83,7 +91,14 @@ export class Configurer extends VDomRenderer { Whether to enable continuous hinting (Hinterland mode). @@ -158,6 +173,13 @@ export class Configurer extends VDomRenderer { ); } + protected onThemeChanged = (evt: React.ChangeEvent) => { + const { value } = evt.currentTarget as HTMLInputElement; + this.model.iconsThemeManager.set_theme(value); + }; + + // renderers + protected renderLicense(license: ILicenseInfo, key: number) { return ( @@ -213,6 +235,26 @@ export namespace Configurer { _icons: TThemeKindIcons; _kinds: string[]; _themes: TThemeMap; + _settings: FeatureSettings; + + get settings() { + return this._settings; + } + + set settings(settings) { + if (this._settings) { + this._settings.changed.disconnect(this._onSettingsChanged, this); + } + this._settings = settings; + if (this._settings) { + this._settings.changed.connect(this._onSettingsChanged, this); + } + this.stateChanged.emit(void 0); + } + + _onSettingsChanged() { + this.stateChanged.emit(void 0); + } get theme_ids() { return this._theme_ids; diff --git a/packages/jupyterlab-lsp/src/features/completion/index.ts b/packages/jupyterlab-lsp/src/features/completion/index.ts index 24dcdeec5..3333b3aa8 100644 --- a/packages/jupyterlab-lsp/src/features/completion/index.ts +++ b/packages/jupyterlab-lsp/src/features/completion/index.ts @@ -70,6 +70,17 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { iconsThemeManager ); + featureManager.register({ + feature: { + editorIntegrationFactory: new Map([['CodeMirrorEditor', CompletionCM]]), + id: FEATURE_ID, + name: 'LSP Completion', + labIntegration: labIntegration, + settings: settings + } + }); + + // commands app.commands.addCommand(CommandIds.setTheme, { execute: (args: Partial) => settings.set('theme', args.theme) @@ -82,6 +93,7 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { const { Configurer } = await import('./config'); const model = new Configurer.Model(); model.iconsThemeManager = iconsThemeManager; + model.settings = settings; const content = new Configurer(model); const main = new MainAreaWidget({ content }); main.title.label = label; @@ -94,15 +106,5 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { category: LSP_CATEGORY, command: CommandIds.configure }); - - featureManager.register({ - feature: { - editorIntegrationFactory: new Map([['CodeMirrorEditor', CompletionCM]]), - id: FEATURE_ID, - name: 'LSP Completion', - labIntegration: labIntegration, - settings: settings - } - }); } }; From ddd314c09b37649c721d8b6def6f1f4b26675aba Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 21:29:41 -0400 Subject: [PATCH 08/35] start branded icons --- .../src/features/completion/config.tsx | 16 ++++++++-------- .../jupyterlab-lsp/style/config/completion.css | 2 +- .../theme-vscode/style/icons/branded/file.svg | 3 +++ .../theme-vscode/style/icons/branded/folder.svg | 3 +++ .../theme-vscode/style/icons/branded/json.svg | 3 +++ .../theme-vscode/style/icons/branded/note.svg | 3 +++ .../style/icons/branded/references.svg | 3 +++ .../style/icons/branded/symbol-class.svg | 3 +++ .../style/icons/branded/symbol-color.svg | 3 +++ .../style/icons/branded/symbol-constant.svg | 4 ++++ .../icons/branded/symbol-enumerator-member.svg | 3 +++ .../style/icons/branded/symbol-enumerator.svg | 3 +++ .../style/icons/branded/symbol-event.svg | 3 +++ .../style/icons/branded/symbol-field.svg | 3 +++ .../style/icons/branded/symbol-interface.svg | 3 +++ .../style/icons/branded/symbol-keyword.svg | 3 +++ .../style/icons/branded/symbol-method.svg | 3 +++ .../style/icons/branded/symbol-operator.svg | 3 +++ .../style/icons/branded/symbol-parameter.svg | 3 +++ .../style/icons/branded/symbol-property.svg | 3 +++ .../style/icons/branded/symbol-ruler.svg | 3 +++ .../style/icons/branded/symbol-snippet.svg | 3 +++ .../style/icons/branded/symbol-string.svg | 3 +++ .../style/icons/branded/symbol-structure.svg | 3 +++ .../style/icons/branded/symbol-variable.svg | 3 +++ 25 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 packages/theme-vscode/style/icons/branded/file.svg create mode 100644 packages/theme-vscode/style/icons/branded/folder.svg create mode 100644 packages/theme-vscode/style/icons/branded/json.svg create mode 100644 packages/theme-vscode/style/icons/branded/note.svg create mode 100644 packages/theme-vscode/style/icons/branded/references.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-class.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-color.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-constant.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-enumerator-member.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-enumerator.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-event.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-field.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-interface.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-keyword.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-method.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-operator.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-parameter.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-property.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-ruler.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-snippet.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-string.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-structure.svg create mode 100644 packages/theme-vscode/style/icons/branded/symbol-variable.svg diff --git a/packages/jupyterlab-lsp/src/features/completion/config.tsx b/packages/jupyterlab-lsp/src/features/completion/config.tsx index d389a5771..ef81645dd 100644 --- a/packages/jupyterlab-lsp/src/features/completion/config.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/config.tsx @@ -67,10 +67,6 @@ export class Configurer extends VDomRenderer {

Show Documentation Box

-
- Whether to show documentation box next to the completion - suggestions. -
+
+ Whether to show documentation box next to the completion + suggestions. +

Continuous Hinting

-
- Whether to enable continuous hinting (Hinterland mode). -
+
+ Whether to enable continuous hinting (Hinterland mode). +
@@ -156,7 +156,6 @@ export class Configurer extends VDomRenderer {

TBD: Icon Color Scheme

-
Pick an icon color scheme
    {['colorful', 'monochrome'].map(v => (
  • @@ -167,6 +166,7 @@ export class Configurer extends VDomRenderer {
    • ))}
+
Pick an icon color scheme
diff --git a/packages/jupyterlab-lsp/style/config/completion.css b/packages/jupyterlab-lsp/style/config/completion.css index 62dcd3d25..fabfe871d 100644 --- a/packages/jupyterlab-lsp/style/config/completion.css +++ b/packages/jupyterlab-lsp/style/config/completion.css @@ -1,4 +1,4 @@ -.jp-LSPCompletion-Config h1 { +.jp-RenderedHTMLCommon .jp-LSPCompletion-Config h1 { padding-top: 0; margin-top: 0; } diff --git a/packages/theme-vscode/style/icons/branded/file.svg b/packages/theme-vscode/style/icons/branded/file.svg new file mode 100644 index 000000000..729464aeb --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/file.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/folder.svg b/packages/theme-vscode/style/icons/branded/folder.svg new file mode 100644 index 000000000..3ae24269b --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/folder.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/json.svg b/packages/theme-vscode/style/icons/branded/json.svg new file mode 100644 index 000000000..acf745663 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/json.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/note.svg b/packages/theme-vscode/style/icons/branded/note.svg new file mode 100644 index 000000000..25b274349 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/note.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/references.svg b/packages/theme-vscode/style/icons/branded/references.svg new file mode 100644 index 000000000..8ed4b7895 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/references.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-class.svg b/packages/theme-vscode/style/icons/branded/symbol-class.svg new file mode 100644 index 000000000..78a07783d --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-class.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-color.svg b/packages/theme-vscode/style/icons/branded/symbol-color.svg new file mode 100644 index 000000000..e9dabe0af --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-color.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-constant.svg b/packages/theme-vscode/style/icons/branded/symbol-constant.svg new file mode 100644 index 000000000..d83ba9e63 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-constant.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-enumerator-member.svg b/packages/theme-vscode/style/icons/branded/symbol-enumerator-member.svg new file mode 100644 index 000000000..c53fcf3f5 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-enumerator-member.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-enumerator.svg b/packages/theme-vscode/style/icons/branded/symbol-enumerator.svg new file mode 100644 index 000000000..c105ab829 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-enumerator.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-event.svg b/packages/theme-vscode/style/icons/branded/symbol-event.svg new file mode 100644 index 000000000..37a2b5712 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-event.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-field.svg b/packages/theme-vscode/style/icons/branded/symbol-field.svg new file mode 100644 index 000000000..d0f875b09 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-field.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-interface.svg b/packages/theme-vscode/style/icons/branded/symbol-interface.svg new file mode 100644 index 000000000..e43888b76 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-interface.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-keyword.svg b/packages/theme-vscode/style/icons/branded/symbol-keyword.svg new file mode 100644 index 000000000..71f80c1cf --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-keyword.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-method.svg b/packages/theme-vscode/style/icons/branded/symbol-method.svg new file mode 100644 index 000000000..31e1d22b4 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-method.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-operator.svg b/packages/theme-vscode/style/icons/branded/symbol-operator.svg new file mode 100644 index 000000000..b8315493c --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-operator.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-parameter.svg b/packages/theme-vscode/style/icons/branded/symbol-parameter.svg new file mode 100644 index 000000000..c1369ebba --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-parameter.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-property.svg b/packages/theme-vscode/style/icons/branded/symbol-property.svg new file mode 100644 index 000000000..9344b4651 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-property.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-ruler.svg b/packages/theme-vscode/style/icons/branded/symbol-ruler.svg new file mode 100644 index 000000000..08d31fbb5 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-ruler.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-snippet.svg b/packages/theme-vscode/style/icons/branded/symbol-snippet.svg new file mode 100644 index 000000000..69fb2715c --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-snippet.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-string.svg b/packages/theme-vscode/style/icons/branded/symbol-string.svg new file mode 100644 index 000000000..7294f9b20 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-string.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-structure.svg b/packages/theme-vscode/style/icons/branded/symbol-structure.svg new file mode 100644 index 000000000..d5b51c3db --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-structure.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/theme-vscode/style/icons/branded/symbol-variable.svg b/packages/theme-vscode/style/icons/branded/symbol-variable.svg new file mode 100644 index 000000000..e197cdc80 --- /dev/null +++ b/packages/theme-vscode/style/icons/branded/symbol-variable.svg @@ -0,0 +1,3 @@ + + + From 2db7d46fdf1f4cd591802d1d3f06f5b5578b9388 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 23:04:25 -0400 Subject: [PATCH 09/35] lazy load icons by theme --- packages/completion-theme/src/index.ts | 87 +++++------ packages/completion-theme/src/types.ts | 24 ++- .../jupyterlab-lsp/schema/completion.json | 7 + .../src/features/completion/completion.ts | 9 +- .../src/features/completion/config.tsx | 58 ++++--- packages/theme-material/src/icons.ts | 55 +++++++ packages/theme-material/src/index.ts | 91 +++-------- packages/theme-vscode/src/icons.ts | 53 +++++++ packages/theme-vscode/src/index.ts | 147 ++---------------- .../theme-vscode/style/icons/dark/file.svg | 3 - .../theme-vscode/style/icons/dark/folder.svg | 3 - .../theme-vscode/style/icons/dark/json.svg | 3 - .../theme-vscode/style/icons/dark/note.svg | 3 - .../style/icons/dark/references.svg | 3 - .../style/icons/dark/symbol-class.svg | 3 - .../style/icons/dark/symbol-color.svg | 3 - .../style/icons/dark/symbol-constant.svg | 4 - .../icons/dark/symbol-enumerator-member.svg | 3 - .../style/icons/dark/symbol-enumerator.svg | 3 - .../style/icons/dark/symbol-event.svg | 3 - .../style/icons/dark/symbol-field.svg | 3 - .../style/icons/dark/symbol-interface.svg | 3 - .../style/icons/dark/symbol-keyword.svg | 3 - .../style/icons/dark/symbol-method.svg | 3 - .../style/icons/dark/symbol-operator.svg | 3 - .../style/icons/dark/symbol-parameter.svg | 3 - .../style/icons/dark/symbol-property.svg | 3 - .../style/icons/dark/symbol-ruler.svg | 3 - .../style/icons/dark/symbol-snippet.svg | 3 - .../style/icons/dark/symbol-string.svg | 3 - .../style/icons/dark/symbol-structure.svg | 3 - .../style/icons/dark/symbol-variable.svg | 3 - .../style/icons/{branded => }/file.svg | 0 .../style/icons/{branded => }/folder.svg | 0 .../style/icons/{branded => }/json.svg | 0 .../theme-vscode/style/icons/light/file.svg | 3 - .../theme-vscode/style/icons/light/folder.svg | 10 -- .../theme-vscode/style/icons/light/json.svg | 3 - .../theme-vscode/style/icons/light/note.svg | 3 - .../style/icons/light/references.svg | 3 - .../style/icons/light/symbol-class.svg | 3 - .../style/icons/light/symbol-color.svg | 3 - .../style/icons/light/symbol-constant.svg | 4 - .../icons/light/symbol-enumerator-member.svg | 3 - .../style/icons/light/symbol-enumerator.svg | 3 - .../style/icons/light/symbol-event.svg | 3 - .../style/icons/light/symbol-field.svg | 3 - .../style/icons/light/symbol-interface.svg | 3 - .../style/icons/light/symbol-keyword.svg | 3 - .../style/icons/light/symbol-method.svg | 3 - .../style/icons/light/symbol-operator.svg | 3 - .../style/icons/light/symbol-parameter.svg | 3 - .../style/icons/light/symbol-property.svg | 3 - .../style/icons/light/symbol-ruler.svg | 3 - .../style/icons/light/symbol-snippet.svg | 3 - .../style/icons/light/symbol-string.svg | 3 - .../style/icons/light/symbol-structure.svg | 3 - .../style/icons/light/symbol-variable.svg | 3 - .../style/icons/{branded => }/note.svg | 0 .../style/icons/{branded => }/references.svg | 0 .../icons/{branded => }/symbol-class.svg | 0 .../icons/{branded => }/symbol-color.svg | 0 .../icons/{branded => }/symbol-constant.svg | 0 .../symbol-enumerator-member.svg | 0 .../icons/{branded => }/symbol-enumerator.svg | 0 .../icons/{branded => }/symbol-event.svg | 0 .../icons/{branded => }/symbol-field.svg | 0 .../icons/{branded => }/symbol-interface.svg | 0 .../icons/{branded => }/symbol-keyword.svg | 0 .../icons/{branded => }/symbol-method.svg | 0 .../icons/{branded => }/symbol-operator.svg | 0 .../icons/{branded => }/symbol-parameter.svg | 0 .../icons/{branded => }/symbol-property.svg | 0 .../icons/{branded => }/symbol-ruler.svg | 0 .../icons/{branded => }/symbol-snippet.svg | 0 .../icons/{branded => }/symbol-string.svg | 0 .../icons/{branded => }/symbol-structure.svg | 0 .../icons/{branded => }/symbol-variable.svg | 0 78 files changed, 230 insertions(+), 448 deletions(-) create mode 100644 packages/theme-material/src/icons.ts create mode 100644 packages/theme-vscode/src/icons.ts delete mode 100644 packages/theme-vscode/style/icons/dark/file.svg delete mode 100644 packages/theme-vscode/style/icons/dark/folder.svg delete mode 100644 packages/theme-vscode/style/icons/dark/json.svg delete mode 100644 packages/theme-vscode/style/icons/dark/note.svg delete mode 100644 packages/theme-vscode/style/icons/dark/references.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-class.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-color.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-constant.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-enumerator-member.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-enumerator.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-event.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-field.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-interface.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-keyword.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-method.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-operator.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-parameter.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-property.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-ruler.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-snippet.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-string.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-structure.svg delete mode 100644 packages/theme-vscode/style/icons/dark/symbol-variable.svg rename packages/theme-vscode/style/icons/{branded => }/file.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/folder.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/json.svg (100%) delete mode 100644 packages/theme-vscode/style/icons/light/file.svg delete mode 100644 packages/theme-vscode/style/icons/light/folder.svg delete mode 100644 packages/theme-vscode/style/icons/light/json.svg delete mode 100644 packages/theme-vscode/style/icons/light/note.svg delete mode 100644 packages/theme-vscode/style/icons/light/references.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-class.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-color.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-constant.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-enumerator-member.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-enumerator.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-event.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-field.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-interface.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-keyword.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-method.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-operator.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-parameter.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-property.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-ruler.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-snippet.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-string.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-structure.svg delete mode 100644 packages/theme-vscode/style/icons/light/symbol-variable.svg rename packages/theme-vscode/style/icons/{branded => }/note.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/references.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-class.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-color.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-constant.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-enumerator-member.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-enumerator.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-event.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-field.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-interface.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-keyword.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-method.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-operator.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-parameter.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-property.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-ruler.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-snippet.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-string.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-structure.svg (100%) rename packages/theme-vscode/style/icons/{branded => }/symbol-variable.svg (100%) diff --git a/packages/completion-theme/src/index.ts b/packages/completion-theme/src/index.ts index e06582bfa..5c0b8cc9a 100644 --- a/packages/completion-theme/src/index.ts +++ b/packages/completion-theme/src/index.ts @@ -1,6 +1,4 @@ -import { Signal } from '@lumino/signaling'; import { kernelIcon, LabIcon } from '@jupyterlab/ui-components'; -import { ICommandPalette, IThemeManager } from '@jupyterlab/apputils'; import { JupyterFrontEndPlugin } from '@jupyterlab/application'; import { @@ -12,31 +10,19 @@ import { KernelKind } from './types'; +const RE_ICON_THEME_CLASS = /jp-icon[^" ]+/g; +const GREYSCALE_CLASS = 'jp-icon4'; + export class CompletionThemeManager implements ILSPCompletionThemeManager { protected current_icons: Map; protected themes: Map; private current_theme_id: string; private icons_cache: Map; - private _current_theme_changed: Signal; + private color_scheme: string; - constructor(protected themeManager: IThemeManager) { - this._current_theme_changed = new Signal(this); + constructor() { this.themes = new Map(); this.icons_cache = new Map(); - themeManager.themeChanged.connect(this.update_icons_set, this); - } - - get current_theme_changed() { - return this._current_theme_changed; - } - - protected is_theme_light() { - const current = this.themeManager.theme; - if (!current) { - // assume true by default - return true; - } - return this.themeManager.isLight(current); } theme_ids() { @@ -51,26 +37,23 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { return this.themes.get(id); } - get_iconset(theme: ICompletionTheme): Map { - const icons_sets = theme.icons; - const dark_mode_and_dark_supported = - !this.is_theme_light() && typeof icons_sets.dark !== 'undefined'; - const set: ICompletionIconSet = dark_mode_and_dark_supported - ? icons_sets.dark - : icons_sets.light; - const icons: Map = new Map(); - const mode = this.is_theme_light() ? 'light' : 'dark'; - for (let [completion_kind, svg] of Object.entries(set)) { - let name = - 'lsp:' + theme.id + '-' + completion_kind.toLowerCase() + '-' + mode; - let icon: LabIcon; - if (this.icons_cache.has(name)) { - icon = this.icons_cache.get(name); - } else { - icon = new LabIcon({ - name: name, - svgstr: svg - }); + async get_icons( + theme: ICompletionTheme, + color_scheme: string + ): Promise> { + const icons = new Map(); + + for (const [completion_kind, raw] of Object.entries( + await theme.icons.svg() + )) { + const name = `lsp:${theme.id}-${completion_kind}-${color_scheme}`.toLowerCase(); + let icon = this.icons_cache.get(name); + let svgstr = raw; + if (color_scheme === 'greyscale') { + svgstr = svgstr.replace(RE_ICON_THEME_CLASS, GREYSCALE_CLASS); + } + if (icon == null) { + icon = new LabIcon({ name, svgstr }); this.icons_cache.set(name, icon); } icons.set(completion_kind as keyof ICompletionIconSet, icon); @@ -78,11 +61,22 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { return icons; } - protected update_icons_set() { + get_color_scheme() { + return this.color_scheme; + } + + set_color_scheme(color_scheme: string) { + this.color_scheme = color_scheme; + } + + protected async update_icons_set() { if (this.current_theme === null) { return; } - this.current_icons = this.get_iconset(this.current_theme); + this.current_icons = await this.get_icons( + this.current_theme, + this.color_scheme + ); } get_icon(type: string): LabIcon { @@ -107,7 +101,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { return COMPLETER_THEME_PREFIX + this.current_theme_id; } - set_theme(id: string | null) { + async set_theme(id: string | null) { if (this.current_theme_id) { document.body.classList.remove(this.current_theme_class); } @@ -118,8 +112,7 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { } this.current_theme_id = id; document.body.classList.add(this.current_theme_class); - this.update_icons_set(); - this._current_theme_changed.emit(void 0); + await this.update_icons_set(); } protected get current_theme(): ICompletionTheme | null { @@ -138,15 +131,13 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { ); } this.themes.set(theme.id, theme); - this.update_icons_set(); } } export const COMPLETION_THEME_MANAGER: JupyterFrontEndPlugin = { id: PLUGIN_ID, - requires: [IThemeManager, ICommandPalette], - activate: (app, themeManager: IThemeManager) => { - let manager = new CompletionThemeManager(themeManager); + activate: app => { + let manager = new CompletionThemeManager(); return manager; }, provides: ILSPCompletionThemeManager, diff --git a/packages/completion-theme/src/types.ts b/packages/completion-theme/src/types.ts index f6ae1fbec..6dd6c330a 100644 --- a/packages/completion-theme/src/types.ts +++ b/packages/completion-theme/src/types.ts @@ -1,6 +1,5 @@ import { Token } from '@lumino/coreutils'; import { LabIcon } from '@jupyterlab/ui-components'; -import { Signal } from '@lumino/signaling'; export const COMPLETER_THEME_PREFIX = 'lsp-completer-theme-'; @@ -86,15 +85,11 @@ export interface ICompletionTheme { /** * Short name of the license of the icons included. */ - licence: ILicenseInfo; + license: ILicenseInfo; /** - * The version to be used in the light mode. + * The icons as SVG strings, keyed by completion kind. */ - light: ICompletionIconSet; - /** - * The version to be used in the dark mode. - */ - dark?: ICompletionIconSet; + svg(): Promise; /** * Icon properties to be set on each of the icons. * NOTE: setting className here will not work, as @@ -114,15 +109,18 @@ export interface ILSPCompletionThemeManager { get_theme(theme_id: string): ICompletionTheme; - current_theme_changed: Signal; - get_current_theme_id(): string; + set_color_scheme(scheme_id: string): void; + + get_color_scheme(): string; + register_theme(theme: ICompletionTheme): void; - get_iconset( - theme: ICompletionTheme - ): Map; + get_icons( + theme: ICompletionTheme, + color_scheme: string + ): Promise>; theme_ids(): string[]; } diff --git a/packages/jupyterlab-lsp/schema/completion.json b/packages/jupyterlab-lsp/schema/completion.json index f5cd8e2f1..5d2669363 100644 --- a/packages/jupyterlab-lsp/schema/completion.json +++ b/packages/jupyterlab-lsp/schema/completion.json @@ -31,6 +31,13 @@ "type": ["string", "null"], "default": "vscode", "description": "The identifier of a completer theme with icons which indicate the kind of completion. Set to null to disable icons." + }, + "colorScheme": { + "title": "Icon Color Schema", + "type": "string", + "enum": ["themed", "greyscale"], + "default": "themed", + "description": "Colors to use for completion icons. One of: 'themed' or 'greyscale'." } }, "jupyter.lab.shortcuts": [] diff --git a/packages/jupyterlab-lsp/src/features/completion/completion.ts b/packages/jupyterlab-lsp/src/features/completion/completion.ts index 333efc2d5..9b82ee728 100644 --- a/packages/jupyterlab-lsp/src/features/completion/completion.ts +++ b/packages/jupyterlab-lsp/src/features/completion/completion.ts @@ -77,14 +77,11 @@ export class CompletionLabIntegration implements IFeatureLabIntegration { ) { adapterManager.adapterChanged.connect(this.swap_adapter, this); settings.changed.connect(() => { + completionThemeManager.set_color_scheme( + this.settings.composite.colorScheme + ); completionThemeManager.set_theme(this.settings.composite.theme); }); - completionThemeManager.current_theme_changed.connect(() => { - const new_theme_id = completionThemeManager.get_current_theme_id(); - if (this.settings.composite.theme !== new_theme_id) { - this.settings.set('theme', new_theme_id); - } - }); } private swap_adapter( diff --git a/packages/jupyterlab-lsp/src/features/completion/config.tsx b/packages/jupyterlab-lsp/src/features/completion/config.tsx index ef81645dd..454c44d2f 100644 --- a/packages/jupyterlab-lsp/src/features/completion/config.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/config.tsx @@ -22,8 +22,6 @@ const CONFIG_CLASS = 'jp-LSPCompletion-Config'; export class Configurer extends VDomRenderer { protected render() { const { theme_ids, kinds, icons, themes, settings } = this.model; - const currentThemeId = this.model.iconsThemeManager.get_current_theme_id(); - const { composite } = settings; this.addClass(CONFIG_CLASS); @@ -111,7 +109,7 @@ export class Configurer extends VDomRenderer {

- Icon Theme {currentThemeId} + Icon Theme {composite.theme}

Pick an icon theme to use for symbol references, such as @@ -127,8 +125,10 @@ export class Configurer extends VDomRenderer { type="radio" defaultValue={id} name="current-theme" - checked={id === currentThemeId} - onChange={this.onThemeChanged} + checked={id === composite.theme} + onChange={e => + settings.set('theme', e.currentTarget.value) + } /> ))} @@ -142,7 +142,7 @@ export class Configurer extends VDomRenderer { License {theme_ids.map((id, i) => - this.renderLicense(themes.get(id).icons.licence, i) + this.renderLicense(themes.get(id).icons.license, i) )} @@ -154,18 +154,19 @@ export class Configurer extends VDomRenderer {

- TBD: Icon Color Scheme + Icon Color Scheme

-
    - {['colorful', 'monochrome'].map(v => ( -
  • - -
    • - ))} -
+ {['themed', 'greyscale'].map(v => ( + + ))}
Pick an icon color scheme
@@ -173,13 +174,7 @@ export class Configurer extends VDomRenderer { ); } - protected onThemeChanged = (evt: React.ChangeEvent) => { - const { value } = evt.currentTarget as HTMLInputElement; - this.model.iconsThemeManager.set_theme(value); - }; - // renderers - protected renderLicense(license: ILicenseInfo, key: number) { return ( @@ -253,7 +248,7 @@ export namespace Configurer { } _onSettingsChanged() { - this.stateChanged.emit(void 0); + this.refresh().catch(console.warn); } get theme_ids() { @@ -279,20 +274,17 @@ export namespace Configurer { set iconsThemeManager(manager) { this._manager = manager; if (manager != null) { - this.iconsThemeManager.current_theme_changed.connect(() => { - this.stateChanged.emit(void 0); - }); - this.refresh(); + this.refresh().catch(console.warn); } else { this._theme_ids = []; this._kinds = []; this._icons = new Map(); this._themes = new Map(); + this.stateChanged.emit(void 0); } - this.stateChanged.emit(void 0); } - refresh() { + async refresh() { const { iconsThemeManager: manager } = this; let theme_ids = manager.theme_ids(); theme_ids.sort(); @@ -304,7 +296,10 @@ export namespace Configurer { for (const id of theme_ids) { const theme = manager.get_theme(id); themes.set(id, theme); - const theme_icons = manager.get_iconset(theme); + const theme_icons = await manager.get_icons( + theme, + this.settings?.composite.colorScheme + ); for (const [kind, icon] of theme_icons.entries()) { icons.set(`${kind}-${id}`, icon as LabIcon); if (kinds.indexOf(kind) < 0) { @@ -318,6 +313,7 @@ export namespace Configurer { this._kinds = kinds; this._icons = icons; this._themes = themes; + this.stateChanged.emit(void 0); } } } diff --git a/packages/theme-material/src/icons.ts b/packages/theme-material/src/icons.ts new file mode 100644 index 000000000..7e9b67651 --- /dev/null +++ b/packages/theme-material/src/icons.ts @@ -0,0 +1,55 @@ +import { ICompletionIconSet } from '@krassowski/completion-theme/lib/types'; + +import alphabetical from '../style/icons/alphabetical.svg'; +import sitemap from '../style/icons/sitemap.svg'; +import palette from '../style/icons/palette-outline.svg'; +import plus_minus from '../style/icons/plus-minus-variant.svg'; +import beaker from '../style/icons/beaker-outline.svg'; +import module from '../style/icons/package-variant-closed.svg'; +import func from '../style/icons/function.svg'; +import func_variant from '../style/icons/function-variant.svg'; +import connection from '../style/icons/transit-connection-horizontal.svg'; +import value from '../style/icons/text.svg'; +import list_numbered from '../style/icons/format-list-numbered-rtl.svg'; +import variable from '../style/icons/checkbox-blank-outline.svg'; +import field from '../style/icons/checkbox-blank-circle-outline.svg'; +import hammer_wrench from '../style/icons/hammer-wrench.svg'; +import wrench from '../style/icons/wrench.svg'; +import file from '../style/icons/file-outline.svg'; +import file_replace from '../style/icons/file-replace-outline.svg'; +import folder from '../style/icons/folder-outline.svg'; +import number from '../style/icons/numeric.svg'; +import shield from '../style/icons/shield-outline.svg'; +import structure from '../style/icons/file-tree.svg'; +import lightning from '../style/icons/flash-outline.svg'; +import key from '../style/icons/key.svg'; +import snippet from '../style/icons/border-none-variant.svg'; +import alpha_t_over_code from '../style/icons/alpha-t-and-code.svg'; + +export const iconSet: ICompletionIconSet = { + Class: structure, + Color: palette, + Constant: shield, + Constructor: hammer_wrench, + Enum: list_numbered, + EnumMember: number, + Event: lightning, + Field: field, + File: file, + Folder: folder, + Function: func_variant, + Interface: connection, + Keyword: key, + Method: func, + Module: module, + Operator: plus_minus, + Property: wrench, + Reference: file_replace, + Snippet: snippet, + Struct: sitemap, + Text: alphabetical, + TypeParameter: alpha_t_over_code, + Unit: beaker, + Value: value, + Variable: variable +}; diff --git a/packages/theme-material/src/index.ts b/packages/theme-material/src/index.ts index d7f27588b..6606672eb 100644 --- a/packages/theme-material/src/index.ts +++ b/packages/theme-material/src/index.ts @@ -1,78 +1,8 @@ import { JupyterFrontEndPlugin } from '@jupyterlab/application'; -import { - ICompletionIconSet, - ICompletionTheme, - ILSPCompletionThemeManager -} from '@krassowski/completion-theme/lib/types'; -import '../style/completer.css'; - -import alphabetical from '../style/icons/alphabetical.svg'; -import sitemap from '../style/icons/sitemap.svg'; -import palette from '../style/icons/palette-outline.svg'; -import plus_minus from '../style/icons/plus-minus-variant.svg'; -import beaker from '../style/icons/beaker-outline.svg'; -import module from '../style/icons/package-variant-closed.svg'; -import func from '../style/icons/function.svg'; -import func_variant from '../style/icons/function-variant.svg'; -import connection from '../style/icons/transit-connection-horizontal.svg'; -import value from '../style/icons/text.svg'; -import list_numbered from '../style/icons/format-list-numbered-rtl.svg'; -import variable from '../style/icons/checkbox-blank-outline.svg'; -import field from '../style/icons/checkbox-blank-circle-outline.svg'; -import hammer_wrench from '../style/icons/hammer-wrench.svg'; -import wrench from '../style/icons/wrench.svg'; -import file from '../style/icons/file-outline.svg'; -import file_replace from '../style/icons/file-replace-outline.svg'; -import folder from '../style/icons/folder-outline.svg'; -import number from '../style/icons/numeric.svg'; -import shield from '../style/icons/shield-outline.svg'; -import structure from '../style/icons/file-tree.svg'; -import lightning from '../style/icons/flash-outline.svg'; -import key from '../style/icons/key.svg'; -import snippet from '../style/icons/border-none-variant.svg'; -import alpha_t_over_code from '../style/icons/alpha-t-and-code.svg'; -const default_set: ICompletionIconSet = { - Text: alphabetical, - Method: func, - Function: func_variant, - Constructor: hammer_wrench, - Field: field, - Variable: variable, - Class: structure, - Interface: connection, - Module: module, - Property: wrench, - Unit: beaker, - Value: value, - Enum: list_numbered, - Keyword: key, - Snippet: snippet, - Color: palette, - File: file, - Reference: file_replace, - Folder: folder, - EnumMember: number, - Constant: shield, - Struct: sitemap, - Event: lightning, - Operator: plus_minus, - TypeParameter: alpha_t_over_code -}; +import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; -const completionTheme: ICompletionTheme = { - id: 'material', - name: 'Material Design', - icons: { - licence: { - name: 'SIL Open Font License 1.1', - abbreviation: 'OFL', - licensor: 'Austin Andrews and Google', - link: 'https://github.com/Templarian/MaterialDesign/blob/master/LICENSE' - }, - light: default_set - } -}; +import '../style/completer.css'; export const plugin: JupyterFrontEndPlugin = { // while for now it only styles completion, @@ -81,7 +11,22 @@ export const plugin: JupyterFrontEndPlugin = { id: '@krassowski/theme-material', requires: [ILSPCompletionThemeManager], activate: (app, completionThemeManager: ILSPCompletionThemeManager) => { - completionThemeManager.register_theme(completionTheme); + completionThemeManager.register_theme({ + id: 'material', + name: 'Material Design', + icons: { + license: { + name: 'SIL Open Font License 1.1', + abbreviation: 'OFL', + licensor: 'Austin Andrews and Google', + link: + 'https://github.com/Templarian/MaterialDesign/blob/master/LICENSE' + }, + svg: async () => + (await import(/* webpackChunkName: "theme-material" */ './icons')) + .iconSet + } + }); }, autoStart: true }; diff --git a/packages/theme-vscode/src/icons.ts b/packages/theme-vscode/src/icons.ts new file mode 100644 index 000000000..b62029ee3 --- /dev/null +++ b/packages/theme-vscode/src/icons.ts @@ -0,0 +1,53 @@ +import { ICompletionIconSet } from '@krassowski/completion-theme/lib/types'; + +import symbol_string from '../style/icons/symbol-string.svg'; +import symbol_method from '../style/icons/symbol-method.svg'; +import symbol_field from '../style/icons/symbol-field.svg'; +import symbol_variable from '../style/icons/symbol-variable.svg'; +import symbol_class from '../style/icons/symbol-class.svg'; +import symbol_interface from '../style/icons/symbol-interface.svg'; +import json from '../style/icons/json.svg'; +import symbol_property from '../style/icons/symbol-property.svg'; +import symbol_ruler from '../style/icons/symbol-ruler.svg'; +import value from '../style/icons/note.svg'; +import symbol_enumerator from '../style/icons/symbol-enumerator.svg'; +import symbol_keyword from '../style/icons/symbol-keyword.svg'; +import symbol_snippet from '../style/icons/symbol-snippet.svg'; +import symbol_color from '../style/icons/symbol-color.svg'; +import file from '../style/icons/file.svg'; +import references from '../style/icons/references.svg'; +import folder from '../style/icons/folder.svg'; +import symbol_enumerator_member from '../style/icons/symbol-enumerator-member.svg'; +import symbol_constant from '../style/icons/symbol-constant.svg'; +import symbol_structure from '../style/icons/symbol-structure.svg'; +import symbol_event from '../style/icons/symbol-event.svg'; +import symbol_operator from '../style/icons/symbol-operator.svg'; +import symbol_parameter from '../style/icons/symbol-parameter.svg'; + +export const iconSet: ICompletionIconSet = { + Class: symbol_class, + Color: symbol_color, + Constant: symbol_constant, + Constructor: symbol_method, + Enum: symbol_enumerator, + EnumMember: symbol_enumerator_member, + Event: symbol_event, + Field: symbol_field, + File: file, + Folder: folder, + Function: symbol_method, + Interface: symbol_interface, + Keyword: symbol_keyword, + Method: symbol_method, + Module: json, + Operator: symbol_operator, + Property: symbol_property, + Reference: references, + Snippet: symbol_snippet, + Struct: symbol_structure, + Text: symbol_string, + TypeParameter: symbol_parameter, + Unit: symbol_ruler, + Value: value, + Variable: symbol_variable +}; diff --git a/packages/theme-vscode/src/index.ts b/packages/theme-vscode/src/index.ts index c0e897bb8..8a948f547 100644 --- a/packages/theme-vscode/src/index.ts +++ b/packages/theme-vscode/src/index.ts @@ -1,141 +1,28 @@ import { JupyterFrontEndPlugin } from '@jupyterlab/application'; -import '../style/completer.css'; - -/** - * Light theme variants - */ -import symbol_string from '../style/icons/light/symbol-string.svg'; -import symbol_method from '../style/icons/light/symbol-method.svg'; -import symbol_field from '../style/icons/light/symbol-field.svg'; -import symbol_variable from '../style/icons/light/symbol-variable.svg'; -import symbol_class from '../style/icons/light/symbol-class.svg'; -import symbol_interface from '../style/icons/light/symbol-interface.svg'; -import json from '../style/icons/light/json.svg'; -import symbol_property from '../style/icons/light/symbol-property.svg'; -import symbol_ruler from '../style/icons/light/symbol-ruler.svg'; -import value from '../style/icons/light/note.svg'; -import symbol_enumerator from '../style/icons/light/symbol-enumerator.svg'; -import symbol_keyword from '../style/icons/light/symbol-keyword.svg'; -import symbol_snippet from '../style/icons/light/symbol-snippet.svg'; -import symbol_color from '../style/icons/light/symbol-color.svg'; -import file from '../style/icons/light/file.svg'; -import references from '../style/icons/light/references.svg'; -import folder from '../style/icons/light/folder.svg'; -import symbol_enumerator_member from '../style/icons/light/symbol-enumerator-member.svg'; -import symbol_constant from '../style/icons/light/symbol-constant.svg'; -import symbol_structure from '../style/icons/light/symbol-structure.svg'; -import symbol_event from '../style/icons/light/symbol-event.svg'; -import symbol_operator from '../style/icons/light/symbol-operator.svg'; -import symbol_parameter from '../style/icons/light/symbol-parameter.svg'; - -/** - * Dark theme variants - */ -import dark_symbol_string from '../style/icons/dark/symbol-string.svg'; -import dark_symbol_method from '../style/icons/dark/symbol-method.svg'; -import dark_symbol_field from '../style/icons/dark/symbol-field.svg'; -import dark_symbol_variable from '../style/icons/dark/symbol-variable.svg'; -import dark_symbol_class from '../style/icons/dark/symbol-class.svg'; -import dark_symbol_interface from '../style/icons/dark/symbol-interface.svg'; -import dark_json from '../style/icons/dark/json.svg'; -import dark_symbol_property from '../style/icons/dark/symbol-property.svg'; -import dark_symbol_ruler from '../style/icons/dark/symbol-ruler.svg'; -import dark_value from '../style/icons/dark/note.svg'; -import dark_symbol_enumerator from '../style/icons/dark/symbol-enumerator.svg'; -import dark_symbol_keyword from '../style/icons/dark/symbol-keyword.svg'; -import dark_symbol_snippet from '../style/icons/dark/symbol-snippet.svg'; -import dark_symbol_color from '../style/icons/dark/symbol-color.svg'; -import dark_file from '../style/icons/dark/file.svg'; -import dark_references from '../style/icons/dark/references.svg'; -import dark_folder from '../style/icons/dark/folder.svg'; -import dark_symbol_enumerator_member from '../style/icons/dark/symbol-enumerator-member.svg'; -import dark_symbol_constant from '../style/icons/dark/symbol-constant.svg'; -import dark_symbol_structure from '../style/icons/dark/symbol-structure.svg'; -import dark_symbol_event from '../style/icons/dark/symbol-event.svg'; -import dark_symbol_operator from '../style/icons/dark/symbol-operator.svg'; -import dark_symbol_parameter from '../style/icons/dark/symbol-parameter.svg'; -import { - ICompletionIconSet, - ICompletionTheme, - ILSPCompletionThemeManager -} from '@krassowski/completion-theme/lib/types'; - -const light_set: ICompletionIconSet = { - Text: symbol_string, - Method: symbol_method, - Function: symbol_method, - Constructor: symbol_method, - Field: symbol_field, - Variable: symbol_variable, - Class: symbol_class, - Interface: symbol_interface, - Module: json, - Property: symbol_property, - Unit: symbol_ruler, - Value: value, - Enum: symbol_enumerator, - Keyword: symbol_keyword, - Snippet: symbol_snippet, - Color: symbol_color, - File: file, - Reference: references, - Folder: folder, - EnumMember: symbol_enumerator_member, - Constant: symbol_constant, - Struct: symbol_structure, - Event: symbol_event, - Operator: symbol_operator, - TypeParameter: symbol_parameter -}; -const dark_set: ICompletionIconSet = { - Text: dark_symbol_string, - Method: dark_symbol_method, - Function: dark_symbol_method, - Constructor: dark_symbol_method, - Field: dark_symbol_field, - Variable: dark_symbol_variable, - Class: dark_symbol_class, - Interface: dark_symbol_interface, - Module: dark_json, - Property: dark_symbol_property, - Unit: dark_symbol_ruler, - Value: dark_value, - Enum: dark_symbol_enumerator, - Keyword: dark_symbol_keyword, - Snippet: dark_symbol_snippet, - Color: dark_symbol_color, - File: dark_file, - Reference: dark_references, - Folder: dark_folder, - EnumMember: dark_symbol_enumerator_member, - Constant: dark_symbol_constant, - Struct: dark_symbol_structure, - Event: dark_symbol_event, - Operator: dark_symbol_operator, - TypeParameter: dark_symbol_parameter -}; +import { ILSPCompletionThemeManager } from '@krassowski/completion-theme/lib/types'; -const completionTheme: ICompletionTheme = { - id: 'vscode', - name: 'VSCode', - icons: { - licence: { - name: 'Creative Commons Attribution 4.0 International Public License', - abbreviation: 'CC 4.0', - licensor: 'Microsoft', - link: 'https://github.com/microsoft/vscode-icons/blob/master/LICENSE' - }, - light: light_set, - dark: dark_set - } -}; +import '../style/completer.css'; export const plugin: JupyterFrontEndPlugin = { id: '@krassowski/theme-vscode', requires: [ILSPCompletionThemeManager], activate: (app, completionThemeManager: ILSPCompletionThemeManager) => { - completionThemeManager.register_theme(completionTheme); + completionThemeManager.register_theme({ + id: 'vscode', + name: 'VSCode', + icons: { + license: { + name: 'Creative Commons Attribution 4.0 International Public License', + abbreviation: 'CC 4.0', + licensor: 'Microsoft', + link: 'https://github.com/microsoft/vscode-icons/blob/master/LICENSE' + }, + svg: async () => + (await import(/* webpackChunkName: "theme-vscode" */ './icons')) + .iconSet + } + }); }, autoStart: true }; diff --git a/packages/theme-vscode/style/icons/dark/file.svg b/packages/theme-vscode/style/icons/dark/file.svg deleted file mode 100644 index 2c4059e7d..000000000 --- a/packages/theme-vscode/style/icons/dark/file.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/folder.svg b/packages/theme-vscode/style/icons/dark/folder.svg deleted file mode 100644 index f3542565c..000000000 --- a/packages/theme-vscode/style/icons/dark/folder.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/json.svg b/packages/theme-vscode/style/icons/dark/json.svg deleted file mode 100644 index 9a725bb41..000000000 --- a/packages/theme-vscode/style/icons/dark/json.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/note.svg b/packages/theme-vscode/style/icons/dark/note.svg deleted file mode 100644 index 2d4300ba2..000000000 --- a/packages/theme-vscode/style/icons/dark/note.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/references.svg b/packages/theme-vscode/style/icons/dark/references.svg deleted file mode 100644 index 9e4c78e37..000000000 --- a/packages/theme-vscode/style/icons/dark/references.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-class.svg b/packages/theme-vscode/style/icons/dark/symbol-class.svg deleted file mode 100644 index 98b467819..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-class.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-color.svg b/packages/theme-vscode/style/icons/dark/symbol-color.svg deleted file mode 100644 index 91469f94f..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-constant.svg b/packages/theme-vscode/style/icons/dark/symbol-constant.svg deleted file mode 100644 index 0e90ecafc..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-constant.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-enumerator-member.svg b/packages/theme-vscode/style/icons/dark/symbol-enumerator-member.svg deleted file mode 100644 index 53735c15f..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-enumerator-member.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-enumerator.svg b/packages/theme-vscode/style/icons/dark/symbol-enumerator.svg deleted file mode 100644 index 2197f6685..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-enumerator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-event.svg b/packages/theme-vscode/style/icons/dark/symbol-event.svg deleted file mode 100644 index 051bef316..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-event.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-field.svg b/packages/theme-vscode/style/icons/dark/symbol-field.svg deleted file mode 100644 index f7b9e28a9..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-field.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-interface.svg b/packages/theme-vscode/style/icons/dark/symbol-interface.svg deleted file mode 100644 index 1d442fb78..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-interface.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-keyword.svg b/packages/theme-vscode/style/icons/dark/symbol-keyword.svg deleted file mode 100644 index 70ba6ea93..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-keyword.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-method.svg b/packages/theme-vscode/style/icons/dark/symbol-method.svg deleted file mode 100644 index cccf5a06a..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-method.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-operator.svg b/packages/theme-vscode/style/icons/dark/symbol-operator.svg deleted file mode 100644 index 06ff14030..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-operator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-parameter.svg b/packages/theme-vscode/style/icons/dark/symbol-parameter.svg deleted file mode 100644 index d923154f1..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-parameter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-property.svg b/packages/theme-vscode/style/icons/dark/symbol-property.svg deleted file mode 100644 index 23e07ffa1..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-property.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-ruler.svg b/packages/theme-vscode/style/icons/dark/symbol-ruler.svg deleted file mode 100644 index 1957dbad3..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-ruler.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-snippet.svg b/packages/theme-vscode/style/icons/dark/symbol-snippet.svg deleted file mode 100644 index 79799f98c..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-snippet.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-string.svg b/packages/theme-vscode/style/icons/dark/symbol-string.svg deleted file mode 100644 index ef5f22650..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-string.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-structure.svg b/packages/theme-vscode/style/icons/dark/symbol-structure.svg deleted file mode 100644 index 13766a5dc..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-structure.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/dark/symbol-variable.svg b/packages/theme-vscode/style/icons/dark/symbol-variable.svg deleted file mode 100644 index 5ee50e0e8..000000000 --- a/packages/theme-vscode/style/icons/dark/symbol-variable.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/branded/file.svg b/packages/theme-vscode/style/icons/file.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/file.svg rename to packages/theme-vscode/style/icons/file.svg diff --git a/packages/theme-vscode/style/icons/branded/folder.svg b/packages/theme-vscode/style/icons/folder.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/folder.svg rename to packages/theme-vscode/style/icons/folder.svg diff --git a/packages/theme-vscode/style/icons/branded/json.svg b/packages/theme-vscode/style/icons/json.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/json.svg rename to packages/theme-vscode/style/icons/json.svg diff --git a/packages/theme-vscode/style/icons/light/file.svg b/packages/theme-vscode/style/icons/light/file.svg deleted file mode 100644 index 795a46d7d..000000000 --- a/packages/theme-vscode/style/icons/light/file.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/folder.svg b/packages/theme-vscode/style/icons/light/folder.svg deleted file mode 100644 index 3ec6770ac..000000000 --- a/packages/theme-vscode/style/icons/light/folder.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/theme-vscode/style/icons/light/json.svg b/packages/theme-vscode/style/icons/light/json.svg deleted file mode 100644 index 1339da7ce..000000000 --- a/packages/theme-vscode/style/icons/light/json.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/note.svg b/packages/theme-vscode/style/icons/light/note.svg deleted file mode 100644 index ba5c89648..000000000 --- a/packages/theme-vscode/style/icons/light/note.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/references.svg b/packages/theme-vscode/style/icons/light/references.svg deleted file mode 100644 index c79bb4e09..000000000 --- a/packages/theme-vscode/style/icons/light/references.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-class.svg b/packages/theme-vscode/style/icons/light/symbol-class.svg deleted file mode 100644 index 98b467819..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-class.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-color.svg b/packages/theme-vscode/style/icons/light/symbol-color.svg deleted file mode 100644 index 274c640c9..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-color.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-constant.svg b/packages/theme-vscode/style/icons/light/symbol-constant.svg deleted file mode 100644 index 1a369c1d8..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-constant.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-enumerator-member.svg b/packages/theme-vscode/style/icons/light/symbol-enumerator-member.svg deleted file mode 100644 index 229421bf0..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-enumerator-member.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-enumerator.svg b/packages/theme-vscode/style/icons/light/symbol-enumerator.svg deleted file mode 100644 index 2197f6685..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-enumerator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-event.svg b/packages/theme-vscode/style/icons/light/symbol-event.svg deleted file mode 100644 index b52fcadea..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-event.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-field.svg b/packages/theme-vscode/style/icons/light/symbol-field.svg deleted file mode 100644 index ea703154a..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-field.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-interface.svg b/packages/theme-vscode/style/icons/light/symbol-interface.svg deleted file mode 100644 index 3094367b3..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-interface.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-keyword.svg b/packages/theme-vscode/style/icons/light/symbol-keyword.svg deleted file mode 100644 index fc57528a3..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-keyword.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-method.svg b/packages/theme-vscode/style/icons/light/symbol-method.svg deleted file mode 100644 index 46760def0..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-method.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-operator.svg b/packages/theme-vscode/style/icons/light/symbol-operator.svg deleted file mode 100644 index 653b85639..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-operator.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-parameter.svg b/packages/theme-vscode/style/icons/light/symbol-parameter.svg deleted file mode 100644 index 496d8f7c8..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-parameter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-property.svg b/packages/theme-vscode/style/icons/light/symbol-property.svg deleted file mode 100644 index be642dd15..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-property.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-ruler.svg b/packages/theme-vscode/style/icons/light/symbol-ruler.svg deleted file mode 100644 index bc321cdff..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-ruler.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-snippet.svg b/packages/theme-vscode/style/icons/light/symbol-snippet.svg deleted file mode 100644 index 45fa3a001..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-snippet.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-string.svg b/packages/theme-vscode/style/icons/light/symbol-string.svg deleted file mode 100644 index 737c36255..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-string.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-structure.svg b/packages/theme-vscode/style/icons/light/symbol-structure.svg deleted file mode 100644 index 0e02fc273..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-structure.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/light/symbol-variable.svg b/packages/theme-vscode/style/icons/light/symbol-variable.svg deleted file mode 100644 index ae481cef8..000000000 --- a/packages/theme-vscode/style/icons/light/symbol-variable.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/theme-vscode/style/icons/branded/note.svg b/packages/theme-vscode/style/icons/note.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/note.svg rename to packages/theme-vscode/style/icons/note.svg diff --git a/packages/theme-vscode/style/icons/branded/references.svg b/packages/theme-vscode/style/icons/references.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/references.svg rename to packages/theme-vscode/style/icons/references.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-class.svg b/packages/theme-vscode/style/icons/symbol-class.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-class.svg rename to packages/theme-vscode/style/icons/symbol-class.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-color.svg b/packages/theme-vscode/style/icons/symbol-color.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-color.svg rename to packages/theme-vscode/style/icons/symbol-color.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-constant.svg b/packages/theme-vscode/style/icons/symbol-constant.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-constant.svg rename to packages/theme-vscode/style/icons/symbol-constant.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-enumerator-member.svg b/packages/theme-vscode/style/icons/symbol-enumerator-member.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-enumerator-member.svg rename to packages/theme-vscode/style/icons/symbol-enumerator-member.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-enumerator.svg b/packages/theme-vscode/style/icons/symbol-enumerator.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-enumerator.svg rename to packages/theme-vscode/style/icons/symbol-enumerator.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-event.svg b/packages/theme-vscode/style/icons/symbol-event.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-event.svg rename to packages/theme-vscode/style/icons/symbol-event.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-field.svg b/packages/theme-vscode/style/icons/symbol-field.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-field.svg rename to packages/theme-vscode/style/icons/symbol-field.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-interface.svg b/packages/theme-vscode/style/icons/symbol-interface.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-interface.svg rename to packages/theme-vscode/style/icons/symbol-interface.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-keyword.svg b/packages/theme-vscode/style/icons/symbol-keyword.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-keyword.svg rename to packages/theme-vscode/style/icons/symbol-keyword.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-method.svg b/packages/theme-vscode/style/icons/symbol-method.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-method.svg rename to packages/theme-vscode/style/icons/symbol-method.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-operator.svg b/packages/theme-vscode/style/icons/symbol-operator.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-operator.svg rename to packages/theme-vscode/style/icons/symbol-operator.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-parameter.svg b/packages/theme-vscode/style/icons/symbol-parameter.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-parameter.svg rename to packages/theme-vscode/style/icons/symbol-parameter.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-property.svg b/packages/theme-vscode/style/icons/symbol-property.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-property.svg rename to packages/theme-vscode/style/icons/symbol-property.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-ruler.svg b/packages/theme-vscode/style/icons/symbol-ruler.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-ruler.svg rename to packages/theme-vscode/style/icons/symbol-ruler.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-snippet.svg b/packages/theme-vscode/style/icons/symbol-snippet.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-snippet.svg rename to packages/theme-vscode/style/icons/symbol-snippet.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-string.svg b/packages/theme-vscode/style/icons/symbol-string.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-string.svg rename to packages/theme-vscode/style/icons/symbol-string.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-structure.svg b/packages/theme-vscode/style/icons/symbol-structure.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-structure.svg rename to packages/theme-vscode/style/icons/symbol-structure.svg diff --git a/packages/theme-vscode/style/icons/branded/symbol-variable.svg b/packages/theme-vscode/style/icons/symbol-variable.svg similarity index 100% rename from packages/theme-vscode/style/icons/branded/symbol-variable.svg rename to packages/theme-vscode/style/icons/symbol-variable.svg From 83411929ae28b9ac17dc7a24358443e72c121bda Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 23:10:06 -0400 Subject: [PATCH 10/35] rename to settingseditor --- .../src/features/completion/index.ts | 16 ++++++++-------- .../completion/{config.tsx => settings.tsx} | 6 +++--- .../jupyterlab-lsp/style/config/completion.css | 10 +++++----- 3 files changed, 16 insertions(+), 16 deletions(-) rename packages/jupyterlab-lsp/src/features/completion/{config.tsx => settings.tsx} (98%) diff --git a/packages/jupyterlab-lsp/src/features/completion/index.ts b/packages/jupyterlab-lsp/src/features/completion/index.ts index 3333b3aa8..2691e29d4 100644 --- a/packages/jupyterlab-lsp/src/features/completion/index.ts +++ b/packages/jupyterlab-lsp/src/features/completion/index.ts @@ -31,11 +31,11 @@ export const completionIcon = new LabIcon({ svgstr: completionSvg }); -const FEATURE_ID = PLUGIN_ID + ':completion'; +const FEATURE_ID = `${PLUGIN_ID}:completion`; export namespace CommandIds { - export const configure = 'lsp:show-completion-config'; - export const setTheme = 'lsp:set-completion-theme'; + export const showSettings = 'lsp:completion-show-settings'; + export const setTheme = 'lsp:completion-set-theme'; } export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { @@ -87,14 +87,14 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { }); const label = 'Code Completion Settings'; - app.commands.addCommand(CommandIds.configure, { + app.commands.addCommand(CommandIds.showSettings, { label, execute: async () => { - const { Configurer } = await import('./config'); - const model = new Configurer.Model(); + const { SettingsEditor } = await import('./settings'); + const model = new SettingsEditor.Model(); model.iconsThemeManager = iconsThemeManager; model.settings = settings; - const content = new Configurer(model); + const content = new SettingsEditor(model); const main = new MainAreaWidget({ content }); main.title.label = label; main.title.icon = completionIcon; @@ -104,7 +104,7 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { commandPalette.addItem({ category: LSP_CATEGORY, - command: CommandIds.configure + command: CommandIds.showSettings }); } }; diff --git a/packages/jupyterlab-lsp/src/features/completion/config.tsx b/packages/jupyterlab-lsp/src/features/completion/settings.tsx similarity index 98% rename from packages/jupyterlab-lsp/src/features/completion/config.tsx rename to packages/jupyterlab-lsp/src/features/completion/settings.tsx index 454c44d2f..dc55a8f84 100644 --- a/packages/jupyterlab-lsp/src/features/completion/config.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/settings.tsx @@ -17,9 +17,9 @@ import { FeatureSettings } from '../../feature'; type TThemeKindIcons = Map; type TThemeMap = Map; -const CONFIG_CLASS = 'jp-LSPCompletion-Config'; +const CONFIG_CLASS = 'jp-LSPCompletion-Settings'; -export class Configurer extends VDomRenderer { +export class SettingsEditor extends VDomRenderer { protected render() { const { theme_ids, kinds, icons, themes, settings } = this.model; const { composite } = settings; @@ -223,7 +223,7 @@ export class Configurer extends VDomRenderer { } } -export namespace Configurer { +export namespace SettingsEditor { export class Model extends VDomModel { _manager: ILSPCompletionThemeManager; _theme_ids: string[]; diff --git a/packages/jupyterlab-lsp/style/config/completion.css b/packages/jupyterlab-lsp/style/config/completion.css index fabfe871d..8cb5084bc 100644 --- a/packages/jupyterlab-lsp/style/config/completion.css +++ b/packages/jupyterlab-lsp/style/config/completion.css @@ -1,27 +1,27 @@ -.jp-RenderedHTMLCommon .jp-LSPCompletion-Config h1 { +.jp-RenderedHTMLCommon .jp-LSPCompletion-Settings h1 { padding-top: 0; margin-top: 0; } -.jp-LSPCompletion-Config { +.jp-LSPCompletion-Settings { display: flex; flex-direction: row; padding: var(--jp-notebook-padding); } -.jp-LSPCompletion-Config > div { +.jp-LSPCompletion-Settings > div { flex: 1; display: flex; flex-direction: row; max-height: 100%; } -.jp-LSPCompletion-Config header { +.jp-LSPCompletion-Settings header { max-width: 400px; min-width: 200px; flex: 1; } -.jp-LSPCompletion-Config article { +.jp-LSPCompletion-Settings article { flex: 1; overflow-y: auto; max-height: 100%; From 91b35f6e0dded4d0241859ec4ec82f91ba2cb21a Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 23:30:31 -0400 Subject: [PATCH 11/35] rework some type aliases --- packages/completion-theme/package.json | 7 ++++--- packages/completion-theme/src/index.ts | 13 +++++++------ packages/completion-theme/src/types.ts | 14 ++++++++------ .../src/features/completion/settings.tsx | 6 +++--- packages/theme-material/src/index.ts | 4 ++-- packages/theme-vscode/src/index.ts | 4 ++-- 6 files changed, 26 insertions(+), 22 deletions(-) diff --git a/packages/completion-theme/package.json b/packages/completion-theme/package.json index 79ec97af6..e01f03234 100644 --- a/packages/completion-theme/package.json +++ b/packages/completion-theme/package.json @@ -33,10 +33,11 @@ "lab:link": "jupyter labextension link . --no-build" }, "devDependencies": { - "react": "*", - "@jupyterlab/ui-components": "~2.2.0" + "react": "*" + }, + "peerDependencies": { + "react": "*" }, - "peerDependencies": {}, "jupyterlab": { "extension": true, "schemaDir": "schema" diff --git a/packages/completion-theme/src/index.ts b/packages/completion-theme/src/index.ts index 5c0b8cc9a..a100623f3 100644 --- a/packages/completion-theme/src/index.ts +++ b/packages/completion-theme/src/index.ts @@ -7,14 +7,15 @@ import { ILSPCompletionThemeManager, PLUGIN_ID, COMPLETER_THEME_PREFIX, - KernelKind + KernelKind, + TCompletionLabIcons } from './types'; const RE_ICON_THEME_CLASS = /jp-icon[^" ]+/g; const GREYSCALE_CLASS = 'jp-icon4'; export class CompletionThemeManager implements ILSPCompletionThemeManager { - protected current_icons: Map; + protected current_icons: TCompletionLabIcons; protected themes: Map; private current_theme_id: string; private icons_cache: Map; @@ -40,8 +41,8 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { async get_icons( theme: ICompletionTheme, color_scheme: string - ): Promise> { - const icons = new Map(); + ): Promise { + const icons: TCompletionLabIcons = new Map(); for (const [completion_kind, raw] of Object.entries( await theme.icons.svg() @@ -88,8 +89,8 @@ export class CompletionThemeManager implements ILSPCompletionThemeManager { type = type.substring(0, 1).toUpperCase() + type.substring(1).toLowerCase(); } - if (this.current_icons.has(type)) { - return this.current_icons.get(type).bindprops(options); + if (this.current_icons.has(type as any)) { + return this.current_icons.get(type as any).bindprops(options); } if (type === KernelKind) { return kernelIcon; diff --git a/packages/completion-theme/src/types.ts b/packages/completion-theme/src/types.ts index 6dd6c330a..25805c288 100644 --- a/packages/completion-theme/src/types.ts +++ b/packages/completion-theme/src/types.ts @@ -51,21 +51,21 @@ export interface ICompletionIconSet extends requiredIcons { export interface ILicenseInfo { /** - * Licence name. + * License name. */ name: string; /** - * Abbreviation of the licence name; + * SDPX identifer of the license. */ - abbreviation: string; + spdx: string; /** * The copyright holder/owner name. */ licensor: string; /** - * Link to the full licence text. + * URL of the full license text. */ - link: string; + url: string; } export interface ICompletionTheme { @@ -102,6 +102,8 @@ export interface ICompletionTheme { }; } +export type TCompletionLabIcons = Map; + export interface ILSPCompletionThemeManager { get_icon(type: string): LabIcon.ILabIcon | null; @@ -120,7 +122,7 @@ export interface ILSPCompletionThemeManager { get_icons( theme: ICompletionTheme, color_scheme: string - ): Promise>; + ): Promise; theme_ids(): string[]; } diff --git a/packages/jupyterlab-lsp/src/features/completion/settings.tsx b/packages/jupyterlab-lsp/src/features/completion/settings.tsx index dc55a8f84..4625646e7 100644 --- a/packages/jupyterlab-lsp/src/features/completion/settings.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/settings.tsx @@ -179,12 +179,12 @@ export class SettingsEditor extends VDomRenderer { return ( - {license.abbreviation} + {license.spdx} ); @@ -301,7 +301,7 @@ export namespace SettingsEditor { this.settings?.composite.colorScheme ); for (const [kind, icon] of theme_icons.entries()) { - icons.set(`${kind}-${id}`, icon as LabIcon); + icons.set(`${kind}-${id}`, icon); if (kinds.indexOf(kind) < 0) { kinds.push(kind); } diff --git a/packages/theme-material/src/index.ts b/packages/theme-material/src/index.ts index 6606672eb..09a323999 100644 --- a/packages/theme-material/src/index.ts +++ b/packages/theme-material/src/index.ts @@ -17,9 +17,9 @@ export const plugin: JupyterFrontEndPlugin = { icons: { license: { name: 'SIL Open Font License 1.1', - abbreviation: 'OFL', + spdx: 'OFL-1.1', licensor: 'Austin Andrews and Google', - link: + url: 'https://github.com/Templarian/MaterialDesign/blob/master/LICENSE' }, svg: async () => diff --git a/packages/theme-vscode/src/index.ts b/packages/theme-vscode/src/index.ts index 8a948f547..84d9ce531 100644 --- a/packages/theme-vscode/src/index.ts +++ b/packages/theme-vscode/src/index.ts @@ -14,9 +14,9 @@ export const plugin: JupyterFrontEndPlugin = { icons: { license: { name: 'Creative Commons Attribution 4.0 International Public License', - abbreviation: 'CC 4.0', + spdx: 'CC-BY-4.0', licensor: 'Microsoft', - link: 'https://github.com/microsoft/vscode-icons/blob/master/LICENSE' + url: 'https://github.com/microsoft/vscode-icons/blob/master/LICENSE' }, svg: async () => (await import(/* webpackChunkName: "theme-vscode" */ './icons')) From 4c984d7237639ee87d887b5fbf79b872216e5d11 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 29 Aug 2020 23:31:04 -0400 Subject: [PATCH 12/35] remove duplicate ui-components with yarn solve --- yarn.lock | 29 ----------------------------- 1 file changed, 29 deletions(-) diff --git a/yarn.lock b/yarn.lock index 607c3465e..d02160f65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1423,19 +1423,6 @@ path-posix "~1.0.0" url-parse "~1.4.7" -"@jupyterlab/coreutils@^4.2.3": - version "4.2.3" - resolved "https://registry.yarnpkg.com/@jupyterlab/coreutils/-/coreutils-4.2.3.tgz#5c58053399d2d2d9860e7a3a4f4a1b910b431dc1" - integrity sha512-tKhCnt5lh1B+PIFsuor3/j0BpzeBKfXtrLROQk+HzLYwlgKnA+CLNeB2hACbtWvhNpQsv9ilXTJcL13BjTfPXg== - dependencies: - "@lumino/coreutils" "^1.4.2" - "@lumino/disposable" "^1.3.5" - "@lumino/signaling" "^1.3.5" - minimist "~1.2.0" - moment "^2.24.0" - path-posix "~1.0.0" - url-parse "~1.4.7" - "@jupyterlab/coreutils@~4.0.0": version "4.0.2" resolved "https://registry.yarnpkg.com/@jupyterlab/coreutils/-/coreutils-4.0.2.tgz#2ee81799249f5f4741157ac42ff50a2ee48a0475" @@ -1745,22 +1732,6 @@ react-dom "~16.9.0" typestyle "^2.0.4" -"@jupyterlab/ui-components@~2.2.0": - version "2.2.2" - resolved "https://registry.yarnpkg.com/@jupyterlab/ui-components/-/ui-components-2.2.2.tgz#440a29fd6e2f61f7ce0427e51d01b15e48e4dddf" - integrity sha512-4mNlsM/ueUahkqdY4l6f3KdkwGbxZP8BQJfQwVobuCpWYduOQQvDWB/a0kr4p1CVnOTK3rvl4cICRs467pwzRg== - dependencies: - "@blueprintjs/core" "^3.22.2" - "@blueprintjs/select" "^3.11.2" - "@jupyterlab/coreutils" "^4.2.3" - "@lumino/coreutils" "^1.4.2" - "@lumino/signaling" "^1.3.5" - "@lumino/virtualdom" "^1.6.1" - "@lumino/widgets" "^1.11.1" - react "~16.9.0" - react-dom "~16.9.0" - typestyle "^2.0.4" - "@krassowski/completion-theme@file:packages/completion-theme": version "2.0.0" From 773f301effcef609474084733bf8e3d10cddcbf7 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sun, 30 Aug 2020 01:06:28 -0400 Subject: [PATCH 13/35] add treatment for suppressIn --- .../src/features/completion/index.ts | 2 +- .../src/features/completion/settings.tsx | 286 ++++++++++++------ .../style/config/completion.css | 28 -- .../style/settings/completion.css | 50 +++ 4 files changed, 243 insertions(+), 123 deletions(-) delete mode 100644 packages/jupyterlab-lsp/style/config/completion.css create mode 100644 packages/jupyterlab-lsp/style/settings/completion.css diff --git a/packages/jupyterlab-lsp/src/features/completion/index.ts b/packages/jupyterlab-lsp/src/features/completion/index.ts index 2691e29d4..334bb9943 100644 --- a/packages/jupyterlab-lsp/src/features/completion/index.ts +++ b/packages/jupyterlab-lsp/src/features/completion/index.ts @@ -88,7 +88,7 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { const label = 'Code Completion Settings'; app.commands.addCommand(CommandIds.showSettings, { - label, + label: `${label} Editor`, execute: async () => { const { SettingsEditor } = await import('./settings'); const model = new SettingsEditor.Model(); diff --git a/packages/jupyterlab-lsp/src/features/completion/settings.tsx b/packages/jupyterlab-lsp/src/features/completion/settings.tsx index 4625646e7..a4b872c57 100644 --- a/packages/jupyterlab-lsp/src/features/completion/settings.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/settings.tsx @@ -11,17 +11,26 @@ import { import { CodeCompletion as LSPCompletionSettings } from '../../_completion'; -import '../../../style/config/completion.css'; +import '../../../style/settings/completion.css'; import { FeatureSettings } from '../../feature'; type TThemeKindIcons = Map; type TThemeMap = Map; const CONFIG_CLASS = 'jp-LSPCompletion-Settings'; +const TOKEN_QUERY = '.CodeMirror-line span[class*=cm]'; +const TOKEN_LABEL_CLASS = 'jp-LSPCompletion-Settings-TokenLabel'; export class SettingsEditor extends VDomRenderer { protected render() { - const { theme_ids, kinds, icons, themes, settings } = this.model; + const { + theme_ids, + kinds, + icons, + themes, + settings, + tokenNames + } = this.model; const { composite } = settings; this.addClass(CONFIG_CLASS); @@ -42,18 +51,33 @@ export class SettingsEditor extends VDomRenderer { Continuous Hinting +
  • - - Suppress Invoke - -
    • -
  • - Icon Theme + Theme +
  • - - Icon Color Scheme + + Advanced Settings...
    • @@ -85,89 +109,111 @@ export class SettingsEditor extends VDomRenderer {

    Continuous Hinting

    -
    -

    Suppress Invoke

    -
    - An array of CodeMirror tokens for which the auto-invoke should be - suppressed. The token names vary between languages (modes). -
    -
    -
    -

    - Icon Theme {composite.theme} -

    -
    - Pick an icon theme to use for symbol references, such as - completion hints. -
    - - - - - {theme_ids.map((id, i) => ( - - ))} - - - - {theme_ids.map((id, i) => ( - - ))} - - - - {theme_ids.map((id, i) => - this.renderLicense(themes.get(id).icons.license, i) - )} - - - - {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} - -
    Current Theme - - settings.set('theme', e.currentTarget.value) - } - /> -
    Theme Name{themes.get(id).name}
    License
    -
    +

    Theme

    +
    +

    + Icons {composite.theme} +

    +
    + Pick an icon theme to use for symbol references, such as + completion hints. +
    + + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => ( + + ))} + + + + {theme_ids.map((id, i) => + this.renderLicense(themes.get(id).icons.license, i) + )} + + + + {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} + +
    Current Theme + + settings.set('theme', e.currentTarget.value) + } + /> +
    Theme Name{themes.get(id).name}
    License
    +
    -
    -

    - Icon Color Scheme -

    - {['themed', 'greyscale'].map(v => ( - - ))} -
    Pick an icon color scheme
    +
    +

    Colors

    + {['themed', 'greyscale'].map(v => ( + + ))} +
    Pick an icon color scheme
    +
    @@ -175,6 +221,35 @@ export class SettingsEditor extends VDomRenderer { } // renderers + protected renderToken = (token: string) => { + const { settings } = this.model; + return ( + + ); + }; + + protected onTokenClicked = (evt: React.ChangeEvent) => { + const { settings } = this.model; + const { value, checked } = evt.currentTarget; + const { suppressInvokeIn } = settings.composite; + if (checked) { + settings.set('suppressInvokeIn', [...suppressInvokeIn, value]); + } else { + settings.set( + 'suppressInvokeIn', + suppressInvokeIn.filter(t => t !== value) + ); + } + }; + protected renderLicense(license: ILicenseInfo, key: number) { return ( @@ -225,12 +300,13 @@ export class SettingsEditor extends VDomRenderer { export namespace SettingsEditor { export class Model extends VDomModel { - _manager: ILSPCompletionThemeManager; - _theme_ids: string[]; - _icons: TThemeKindIcons; - _kinds: string[]; - _themes: TThemeMap; - _settings: FeatureSettings; + protected _manager: ILSPCompletionThemeManager; + protected _theme_ids: string[] = []; + protected _icons: TThemeKindIcons = new Map(); + protected _kinds: string[] = []; + protected _themes: TThemeMap = new Map(); + protected _settings: FeatureSettings; + protected _tokenNames: string[] = []; get settings() { return this._settings; @@ -284,6 +360,27 @@ export namespace SettingsEditor { } } + get tokenNames() { + return this._tokenNames; + } + + protected refreshTokenNames() { + const names: string[] = []; + for (const el of document.querySelectorAll(TOKEN_QUERY)) { + for (const cls of el.classList) { + if (cls.indexOf('cm-lsp') > -1) { + continue; + } + const name = cls.replace(/^cm-/, ''); + if (names.indexOf(name) < 0) { + names.push(name); + } + } + } + names.sort(); + return names; + } + async refresh() { const { iconsThemeManager: manager } = this; let theme_ids = manager.theme_ids(); @@ -313,6 +410,7 @@ export namespace SettingsEditor { this._kinds = kinds; this._icons = icons; this._themes = themes; + this._tokenNames = this.refreshTokenNames(); this.stateChanged.emit(void 0); } } diff --git a/packages/jupyterlab-lsp/style/config/completion.css b/packages/jupyterlab-lsp/style/config/completion.css deleted file mode 100644 index 8cb5084bc..000000000 --- a/packages/jupyterlab-lsp/style/config/completion.css +++ /dev/null @@ -1,28 +0,0 @@ -.jp-RenderedHTMLCommon .jp-LSPCompletion-Settings h1 { - padding-top: 0; - margin-top: 0; -} -.jp-LSPCompletion-Settings { - display: flex; - flex-direction: row; - padding: var(--jp-notebook-padding); -} - -.jp-LSPCompletion-Settings > div { - flex: 1; - display: flex; - flex-direction: row; - max-height: 100%; -} - -.jp-LSPCompletion-Settings header { - max-width: 400px; - min-width: 200px; - flex: 1; -} - -.jp-LSPCompletion-Settings article { - flex: 1; - overflow-y: auto; - max-height: 100%; -} diff --git a/packages/jupyterlab-lsp/style/settings/completion.css b/packages/jupyterlab-lsp/style/settings/completion.css new file mode 100644 index 000000000..bc065f511 --- /dev/null +++ b/packages/jupyterlab-lsp/style/settings/completion.css @@ -0,0 +1,50 @@ +.jp-RenderedHTMLCommon.jp-LSPCompletion-Settings h1 { + padding-top: 0; + margin-top: 0; +} + +.jp-RenderedHTMLCommon.jp-LSPCompletion-Settings li, +.jp-RenderedHTMLCommon.jp-LSPCompletion-Settings ul { + list-style: none; +} + +.jp-LSPCompletion-Settings { + display: flex; + flex-direction: row; + padding: var(--jp-notebook-padding); +} + +.jp-LSPCompletion-Settings > div { + flex: 1; + display: flex; + flex-direction: row; + max-height: 100%; +} + +.jp-LSPCompletion-Settings header { + max-width: 400px; + min-width: 200px; + flex: 1; +} + +.jp-LSPCompletion-Settings article { + flex: 1; + overflow-y: auto; + max-height: 100%; +} + +.jp-LSPCompletion-Settings section { + padding: 0 var(--jp-notebook-padding) 0 var(--jp-notebook-padding); +} + +.jp-LSPCompletion-Settings input[type='text'] { + width: 100%; +} + +.jp-LSPCompletion-Settings-TokenLabel { + display: inline-block; + white-space: nowrap; + margin: var(--jp-ui-font-size0); + margin-bottom: 0; + margin-right: 0; +} From e24392df617555fc46e69edf5e54d6f22a22ea63 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sun, 30 Aug 2020 10:32:19 -0400 Subject: [PATCH 14/35] give up on the comparison table --- packages/completion-theme/src/types.ts | 2 +- .../src/features/completion/index.ts | 7 +- .../src/features/completion/settings.tsx | 197 ++++++++---------- .../style/settings/completion.css | 13 ++ 4 files changed, 107 insertions(+), 112 deletions(-) diff --git a/packages/completion-theme/src/types.ts b/packages/completion-theme/src/types.ts index 25805c288..a67da8e5e 100644 --- a/packages/completion-theme/src/types.ts +++ b/packages/completion-theme/src/types.ts @@ -105,7 +105,7 @@ export interface ICompletionTheme { export type TCompletionLabIcons = Map; export interface ILSPCompletionThemeManager { - get_icon(type: string): LabIcon.ILabIcon | null; + get_icon(type: string): LabIcon | null; set_theme(theme_id: string | null): void; diff --git a/packages/jupyterlab-lsp/src/features/completion/index.ts b/packages/jupyterlab-lsp/src/features/completion/index.ts index 334bb9943..fa6c0ac02 100644 --- a/packages/jupyterlab-lsp/src/features/completion/index.ts +++ b/packages/jupyterlab-lsp/src/features/completion/index.ts @@ -91,10 +91,9 @@ export const COMPLETION_PLUGIN: JupyterFrontEndPlugin = { label: `${label} Editor`, execute: async () => { const { SettingsEditor } = await import('./settings'); - const model = new SettingsEditor.Model(); - model.iconsThemeManager = iconsThemeManager; - model.settings = settings; - const content = new SettingsEditor(model); + const content = new SettingsEditor( + new SettingsEditor.Model({ iconsThemeManager, settings }) + ); const main = new MainAreaWidget({ content }); main.title.label = label; main.title.icon = completionIcon; diff --git a/packages/jupyterlab-lsp/src/features/completion/settings.tsx b/packages/jupyterlab-lsp/src/features/completion/settings.tsx index a4b872c57..ba470924c 100644 --- a/packages/jupyterlab-lsp/src/features/completion/settings.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/settings.tsx @@ -12,7 +12,7 @@ import { import { CodeCompletion as LSPCompletionSettings } from '../../_completion'; import '../../../style/settings/completion.css'; -import { FeatureSettings } from '../../feature'; +import { IFeatureSettings } from '../../feature'; type TThemeKindIcons = Map; type TThemeMap = Map; @@ -20,17 +20,16 @@ type TThemeMap = Map; const CONFIG_CLASS = 'jp-LSPCompletion-Settings'; const TOKEN_QUERY = '.CodeMirror-line span[class*=cm]'; const TOKEN_LABEL_CLASS = 'jp-LSPCompletion-Settings-TokenLabel'; +const ICON_PREVIEW_CLASS = 'jp-LSPCompletion-IconPreview'; export class SettingsEditor extends VDomRenderer { + dispose() { + this.model.dispose(); + super.dispose(); + } + protected render() { - const { - theme_ids, - kinds, - icons, - themes, - settings, - tokenNames - } = this.model; + const { theme_ids, themes, settings, tokenNames, icons } = this.model; const { composite } = settings; this.addClass(CONFIG_CLASS); @@ -154,6 +153,12 @@ export class SettingsEditor extends VDomRenderer {

    Theme

    +
    + Icon Preview... +
    + {[...icons.entries()].map(this.renderKindIcon)} +
    +

    Icons {composite.theme} @@ -166,8 +171,16 @@ export class SettingsEditor extends VDomRenderer { Current Theme - {theme_ids.map((id, i) => ( - + Theme Name + License + + + + {theme_ids.map(id => ( + + {themes.get(id).name} + {this.renderLicense(themes.get(id).icons.license)} + { settings.set('theme', e.currentTarget.value) } /> - - ))} - - - Theme Name - {theme_ids.map((id, i) => ( - {themes.get(id).name} - ))} - - - License - {theme_ids.map((id, i) => - this.renderLicense(themes.get(id).icons.license, i) - )} - - - - {kinds.map(kind => this.renderKind(kind, theme_ids, icons))} + + + ))}

    -

    Colors

    +

    + Colors {composite.colorScheme} +

    {['themed', 'greyscale'].map(v => (
    @@ -284,7 +317,7 @@ export class SettingsEditor extends VDomRenderer { if (icon != null) { return ( ); @@ -297,10 +330,12 @@ export class SettingsEditor extends VDomRenderer { export namespace SettingsEditor { export class Model extends VDomModel { protected _manager: ILSPCompletionThemeManager; - protected _theme_ids: string[] = []; + protected _themeIds: string[] = []; + protected _colorSchemeIds: string[] = []; protected _icons: TThemeKindIcons = new Map(); protected _kinds: string[] = []; protected _themes: TThemeMap = new Map(); + protected _colorSchemes: TColorSchemeMap = new Map(); protected _settings: IFeatureSettings; protected _tokenNames: string[] = []; @@ -321,14 +356,22 @@ export namespace SettingsEditor { return this._settings; } - get theme_ids() { - return this._theme_ids; + get themeIds() { + return this._themeIds; } get themes() { return this._themes; } + get colorSchemeIds() { + return this._colorSchemeIds; + } + + get colorSchemes() { + return this._colorSchemes; + } + get kinds() { return this._kinds; } @@ -368,25 +411,33 @@ export namespace SettingsEditor { async refresh() { const { _manager } = this; - let theme_ids = _manager.theme_ids(); - theme_ids.sort(); + const themeIds = _manager.theme_ids(); + themeIds.sort(); + + const colorSchemeIds = _manager.color_scheme_ids(); + colorSchemeIds.sort(); let icons: TThemeKindIcons = new Map(); let kinds: string[] = []; const themes: TThemeMap = new Map(); + const schemes: TColorSchemeMap = new Map(); - for (const theme_id of theme_ids) { - themes.set(theme_id, _manager.get_theme(theme_id)); + for (const themeId of themeIds) { + themes.set(themeId, _manager.get_theme(themeId)); } - const theme_id = this.settings.composite.theme; - if (theme_id) { - const theme = themes.get(theme_id); - themes.set(theme_id, theme); - const theme_icons = await _manager.get_icons( - theme, - this.settings?.composite.colorScheme - ); + for (const colorSchemeId of colorSchemeIds) { + schemes.set(colorSchemeId, _manager.get_color_scheme(colorSchemeId)); + } + + const themeId = this.settings.composite.theme; + const colorSchemeId = this.settings.composite.colorScheme; + + if (themeId && colorSchemeId) { + const theme = themes.get(themeId); + const color_scheme = schemes.get(colorSchemeId); + themes.set(themeId, theme); + const theme_icons = await _manager.get_icons(theme, color_scheme); for (const [kind, icon] of theme_icons.entries()) { icons.set(kind, icon); if (kinds.indexOf(kind) < 0) { @@ -396,11 +447,13 @@ export namespace SettingsEditor { } kinds.sort(); - this._theme_ids = theme_ids; + this._themeIds = themeIds; + this._colorSchemeIds = colorSchemeIds; this._kinds = kinds; this._icons = icons; this._themes = themes; this._tokenNames = this.refreshTokenNames(); + this._colorSchemes = schemes; this.stateChanged.emit(void 0); } } diff --git a/packages/theme-material/src/index.ts b/packages/theme-material/src/index.ts index 09a323999..914096087 100644 --- a/packages/theme-material/src/index.ts +++ b/packages/theme-material/src/index.ts @@ -19,6 +19,7 @@ export const plugin: JupyterFrontEndPlugin = { name: 'SIL Open Font License 1.1', spdx: 'OFL-1.1', licensor: 'Austin Andrews and Google', + modifications: 'Added JupyterLab icon classes', url: 'https://github.com/Templarian/MaterialDesign/blob/master/LICENSE' }, diff --git a/packages/theme-vscode/src/index.ts b/packages/theme-vscode/src/index.ts index 84d9ce531..11fec4bce 100644 --- a/packages/theme-vscode/src/index.ts +++ b/packages/theme-vscode/src/index.ts @@ -16,6 +16,7 @@ export const plugin: JupyterFrontEndPlugin = { name: 'Creative Commons Attribution 4.0 International Public License', spdx: 'CC-BY-4.0', licensor: 'Microsoft', + modifications: 'Added JupyterLab icon classes', url: 'https://github.com/microsoft/vscode-icons/blob/master/LICENSE' }, svg: async () => From 7156739acc83fa1da0361880a8d674ec23c9920a Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Mon, 31 Aug 2020 22:53:24 -0400 Subject: [PATCH 20/35] rework style --- .../src/features/completion/settings.tsx | 109 +++++++++--------- .../style/settings/completion.css | 62 +++++++--- 2 files changed, 98 insertions(+), 73 deletions(-) diff --git a/packages/jupyterlab-lsp/src/features/completion/settings.tsx b/packages/jupyterlab-lsp/src/features/completion/settings.tsx index e226117e3..5b6bcbbce 100644 --- a/packages/jupyterlab-lsp/src/features/completion/settings.tsx +++ b/packages/jupyterlab-lsp/src/features/completion/settings.tsx @@ -48,7 +48,6 @@ export class SettingsEditor extends VDomRenderer { return (
    -

    Code Completion Settings