mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-14 18:46:34 -05:00
fixed css for font family (#15119)
This commit is contained in:
@@ -808,7 +808,23 @@ export class ViewModel extends Disposable implements IViewModel {
|
||||
|
||||
const fontInfo = this._configuration.options.get(EditorOption.fontInfo);
|
||||
const colorMap = this._getColorMap();
|
||||
const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`;
|
||||
const hasBadChars = (/[:;\\\/<>]/.test(fontInfo.fontFamily));
|
||||
const useDefaultFontFamily = (hasBadChars || fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily);
|
||||
let fontFamily: string;
|
||||
if (useDefaultFontFamily) {
|
||||
fontFamily = EDITOR_FONT_DEFAULTS.fontFamily;
|
||||
} else {
|
||||
fontFamily = fontInfo.fontFamily;
|
||||
fontFamily = fontFamily.replace(/"/g, '\'');
|
||||
const hasQuotesOrIsList = /[,']/.test(fontFamily);
|
||||
if (!hasQuotesOrIsList) {
|
||||
const needsQuotes = /[+ ]/.test(fontFamily);
|
||||
if (needsQuotes) {
|
||||
fontFamily = `'${fontFamily}'`;
|
||||
}
|
||||
}
|
||||
fontFamily = `${fontFamily}, ${EDITOR_FONT_DEFAULTS.fontFamily}`;
|
||||
}
|
||||
|
||||
return {
|
||||
mode: languageId.language,
|
||||
|
||||
@@ -98,14 +98,19 @@ export class CodeLensContribution implements IEditorContribution {
|
||||
const fontFamily = this._editor.getOption(EditorOption.codeLensFontFamily);
|
||||
const editorFontInfo = this._editor.getOption(EditorOption.fontInfo);
|
||||
|
||||
const fontFamilyVar = `--codelens-font-family${this._styleClassName}`;
|
||||
const fontFeaturesVar = `--codelens-font-features${this._styleClassName}`;
|
||||
|
||||
let newStyle = `
|
||||
.monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: ${editorFontInfo.fontFeatureSettings} }
|
||||
.monaco-editor .codelens-decoration.${this._styleClassName} { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; padding-right: ${Math.round(fontSize * 0.5)}px; font-feature-settings: var(${fontFeaturesVar}) }
|
||||
.monaco-editor .codelens-decoration.${this._styleClassName} span.codicon { line-height: ${codeLensHeight}px; font-size: ${fontSize}px; }
|
||||
`;
|
||||
if (fontFamily) {
|
||||
newStyle += `.monaco-editor .codelens-decoration.${this._styleClassName} { font-family: ${fontFamily}}`;
|
||||
}
|
||||
this._styleElement.textContent = newStyle;
|
||||
this._editor.getContainerDomNode().style.setProperty(fontFamilyVar, fontFamily ?? 'inherit');
|
||||
this._editor.getContainerDomNode().style.setProperty(fontFeaturesVar, editorFontInfo.fontFeatureSettings);
|
||||
|
||||
//
|
||||
this._editor.changeViewZones(accessor => {
|
||||
|
||||
@@ -950,10 +950,17 @@ export class ReviewZoneWidget extends ZoneWidget implements ICommentThreadWidget
|
||||
}
|
||||
|
||||
const fontInfo = this.editor.getOption(EditorOption.fontInfo);
|
||||
const fontFamilyVar = '--comment-thread-editor-font-family';
|
||||
const fontSizeVar = '--comment-thread-editor-font-size';
|
||||
const fontWeightVar = '--comment-thread-editor-font-weight';
|
||||
this.container?.style.setProperty(fontFamilyVar, fontInfo.fontFamily);
|
||||
this.container?.style.setProperty(fontSizeVar, `${fontInfo.fontSize}px`);
|
||||
this.container?.style.setProperty(fontWeightVar, fontInfo.fontWeight);
|
||||
|
||||
content.push(`.monaco-editor .review-widget .body code {
|
||||
font-family: ${fontInfo.fontFamily};
|
||||
font-size: ${fontInfo.fontSize}px;
|
||||
font-weight: ${fontInfo.fontWeight};
|
||||
font-family: var(${fontFamilyVar});
|
||||
font-weight: var(${fontWeightVar});
|
||||
font-size: var(${fontSizeVar});
|
||||
}`);
|
||||
|
||||
this._styleElement.textContent = content.join('\n');
|
||||
|
||||
@@ -17,6 +17,16 @@
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.monaco-workbench .repl .repl-tree .monaco-tl-contents .expression {
|
||||
font-family: var(--vscode-repl-font-family);
|
||||
font-size: var(--vscode-repl-font-size);
|
||||
line-height: var(--vscode-repl-line-height);
|
||||
}
|
||||
|
||||
.monaco-workbench .repl .repl-tree .monaco-tl-twistie {
|
||||
background-position-y: calc(100% - (var(--vscode-repl-font-size-for-twistie)));
|
||||
}
|
||||
|
||||
.monaco-workbench .repl .repl-tree.word-wrap .monaco-tl-contents {
|
||||
/* Wrap words but also do not trim whitespace #6275 */
|
||||
word-wrap: break-word;
|
||||
|
||||
@@ -319,19 +319,6 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
|
||||
|
||||
// Set the font size, font family, line height and align the twistie to be centered, and input theme color
|
||||
this.styleElement.textContent = `
|
||||
.repl .repl-tree .expression {
|
||||
font-size: ${fontSize}px;
|
||||
font-family: ${fontFamily};
|
||||
}
|
||||
|
||||
.repl .repl-tree .expression {
|
||||
line-height: ${lineHeight};
|
||||
}
|
||||
|
||||
.repl .repl-tree .monaco-tl-twistie {
|
||||
background-position-y: calc(100% - ${fontSize * 1.4 / 2 - 8}px);
|
||||
}
|
||||
|
||||
.repl .repl-input-wrapper .repl-input-chevron {
|
||||
line-height: ${replInputLineHeight}px
|
||||
}
|
||||
@@ -340,6 +327,10 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
|
||||
background-color: ${backgroundColor};
|
||||
}
|
||||
`;
|
||||
this.container.style.setProperty(`--vscode-repl-font-family`, fontFamily);
|
||||
this.container.style.setProperty(`--vscode-repl-font-size`, `${fontSize}px`);
|
||||
this.container.style.setProperty(`--vscode-repl-font-size-for-twistie`, `${fontSize * 1.4 / 2 - 8}px`);
|
||||
this.container.style.setProperty(`--vscode-repl-line-height`, lineHeight);
|
||||
|
||||
this.tree.rerender();
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ import { deepClone } from 'vs/base/common/objects';
|
||||
import * as platform from 'vs/base/common/platform';
|
||||
import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
|
||||
import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
|
||||
import { EditorOption, EDITOR_FONT_DEFAULTS, IEditorOptions } from 'vs/editor/common/config/editorOptions';
|
||||
import { EditorOption, IEditorOptions } from 'vs/editor/common/config/editorOptions';
|
||||
import { BareFontInfo } from 'vs/editor/common/config/fontInfo';
|
||||
import { Range } from 'vs/editor/common/core/range';
|
||||
import { EditorContextKeys } from 'vs/editor/common/editorContextKeys';
|
||||
@@ -579,20 +579,29 @@ class EditorTextRenderer {
|
||||
|
||||
const colorMap = this.getDefaultColorMap();
|
||||
const fontInfo = editor.getOptions().get(EditorOption.fontInfo);
|
||||
const fontFamily = fontInfo.fontFamily === EDITOR_FONT_DEFAULTS.fontFamily ? fontInfo.fontFamily : `'${fontInfo.fontFamily}', ${EDITOR_FONT_DEFAULTS.fontFamily}`;
|
||||
|
||||
const fontFamilyVar = '--notebook-editor-font-family';
|
||||
const fontSizeVar = '--notebook-editor-font-size';
|
||||
const fontWeightVar = '--notebook-editor-font-weight';
|
||||
|
||||
|
||||
const style = ``
|
||||
+ `color: ${colorMap[modes.ColorId.DefaultForeground]};`
|
||||
+ `background-color: ${colorMap[modes.ColorId.DefaultBackground]};`
|
||||
+ `font-family: ${fontFamily};`
|
||||
+ `font-weight: ${fontInfo.fontWeight};`
|
||||
+ `font-size: ${fontInfo.fontSize}px;`
|
||||
+ `font-family: var(${fontFamilyVar});`
|
||||
+ `font-weight: var(${fontWeightVar});`
|
||||
+ `font-size: var(${fontSizeVar});`
|
||||
+ `line-height: ${fontInfo.lineHeight}px;`
|
||||
+ `white-space: pre;`;
|
||||
|
||||
const element = DOM.$('div', { style });
|
||||
|
||||
const fontSize = fontInfo.fontSize;
|
||||
const fontWeight = fontInfo.fontWeight;
|
||||
element.style.setProperty(fontFamilyVar, fontInfo.fontFamily);
|
||||
element.style.setProperty(fontSizeVar, `${fontSize}px`);
|
||||
element.style.setProperty(fontWeightVar, fontWeight);
|
||||
|
||||
const linesHtml = this.getRichTextLinesAsHtml(model, modelRange, colorMap);
|
||||
element.innerHTML = linesHtml as unknown as string;
|
||||
return element;
|
||||
|
||||
Reference in New Issue
Block a user