ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-26 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix/navigating find results on html elements (#14079)

Browse Source 
* highlight current range in the marked html

* find ranges on textContent not innerHtml

* add comment

* highlight all and mark the specific in orange

* register highlights in color themes

* fix the closure on the last style

* undo delete locproj file

* add comment

* undo format on locProj file
This commit is contained in:
Maddy
2021-02-05 20:50:01 -08:00
committed by GitHub
parent 467a34e878
commit 63f9be6b5f
5 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
View File

@@ -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('');
}

7
src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
View File

@@ -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;

14
src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
View File

@@ -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;}`);
}
});
}