DEV/microsoft_vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-20 00:04:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update default styles and polish focus treatment

Browse Source
This commit is contained in:
Miguel Solorio 2020-11-16 10:49:25 -08:00
parent 00525e9f7c
commit e7fe18ddf8
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/theme-defaults/themes/light_defaults.json
View File

@ -21,9 +21,7 @@
"sideBarSectionHeader.background": "#0000",
"sideBarSectionHeader.border": "#61616130",
"tab.lastPinnedBorder": "#61616130",
"notebook.focusedCellBackground": "#c8ddf150",
"notebook.cellBorderColor": "#dae3e9",
"notebook.outputContainerBackgroundColor": "#c8ddf150"
"notebook.cellBorderColor": "#E8E8E8"
},
"semanticHighlighting": true
}

20
src/vs/workbench/contrib/notebook/browser/media/notebook.css
View File

@ -433,9 +433,7 @@
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container {
position: relative;
height: 16px;
flex-shrink: 0;
top: 9px;
z-index: 27;
/* Above the drag handle */
}
@ -445,8 +443,8 @@
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container .monaco-toolbar .codicon {
margin: 0;
padding-right: 4px;
margin: 0 4px 0 0;
padding: 6px;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .run-button-container .monaco-toolbar .actions-container {
@ -479,7 +477,7 @@
}
.monaco-workbench .notebookOverlay .cell .monaco-progress-container {
top: -5px;
top: -3px;
position: absolute;
left: 0;
@ -491,7 +489,7 @@
height: 2px;
}
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-has-toolbar-actions .cell-title-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row:hover .cell-has-toolbar-actions .cell-title-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions.cell-output-hover .cell-title-toolbar,
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell-has-toolbar-actions:hover .cell-title-toolbar {
visibility: visible;
@ -795,6 +793,7 @@
.monaco-workbench .notebookOverlay > .cell-list-container .notebook-folding-indicator .codicon {
visibility: visible;
height: 16px;
padding: 4px;
}
/** Theming */
@ -847,3 +846,12 @@
position: absolute;
display: flex;
}
/* TODO @misolori localize string */
.monaco-workbench .notebookOverlay > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.focused .cell-statusbar-container .cell-run-status:empty::before {
content: "Ctrl + Enter to run";
width: auto;
height: 100%;
display: block;
opacity: 0.7;
}

27
src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts
View File

@ -34,7 +34,7 @@ import { ServiceCollection } from 'vs/platform/instantiation/common/serviceColle
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { IQuickInputService, IQuickPickItem, QuickPickInput } from 'vs/platform/quickinput/common/quickInput';
import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
import { contrastBorder, diffInserted, diffRemoved, editorBackground, errorForeground, focusBorder, foreground, listFocusBackground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry';
import { contrastBorder, diffInserted, diffRemoved, editorBackground, errorForeground, focusBorder, foreground, listInactiveSelectionBackground, registerColor, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, textBlockQuoteBackground, textBlockQuoteBorder, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry';
import { IColorTheme, IThemeService, registerThemingParticipant, ThemeColor } from 'vs/platform/theme/common/themeService';
import { EditorMemento } from 'vs/workbench/browser/parts/editor/editorPane';
import { IEditorMemento } from 'vs/workbench/common/editor';
@ -1842,7 +1842,7 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
}
export const notebookCellBorder = registerColor('notebook.cellBorderColor', {
dark: transparent(PANEL_BORDER, .4),
dark: transparent(listInactiveSelectionBackground, 1),
light: transparent(listInactiveSelectionBackground, 1),
hc: PANEL_BORDER
}, nls.localize('notebook.cellBorderColor', "The border color for notebook cells."));
@ -1873,7 +1873,7 @@ export const cellStatusIconRunning = registerColor('notebookStatusRunningIcon.fo
export const notebookOutputContainerColor = registerColor('notebook.outputContainerBackgroundColor', {
dark: notebookCellBorder,
light: transparent(listFocusBackground, .4),
light: notebookCellBorder,
hc: null
}, nls.localize('notebook.outputContainerBackgroundColor', "The Color of the notebook output container background."));
@ -1885,8 +1885,8 @@ export const CELL_TOOLBAR_SEPERATOR = registerColor('notebook.cellToolbarSeparat
}, nls.localize('notebook.cellToolbarSeparator', "The color of the separator in the cell bottom toolbar"));
export const focusedCellBackground = registerColor('notebook.focusedCellBackground', {
dark: transparent(PANEL_BORDER, .4),
light: transparent(listFocusBackground, .4),
dark: null,
light: null,
hc: null
}, nls.localize('focusedCellBackground', "The background color of a cell when the cell is focused."));
@ -1896,9 +1896,15 @@ export const cellHoverBackground = registerColor('notebook.cellHoverBackground',
hc: null
}, nls.localize('notebook.cellHoverBackground', "The background color of a cell when the cell is hovered."));
export const selectedCellBorder = registerColor('notebook.selectedCellBorder', {
dark: notebookCellBorder,
light: notebookCellBorder,
hc: focusBorder
}, nls.localize('notebook.selectedCellBorder', "The color of the cell's top and bottom border when the cell is selected but not focusd."));
export const focusedCellBorder = registerColor('notebook.focusedCellBorder', {
dark: Color.white.transparent(0.12),
light: Color.black.transparent(0.12),
dark: focusBorder,
light: focusBorder,
hc: focusBorder
}, nls.localize('notebook.focusedCellBorder', "The color of the cell's top and bottom border when the cell is focused."));
@ -2026,6 +2032,13 @@ registerThemingParticipant((theme, collector) => {
border-color: ${focusedCellBorderColor} !important;
}`);
const selectedCellBorderColor = theme.getColor(selectedCellBorder);
collector.addRule(`
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-top:before,
.monaco-workbench .notebookOverlay .monaco-list:focus-within .monaco-list-row.focused .cell-editor-focus .cell-focus-indicator-bottom:before {
border-color: ${selectedCellBorderColor} !important;
}`);
const cellSymbolHighlightColor = theme.getColor(cellSymbolHighlight);
if (cellSymbolHighlightColor) {
collector.addRule(`.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.code-cell-row.nb-symbolHighlight .cell-focus-indicator,