diff --git a/resources/xlf/LocProject.json b/resources/xlf/LocProject.json index 966c66a32b..2191fb0d23 100644 --- a/resources/xlf/LocProject.json +++ b/resources/xlf/LocProject.json @@ -90,4 +90,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/src/sql/platform/theme/common/colorRegistry.ts b/src/sql/platform/theme/common/colorRegistry.ts index 8bfef31f75..0b16ff73f5 100644 --- a/src/sql/platform/theme/common/colorRegistry.ts +++ b/src/sql/platform/theme/common/colorRegistry.ts @@ -69,6 +69,10 @@ export const codeEditorToolbarBorder = registerColor('notebook.codeEditorToolbar export const notebookCellTagBackground = registerColor('notebook.notebookCellTagBackground', { light: '#0078D4', dark: '#0078D4', hc: '#0078D4' }, nls.localize('notebook.notebookCellTagBackground', "Tag background color.")); export const notebookCellTagForeground = registerColor('notebook.notebookCellTagForeground', { light: '#FFFFFF', dark: '#FFFFFF', hc: '#FFFFFF' }, nls.localize('notebook.notebookCellTagForeground', "Tag foreground color.")); +// Notebook: Find +export const notebookFindMatchHighlight = registerColor('notebook.findMatchHighlightBackground', { light: '#FFFF00', dark: '#FFFF00', hc: null }, nls.localize('notebookFindMatchHighlight', "Color of the other search matches. The color must not be opaque so as not to hide underlying decorations."), true); +export const notebookFindRangeHighlight = registerColor('notebook.findRangeHighlightBackground', { dark: '#FFA500', light: '#FFA500', hc: null }, nls.localize('notebookFindRangeHighlight', "Color of the range limiting the search. The color must not be opaque so as not to hide underlying decorations."), true); + // Info Box export const InfoBoxInformationBackground = registerColor('infoBox.infomationBackground', { light: '#F0F6FF', dark: '#001433', hc: '#000000' }, nls.localize('infoBox.infomationBackground', "InfoBox: The background color when the notification type is information.")); export const InfoBoxWarningBackground = registerColor('infoBox.warningBackground', { light: '#FFF8F0', dark: '#331B00', hc: '#000000' }, nls.localize('infoBox.warningBackground', "InfoBox: The background color when the notification type is warning.")); diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts index 4f8d512d5c..4a021ad56d 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts @@ -32,7 +32,8 @@ import { NotebookInput } from 'sql/workbench/contrib/notebook/browser/models/not export const TEXT_SELECTOR: string = 'text-cell-component'; const USER_SELECT_CLASS = 'actionselect'; - +const findHighlightClass = 'rangeHighlight'; +const findRangeSpecificClass = 'rangeSpecificHighlight'; @Component({ selector: TEXT_SELECTOR, templateUrl: decodeURI(require.toUrl('./textCell.component.html')) @@ -106,7 +107,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, @Inject(IConfigurationService) private _configurationService: IConfigurationService, @Inject(INotebookService) private _notebookService: INotebookService, - ) { super(); this.markdownRenderer = this._instantiationService.createInstance(NotebookMarkdownRenderer); @@ -361,31 +361,41 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { private addDecoration(range: NotebookRange): void { if (range && this.output && this.output.nativeElement) { + let markAllOccurances = new Mark(this.output.nativeElement); // to highlight all occurances in the element. let elements = this.getHtmlElements(); if (elements?.length >= range.startLineNumber) { let elementContainingText = elements[range.startLineNumber - 1]; - let mark = new Mark(elementContainingText); + let markCurrent = new Mark(elementContainingText); // to highlight the current item of them all. let editor = this._notebookService.findNotebookEditor(this.model.notebookUri); if (editor) { let findModel = (editor.notebookParams.input as NotebookInput).notebookFindModel; if (findModel?.findMatches?.length > 0) { let searchString = findModel.findExpression; - mark.mark(searchString, { - className: 'rangeHighlight' + markAllOccurances.mark(searchString, { + className: findHighlightClass }); elementContainingText.scrollIntoView({ behavior: 'smooth' }); } } + markCurrent.markRanges([{ + start: range.startColumn - 1, //subtracting 1 since markdown html is 0 indexed. + length: range.endColumn - range.startColumn + }], { + className: findRangeSpecificClass + }); + elementContainingText.scrollIntoView({ behavior: 'smooth' }); } } } private removeDecoration(range: NotebookRange): void { if (range && this.output && this.output.nativeElement) { + let markAllOccurances = new Mark(this.output.nativeElement); let elements = this.getHtmlElements(); let elementContainingText = elements[range.startLineNumber - 1]; - let mark = new Mark(elementContainingText); - mark.unmark({ acrossElements: true, className: 'rangeHighlight' }); + let markCurrent = new Mark(elementContainingText); + markAllOccurances.unmark({ acrossElements: true, className: findHighlightClass }); + markCurrent.unmark({ acrossElements: true, className: findRangeSpecificClass }); } } @@ -430,8 +440,8 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { let textOutput: string[] = []; let elements = this.getHtmlElements(); elements.forEach(element => { - if (element && element.innerText) { - textOutput.push(element.innerText); + if (element && element.textContent) { + textOutput.push(element.textContent); } else { textOutput.push(''); } diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css index a61f28df51..98c90de95b 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css @@ -47,13 +47,6 @@ text-cell-component code-component .monaco-editor .inputarea.ime-input { background-color: transparent; } -.vs .notebook-preview .rangeHighlight { - background-color: rgba(255, 255, 0, 0.2) -} - -.vs-dark .notebook-preview .rangeHighlight { - background-color: rgba(255, 255, 0, 0.2) -} text-cell-component table { border-collapse: collapse; diff --git a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts index 2644fddec0..607210c244 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts @@ -8,7 +8,7 @@ import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/ import { SIDE_BAR_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme'; import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground } from 'vs/platform/theme/common/colorRegistry'; import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry'; -import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder, notebookCellTagBackground, notebookCellTagForeground } from 'sql/platform/theme/common/colorRegistry'; +import { cellBorder, notebookToolbarIcon, notebookToolbarLines, buttonMenuArrow, dropdownArrow, markdownEditorBackground, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder, notebookToolbarSelectBackground, splitBorder, notebookCellTagBackground, notebookCellTagForeground, notebookFindMatchHighlight, notebookFindRangeHighlight } from 'sql/platform/theme/common/colorRegistry'; import { IDisposable } from 'vs/base/common/lifecycle'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { BareResultsGridInfo, getBareResultsGridInfoStyles } from 'sql/workbench/contrib/query/browser/queryResultsEditor'; @@ -240,7 +240,17 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf const notebookCellTagBackgroundColor = theme.getColor(notebookCellTagBackground); const notebookCellTagForegroundColor = theme.getColor(notebookCellTagForeground); if (notebookCellTagBackgroundColor && notebookCellTagForegroundColor) { - collector.addRule(`code-component .parameter span { background-color: ${notebookCellTagBackgroundColor}; color: ${notebookCellTagForegroundColor}`); + collector.addRule(`code-component .parameter span { background-color: ${notebookCellTagBackgroundColor}; color: ${notebookCellTagForegroundColor};}`); + } + + // Notebook Find colors + const notebookFindMatchHighlightColor = theme.getColor(notebookFindMatchHighlight); + const notebookFindRangeHighlightColor = theme.getColor(notebookFindRangeHighlight); + if (notebookFindMatchHighlightColor) { + collector.addRule(`.notebook-preview .rangeHighlight { background-color: ${notebookFindMatchHighlightColor};}`); + } + if (notebookFindRangeHighlightColor) { + collector.addRule(`.notebook-preview .rangeSpecificHighlight { background-color: ${notebookFindRangeHighlightColor}!important;}`); } }); }