mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 10:58:30 -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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user