mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-26 01:25:38 -05:00
Add buttons to Notebooks for creating new cells between other existing cells (#6596)
This commit is contained in:
Cory Rivera
@@ -30,10 +30,6 @@ export class CellToggleMoreActions {
|
||||
@IInstantiationService private instantiationService: IInstantiationService) {
|
||||
this._actions.push(
|
||||
instantiationService.createInstance(DeleteCellAction, 'delete', localize('delete', "Delete")),
|
||||
instantiationService.createInstance(AddCellFromContextAction, 'codeBefore', localize('codeBefore', "Insert Code Before"), CellTypes.Code, false),
|
||||
instantiationService.createInstance(AddCellFromContextAction, 'codeAfter', localize('codeAfter', "Insert Code After"), CellTypes.Code, true),
|
||||
instantiationService.createInstance(AddCellFromContextAction, 'markdownBefore', localize('markdownBefore', "Insert Text Before"), CellTypes.Markdown, false),
|
||||
instantiationService.createInstance(AddCellFromContextAction, 'markdownAfter', localize('markdownAfter', "Insert Text After"), CellTypes.Markdown, true),
|
||||
instantiationService.createInstance(RunCellsAction, 'runAllBefore', localize('runAllBefore', "Run Cells Before"), false),
|
||||
instantiationService.createInstance(RunCellsAction, 'runAllAfter', localize('runAllAfter', "Run Cells After"), true),
|
||||
instantiationService.createInstance(ClearCellOutputAction, 'clear', localize('clear', "Clear Output"))
|
||||
@@ -64,34 +60,6 @@ export class CellToggleMoreActions {
|
||||
}
|
||||
}
|
||||
|
||||
export class AddCellFromContextAction extends CellActionBase {
|
||||
constructor(
|
||||
id: string, label: string, private cellType: CellType, private isAfter: boolean,
|
||||
@INotificationService notificationService: INotificationService
|
||||
) {
|
||||
super(id, label, undefined, notificationService);
|
||||
}
|
||||
|
||||
doRun(context: CellContext): Promise<void> {
|
||||
try {
|
||||
let model = context.model;
|
||||
let index = model.cells.findIndex((cell) => cell.id === context.cell.id);
|
||||
if (index !== undefined && this.isAfter) {
|
||||
index += 1;
|
||||
}
|
||||
model.addCell(this.cellType, index);
|
||||
} catch (error) {
|
||||
let message = getErrorMessage(error);
|
||||
|
||||
this.notificationService.notify({
|
||||
severity: Severity.Error,
|
||||
message: message
|
||||
});
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
|
||||
export class DeleteCellAction extends CellActionBase {
|
||||
constructor(id: string, label: string,
|
||||
@INotificationService notificationService: INotificationService
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 7C1.27083 7 1.52865 6.94792 1.77344 6.84375C2.01823 6.73438 2.22917 6.59115 2.40625 6.41406C2.58854 6.23177 2.73177 6.02083 2.83594 5.78125C2.94531 5.53646 3 5.27604 3 5C3 4.63021 2.99219 4.26042 2.97656 3.89062C2.96094 3.52083 2.97135 3.16146 3.00781 2.8125C3.04948 2.45833 3.13281 2.11719 3.25781 1.78906C3.38802 1.46094 3.59375 1.15625 3.875 0.875C4.15625 0.59375 4.48177 0.377604 4.85156 0.226562C5.22135 0.0755208 5.60417 0 6 0V1C5.72396 1 5.46354 1.05469 5.21875 1.16406C4.97917 1.26823 4.76823 1.41146 4.58594 1.59375C4.40885 1.77083 4.26562 1.98177 4.15625 2.22656C4.05208 2.47135 4 2.72917 4 3C4 3.29167 4.00521 3.58073 4.01562 3.86719C4.02604 4.14844 4.02604 4.42708 4.01562 4.70312C4.01042 4.97396 3.98698 5.23958 3.94531 5.5C3.90365 5.75521 3.83333 6 3.73438 6.23438C3.63542 6.46875 3.5 6.69271 3.32812 6.90625C3.15625 7.11979 2.9349 7.31771 2.66406 7.5C2.9349 7.68229 3.15625 7.88021 3.32812 8.09375C3.5 8.30729 3.63542 8.53125 3.73438 8.76562C3.83333 9 3.90365 9.2474 3.94531 9.50781C3.98698 9.76302 4.01042 10.0286 4.01562 10.3047C4.02604 10.5755 4.02604 10.8542 4.01562 11.1406C4.00521 11.4219 4 11.7083 4 12C4 12.276 4.05208 12.5365 4.15625 12.7812C4.26562 13.0208 4.40885 13.2318 4.58594 13.4141C4.76823 13.5911 4.97917 13.7344 5.21875 13.8438C5.46354 13.9479 5.72396 14 6 14V15C5.60417 15 5.22135 14.9245 4.85156 14.7734C4.48177 14.6224 4.15625 14.4062 3.875 14.125C3.59375 13.8438 3.38802 13.5391 3.25781 13.2109C3.13281 12.8828 3.04948 12.5443 3.00781 12.1953C2.97135 11.8411 2.96094 11.4792 2.97656 11.1094C2.99219 10.7396 3 10.3698 3 10C3 9.72917 2.94531 9.47135 2.83594 9.22656C2.73177 8.98177 2.58854 8.77083 2.40625 8.59375C2.22917 8.41146 2.01823 8.26823 1.77344 8.16406C1.52865 8.05469 1.27083 8 1 8V7ZM10 0C10.3958 0 10.7786 0.0755208 11.1484 0.226562C11.5182 0.377604 11.8438 0.59375 12.125 0.875C12.4062 1.15625 12.6094 1.46094 12.7344 1.78906C12.8646 2.11719 12.9479 2.45833 12.9844 2.8125C13.026 3.16146 13.0391 3.52083 13.0234 3.89062C13.0078 4.26042 13 4.63021 13 5C13 5.27604 13.0521 5.53646 13.1562 5.78125C13.2656 6.02083 13.4089 6.23177 13.5859 6.41406C13.7682 6.59115 13.9792 6.73438 14.2188 6.84375C14.4635 6.94792 14.724 7 15 7V8C14.724 8 14.4635 8.05469 14.2188 8.16406C13.9792 8.26823 13.7682 8.41146 13.5859 8.59375C13.4089 8.77083 13.2656 8.98177 13.1562 9.22656C13.0521 9.47135 13 9.72917 13 10C13 10.3698 13.0078 10.7396 13.0234 11.1094C13.0391 11.4792 13.026 11.8411 12.9844 12.1953C12.9479 12.5443 12.8646 12.8828 12.7344 13.2109C12.6094 13.5391 12.4062 13.8438 12.125 14.125C11.8438 14.4062 11.5182 14.6224 11.1484 14.7734C10.7786 14.9245 10.3958 15 10 15V14C10.2708 14 10.5286 13.9479 10.7734 13.8438C11.0182 13.7344 11.2292 13.5911 11.4062 13.4141C11.5885 13.2318 11.7318 13.0208 11.8359 12.7812C11.9453 12.5365 12 12.276 12 12C12 11.7083 11.9948 11.4219 11.9844 11.1406C11.974 10.8542 11.9714 10.5755 11.9766 10.3047C11.987 10.0286 12.013 9.76302 12.0547 9.50781C12.0964 9.2474 12.1667 9 12.2656 8.76562C12.3646 8.53125 12.5 8.30729 12.6719 8.09375C12.8438 7.88021 13.0651 7.68229 13.3359 7.5C13.0651 7.31771 12.8438 7.11979 12.6719 6.90625C12.5 6.69271 12.3646 6.46875 12.2656 6.23438C12.1667 6 12.0964 5.75521 12.0547 5.5C12.013 5.23958 11.987 4.97396 11.9766 4.70312C11.9714 4.42708 11.974 4.14844 11.9844 3.86719C11.9948 3.58073 12 3.29167 12 3C12 2.72917 11.9453 2.47135 11.8359 2.22656C11.7318 1.98177 11.5885 1.77083 11.4062 1.59375C11.2292 1.41146 11.0182 1.26823 10.7734 1.16406C10.5286 1.05469 10.2708 1 10 1V0Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 3.03125V14.9375H2.09375V11.9375H3V14.0312H15.0938V3.9375H9V3.03125H16ZM2.92188 9.9375H0V9.59375C0.0989583 9.57812 0.197917 9.5651 0.296875 9.55469C0.395833 9.53906 0.492188 9.51823 0.585938 9.49219C0.658854 9.47135 0.736979 9.40365 0.820312 9.28906C0.908854 9.17448 0.992188 9.04688 1.07031 8.90625C1.14844 8.76562 1.21875 8.6276 1.28125 8.49219C1.34896 8.35156 1.39844 8.24479 1.42969 8.17188L4.46094 1H5.10156L8.08594 8.25C8.13281 8.36458 8.1875 8.49479 8.25 8.64062C8.31771 8.78646 8.39323 8.92708 8.47656 9.0625C8.5651 9.19271 8.66406 9.30729 8.77344 9.40625C8.88802 9.5 9.01562 9.55469 9.15625 9.57031C9.30208 9.58594 9.44792 9.59375 9.59375 9.59375V9.9375H6.10938V9.59375C6.19792 9.59375 6.29427 9.59635 6.39844 9.60156C6.5026 9.60156 6.59896 9.59115 6.6875 9.57031C6.78125 9.54427 6.85938 9.5026 6.92188 9.44531C6.98438 9.38281 7.01562 9.28646 7.01562 9.15625C7.01562 9.04167 6.98698 8.88542 6.92969 8.6875C6.8724 8.48438 6.80469 8.27604 6.72656 8.0625C6.64844 7.84896 6.56771 7.64323 6.48438 7.44531C6.40625 7.24219 6.34115 7.08073 6.28906 6.96094H2.80469C2.75781 7.08073 2.6875 7.24219 2.59375 7.44531C2.50521 7.64323 2.41667 7.84896 2.32812 8.0625C2.24479 8.27604 2.16927 8.48177 2.10156 8.67969C2.03906 8.8776 2.00781 9.03385 2.00781 9.14844C2.00781 9.27344 2.03906 9.36719 2.10156 9.42969C2.16406 9.48698 2.24219 9.52604 2.33594 9.54688C2.42969 9.56771 2.52865 9.58073 2.63281 9.58594C2.74219 9.58594 2.83854 9.58854 2.92188 9.59375V9.9375ZM3.14062 5.96094H5.82812L4.45312 3.00781L3.14062 5.96094Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 7C1.27083 7 1.52865 6.94792 1.77344 6.84375C2.01823 6.73438 2.22917 6.59115 2.40625 6.41406C2.58854 6.23177 2.73177 6.02083 2.83594 5.78125C2.94531 5.53646 3 5.27604 3 5C3 4.63021 2.99219 4.26042 2.97656 3.89062C2.96094 3.52083 2.97135 3.16146 3.00781 2.8125C3.04948 2.45833 3.13281 2.11719 3.25781 1.78906C3.38802 1.46094 3.59375 1.15625 3.875 0.875C4.15625 0.59375 4.48177 0.377604 4.85156 0.226562C5.22135 0.0755208 5.60417 0 6 0V1C5.72396 1 5.46354 1.05469 5.21875 1.16406C4.97917 1.26823 4.76823 1.41146 4.58594 1.59375C4.40885 1.77083 4.26562 1.98177 4.15625 2.22656C4.05208 2.47135 4 2.72917 4 3C4 3.29167 4.00521 3.58073 4.01562 3.86719C4.02604 4.14844 4.02604 4.42708 4.01562 4.70312C4.01042 4.97396 3.98698 5.23958 3.94531 5.5C3.90365 5.75521 3.83333 6 3.73438 6.23438C3.63542 6.46875 3.5 6.69271 3.32812 6.90625C3.15625 7.11979 2.9349 7.31771 2.66406 7.5C2.9349 7.68229 3.15625 7.88021 3.32812 8.09375C3.5 8.30729 3.63542 8.53125 3.73438 8.76562C3.83333 9 3.90365 9.2474 3.94531 9.50781C3.98698 9.76302 4.01042 10.0286 4.01562 10.3047C4.02604 10.5755 4.02604 10.8542 4.01562 11.1406C4.00521 11.4219 4 11.7083 4 12C4 12.276 4.05208 12.5365 4.15625 12.7812C4.26562 13.0208 4.40885 13.2318 4.58594 13.4141C4.76823 13.5911 4.97917 13.7344 5.21875 13.8438C5.46354 13.9479 5.72396 14 6 14V15C5.60417 15 5.22135 14.9245 4.85156 14.7734C4.48177 14.6224 4.15625 14.4062 3.875 14.125C3.59375 13.8438 3.38802 13.5391 3.25781 13.2109C3.13281 12.8828 3.04948 12.5443 3.00781 12.1953C2.97135 11.8411 2.96094 11.4792 2.97656 11.1094C2.99219 10.7396 3 10.3698 3 10C3 9.72917 2.94531 9.47135 2.83594 9.22656C2.73177 8.98177 2.58854 8.77083 2.40625 8.59375C2.22917 8.41146 2.01823 8.26823 1.77344 8.16406C1.52865 8.05469 1.27083 8 1 8V7ZM10 0C10.3958 0 10.7786 0.0755208 11.1484 0.226562C11.5182 0.377604 11.8438 0.59375 12.125 0.875C12.4062 1.15625 12.6094 1.46094 12.7344 1.78906C12.8646 2.11719 12.9479 2.45833 12.9844 2.8125C13.026 3.16146 13.0391 3.52083 13.0234 3.89062C13.0078 4.26042 13 4.63021 13 5C13 5.27604 13.0521 5.53646 13.1562 5.78125C13.2656 6.02083 13.4089 6.23177 13.5859 6.41406C13.7682 6.59115 13.9792 6.73438 14.2188 6.84375C14.4635 6.94792 14.724 7 15 7V8C14.724 8 14.4635 8.05469 14.2188 8.16406C13.9792 8.26823 13.7682 8.41146 13.5859 8.59375C13.4089 8.77083 13.2656 8.98177 13.1562 9.22656C13.0521 9.47135 13 9.72917 13 10C13 10.3698 13.0078 10.7396 13.0234 11.1094C13.0391 11.4792 13.026 11.8411 12.9844 12.1953C12.9479 12.5443 12.8646 12.8828 12.7344 13.2109C12.6094 13.5391 12.4062 13.8438 12.125 14.125C11.8438 14.4062 11.5182 14.6224 11.1484 14.7734C10.7786 14.9245 10.3958 15 10 15V14C10.2708 14 10.5286 13.9479 10.7734 13.8438C11.0182 13.7344 11.2292 13.5911 11.4062 13.4141C11.5885 13.2318 11.7318 13.0208 11.8359 12.7812C11.9453 12.5365 12 12.276 12 12C12 11.7083 11.9948 11.4219 11.9844 11.1406C11.974 10.8542 11.9714 10.5755 11.9766 10.3047C11.987 10.0286 12.013 9.76302 12.0547 9.50781C12.0964 9.2474 12.1667 9 12.2656 8.76562C12.3646 8.53125 12.5 8.30729 12.6719 8.09375C12.8438 7.88021 13.0651 7.68229 13.3359 7.5C13.0651 7.31771 12.8438 7.11979 12.6719 6.90625C12.5 6.69271 12.3646 6.46875 12.2656 6.23438C12.1667 6 12.0964 5.75521 12.0547 5.5C12.013 5.23958 11.987 4.97396 11.9766 4.70312C11.9714 4.42708 11.974 4.14844 11.9844 3.86719C11.9948 3.58073 12 3.29167 12 3C12 2.72917 11.9453 2.47135 11.8359 2.22656C11.7318 1.98177 11.5885 1.77083 11.4062 1.59375C11.2292 1.41146 11.0182 1.26823 10.7734 1.16406C10.5286 1.05469 10.2708 1 10 1V0Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 3.03125V14.9375H2.09375V11.9375H3V14.0312H15.0938V3.9375H9V3.03125H16ZM2.92188 9.9375H0V9.59375C0.0989583 9.57812 0.197917 9.5651 0.296875 9.55469C0.395833 9.53906 0.492188 9.51823 0.585938 9.49219C0.658854 9.47135 0.736979 9.40365 0.820312 9.28906C0.908854 9.17448 0.992188 9.04688 1.07031 8.90625C1.14844 8.76562 1.21875 8.6276 1.28125 8.49219C1.34896 8.35156 1.39844 8.24479 1.42969 8.17188L4.46094 1H5.10156L8.08594 8.25C8.13281 8.36458 8.1875 8.49479 8.25 8.64062C8.31771 8.78646 8.39323 8.92708 8.47656 9.0625C8.5651 9.19271 8.66406 9.30729 8.77344 9.40625C8.88802 9.5 9.01562 9.55469 9.15625 9.57031C9.30208 9.58594 9.44792 9.59375 9.59375 9.59375V9.9375H6.10938V9.59375C6.19792 9.59375 6.29427 9.59635 6.39844 9.60156C6.5026 9.60156 6.59896 9.59115 6.6875 9.57031C6.78125 9.54427 6.85938 9.5026 6.92188 9.44531C6.98438 9.38281 7.01562 9.28646 7.01562 9.15625C7.01562 9.04167 6.98698 8.88542 6.92969 8.6875C6.8724 8.48438 6.80469 8.27604 6.72656 8.0625C6.64844 7.84896 6.56771 7.64323 6.48438 7.44531C6.40625 7.24219 6.34115 7.08073 6.28906 6.96094H2.80469C2.75781 7.08073 2.6875 7.24219 2.59375 7.44531C2.50521 7.64323 2.41667 7.84896 2.32812 8.0625C2.24479 8.27604 2.16927 8.48177 2.10156 8.67969C2.03906 8.8776 2.00781 9.03385 2.00781 9.14844C2.00781 9.27344 2.03906 9.36719 2.10156 9.42969C2.16406 9.48698 2.24219 9.52604 2.33594 9.54688C2.42969 9.56771 2.52865 9.58073 2.63281 9.58594C2.74219 9.58594 2.83854 9.58854 2.92188 9.59375V9.9375ZM3.14062 5.96094H5.82812L4.45312 3.00781L3.14062 5.96094Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@@ -9,11 +9,35 @@
|
||||
</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="notebook-cell" *ngFor="let cell of cells" (click)="selectCell(cell, $event)" [class.active]="cell.active">
|
||||
<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 class="hoverButtonsContainer" *ngIf="(cells && cells.length > 0) && !isLoading">
|
||||
<span class="containerBackground"></span>
|
||||
<button class="hoverButton" (click)="addCell('code', 0)">
|
||||
<div class="addCodeIcon"></div>
|
||||
<span>{{addCodeLabel}}</span>
|
||||
</button>
|
||||
<button class="hoverButton" (click)="addCell('markdown', 0)">
|
||||
<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">
|
||||
<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)">
|
||||
<div class="addCodeIcon"></div>
|
||||
<span>{{addCodeLabel}}</span>
|
||||
</button>
|
||||
<button class="hoverButton" (click)="addCell('markdown', findCellIndex(cell) + 1)">
|
||||
<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">
|
||||
|
||||
@@ -159,6 +159,14 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
|
||||
return this._model ? this._model.cells : [];
|
||||
}
|
||||
|
||||
public get addCodeLabel(): string {
|
||||
return localize('addCodeLabel', "Add code");
|
||||
}
|
||||
|
||||
public get addTextLabel(): string {
|
||||
return localize('addTextLabel', "Add text");
|
||||
}
|
||||
|
||||
private updateTheme(theme: IColorTheme): void {
|
||||
let toolbarEl = <HTMLElement>this.toolbar.nativeElement;
|
||||
toolbarEl.style.borderBottomColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
|
||||
@@ -192,8 +200,8 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
|
||||
}
|
||||
|
||||
// Add cell based on cell type
|
||||
public addCell(cellType: CellType) {
|
||||
this._model.addCell(cellType);
|
||||
public addCell(cellType: CellType, index?: number) {
|
||||
this._model.addCell(cellType, index);
|
||||
}
|
||||
|
||||
public onKeyDown(event) {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
.notebookEditor .notebook-cell {
|
||||
margin: 10px 20px 10px;
|
||||
margin: 1px 20px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
@@ -136,4 +136,81 @@
|
||||
.notebookEditor .book-nav .dialog-message-button {
|
||||
min-width: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60%;
|
||||
margin: 1px auto;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer .containerBackground {
|
||||
position: absolute;
|
||||
width: inherit;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
opacity: 0.4;
|
||||
z-index: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer:hover .containerBackground {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer .hoverButton {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 3px;
|
||||
padding: 4px 6px;
|
||||
font-size: 10px;
|
||||
box-sizing: border-box;
|
||||
border-color: transparent;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 3px;
|
||||
z-index: 1;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer:hover .hoverButton {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButton:active {
|
||||
transform:scale(1.05);
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButton .addCodeIcon,
|
||||
.notebookEditor .hoverButton .addTextIcon {
|
||||
display: inline-block;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-size: contain;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButton .addCodeIcon {
|
||||
background-image: url("./media/light/add_code.svg");
|
||||
}
|
||||
|
||||
.vs-dark .notebookEditor .hoverButton .addCodeIcon,
|
||||
.hc-black .notebookEditor .hoverButton .addCodeIcon {
|
||||
background-image: url("./media/dark/add_code_inverse.svg");
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButton .addTextIcon {
|
||||
background-image: url("./media/light/add_text.svg");
|
||||
}
|
||||
|
||||
.vs-dark .notebookEditor .hoverButton .addTextIcon,
|
||||
.hc-black .notebookEditor .hoverButton .addTextIcon {
|
||||
background-image: url("./media/dark/add_text_inverse.svg");
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import 'vs/css!./notebook';
|
||||
|
||||
import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
|
||||
import { SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme';
|
||||
import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground, editorForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry';
|
||||
import { IDisposable } from 'vs/base/common/lifecycle';
|
||||
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
|
||||
@@ -37,6 +37,15 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
`);
|
||||
}
|
||||
|
||||
const textColor = theme.getColor(editorForeground);
|
||||
if (textColor) {
|
||||
collector.addRule(`
|
||||
.notebookEditor .hoverButtonsContainer .hoverButton {
|
||||
color: ${textColor};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Active border
|
||||
const activeBorder = theme.getColor(buttonBackground);
|
||||
if (activeBorder) {
|
||||
@@ -46,6 +55,16 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
border-width: 1px;
|
||||
}
|
||||
`);
|
||||
|
||||
collector.addRule(`
|
||||
.notebookEditor .hoverButton:active {
|
||||
border-color: ${activeBorder};
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer .containerBackground {
|
||||
background-color: ${activeBorder};
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
// Box shadow handling
|
||||
@@ -77,6 +96,18 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
.hc-black .notebookEditor .notebook-cell:hover:not(.active) {
|
||||
box-shadow: 0;
|
||||
}
|
||||
|
||||
.notebookEditor .hoverButtonsContainer .hoverButton:hover {
|
||||
box-shadow: ${lightBoxShadow};
|
||||
}
|
||||
|
||||
.vs-dark .notebookEditor .hoverButtonsContainer .hoverButton:hover {
|
||||
box-shadow: ${darkBoxShadow};
|
||||
}
|
||||
|
||||
.hc-black .notebookEditor .hoverButtonsContainer .hoverButton:hover {
|
||||
box-shadow: 0;
|
||||
}
|
||||
`);
|
||||
|
||||
const inactiveBorder = theme.getColor(SIDE_BAR_BACKGROUND);
|
||||
@@ -111,6 +142,13 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
{
|
||||
background-color: ${codeBackground};
|
||||
}`);
|
||||
|
||||
collector.addRule(`
|
||||
.notebookEditor .hoverButtonsContainer .hoverButton {
|
||||
background-color: ${codeBackground};
|
||||
}
|
||||
`);
|
||||
|
||||
// Margin background will be the same (may override some styles)
|
||||
collector.addRule(`.notebook-cell:not(.active) code-component .monaco-editor .margin { background-color: ${codeBackground}; }`);
|
||||
addBorderToInactiveCodeCells = false;
|
||||
@@ -159,7 +197,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Sidebar and cell outline toolbar color set only when active
|
||||
@@ -191,6 +228,10 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
outline-width: 1px;
|
||||
outline-style: solid;
|
||||
}
|
||||
.hc-black .notebookEditor .hoverButton:not(:active) {
|
||||
border-color: ${hcOutline};
|
||||
border-radius: 0px;
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
@@ -270,4 +311,4 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
|
||||
${getBareResultsGridInfoStyles(rawOptions)}
|
||||
}`);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user