Remove preview restriction for various notebook toolbar features. (#19296)

This commit is contained in:
Cory Rivera
2022-05-05 19:15:34 -07:00
committed by GitHub
parent 52782cfebd
commit 5afdf04aba
4 changed files with 104 additions and 214 deletions

View File

@@ -68,8 +68,6 @@ export class MarkdownToolbarComponent extends AngularDisposable {
}
}
public previewFeaturesEnabled: boolean = false;
public bold = localize('bold', "Bold");
public italic = localize('italic', "Italic");
public underline = localize('underline', "Underline");
@@ -92,7 +90,6 @@ export class MarkdownToolbarComponent extends AngularDisposable {
private _taskbarContent: Array<ITaskbarContent>;
private _wysiwygTaskbarContent: Array<ITaskbarContent>;
private _previewModeTaskbarContent: Array<ITaskbarContent>;
private _linkCallout: LinkCalloutDialog;
@Input() public cellModel: ICellModel;
@@ -111,9 +108,6 @@ export class MarkdownToolbarComponent extends AngularDisposable {
@Inject(IConfigurationService) private _configurationService: IConfigurationService
) {
super();
this._register(this._configurationService.onDidChangeConfiguration(e => {
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
}));
}
ngOnInit() {
@@ -121,43 +115,31 @@ export class MarkdownToolbarComponent extends AngularDisposable {
}
private initActionBar() {
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
let linkButtonContainer = DOM.$('li.action-item');
linkButtonContainer.setAttribute('role', 'presentation');
let linkButton = new Button(linkButtonContainer);
linkButton.title = this.insertLink;
linkButton.element.setAttribute('class', 'action-label codicon insert-link masked-icon');
let buttonStyle: IButtonStyles = {
buttonBackground: null
};
linkButton.style(buttonStyle);
let linkButton: TransformMarkdownAction;
let imageButton: TransformMarkdownAction;
let linkButtonContainer: HTMLElement;
let imageButtonContainer: HTMLElement;
this._register(DOM.addDisposableListener(linkButtonContainer, DOM.EventType.CLICK, async e => {
await this.onInsertButtonClick(e, MarkdownButtonType.LINK_PREVIEW);
}));
if (this.previewFeaturesEnabled) {
linkButtonContainer = DOM.$('li.action-item');
linkButtonContainer.setAttribute('role', 'presentation');
let linkButton = new Button(linkButtonContainer);
linkButton.title = this.insertLink;
linkButton.element.setAttribute('class', 'action-label codicon insert-link masked-icon');
let buttonStyle: IButtonStyles = {
buttonBackground: null
};
linkButton.style(buttonStyle);
let imageButtonContainer = DOM.$('li.action-item');
imageButtonContainer.setAttribute('role', 'presentation');
let imageButton = new Button(imageButtonContainer);
imageButton.title = this.insertImage;
imageButton.element.setAttribute('class', 'action-label codicon insert-image masked-icon');
this._register(DOM.addDisposableListener(linkButtonContainer, DOM.EventType.CLICK, async e => {
await this.onInsertButtonClick(e, MarkdownButtonType.LINK_PREVIEW);
}));
imageButton.style(buttonStyle);
imageButtonContainer = DOM.$('li.action-item');
imageButtonContainer.setAttribute('role', 'presentation');
let imageButton = new Button(imageButtonContainer);
imageButton.title = this.insertImage;
imageButton.element.setAttribute('class', 'action-label codicon insert-image masked-icon');
imageButton.style(buttonStyle);
this._register(DOM.addDisposableListener(imageButtonContainer, DOM.EventType.CLICK, async e => {
await this.onInsertButtonClick(e, MarkdownButtonType.IMAGE_PREVIEW);
}));
} else {
linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link masked-icon', this.insertLink, this.cellModel, MarkdownButtonType.LINK);
imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image masked-icon', this.insertImage, this.cellModel, MarkdownButtonType.IMAGE);
}
this._register(DOM.addDisposableListener(imageButtonContainer, DOM.EventType.CLICK, async e => {
await this.onInsertButtonClick(e, MarkdownButtonType.IMAGE_PREVIEW);
}));
let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold masked-icon', this.bold, this.cellModel, MarkdownButtonType.BOLD);
let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic masked-icon', this.italic, this.cellModel, MarkdownButtonType.ITALIC);
@@ -202,10 +184,10 @@ export class MarkdownToolbarComponent extends AngularDisposable {
{ action: underlineButton },
{ action: highlightButton },
{ action: codeButton },
{ action: linkButton },
{ element: linkButtonContainer },
{ action: listButton },
{ action: orderedListButton },
{ action: imageButton },
{ element: imageButtonContainer },
{ element: buttonDropdownContainer },
{ action: this._toggleTextViewAction },
{ action: this._toggleSplitViewAction },
@@ -226,31 +208,11 @@ export class MarkdownToolbarComponent extends AngularDisposable {
{ action: this._toggleMarkdownViewAction }
];
this._previewModeTaskbarContent = [
{ action: boldButton },
{ action: italicButton },
{ action: underlineButton },
{ action: highlightButton },
{ action: codeButton },
{ element: linkButtonContainer },
{ action: listButton },
{ action: orderedListButton },
{ element: imageButtonContainer },
{ element: buttonDropdownContainer },
{ action: this._toggleTextViewAction },
{ action: this._toggleSplitViewAction },
{ action: this._toggleMarkdownViewAction }
];
// Hide link and image buttons in WYSIWYG mode
if (this.cellModel.showPreview && !this.cellModel.showMarkdown) {
this._actionBar.setContent(this._wysiwygTaskbarContent);
} else {
if (this.previewFeaturesEnabled) {
this._actionBar.setContent(this._previewModeTaskbarContent);
} else {
this._actionBar.setContent(this._taskbarContent);
}
this._actionBar.setContent(this._taskbarContent);
}
this._notebookEditor = this._notebookService.findNotebookEditor(this.cellModel?.notebookModel?.notebookUri);
this.updateActiveViewAction();
@@ -321,11 +283,7 @@ export class MarkdownToolbarComponent extends AngularDisposable {
}
public showLinkAndImageButtons() {
if (this.previewFeaturesEnabled) {
this._actionBar.setContent(this._previewModeTaskbarContent);
} else {
this._actionBar.setContent(this._taskbarContent);
}
this._actionBar.setContent(this._taskbarContent);
}
private removeActiveClassFromModeActions() {

View File

@@ -110,7 +110,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
private _htmlMarkdownConverter: HTMLMarkdownConverter;
private markdownPreviewLineHeight: number;
public readonly onDidClickLink = this._onDidClickLink.event;
public previewFeaturesEnabled: boolean = false;
public doubleClickEditEnabled: boolean;
private _editorHeight: number;
private readonly _markdownMaxHeight = 4000;
@@ -139,7 +138,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
}
}));
this._register(this._configurationService.onDidChangeConfiguration(e => {
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
this.doubleClickEditEnabled = this._configurationService.getValue('notebook.enableDoubleClickEdit');
if (e.affectsConfiguration('notebook.markdownPreviewLineHeight')) {
this.markdownPreviewLineHeight = this._configurationService.getValue('notebook.markdownPreviewLineHeight');
@@ -188,7 +186,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
ngOnInit() {
this._editorHeight = document.querySelector('.editor-container').clientHeight;
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
this.updateTheme(this.themeService.getColorTheme());
this.setFocusAndScroll();

View File

@@ -85,7 +85,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
private _scrollTop: number;
private _navProvider: INavigationProvider;
private navigationResult: nb.NavigationResult;
public previewFeaturesEnabled: boolean = false;
public doubleClickEditEnabled: boolean;
private _onScroll = new Emitter<void>();
// Don't show the right hand toolbar actions if the notebook is created in a diff editor.
@@ -112,9 +111,6 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
) {
super();
this.doubleClickEditEnabled = this._configurationService.getValue('notebook.enableDoubleClickEdit');
this._register(this._configurationService.onDidChangeConfiguration(e => {
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
}));
this._register(this._configurationService.onDidChangeConfiguration(e => {
this.doubleClickEditEnabled = this._configurationService.getValue('notebook.enableDoubleClickEdit');
}));
@@ -503,159 +499,104 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
}
protected initActionBar(): void {
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
let kernelContainer = document.createElement('li');
let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
kernelDropdown.render(kernelContainer);
attachSelectBoxStyler(kernelDropdown, this.themeService);
if (this.previewFeaturesEnabled) {
let kernelContainer = document.createElement('li');
let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
kernelDropdown.render(kernelContainer);
attachSelectBoxStyler(kernelDropdown, this.themeService);
let attachToContainer = document.createElement('li');
let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService, this._configurationService);
attachToDropdown.render(attachToContainer);
attachSelectBoxStyler(attachToDropdown, this.themeService);
let attachToContainer = document.createElement('li');
let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService, this._configurationService);
attachToDropdown.render(attachToContainer);
attachSelectBoxStyler(attachToDropdown, this.themeService);
let spacerElement = document.createElement('li');
spacerElement.style.marginLeft = 'auto';
let spacerElement = document.createElement('li');
spacerElement.style.marginLeft = 'auto';
let addCellsButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddCodeCell', localize('codeCellsPreview', "Add cell"), 'masked-pseudo code');
let addCellsButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddCodeCell', localize('codeCellsPreview', "Add cell"), 'masked-pseudo code');
let addCodeCellButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddCodeCell', localize('codePreview', "Code cell"), 'masked-pseudo code');
addCodeCellButton.cellType = CellTypes.Code;
let addCodeCellButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddCodeCell', localize('codePreview', "Code cell"), 'masked-pseudo code');
addCodeCellButton.cellType = CellTypes.Code;
let addTextCellButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddTextCell', localize('textPreview', "Text cell"), 'masked-pseudo markdown');
addTextCellButton.cellType = CellTypes.Markdown;
let addTextCellButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddTextCell', localize('textPreview', "Text cell"), 'masked-pseudo markdown');
addTextCellButton.cellType = CellTypes.Markdown;
this._runAllCellsAction = this.instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAllPreview', "Run all"), 'masked-pseudo start-outline');
this._runAllCellsAction = this.instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAllPreview', "Run all"), 'masked-pseudo start-outline');
let collapseCellsAction = this.instantiationService.createInstance(CollapseCellsAction, 'notebook.collapseCells', true);
let collapseCellsAction = this.instantiationService.createInstance(CollapseCellsAction, 'notebook.collapseCells', true);
let clearResultsButton = this.instantiationService.createInstance(ClearAllOutputsAction, 'notebook.ClearAllOutputs', true);
let clearResultsButton = this.instantiationService.createInstance(ClearAllOutputsAction, 'notebook.ClearAllOutputs', true);
this._trustedAction = this.instantiationService.createInstance(TrustedAction, 'notebook.Trusted', true);
this._trustedAction.enabled = false;
this._trustedAction = this.instantiationService.createInstance(TrustedAction, 'notebook.Trusted', true);
this._trustedAction.enabled = false;
let runParametersAction = this.instantiationService.createInstance(RunParametersAction, 'notebook.runParameters', true, this._notebookParams.notebookUri);
let runParametersAction = this.instantiationService.createInstance(RunParametersAction, 'notebook.runParameters', true, this._notebookParams.notebookUri);
let taskbar = <HTMLElement>this.toolbar.nativeElement;
this._actionBar = new Taskbar(taskbar, { actionViewItemProvider: action => this.actionItemProvider(action as Action) });
this._actionBar.context = this._notebookParams.notebookUri;
taskbar.classList.add('in-preview');
let taskbar = <HTMLElement>this.toolbar.nativeElement;
this._actionBar = new Taskbar(taskbar, { actionViewItemProvider: action => this.actionItemProvider(action as Action) });
this._actionBar.context = this._notebookParams.notebookUri;
taskbar.classList.add('in-preview');
let buttonDropdownContainer = DOM.$('li.action-item');
buttonDropdownContainer.setAttribute('role', 'presentation');
let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
addCellsButton,
[addCodeCellButton, addTextCellButton],
this.contextMenuService,
undefined,
this._actionBar.actionRunner,
undefined,
'codicon masked-pseudo masked-pseudo-after add-new dropdown-arrow',
localize('addCell', "Cell"),
undefined
);
dropdownMenuActionViewItem.render(buttonDropdownContainer);
dropdownMenuActionViewItem.setActionContext(this._notebookParams.notebookUri);
let buttonDropdownContainer = DOM.$('li.action-item');
buttonDropdownContainer.setAttribute('role', 'presentation');
let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
addCellsButton,
[addCodeCellButton, addTextCellButton],
let viewsDropdownContainer;
if (this._configurationService.getValue<boolean>('notebookViews.enabled')) {
let viewsContainer = document.createElement('li');
let viewsActionsProvider = new NotebookViewsActionProvider(viewsContainer, this.views, this.modelReady, this.notebookService, this.notificationService, this.instantiationService);
let viewsButton = new Action('notebook.OpenViews', localize('views', "Views"), 'notebook-button masked-pseudo code');
viewsDropdownContainer = DOM.$('li.action-item');
viewsDropdownContainer.setAttribute('role', 'presentation');
let viewsDropdownMenuActionViewItem = new DropdownMenuActionViewItem(
viewsButton,
viewsActionsProvider,
this.contextMenuService,
undefined,
this._actionBar.actionRunner,
undefined,
'codicon masked-pseudo masked-pseudo-after add-new dropdown-arrow',
localize('addCell', "Cell"),
'codicon notebook-button masked-pseudo masked-pseudo-after icon-dashboard-view dropdown-arrow',
localize('editor', "Editor"),
undefined
);
dropdownMenuActionViewItem.render(buttonDropdownContainer);
dropdownMenuActionViewItem.setActionContext(this._notebookParams.notebookUri);
viewsDropdownMenuActionViewItem.render(viewsDropdownContainer);
viewsDropdownMenuActionViewItem.setActionContext(this._notebookParams.notebookUri);
}
let viewsDropdownContainer;
if (this._configurationService.getValue<boolean>('notebookViews.enabled')) {
let viewsContainer = document.createElement('li');
let viewsActionsProvider = new NotebookViewsActionProvider(viewsContainer, this.views, this.modelReady, this.notebookService, this.notificationService, this.instantiationService);
let viewsButton = new Action('notebook.OpenViews', localize('views', "Views"), 'notebook-button masked-pseudo code');
viewsDropdownContainer = DOM.$('li.action-item');
viewsDropdownContainer.setAttribute('role', 'presentation');
let viewsDropdownMenuActionViewItem = new DropdownMenuActionViewItem(
viewsButton,
viewsActionsProvider,
this.contextMenuService,
undefined,
this._actionBar.actionRunner,
undefined,
'codicon notebook-button masked-pseudo masked-pseudo-after icon-dashboard-view dropdown-arrow',
localize('editor', "Editor"),
undefined
);
viewsDropdownMenuActionViewItem.render(viewsDropdownContainer);
viewsDropdownMenuActionViewItem.setActionContext(this._notebookParams.notebookUri);
}
if (this._showToolbarActions) {
this._actionBar.setContent([
{ element: buttonDropdownContainer },
{ action: this._runAllCellsAction },
{ element: Taskbar.createTaskbarSeparator() },
{ element: kernelContainer },
{ element: attachToContainer },
{ element: spacerElement },
{ element: viewsDropdownContainer },
{ action: collapseCellsAction },
{ action: clearResultsButton },
{ action: this._trustedAction },
{ action: runParametersAction },
]);
} else {
this._actionBar.setContent([
{ element: buttonDropdownContainer },
{ action: this._runAllCellsAction },
{ element: Taskbar.createTaskbarSeparator() },
{ element: kernelContainer },
{ element: attachToContainer },
]);
}
if (this._showToolbarActions) {
this._actionBar.setContent([
{ element: buttonDropdownContainer },
{ action: this._runAllCellsAction },
{ element: Taskbar.createTaskbarSeparator() },
{ element: kernelContainer },
{ element: attachToContainer },
{ element: spacerElement },
{ element: viewsDropdownContainer },
{ action: collapseCellsAction },
{ action: clearResultsButton },
{ action: this._trustedAction },
{ action: runParametersAction },
]);
} else {
let kernelContainer = document.createElement('div');
let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady);
kernelDropdown.render(kernelContainer);
attachSelectBoxStyler(kernelDropdown, this.themeService);
let attachToContainer = document.createElement('div');
let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady,
this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService, this._configurationService);
attachToDropdown.render(attachToContainer);
attachSelectBoxStyler(attachToDropdown, this.themeService);
let addCodeCellButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddCodeCell', localize('code', "Code"), 'icon-add');
addCodeCellButton.cellType = CellTypes.Code;
let addTextCellButton = this.instantiationService.createInstance(AddCellAction, 'notebook.AddTextCell', localize('text', "Text"), 'icon-add');
addTextCellButton.cellType = CellTypes.Markdown;
this._runAllCellsAction = this.instantiationService.createInstance(RunAllCellsAction, 'notebook.runAllCells', localize('runAll', "Run Cells"), 'icon-run-cells');
let clearResultsButton = this.instantiationService.createInstance(ClearAllOutputsAction, 'notebook.ClearAllOutputs', false);
this._trustedAction = this.instantiationService.createInstance(TrustedAction, 'notebook.Trusted', false);
this._trustedAction.enabled = false;
let collapseCellsAction = this.instantiationService.createInstance(CollapseCellsAction, 'notebook.collapseCells', false);
let taskbar = <HTMLElement>this.toolbar.nativeElement;
this._actionBar = new Taskbar(taskbar, { actionViewItemProvider: action => this.actionItemProvider(action as Action) });
this._actionBar.context = this._notebookParams.notebookUri;
if (this._showToolbarActions) {
this._actionBar.setContent([
{ action: addCodeCellButton },
{ action: addTextCellButton },
{ element: kernelContainer },
{ element: attachToContainer },
{ action: this._trustedAction },
{ action: this._runAllCellsAction },
{ action: clearResultsButton },
{ action: collapseCellsAction },
]);
} else {
this._actionBar.setContent([
{ action: addCodeCellButton },
{ action: addTextCellButton },
{ element: kernelContainer },
{ element: attachToContainer },
{ action: this._runAllCellsAction },
]);
}
this._actionBar.setContent([
{ element: buttonDropdownContainer },
{ action: this._runAllCellsAction },
{ element: Taskbar.createTaskbarSeparator() },
{ element: kernelContainer },
{ element: attachToContainer },
]);
}
}
@@ -700,7 +641,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
// This is similar behavior that exists in MenuItemActionItem
if (action instanceof MenuItemAction) {
if ((action.item.id.includes('jupyter.cmd') && this.previewFeaturesEnabled) || action.item.id.includes('mssql')) {
if (action.item.id.includes('jupyter.cmd') || action.item.id.includes('mssql')) {
action.tooltip = action.label;
action.label = '';
}

View File

@@ -20,7 +20,6 @@ import { onUnexpectedError } from 'vs/base/common/errors';
import { localize } from 'vs/nls';
import { Deferred } from 'sql/base/common/promise';
import { AngularDisposable } from 'sql/base/browser/lifecycle';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
import { CellType, CellTypes, NotebookChangeType } from 'sql/workbench/services/notebook/common/contracts';
import { isUndefinedOrNull } from 'vs/base/common/types';
@@ -58,7 +57,6 @@ export class NotebookViewComponent extends AngularDisposable implements INoteboo
@ViewChildren(TextCellComponent) private _textCells: QueryList<TextCellComponent>;
protected _actionBar: Taskbar;
public previewFeaturesEnabled: boolean = false;
private _modelReadyDeferred = new Deferred<NotebookModel>();
private _runAllCellsAction: RunAllCellsAction;
private _scrollTop: number;
@@ -74,15 +72,11 @@ export class NotebookViewComponent extends AngularDisposable implements INoteboo
@Inject(INotificationService) private _notificationService: INotificationService,
@Inject(INotebookService) private _notebookService: INotebookService,
@Inject(IConnectionManagementService) private _connectionManagementService: IConnectionManagementService,
@Inject(IConfigurationService) private _configurationService: IConfigurationService,
@Inject(IEditorService) private _editorService: IEditorService,
@Inject(ViewContainerRef) private _containerRef: ViewContainerRef,
@Inject(ComponentFactoryResolver) private _componentFactoryResolver: ComponentFactoryResolver,
) {
super();
this._register(this._configurationService.onDidChangeConfiguration(e => {
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
}));
}
public get notebookParams(): INotebookParams {
@@ -309,7 +303,7 @@ export class NotebookViewComponent extends AngularDisposable implements INoteboo
// This is similar behavior that exists in MenuItemActionItem
if (action instanceof MenuItemAction) {
if (action.item.id.includes('jupyter.cmd') && this.previewFeaturesEnabled) {
if (action.item.id.includes('jupyter.cmd')) {
action.tooltip = action.label;
action.label = '';
}