mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-10 02:02:35 -05:00
10551 - Notebook UI: Added cell toolbar component (#10558)
* 10551 - Notebook UI: Added cell toolbar component, actions scaffolding, styles and theme colors. Removed markup for legacy, hidden hover buttons. Updated instaces of icon class: mask to masked-icon. * Uncommented lines for CellToggleMoreActions so we can see how the ellipses currently work. * Added EditCellAction which toggles between two icons. * Cleaned up comments and removed some unused code. * Copied DeleteCellAction into celltoolbarActions * Connecting model and cell model to toolbar component for necessary context. * Pass in cell + nb model from notebook component * Adding context for EditCellAction so we can activate a cell via icon. * Removed my copy of AddCellAction and simply referred to the existing one. * Fixes to propogate cell model edit mode changes * Added onCellModeChanged event registration to code.component. * Moved cellToggleMoreActions into cellToolbarActions. Suppressing ellipses in code and textCell components. * Fix adding cells * Copied and modified ToggleMoreWidgetAction for use in cellToolbarActions. Instantiating cellToggleMoreActions and adding to toolbar. * Removed unused markup, code and styles. Moved cell toolbar template into compoent. * Removed double-click from textCell. Changed message to indicate where content goes - without it the cell does not have dimension and cannot be found by the user. * Removed unused code file. * Fixing my boo boo * Updated AddCellAction with null coalescer. Set Promise to type: void. Co-authored-by: chlafreniere <hichise@gmail.com>
This commit is contained in:
Hale Rankin
@@ -1,15 +0,0 @@
|
||||
<!--
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
-->
|
||||
<ul class="cell-toolbar">
|
||||
<li><a class="cell-tool-edit" role="button" href="#" (click)="toolbarToggleEditMode()"><span class="offscreen">{{buttonEdit}}</span></a></li>
|
||||
<li><a class="cell-tool-close" role="button" href="#" (click)="toolbarUnselectActiveCell()"><span class="offscreen">{{buttonClose}}</span></a></li>
|
||||
<li><a class="cell-tool-add" role="button" href="#"><span class="offscreen">{{buttonAdd}}</span></a></li>
|
||||
<li><a class="cell-tool-move-down" role="button" href="#"><span class="offscreen">{{buttonMoveDown}}</span></a></li>
|
||||
<li><a class="cell-tool-move-up" role="button" href="#"><span class="offscreen">{{buttonMoveUp}}</span></a></li>
|
||||
<li><a class="cell-tool-delete" role="button" href="#"><span class="offscreen">{{buttonDelete}}</span></a></li>
|
||||
<li><div #moreactions class="cell-tool-more"></div></li>
|
||||
</ul>
|
||||
@@ -2,25 +2,96 @@
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import 'vs/css!./cellToolbar';
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import 'vs/css!./cellToolbar';
|
||||
import * as DOM from 'vs/base/browser/dom';
|
||||
import { Component, Inject, ViewChild, ElementRef, Input } from '@angular/core';
|
||||
import { localize } from 'vs/nls';
|
||||
import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
|
||||
import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
|
||||
import { DeleteCellAction, EditCellAction, CellToggleMoreActions } from 'sql/workbench/contrib/notebook/browser/cellToolbarActions';
|
||||
import { AddCellAction } from 'sql/workbench/contrib/notebook/browser/notebookActions';
|
||||
import { CellTypes } from 'sql/workbench/services/notebook/common/contracts';
|
||||
import { DropdownMenuActionViewItem } from 'sql/base/browser/ui/buttonMenu/buttonMenu';
|
||||
import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
|
||||
import { NotebookModel } from 'sql/workbench/services/notebook/browser/models/notebookModel';
|
||||
import { CellContext } from 'sql/workbench/contrib/notebook/browser/cellViews/codeActions';
|
||||
|
||||
export const CELL_TOOLBAR_SELECTOR: string = 'cell-toolbar-component';
|
||||
|
||||
@Component({
|
||||
selector: CELL_TOOLBAR_SELECTOR,
|
||||
templateUrl: decodeURI(require.toUrl('./cellToolbar.component.html'))
|
||||
template: `<div #celltoolbar></div>`
|
||||
})
|
||||
export class CellToolbarComponent {
|
||||
@ViewChild('celltoolbar', { read: ElementRef }) private celltoolbar: ElementRef;
|
||||
|
||||
public buttonEdit = localize('buttonEdit', "Edit");
|
||||
public buttonClose = localize('buttonClose', "Close");
|
||||
public buttonAdd = localize('buttonAdd', "Add new cell");
|
||||
public buttonMoveDown = localize('buttonMoveDown', "Move cell down");
|
||||
public buttonMoveUp = localize('buttonMoveUp', "Move cell up");
|
||||
public buttonDelete = localize('buttonDelete', "Delete cell");
|
||||
|
||||
constructor() {
|
||||
@Input() cellModel: ICellModel;
|
||||
@Input() model: NotebookModel;
|
||||
|
||||
private _actionBar: Taskbar;
|
||||
private _editCellAction: EditCellAction;
|
||||
public _cellToggleMoreActions: CellToggleMoreActions;
|
||||
|
||||
constructor(
|
||||
@Inject(IInstantiationService) private instantiationService: IInstantiationService,
|
||||
@Inject(IContextMenuService) private contextMenuService: IContextMenuService
|
||||
) {
|
||||
this._cellToggleMoreActions = this.instantiationService.createInstance(CellToggleMoreActions);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.initActionBar();
|
||||
}
|
||||
|
||||
protected initActionBar(): void {
|
||||
let context = new CellContext(this.model, this.cellModel);
|
||||
let taskbar = <HTMLElement>this.celltoolbar.nativeElement;
|
||||
this._actionBar = new Taskbar(taskbar);
|
||||
this._actionBar.context = context;
|
||||
|
||||
let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('codePreview', "Code cell"), 'notebook-button masked-pseudo code');
|
||||
addCodeCellButton.cellType = CellTypes.Code;
|
||||
|
||||
let addTextCellButton = new AddCellAction('notebook.AddTextCell', localize('textPreview', "Markdown cell"), 'notebook-button masked-pseudo markdown');
|
||||
addTextCellButton.cellType = CellTypes.Markdown;
|
||||
|
||||
let deleteButton = this.instantiationService.createInstance(DeleteCellAction, 'delete', 'codicon masked-icon delete', localize('delete', "Delete"));
|
||||
|
||||
let moreActionsContainer = DOM.$('li.action-item');
|
||||
this._cellToggleMoreActions = this.instantiationService.createInstance(CellToggleMoreActions);
|
||||
this._cellToggleMoreActions.onInit(moreActionsContainer, context);
|
||||
|
||||
this._editCellAction = this.instantiationService.createInstance(EditCellAction, 'notebook.editCell', true, this.cellModel.isEditMode);
|
||||
this._editCellAction.enabled = true;
|
||||
|
||||
let buttonDropdownContainer = DOM.$('li.action-item');
|
||||
buttonDropdownContainer.setAttribute('role', 'presentation');
|
||||
let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
|
||||
addCodeCellButton,
|
||||
[addCodeCellButton, addTextCellButton],
|
||||
this.contextMenuService,
|
||||
undefined,
|
||||
this._actionBar.actionRunner,
|
||||
undefined,
|
||||
'codicon masked-icon new',
|
||||
localize('addCell', "Cell"),
|
||||
undefined
|
||||
);
|
||||
dropdownMenuActionViewItem.render(buttonDropdownContainer);
|
||||
dropdownMenuActionViewItem.setActionContext(context);
|
||||
|
||||
this._actionBar.setContent([
|
||||
{ action: this._editCellAction },
|
||||
{ element: buttonDropdownContainer },
|
||||
{ action: deleteButton },
|
||||
{ element: moreActionsContainer }
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,44 +4,41 @@
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
cell-toolbar-component {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
top: -21px;
|
||||
left: 20px;
|
||||
top: -20px;
|
||||
}
|
||||
|
||||
cell-toolbar-component ul {
|
||||
display: inline-block;
|
||||
cell-toolbar-component .carbon-taskbar .monaco-action-bar.animated {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
cell-toolbar-component .carbon-taskbar.monaco-toolbar .monaco-action-bar.animated ul.actions-container {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 5px 10px 0 10px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
cell-toolbar-component li {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
cell-toolbar-component ul.actions-container li.action-item {
|
||||
display: inline-flex;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
cell-toolbar-component li:last-child {
|
||||
cell-toolbar-component ul.actions-container li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
cell-toolbar-component li a {
|
||||
background: 50% 50% no-repeat;
|
||||
display: block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
cell-toolbar-component .carbon-taskbar .action-label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
cell-toolbar-component li div {
|
||||
background: 50% 50% no-repeat;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
cell-toolbar-component .monaco-action-bar .action-label {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
cell-toolbar-component .offscreen {
|
||||
height: 1px;
|
||||
text-indent: -999999px;
|
||||
margin-top: -1px;
|
||||
position: absolute;
|
||||
cell-toolbar-component ul.actions-container li a.masked-icon {
|
||||
display: flex;
|
||||
height: 24px;
|
||||
width: 29px;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
<div style="flex: 1 1 auto; overflow: hidden;">
|
||||
<div #editor class="editor"></div>
|
||||
</div>
|
||||
<div #moreactions class="moreActions" style="flex: 0 0 auto; flex-flow:column;width: 20px; min-height: 20px; max-height: 20px; padding-top: 0px; orientation: portrait"></div>
|
||||
</div>
|
||||
<collapse-component *ngIf="cellModel.cellType === 'code' && cellModel.source && cellModel.source.length > 1" [cellModel]="cellModel" [activeCellId]="activeCellId"></collapse-component>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,6 @@ import 'vs/css!./code';
|
||||
import { OnInit, Component, Input, Inject, ElementRef, ViewChild, Output, EventEmitter, OnChanges, SimpleChange, forwardRef, ChangeDetectorRef } from '@angular/core';
|
||||
|
||||
import { QueryTextEditor } from 'sql/workbench/browser/modelComponents/queryTextEditor';
|
||||
import { CellToggleMoreActions } from 'sql/workbench/contrib/notebook/browser/cellToggleMoreActions';
|
||||
import { ICellModel, CellExecutionState } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
|
||||
import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
|
||||
import { RunCellAction, CellContext } from 'sql/workbench/contrib/notebook/browser/cellViews/codeActions';
|
||||
@@ -26,7 +25,6 @@ import { CellTypes } from 'sql/workbench/services/notebook/common/contracts';
|
||||
import { OVERRIDE_EDITOR_THEMING_SETTING } from 'sql/workbench/services/notebook/browser/notebookService';
|
||||
import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
|
||||
import { ILogService } from 'vs/platform/log/common/log';
|
||||
import { CollapseComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/collapse.component';
|
||||
import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
|
||||
import { CellView } from 'sql/workbench/contrib/notebook/browser/cellViews/interfaces';
|
||||
import { UntitledTextEditorInput } from 'vs/workbench/services/untitled/common/untitledTextEditorInput';
|
||||
@@ -48,9 +46,7 @@ const DEFAULT_OR_LOCAL_CONTEXT_ID = '-1';
|
||||
})
|
||||
export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
@ViewChild('toolbar', { read: ElementRef }) private toolbarElement: ElementRef;
|
||||
@ViewChild('moreactions', { read: ElementRef }) private moreActionsElementRef: ElementRef;
|
||||
@ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef;
|
||||
@ViewChild(CollapseComponent) private collapseComponent: CollapseComponent;
|
||||
|
||||
public get cellModel(): ICellModel {
|
||||
return this._cellModel;
|
||||
@@ -83,14 +79,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
this._activeCellId = value;
|
||||
}
|
||||
|
||||
@Input() set hover(value: boolean) {
|
||||
this.cellModel.hover = value;
|
||||
if (!this.isActive()) {
|
||||
// Only make a change if we're not active, since this has priority
|
||||
this.toggleActionsVisibility(this.cellModel.hover);
|
||||
}
|
||||
}
|
||||
|
||||
protected _actionBar: Taskbar;
|
||||
private readonly _minimumHeight = 30;
|
||||
private readonly _maximumHeight = 4000;
|
||||
@@ -100,7 +88,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
private _editorModel: ITextModel;
|
||||
private _model: NotebookModel;
|
||||
private _activeCellId: string;
|
||||
private _cellToggleMoreActions: CellToggleMoreActions;
|
||||
private _layoutEmitter = new Emitter<void>();
|
||||
|
||||
constructor(
|
||||
@@ -113,7 +100,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
@Inject(ILogService) private readonly logService: ILogService
|
||||
) {
|
||||
super();
|
||||
this._cellToggleMoreActions = this._instantiationService.createInstance(CellToggleMoreActions);
|
||||
this._register(Event.debounce(this._layoutEmitter.event, (l, e) => e, 250, /*leading=*/false)
|
||||
(() => this.layout()));
|
||||
// Handle disconnect on removal of the cell, if it was the active cell
|
||||
@@ -134,7 +120,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
let changedProp = changes[propName];
|
||||
let isActive = this.cellModel.id === changedProp.currentValue;
|
||||
this.updateConnectionState(isActive);
|
||||
this.toggleActionsVisibility(isActive);
|
||||
if (this._editor) {
|
||||
this._editor.toggleEditorSelected(isActive);
|
||||
}
|
||||
@@ -288,7 +273,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
this._actionBar.setContent([
|
||||
{ action: runCellAction }
|
||||
]);
|
||||
this._cellToggleMoreActions.onInit(this.moreActionsElementRef, this.model, this.cellModel);
|
||||
}
|
||||
|
||||
/// Editor Functions
|
||||
@@ -334,9 +318,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
private updateTheme(theme: IColorTheme): void {
|
||||
let toolbarEl = <HTMLElement>this.toolbarElement.nativeElement;
|
||||
toolbarEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
|
||||
|
||||
let moreActionsEl = <HTMLElement>this.moreActionsElementRef.nativeElement;
|
||||
moreActionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
|
||||
}
|
||||
|
||||
private setFocusAndScroll(): void {
|
||||
@@ -354,14 +335,6 @@ export class CodeComponent extends CellView implements OnInit, OnChanges {
|
||||
return this.cellModel && this.cellModel.id === this.activeCellId;
|
||||
}
|
||||
|
||||
protected toggleActionsVisibility(isActiveOrHovered: boolean) {
|
||||
this._cellToggleMoreActions.toggleVisible(!isActiveOrHovered);
|
||||
|
||||
if (this.collapseComponent) {
|
||||
this.collapseComponent.toggleIconVisibility(isActiveOrHovered);
|
||||
}
|
||||
}
|
||||
|
||||
private onCellCollapse(isCollapsed: boolean): void {
|
||||
let editorWidget = this._editor.getControl() as ICodeEditor;
|
||||
if (isCollapsed) {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px 16px;
|
||||
padding: 10px 16px 4px 16px;
|
||||
}
|
||||
.markdown-toolbar .carbon-taskbar li.action-item {
|
||||
display: inline-block;
|
||||
|
||||
@@ -11,9 +11,7 @@
|
||||
</code-component>
|
||||
</div>
|
||||
<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: row">
|
||||
<div #preview link-handler [isTrusted]="isTrusted" [notebookUri]="notebookUri" class="notebook-preview" style="flex: 1 1 auto" (dblclick)="toggleEditMode()">
|
||||
</div>
|
||||
<div #moreactions class="moreActions" style="flex: 0 0 auto; display: flex; flex-flow:column;width: 20px; min-height: 20px; max-height: 20px; padding-top: 0px; orientation: portrait">
|
||||
<div #preview link-handler [isTrusted]="isTrusted" [notebookUri]="notebookUri" class="notebook-preview" style="flex: 1 1 auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,6 @@ import { CellView } from 'sql/workbench/contrib/notebook/browser/cellViews/inter
|
||||
import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
|
||||
import { NotebookModel } from 'sql/workbench/services/notebook/browser/models/notebookModel';
|
||||
import { ISanitizer, defaultSanitizer } from 'sql/workbench/services/notebook/browser/outputs/sanitizer';
|
||||
import { CellToggleMoreActions } from 'sql/workbench/contrib/notebook/browser/cellToggleMoreActions';
|
||||
import { CodeComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/code.component';
|
||||
import { NotebookRange, ICellEditorProvider } from 'sql/workbench/services/notebook/browser/notebookService';
|
||||
import { IColorTheme } from 'vs/platform/theme/common/themeService';
|
||||
@@ -38,7 +37,6 @@ const USER_SELECT_CLASS = 'actionselect';
|
||||
})
|
||||
export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
@ViewChild('preview', { read: ElementRef }) private output: ElementRef;
|
||||
@ViewChild('moreactions', { read: ElementRef }) private moreActionsElementRef: ElementRef;
|
||||
@ViewChildren(CodeComponent) private markdowncodeCell: QueryList<CodeComponent>;
|
||||
|
||||
@Input() cellModel: ICellModel;
|
||||
@@ -51,14 +49,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
this._activeCellId = value;
|
||||
}
|
||||
|
||||
@Input() set hover(value: boolean) {
|
||||
this._hover = value;
|
||||
if (!this.isActive()) {
|
||||
// Only make a change if we're not active, since this has priority
|
||||
this.updateMoreActions();
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('document:keydown.escape', ['$event'])
|
||||
handleKeyboardEvent() {
|
||||
if (this.isEditMode) {
|
||||
@@ -84,8 +74,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
private _activeCellId: string;
|
||||
private readonly _onDidClickLink = this._register(new Emitter<URI>());
|
||||
public readonly onDidClickLink = this._onDidClickLink.event;
|
||||
private _cellToggleMoreActions: CellToggleMoreActions;
|
||||
private _hover: boolean;
|
||||
private markdownRenderer: NotebookMarkdownRenderer;
|
||||
private markdownResult: IMarkdownRenderResult;
|
||||
public previewFeaturesEnabled: boolean = false;
|
||||
@@ -98,7 +86,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
) {
|
||||
super();
|
||||
this.isEditMode = true;
|
||||
this._cellToggleMoreActions = this._instantiationService.createInstance(CellToggleMoreActions);
|
||||
this.markdownRenderer = this._instantiationService.createInstance(NotebookMarkdownRenderer);
|
||||
this._register(toDisposable(() => {
|
||||
if (this.markdownResult) {
|
||||
@@ -143,11 +130,15 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
this.previewFeaturesEnabled = this._configurationService.getValue('workbench.enablePreviewFeatures');
|
||||
this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
|
||||
this.updateTheme(this.themeService.getColorTheme());
|
||||
this._cellToggleMoreActions.onInit(this.moreActionsElementRef, this.model, this.cellModel);
|
||||
this.setFocusAndScroll();
|
||||
this._register(this.cellModel.onOutputsChanged(e => {
|
||||
this.updatePreview();
|
||||
}));
|
||||
this._register(this.cellModel.onCellModeChanged(mode => {
|
||||
if (mode !== this.isEditMode) {
|
||||
this.toggleEditMode(mode);
|
||||
}
|
||||
}));
|
||||
}
|
||||
|
||||
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
|
||||
@@ -191,7 +182,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
if (trustedChanged || contentChanged) {
|
||||
this._lastTrustedMode = this.cellModel.trustedMode;
|
||||
if ((!cellModelSourceJoined) && !this.isEditMode) {
|
||||
this._content = localize('doubleClickEdit', "Double-click to edit");
|
||||
this._content = localize('addContent', "Add content here...");
|
||||
} else {
|
||||
this._content = this.cellModel.source;
|
||||
}
|
||||
@@ -224,9 +215,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
private updateTheme(theme: IColorTheme): void {
|
||||
let outputElement = <HTMLElement>this.output.nativeElement;
|
||||
outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
|
||||
|
||||
let moreActionsEl = <HTMLElement>this.moreActionsElementRef.nativeElement;
|
||||
moreActionsEl.style.borderRightColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
|
||||
}
|
||||
|
||||
public handleContentChanged(): void {
|
||||
@@ -236,20 +224,10 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
public toggleEditMode(editMode?: boolean): void {
|
||||
this.isEditMode = editMode !== undefined ? editMode : !this.isEditMode;
|
||||
this.cellModel.isEditMode = this.isEditMode;
|
||||
this.updateMoreActions();
|
||||
this.updatePreview();
|
||||
this._changeRef.detectChanges();
|
||||
}
|
||||
|
||||
private updateMoreActions(): void {
|
||||
if (!this.isEditMode && (this.isActive() || this._hover)) {
|
||||
this.toggleMoreActionsButton(true);
|
||||
}
|
||||
else {
|
||||
this.toggleMoreActionsButton(false);
|
||||
}
|
||||
}
|
||||
|
||||
private toggleUserSelect(userSelect: boolean): void {
|
||||
if (!this.output) {
|
||||
return;
|
||||
@@ -273,10 +251,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
|
||||
return this.cellModel && this.cellModel.id === this.activeCellId;
|
||||
}
|
||||
|
||||
protected toggleMoreActionsButton(isActiveOrHovered: boolean) {
|
||||
this._cellToggleMoreActions.toggleVisible(!isActiveOrHovered);
|
||||
}
|
||||
|
||||
public deltaDecorations(newDecorationRange: NotebookRange, oldDecorationRange: NotebookRange): void {
|
||||
if (oldDecorationRange) {
|
||||
this.removeDecoration(oldDecorationRange);
|
||||
|
||||
Reference in New Issue
Block a user