Fix toggle more actions staying visible, and clickable issues (#3949)

- Fixed so it's now invisible instead of empty when not selected.
 - This fixes clickability and issue where it stayed visible in 1 fix
- Also fixed cell output action which used active cell instead of context cell.
This commit is contained in:
Kevin Cunnane
2019-02-07 09:35:58 -08:00
committed by GitHub
parent 5a0100757f
commit 40e0d5cfbf
5 changed files with 39 additions and 26 deletions

View File

@@ -42,7 +42,6 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
@ViewChild('moreactions', { read: ElementRef }) private moreActionsElementRef: ElementRef;
@ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef;
@Input() cellModel: ICellModel;
@Input() hideVerticalToolbar: boolean = false;
@Output() public onContentChanged = new EventEmitter<void>();
@@ -92,9 +91,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
ngOnInit() {
this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
this.updateTheme(this.themeService.getColorTheme());
if (!this.hideVerticalToolbar) {
this.initActionBar();
}
this.initActionBar();
}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
@@ -104,7 +101,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
if (propName === 'activeCellId') {
let changedProp = changes[propName];
let isActive = this.cellModel.id === changedProp.currentValue;
this._cellToggleMoreActions.toggle(isActive, this.moreActionsElementRef, this.model, this.cellModel);
this.toggleMoreActionsButton(isActive);
if (this._editor) {
this._editor.toggleEditorSelected(isActive);
}
@@ -173,6 +170,8 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
this._actionBar.setContent([
{ action: runCellAction }
]);
this._cellToggleMoreActions.onInit(this.moreActionsElementRef, this.model, this.cellModel);
}
@@ -217,7 +216,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
return this.cellModel && this.cellModel.id === this.activeCellId;
}
protected toggleMoreActionsButton(isActive: boolean) {
this._cellToggleMoreActions.toggle(isActive, this.moreActionsElementRef, this.model, this.cellModel);
protected toggleMoreActionsButton(isActiveOrHovered: boolean) {
this._cellToggleMoreActions.toggleVisible(!isActiveOrHovered);
}
}

View File

@@ -7,7 +7,7 @@
<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column" (mouseover)="hover=true" (mouseleave)="hover=false">
<loading-spinner [loading]="isLoading"></loading-spinner>
<div class="notebook-text" style="flex: 0 0 auto;">
<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId" [hideVerticalToolbar]=true>
<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId">
</code-component>
</div>
<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: row">

View File

@@ -99,6 +99,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
this.setLoading(false);
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();
@@ -193,7 +194,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
return this.cellModel && this.cellModel.id === this.activeCellId;
}
protected toggleMoreActionsButton(isActive: boolean) {
this._cellToggleMoreActions.toggle(isActive, this.moreActionsElementRef, this.model, this.cellModel);
protected toggleMoreActionsButton(isActiveOrHovered: boolean) {
this._cellToggleMoreActions.toggleVisible(!isActiveOrHovered);
}
}