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

@@ -128,13 +128,13 @@
background-position: 2px center;
}
.vs .codicon.close,
.vs .codicon.remove {
background: url("close.svg") center center no-repeat !important;
.vs .codicon:not(.masked-icon).close,
.vs .codicon:not(.masked-icon).remove {
background: url('close.svg') center center no-repeat !important;
}
.vs-dark .codicon.close,
.hc-black .codicon.close,
.vs-dark .codicon:not(.masked-icon).close,
.hc-black .codicon:not(.masked-icon).close,
.vs-dark .codicon.remove,
.hc-black .codicon.remove {
background: url("close_inverse.svg") center center no-repeat !important;
@@ -188,12 +188,12 @@
background: url("ellipsis.svg") center center no-repeat;
}
.hc-black .codicon.new,
.vs-dark .codicon.new {
.hc-black .codicon:not(.masked-icon).new,
.vs-dark .codicon:not(.masked-icon).new {
background: url("new_inverse.svg") center center no-repeat;
}
.vs .codicon.new {
.vs .codicon:not(.masked-icon).new {
background: url("new.svg") center center no-repeat;
}
@@ -446,11 +446,11 @@ Includes non-masked style declarations. */
mask-image: url("chevron_down.svg");
}
.vs .codicon.new-blue {
background-image: url("new-blue.svg");
.vs .codicon:not(.masked-icon).new-blue {
background-image: url('new-blue.svg');
}
.vs .codicon.start-outline {
background-image: url("start-outline.svg");
.vs .codicon:not(.masked-icon).start-outline {
background-image: url('start-outline.svg');
}
/* Masked element inside pseudo element */
@@ -504,24 +504,41 @@ Includes non-masked style declarations. */
mask-image: url("markdown.svg");
}
.cell-tool-close {
background-image: url("close-blue.svg");
.codicon.masked-icon.new {
background-image: none;
-webkit-mask-image: url('new.svg');
mask-image: url('new.svg');
}
.cell-tool-edit {
background-image: url("edit.svg");
.codicon.masked-icon.close {
background-image: none;
-webkit-mask-image: url('close-blue.svg');
mask-image: url('close-blue.svg');
}
.cell-tool-move-up {
background-image: url("down-arrow-blue.svg");
.codicon.masked-icon.edit {
background-image: none;
-webkit-mask-image: url('edit.svg');
mask-image: url('edit.svg');
}
.codicon.masked-icon.move-up {
transform: scale(-1);
background-image: none;
-webkit-mask-image: url('down-arrow-blue.svg');
mask-image: url('down-arrow-blue.svg');
}
.cell-tool-move-down {
background-image: url("down-arrow-blue.svg");
.codicon.masked-icon.move-down {
background-image: none;
-webkit-mask-image: url('down-arrow-blue.svg');
mask-image: url('down-arrow-blue.svg');
}
.cell-tool-delete {
background-image: url("garbage-can-blue.svg");
.codicon.masked-icon.delete {
background-image: none;
-webkit-mask-image: url('garbage-can-blue.svg');
mask-image: url('garbage-can-blue.svg');
}
.cell-tool-more {
background-image: url("ellipsis-blue.svg");
.codicon.masked-icon.more {
background-image: none;
-webkit-mask-image: url('ellipsis-blue.svg');
mask-image: url('ellipsis-blue.svg');
}
.database-colored.codicon {