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
2020-05-29 18:27:36 -07:00
committed by GitHub
parent 98ce3c74e6
commit b2e0291a95
15 changed files with 298 additions and 352 deletions

View File

@@ -9,35 +9,14 @@
</div>
<div #container class="scrollable" style="flex: 1 1 auto; position: relative; outline: none" (click)="unselectActiveCell()" (scroll)="scrollHandler($event)">
<loading-spinner [loading]="isLoading"></loading-spinner>
<div class="hoverButtonsContainer" *ngIf="(cells && cells.length > 0) && !isLoading">
<span class="containerBackground"></span>
<button class="hoverButton" (click)="addCell('code', 0, $event)">
<div class="addCodeIcon"></div>
<span>{{addCodeLabel}}</span>
</button>
<button class="hoverButton" (click)="addCell('markdown', 0, $event)">
<div class="addTextIcon"></div>
<span>{{addTextLabel}}</span>
</button>
</div>
<div *ngFor="let cell of cells">
<div class="notebook-cell" (click)="selectCell(cell, $event)" [class.active]="cell.active">
<cell-toolbar-component *ngIf="cell.active" [cellModel]="cell" [model]="model"></cell-toolbar-component>
<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
</code-cell-component>
<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
</text-cell-component>
</div>
<div class="hoverButtonsContainer">
<span class="containerBackground"></span>
<button class="hoverButton" (click)="addCell('code', findCellIndex(cell) + 1, $event)">
<div class="addCodeIcon"></div>
<span>{{addCodeLabel}}</span>
</button>
<button class="hoverButton" (click)="addCell('markdown', findCellIndex(cell) + 1, $event)">
<div class="addTextIcon"></div>
<span>{{addTextLabel}}</span>
</button>
</div>
</div>
<div class="notebook-cell" *ngIf="(!cells || !cells.length) && !isLoading">
<placeholder-cell-component [cellModel]="cell" [model]="model">