mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-27 09:35:37 -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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user