fixed css for font family (#15119)

This commit is contained in:
Aditya Bist
2021-04-13 18:37:55 -07:00
committed by GitHub
parent 58d0add46f
commit 90868bc0ad
6 changed files with 61 additions and 23 deletions

View File

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

View File

@@ -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 => {

View File

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

View File

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

View File

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

View File

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