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

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