Scale diagnostic header and message text with editor font

Co-Authored-By: Nathan Sobo <nathan@zed.dev>
This commit is contained in:
Max Brunsfeld 2022-01-25 12:10:11 -08:00
parent 0c6fd157ee
commit 78b57e4d9d
7 changed files with 78 additions and 46 deletions

View file

@ -654,6 +654,7 @@ fn path_header_renderer(buffer: ModelHandle<Buffer>, build_settings: BuildSettin
Arc::new(move |cx| { Arc::new(move |cx| {
let settings = build_settings(cx); let settings = build_settings(cx);
let style = settings.style.diagnostic_path_header; let style = settings.style.diagnostic_path_header;
let font_size = (style.text_scale_factor * settings.style.text.font_size).round();
let mut filename = None; let mut filename = None;
let mut path = None; let mut path = None;
@ -672,14 +673,14 @@ fn path_header_renderer(buffer: ModelHandle<Buffer>, build_settings: BuildSettin
.with_child( .with_child(
Label::new( Label::new(
filename.unwrap_or_else(|| "untitled".to_string()), filename.unwrap_or_else(|| "untitled".to_string()),
style.filename.text.clone(), style.filename.text.clone().with_font_size(font_size),
) )
.contained() .contained()
.with_style(style.filename.container) .with_style(style.filename.container)
.boxed(), .boxed(),
) )
.with_children(path.map(|path| { .with_children(path.map(|path| {
Label::new(path, style.path.text.clone()) Label::new(path, style.path.text.clone().with_font_size(font_size))
.contained() .contained()
.with_style(style.path.container) .with_style(style.path.container)
.boxed() .boxed()
@ -702,6 +703,7 @@ fn diagnostic_header_renderer(
Arc::new(move |cx| { Arc::new(move |cx| {
let settings = build_settings(cx); let settings = build_settings(cx);
let style = &settings.style.diagnostic_header; let style = &settings.style.diagnostic_header;
let font_size = (style.text_scale_factor * settings.style.text.font_size).round();
let icon_width = cx.em_width * style.icon_width_factor; let icon_width = cx.em_width * style.icon_width_factor;
let icon = if diagnostic.severity == DiagnosticSeverity::ERROR { let icon = if diagnostic.severity == DiagnosticSeverity::ERROR {
Svg::new("icons/diagnostic-error-10.svg") Svg::new("icons/diagnostic-error-10.svg")
@ -720,16 +722,19 @@ fn diagnostic_header_renderer(
.boxed(), .boxed(),
) )
.with_child( .with_child(
Label::new(message.clone(), style.message.label.clone()) Label::new(
.with_highlights(highlights.clone()) message.clone(),
.contained() style.message.label.clone().with_font_size(font_size),
.with_style(style.message.container) )
.with_margin_left(cx.gutter_padding) .with_highlights(highlights.clone())
.aligned() .contained()
.boxed(), .with_style(style.message.container)
.with_margin_left(cx.gutter_padding)
.aligned()
.boxed(),
) )
.with_children(diagnostic.code.clone().map(|code| { .with_children(diagnostic.code.clone().map(|code| {
Label::new(code, style.code.text.clone()) Label::new(code, style.code.text.clone().with_font_size(font_size))
.contained() .contained()
.with_style(style.code.container) .with_style(style.code.container)
.aligned() .aligned()

View file

@ -3828,6 +3828,7 @@ impl EditorSettings {
let default_diagnostic_style = DiagnosticStyle { let default_diagnostic_style = DiagnosticStyle {
message: text.clone().into(), message: text.clone().into(),
header: Default::default(), header: Default::default(),
text_scale_factor: 1.,
}; };
EditorStyle { EditorStyle {
text: text.clone(), text: text.clone(),
@ -3852,6 +3853,7 @@ impl EditorSettings {
container: Default::default(), container: Default::default(),
text: text.clone(), text: text.clone(),
}, },
text_scale_factor: 1.,
}, },
diagnostic_header: DiagnosticHeader { diagnostic_header: DiagnosticHeader {
container: Default::default(), container: Default::default(),
@ -3863,7 +3865,8 @@ impl EditorSettings {
container: Default::default(), container: Default::default(),
text: text.clone(), text: text.clone(),
}, },
icon_width_factor: Default::default(), icon_width_factor: 1.,
text_scale_factor: 1.,
}, },
error_diagnostic: default_diagnostic_style.clone(), error_diagnostic: default_diagnostic_style.clone(),
invalid_error_diagnostic: default_diagnostic_style.clone(), invalid_error_diagnostic: default_diagnostic_style.clone(),
@ -4020,14 +4023,18 @@ pub fn diagnostic_block_renderer(
Arc::new(move |cx: &BlockContext| { Arc::new(move |cx: &BlockContext| {
let settings = build_settings(cx); let settings = build_settings(cx);
let style = diagnostic_style(diagnostic.severity, is_valid, &settings.style).message; let style = diagnostic_style(diagnostic.severity, is_valid, &settings.style);
let font_size = (style.text_scale_factor * settings.style.text.font_size).round();
Flex::column() Flex::column()
.with_children(highlighted_lines.iter().map(|(line, highlights)| { .with_children(highlighted_lines.iter().map(|(line, highlights)| {
Label::new(line.clone(), style.clone()) Label::new(
.with_highlights(highlights.clone()) line.clone(),
.contained() style.message.clone().with_font_size(font_size),
.with_margin_left(cx.anchor_x) )
.boxed() .with_highlights(highlights.clone())
.contained()
.with_margin_left(cx.anchor_x)
.boxed()
})) }))
.aligned() .aligned()
.left() .left()
@ -4074,6 +4081,7 @@ pub fn diagnostic_style(
_ => DiagnosticStyle { _ => DiagnosticStyle {
message: style.text.clone().into(), message: style.text.clone().into(),
header: Default::default(), header: Default::default(),
text_scale_factor: 1.,
}, },
} }
} }

View file

@ -649,7 +649,7 @@ impl Element for EditorElement {
let snapshot = self.snapshot(cx.app); let snapshot = self.snapshot(cx.app);
let style = self.settings.style.clone(); let style = self.settings.style.clone();
let line_height = dbg!(style.text.line_height(cx.font_cache)); let line_height = style.text.line_height(cx.font_cache);
let gutter_padding; let gutter_padding;
let gutter_width; let gutter_width;

View file

@ -33,6 +33,13 @@ impl From<TextStyle> for LabelStyle {
} }
} }
impl LabelStyle {
pub fn with_font_size(mut self, font_size: f32) -> Self {
self.text.font_size = font_size;
self
}
}
impl Label { impl Label {
pub fn new(text: String, style: impl Into<LabelStyle>) -> Self { pub fn new(text: String, style: impl Into<LabelStyle>) -> Self {
Self { Self {

View file

@ -107,6 +107,11 @@ impl TextStyle {
}) })
} }
pub fn with_font_size(mut self, font_size: f32) -> Self {
self.font_size = font_size;
self
}
pub fn to_run(&self) -> RunStyle { pub fn to_run(&self) -> RunStyle {
RunStyle { RunStyle {
font_id: self.font_id, font_id: self.font_id,

View file

@ -270,6 +270,7 @@ pub struct DiagnosticPathHeader {
pub container: ContainerStyle, pub container: ContainerStyle,
pub filename: ContainedText, pub filename: ContainedText,
pub path: ContainedText, pub path: ContainedText,
pub text_scale_factor: f32,
} }
#[derive(Clone, Deserialize, Default)] #[derive(Clone, Deserialize, Default)]
@ -278,6 +279,7 @@ pub struct DiagnosticHeader {
pub container: ContainerStyle, pub container: ContainerStyle,
pub message: ContainedLabel, pub message: ContainedLabel,
pub code: ContainedText, pub code: ContainedText,
pub text_scale_factor: f32,
pub icon_width_factor: f32, pub icon_width_factor: f32,
} }
@ -286,6 +288,7 @@ pub struct DiagnosticStyle {
pub message: LabelStyle, pub message: LabelStyle,
#[serde(default)] #[serde(default)]
pub header: ContainerStyle, pub header: ContainerStyle,
pub text_scale_factor: f32,
} }
#[derive(Clone, Copy, Default, Deserialize)] #[derive(Clone, Copy, Default, Deserialize)]
@ -324,6 +327,7 @@ impl InputEditorStyle {
let default_diagnostic_style = DiagnosticStyle { let default_diagnostic_style = DiagnosticStyle {
message: self.text.clone().into(), message: self.text.clone().into(),
header: Default::default(), header: Default::default(),
text_scale_factor: 1.,
}; };
EditorStyle { EditorStyle {
text: self.text.clone(), text: self.text.clone(),
@ -351,6 +355,7 @@ impl InputEditorStyle {
container: Default::default(), container: Default::default(),
text: self.text.clone(), text: self.text.clone(),
}, },
text_scale_factor: 1.,
}, },
diagnostic_header: DiagnosticHeader { diagnostic_header: DiagnosticHeader {
container: Default::default(), container: Default::default(),
@ -363,6 +368,7 @@ impl InputEditorStyle {
text: self.text.clone(), text: self.text.clone(),
}, },
icon_width_factor: Default::default(), icon_width_factor: Default::default(),
text_scale_factor: 1.,
}, },
error_diagnostic: default_diagnostic_style.clone(), error_diagnostic: default_diagnostic_style.clone(),
invalid_error_diagnostic: default_diagnostic_style.clone(), invalid_error_diagnostic: default_diagnostic_style.clone(),

View file

@ -187,7 +187,7 @@ corner_radius = 6
[project_panel] [project_panel]
extends = "$panel" extends = "$panel"
padding.top = 6 # ($workspace.tab.height - $project_panel.entry.height) / 2 padding.top = 6 # ($workspace.tab.height - $project_panel.entry.height) / 2
[project_panel.entry] [project_panel.entry]
text = "$text.1" text = "$text.1"
@ -256,12 +256,14 @@ error_color = "$status.bad"
[editor.diagnostic_path_header] [editor.diagnostic_path_header]
filename = { extends = "$text.0", size = 14 } filename = { extends = "$text.0", size = 14 }
path = { extends = "$text.2", size = 14, margin.left = 12 } path = { extends = "$text.2", size = 14, margin.left = 12 }
text_scale_factor = 0.857
[editor.diagnostic_header] [editor.diagnostic_header]
background = "$state.active_line" background = "$state.active_line"
border = { width = 1, top = true, bottom = true, color = "$border.0" } border = { width = 1, top = true, bottom = true, color = "$border.0" }
code = { extends = "$text.2", size = 14, margin.left = 10 } code = { extends = "$text.2", size = 14, margin.left = 10 }
icon_width_factor = 1.5 icon_width_factor = 1.5
text_scale_factor = 0.857
[editor.diagnostic_header.message] [editor.diagnostic_header.message]
text = { extends = "$text.1", size = 14 } text = { extends = "$text.1", size = 14 }
@ -269,47 +271,46 @@ highlight_text = { extends = "$text.0", size = 14, weight = "bold" }
[editor.error_diagnostic] [editor.error_diagnostic]
header.border = { width = 1, top = true, color = "$border.0" } header.border = { width = 1, top = true, color = "$border.0" }
text_scale_factor = 0.857
[editor.error_diagnostic.message] [editor.error_diagnostic.message]
text = { extends = "$editor.text", size = 14, color = "$status.bad" } text = { extends = "$editor.text", size = 14, color = "$status.bad" }
highlight_text = { extends = "$editor.text", size = 14, color = "$status.bad", weight = "bold" } highlight_text = { extends = "$editor.text", size = 14, color = "$status.bad", weight = "bold" }
[editor.warning_diagnostic] [editor.warning_diagnostic]
header.border = { width = 1, top = true, color = "$border.0" } extends = "$editor.error_diagnostic"
message.text.color = "$status.warn"
[editor.warning_diagnostic.message] message.highlight_text.color = "$status.warn"
text = { extends = "$editor.text", size = 14, color = "$status.warn" }
highlight_text = { extends = "$editor.text", size = 14, color = "$status.warn", weight = "bold" }
[editor.information_diagnostic] [editor.information_diagnostic]
border = { width = 1, top = true, color = "$border.0" } extends = "$editor.error_diagnostic"
message.text.color = "$status.info"
[editor.information_diagnostic.message] message.highlight_text.color = "$status.info"
text = { extends = "$editor.text", size = 14, color = "$status.info" }
highlight_text = { extends = "$editor.text", size = 14, color = "$status.info", weight = "bold" }
[editor.hint_diagnostic] [editor.hint_diagnostic]
border = { width = 1, top = true, color = "$border.0" } extends = "$editor.error_diagnostic"
message.text.color = "$status.info"
message.highlight_text.color = "$status.info"
[editor.hint_diagnostic.message] [editor.invalid_error_diagnostic]
text = { extends = "$editor.text", size = 14, color = "$status.info" } extends = "$editor.error_diagnostic"
highlight_text = { extends = "$editor.text", size = 14, color = "$status.info", weight = "bold" } message.text.color = "$text.3.color"
message.highlight_text.color = "$text.3.color"
[editor.invalid_error_diagnostic.message] [editor.invalid_warning_diagnostic]
text = { extends = "$editor.text", size = 14, color = "$text.3.color" } extends = "$editor.warning_diagnostic"
highlight_text = { extends = "$editor.text", size = 14, color = "$text.3.color", weight = "bold" } message.text.color = "$text.3.color"
message.highlight_text.color = "$text.3.color"
[editor.invalid_warning_diagnostic.message] [editor.invalid_information_diagnostic]
text = { extends = "$editor.text", size = 14, color = "$text.3.color" } extends = "$editor.information_diagnostic"
highlight_text = { extends = "$editor.text", size = 14, color = "$text.3.color", weight = "bold" } message.text.color = "$text.3.color"
message.highlight_text.color = "$text.3.color"
[editor.invalid_information_diagnostic.message] [editor.invalid_hint_diagnostic]
text = { extends = "$editor.text", size = 14, color = "$text.3.color" } extends = "$editor.hint_diagnostic"
highlight_text = { extends = "$editor.text", size = 14, color = "$text.3.color", weight = "bold" } message.text.color = "$text.3.color"
message.highlight_text.color = "$text.3.color"
[editor.invalid_hint_diagnostic.message]
text = { extends = "$editor.text", size = 14, color = "$text.3.color" }
highlight_text = { extends = "$editor.text", size = 14, color = "$text.3.color", weight = "bold" }
[project_diagnostics] [project_diagnostics]
background = "$surface.1" background = "$surface.1"