mirror of
https://github.com/Microsoft/vscode
synced 2024-09-13 21:55:38 +00:00
Feat: Bolder Typeface + Configurable Letter Spacing for Minimap's Section Header Labels ✨ (#209990)
* Rendering Section Header Labels with space in between the characters for better readability. * Making Section Headers Bold * Added settings for the Section Header Letter Spacing of the Minimap * a more performant and non-breaking way to render characters * fixed the git problems * add test default value * Allow fine-tuning the letter spacing, minor tweaks --------- Co-authored-by: Alexandru Dima <alexdima@microsoft.com>
This commit is contained in:
parent
e9a1af2326
commit
841a9162f6
|
@ -94,6 +94,10 @@ class MinimapOptions {
|
|||
public readonly minimapCharWidth: number;
|
||||
public readonly sectionHeaderFontFamily: string;
|
||||
public readonly sectionHeaderFontSize: number;
|
||||
/**
|
||||
* Space in between the characters of the section header (in CSS px)
|
||||
*/
|
||||
public readonly sectionHeaderLetterSpacing: number;
|
||||
public readonly sectionHeaderFontColor: RGBA8;
|
||||
|
||||
public readonly charRenderer: () => MinimapCharRenderer;
|
||||
|
@ -139,6 +143,7 @@ class MinimapOptions {
|
|||
this.minimapCharWidth = Constants.BASE_CHAR_WIDTH * this.fontScale;
|
||||
this.sectionHeaderFontFamily = DEFAULT_FONT_FAMILY;
|
||||
this.sectionHeaderFontSize = minimapOpts.sectionHeaderFontSize * pixelRatio;
|
||||
this.sectionHeaderLetterSpacing = minimapOpts.sectionHeaderLetterSpacing; // intentionally not multiplying by pixelRatio
|
||||
this.sectionHeaderFontColor = MinimapOptions._getSectionHeaderColor(theme, tokensColorTracker.getColor(ColorId.DefaultForeground));
|
||||
|
||||
this.charRenderer = createSingleCallFunction(() => MinimapCharRendererFactory.create(this.fontScale, fontInfo.fontFamily));
|
||||
|
@ -196,6 +201,7 @@ class MinimapOptions {
|
|||
&& this.minimapLineHeight === other.minimapLineHeight
|
||||
&& this.minimapCharWidth === other.minimapCharWidth
|
||||
&& this.sectionHeaderFontSize === other.sectionHeaderFontSize
|
||||
&& this.sectionHeaderLetterSpacing === other.sectionHeaderLetterSpacing
|
||||
&& this.defaultBackgroundColor && this.defaultBackgroundColor.equals(other.defaultBackgroundColor)
|
||||
&& this.backgroundColor && this.backgroundColor.equals(other.backgroundColor)
|
||||
&& this.foregroundAlpha === other.foregroundAlpha
|
||||
|
@ -1788,6 +1794,7 @@ class InnerMinimap extends Disposable {
|
|||
private _renderSectionHeaders(layout: MinimapLayout) {
|
||||
const minimapLineHeight = this._model.options.minimapLineHeight;
|
||||
const sectionHeaderFontSize = this._model.options.sectionHeaderFontSize;
|
||||
const sectionHeaderLetterSpacing = this._model.options.sectionHeaderLetterSpacing;
|
||||
const backgroundFillHeight = sectionHeaderFontSize * 1.5;
|
||||
const { canvasInnerWidth } = this._model.options;
|
||||
|
||||
|
@ -1798,7 +1805,8 @@ class InnerMinimap extends Disposable {
|
|||
const separatorStroke = foregroundFill;
|
||||
|
||||
const canvasContext = this._decorationsCanvas.domNode.getContext('2d')!;
|
||||
canvasContext.font = sectionHeaderFontSize + 'px ' + this._model.options.sectionHeaderFontFamily;
|
||||
canvasContext.letterSpacing = sectionHeaderLetterSpacing + 'px';
|
||||
canvasContext.font = '500 ' + sectionHeaderFontSize + 'px ' + this._model.options.sectionHeaderFontFamily;
|
||||
canvasContext.strokeStyle = separatorStroke;
|
||||
canvasContext.lineWidth = 0.2;
|
||||
|
||||
|
|
|
@ -3071,6 +3071,10 @@ export interface IEditorMinimapOptions {
|
|||
* Font size of section headers. Defaults to 9.
|
||||
*/
|
||||
sectionHeaderFontSize?: number;
|
||||
/**
|
||||
* Spacing between the section header characters (in CSS px). Defaults to 1.
|
||||
*/
|
||||
sectionHeaderLetterSpacing?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -3093,6 +3097,7 @@ class EditorMinimap extends BaseEditorOption<EditorOption.minimap, IEditorMinima
|
|||
showRegionSectionHeaders: true,
|
||||
showMarkSectionHeaders: true,
|
||||
sectionHeaderFontSize: 9,
|
||||
sectionHeaderLetterSpacing: 1,
|
||||
};
|
||||
super(
|
||||
EditorOption.minimap, 'minimap', defaults,
|
||||
|
@ -3162,6 +3167,11 @@ class EditorMinimap extends BaseEditorOption<EditorOption.minimap, IEditorMinima
|
|||
type: 'number',
|
||||
default: defaults.sectionHeaderFontSize,
|
||||
description: nls.localize('minimap.sectionHeaderFontSize', "Controls the font size of section headers in the minimap.")
|
||||
},
|
||||
'editor.minimap.sectionHeaderLetterSpacing': {
|
||||
type: 'number',
|
||||
default: defaults.sectionHeaderLetterSpacing,
|
||||
description: nls.localize('minimap.sectionHeaderLetterSpacing', "Controls the amount of space (in pixels) between characters of section header. This helps the readability of the header in small font sizes.")
|
||||
}
|
||||
}
|
||||
);
|
||||
|
@ -3184,6 +3194,7 @@ class EditorMinimap extends BaseEditorOption<EditorOption.minimap, IEditorMinima
|
|||
showRegionSectionHeaders: boolean(input.showRegionSectionHeaders, this.defaultValue.showRegionSectionHeaders),
|
||||
showMarkSectionHeaders: boolean(input.showMarkSectionHeaders, this.defaultValue.showMarkSectionHeaders),
|
||||
sectionHeaderFontSize: EditorFloatOption.clamp(input.sectionHeaderFontSize ?? this.defaultValue.sectionHeaderFontSize, 4, 32),
|
||||
sectionHeaderLetterSpacing: EditorFloatOption.clamp(input.sectionHeaderLetterSpacing ?? this.defaultValue.sectionHeaderLetterSpacing, 0, 5),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -60,7 +60,8 @@ suite('Editor ViewLayout - EditorLayoutProvider', () => {
|
|||
scale: 1,
|
||||
showRegionSectionHeaders: true,
|
||||
showMarkSectionHeaders: true,
|
||||
sectionHeaderFontSize: 9
|
||||
sectionHeaderFontSize: 9,
|
||||
sectionHeaderLetterSpacing: 1,
|
||||
};
|
||||
options._write(EditorOption.minimap, minimapOptions);
|
||||
const scrollbarOptions: InternalEditorScrollbarOptions = {
|
||||
|
|
4
src/vs/monaco.d.ts
vendored
4
src/vs/monaco.d.ts
vendored
|
@ -4318,6 +4318,10 @@ declare namespace monaco.editor {
|
|||
* Font size of section headers. Defaults to 9.
|
||||
*/
|
||||
sectionHeaderFontSize?: number;
|
||||
/**
|
||||
* Spacing between the section header characters (in CSS px). Defaults to 1.
|
||||
*/
|
||||
sectionHeaderLetterSpacing?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue