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

@@ -2,8 +2,9 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.notebookEditor .scrollable {
margin-top: 5px;
padding-top: 6px;
}
.notebookEditor .taskbarSeparator {
@@ -19,7 +20,7 @@
border-color: transparent;
border-style: solid;
border-width: 1px 1px 1px 4px;
margin: 1px 20px;
margin: 16px;
position: relative;
}
@@ -236,54 +237,6 @@
margin-right: 10px;
}
.notebookEditor .hoverButtonsContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
padding: 0px 20px;
margin: 1px 0px;
box-sizing: border-box;
}
.notebookEditor .hoverButtonsContainer .containerBackground {
position: absolute;
width: auto;
left: 20px;
right: 20px;
height: 1px;
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 2px;
padding: 4px 12px;
font-size: 12px;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
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;
@@ -295,24 +248,6 @@
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");
}
.monaco-workbench.mac .notebookEditor .select-container {
padding-top: 2px;
}