ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Use a single button for expanding and collapsing a notebook cell. (#8797)

Browse Source
This commit is contained in:
Cory Rivera
2020-01-03 10:34:45 -08:00
committed by GitHub
parent c3ddbba997
commit d2e367c139
2 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.html
View File

@@ -6,5 +6,4 @@
--> -->
<div style="width: 100%; height: fit-content; display: flex; flex-flow: column"> <div style="width: 100%; height: fit-content; display: flex; flex-flow: column">
<button #collapseCellButton (click)="toggleCollapsed($event)" class="hide-component-button"></button> <button #collapseCellButton (click)="toggleCollapsed($event)" class="hide-component-button"></button>
<button #expandCellButton (click)="toggleCollapsed($event)" style="display:none" class="hide-component-button icon-show-cell"></button>
</div> </div>

27
src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.ts
View File

@@ -18,7 +18,12 @@ export const COLLAPSE_SELECTOR: string = 'collapse-component';
export class CollapseComponent extends CellView implements OnInit, OnChanges { export class CollapseComponent extends CellView implements OnInit, OnChanges {
@ViewChild('collapseCellButton', { read: ElementRef }) private collapseCellButtonElement: ElementRef; @ViewChild('collapseCellButton', { read: ElementRef }) private collapseCellButtonElement: ElementRef;
@ViewChild('expandCellButton', { read: ElementRef }) private expandCellButtonElement: ElementRef;
private readonly expandButtonTitle = localize('expandCellContents', "Expand code cell contents");
private readonly expandButtonClass = 'icon-show-cell';
private readonly collapseButtonTitle = localize('collapseCellContents', "Collapse code cell contents");
private readonly collapseButtonClass = 'icon-hide-cell';
@Input() cellModel: ICellModel; @Input() cellModel: ICellModel;
@Input() activeCellId: string; @Input() activeCellId: string;
@@ -28,8 +33,6 @@ export class CollapseComponent extends CellView implements OnInit, OnChanges {
} }
ngOnInit() { ngOnInit() {
this.collapseCellButtonElement.nativeElement.title = localize('collapseCellContents', "Collapse code cell contents");
this.expandCellButtonElement.nativeElement.title = localize('expandCellContents', "Expand code cell contents");
} }
ngOnChanges(changes: { [propKey: string]: SimpleChange }) { ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
@@ -47,13 +50,14 @@ export class CollapseComponent extends CellView implements OnInit, OnChanges {
private handleCellCollapse(isCollapsed: boolean): void { private handleCellCollapse(isCollapsed: boolean): void {
let collapseButton = <HTMLElement>this.collapseCellButtonElement.nativeElement; let collapseButton = <HTMLElement>this.collapseCellButtonElement.nativeElement;
let expandButton = <HTMLElement>this.expandCellButtonElement.nativeElement;
if (isCollapsed) { if (isCollapsed) {
collapseButton.style.display = 'none'; collapseButton.classList.remove(this.collapseButtonClass);
expandButton.style.display = 'block'; collapseButton.classList.add(this.expandButtonClass);
collapseButton.title = this.expandButtonTitle;
} else { } else {
collapseButton.style.display = 'block'; collapseButton.classList.remove(this.expandButtonClass);
expandButton.style.display = 'none'; collapseButton.classList.add(this.collapseButtonClass);
collapseButton.title = this.collapseButtonTitle;
} }
} }
@@ -74,11 +78,12 @@ export class CollapseComponent extends CellView implements OnInit, OnChanges {
public toggleIconVisibility(isActiveOrHovered: boolean) { public toggleIconVisibility(isActiveOrHovered: boolean) {
let collapseButton = <HTMLElement>this.collapseCellButtonElement.nativeElement; let collapseButton = <HTMLElement>this.collapseCellButtonElement.nativeElement;
let buttonClass = 'icon-hide-cell'; if (collapseButton.title === this.collapseButtonTitle) {
if (isActiveOrHovered) { if (isActiveOrHovered) {
collapseButton.classList.add(buttonClass); collapseButton.classList.add(this.collapseButtonClass);
} else { } else {
collapseButton.classList.remove(buttonClass); collapseButton.classList.remove(this.collapseButtonClass);
}
} }
} }
} }