10712, 10677 - Fixed focus indicators for both main toolbar and cell … (#10756)

* 10712, 10677 - Fixed focus indicators for both main toolbar and cell toolbar.

* Removed duplicated line
This commit is contained in:
Hale Rankin
2020-06-05 17:46:19 -07:00
committed by GitHub
parent 4339b5b7d3
commit eafe659ec9
6 changed files with 46 additions and 27 deletions

View File

@@ -56,6 +56,9 @@ export class CellToolbarComponent {
this._actionBar = new Taskbar(taskbar);
this._actionBar.context = context;
let addCellsButton = new AddCellAction('notebook.AddCodeCell', localize('codeCellsPreview', "Add cell"), 'notebook-button masked-pseudo code');
addCellsButton.cellType = CellTypes.Code;
let addCodeCellButton = new AddCellAction('notebook.AddCodeCell', localize('codePreview', "Code cell"), 'notebook-button masked-pseudo code');
addCodeCellButton.cellType = CellTypes.Code;
@@ -74,14 +77,14 @@ export class CellToolbarComponent {
let buttonDropdownContainer = DOM.$('li.action-item');
buttonDropdownContainer.setAttribute('role', 'presentation');
let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
addCodeCellButton,
addCellsButton,
[addCodeCellButton, addTextCellButton],
this.contextMenuService,
undefined,
this._actionBar.actionRunner,
undefined,
'codicon masked-icon new',
localize('addCell', "Cell"),
'',
undefined
);
dropdownMenuActionViewItem.render(buttonDropdownContainer);

View File

@@ -39,6 +39,15 @@ cell-toolbar-component .monaco-action-bar .action-label {
}
cell-toolbar-component ul.actions-container li a.masked-icon {
display: flex;
}
cell-toolbar-component ul.actions-container li a.masked-icon,
cell-toolbar-component ul.actions-container li a.masked-icon:before {
height: 24px;
width: 29px;
}
cell-toolbar-component .codicon.masked-icon,
.vs cell-toolbar-component .codicon.masked-icon,
.vs-dark cell-toolbar-component .codicon.masked-icon,
.hc-black cell-toolbar-component .codicon.masked-icon {
background-image: none;
}

View File

@@ -37,21 +37,23 @@
min-height: 21px;
}
.notebookEditor .actions-container .action-item .notebook-button {
.notebookEditor .editor-toolbar .actions-container .action-item .notebook-button {
display: inline-block;
width: 100%;
padding: 0px;
text-align: center;
cursor: pointer;
padding-left: 18px;
padding: 0 18px;
background-size: 13px;
margin-right: 20px;
font-size: 13px;
height: 21px;
}
.notebookEditor .in-preview .actions-container .action-item .notebook-button {
.notebookEditor .editor-toolbar .actions-container .action-item .notebook-button.masked-icon {
padding: 0;
width: 28px;
}
.notebookEditor .in-preview .actions-container .action-item .notebook-button,
.notebookEditor .in-preview .actions-container .action-item .notebook-button:before {
display: flex;
background-size: 16px;
height: 100%;
}
@@ -66,7 +68,7 @@
.in-preview
.actions-container
.action-item
.notebook-button.masked-icon {
.notebook-button.masked-icon:before {
margin-right: 0;
padding-left: 18px;
width: 16px;
@@ -175,6 +177,10 @@
.notebook-button.icon-clear-results {
background-image: url("./media/dark/clear_results_inverse.svg");
}
.notebookEditor .in-preview .notebook-button.masked-icon {
background-image: none;
}
/* non-preview */
.notebookEditor .in-preview .carbon-taskbar.monaco-toolbar .monaco-select-box {

View File

@@ -150,7 +150,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
//Notebook toolbar masked icons
const notebookToolbarIconColor = theme.getColor(notebookToolbarIcon);
if (notebookToolbarIconColor) {
collector.addRule(`.notebookEditor .notebook-button.masked-icon { background-color: ${notebookToolbarIconColor};}`);
collector.addRule(`.notebookEditor .notebook-button.masked-icon:before { background-color: ${notebookToolbarIconColor};}`);
collector.addRule(`.notebookEditor .notebook-button.masked-pseudo:before { background-color: ${notebookToolbarIconColor};}`);
}
const notebookToolbarLinesColor = theme.getColor(notebookToolbarLines);
@@ -172,7 +172,7 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
if (cellBorderColor) {
collector.addRule(`.notebookEditor .notebook-cell.active { border-color: ${cellBorderColor};}`);
collector.addRule(`.notebookEditor .notebook-cell.active cell-toolbar-component { border-color: ${cellBorderColor};}`);
collector.addRule(`.notebookEditor .notebook-cell.active cell-toolbar-component .codicon { background-color: ${cellBorderColor};}`);
collector.addRule(`.notebookEditor .notebook-cell.active cell-toolbar-component .codicon:before { background-color: ${cellBorderColor};}`);
}
// Cell toolbar background
const notebookToolbarSelectBackgroundColor = theme.getColor(notebookToolbarSelectBackground);