From 78b57e4d9d70a117f95a8267bf680e16d9163f86 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Tue, 25 Jan 2022 12:10:11 -0800 Subject: [PATCH] Scale diagnostic header and message text with editor font Co-Authored-By: Nathan Sobo --- crates/diagnostics/src/diagnostics.rs | 25 +++++++----- crates/editor/src/editor.rs | 22 +++++++---- crates/editor/src/element.rs | 2 +- crates/gpui/src/elements/label.rs | 7 ++++ crates/gpui/src/fonts.rs | 5 +++ crates/theme/src/theme.rs | 6 +++ crates/zed/assets/themes/_base.toml | 57 ++++++++++++++------------- 7 files changed, 78 insertions(+), 46 deletions(-) diff --git a/crates/diagnostics/src/diagnostics.rs b/crates/diagnostics/src/diagnostics.rs index 05c8799b75..6b168ea170 100644 --- a/crates/diagnostics/src/diagnostics.rs +++ b/crates/diagnostics/src/diagnostics.rs @@ -654,6 +654,7 @@ fn path_header_renderer(buffer: ModelHandle, build_settings: BuildSettin Arc::new(move |cx| { let settings = build_settings(cx); 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 path = None; @@ -672,14 +673,14 @@ fn path_header_renderer(buffer: ModelHandle, build_settings: BuildSettin .with_child( Label::new( filename.unwrap_or_else(|| "untitled".to_string()), - style.filename.text.clone(), + style.filename.text.clone().with_font_size(font_size), ) .contained() .with_style(style.filename.container) .boxed(), ) .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() .with_style(style.path.container) .boxed() @@ -702,6 +703,7 @@ fn diagnostic_header_renderer( Arc::new(move |cx| { let settings = build_settings(cx); 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 = if diagnostic.severity == DiagnosticSeverity::ERROR { Svg::new("icons/diagnostic-error-10.svg") @@ -720,16 +722,19 @@ fn diagnostic_header_renderer( .boxed(), ) .with_child( - Label::new(message.clone(), style.message.label.clone()) - .with_highlights(highlights.clone()) - .contained() - .with_style(style.message.container) - .with_margin_left(cx.gutter_padding) - .aligned() - .boxed(), + Label::new( + message.clone(), + style.message.label.clone().with_font_size(font_size), + ) + .with_highlights(highlights.clone()) + .contained() + .with_style(style.message.container) + .with_margin_left(cx.gutter_padding) + .aligned() + .boxed(), ) .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() .with_style(style.code.container) .aligned() diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs index 7278df73d0..323f9ce3c4 100644 --- a/crates/editor/src/editor.rs +++ b/crates/editor/src/editor.rs @@ -3828,6 +3828,7 @@ impl EditorSettings { let default_diagnostic_style = DiagnosticStyle { message: text.clone().into(), header: Default::default(), + text_scale_factor: 1., }; EditorStyle { text: text.clone(), @@ -3852,6 +3853,7 @@ impl EditorSettings { container: Default::default(), text: text.clone(), }, + text_scale_factor: 1., }, diagnostic_header: DiagnosticHeader { container: Default::default(), @@ -3863,7 +3865,8 @@ impl EditorSettings { container: Default::default(), text: text.clone(), }, - icon_width_factor: Default::default(), + icon_width_factor: 1., + text_scale_factor: 1., }, 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| { 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() .with_children(highlighted_lines.iter().map(|(line, highlights)| { - Label::new(line.clone(), style.clone()) - .with_highlights(highlights.clone()) - .contained() - .with_margin_left(cx.anchor_x) - .boxed() + Label::new( + line.clone(), + style.message.clone().with_font_size(font_size), + ) + .with_highlights(highlights.clone()) + .contained() + .with_margin_left(cx.anchor_x) + .boxed() })) .aligned() .left() @@ -4074,6 +4081,7 @@ pub fn diagnostic_style( _ => DiagnosticStyle { message: style.text.clone().into(), header: Default::default(), + text_scale_factor: 1., }, } } diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index b097ea9d40..b4175658c8 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -649,7 +649,7 @@ impl Element for EditorElement { let snapshot = self.snapshot(cx.app); 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_width; diff --git a/crates/gpui/src/elements/label.rs b/crates/gpui/src/elements/label.rs index f78e3973e9..20180c380d 100644 --- a/crates/gpui/src/elements/label.rs +++ b/crates/gpui/src/elements/label.rs @@ -33,6 +33,13 @@ impl From for LabelStyle { } } +impl LabelStyle { + pub fn with_font_size(mut self, font_size: f32) -> Self { + self.text.font_size = font_size; + self + } +} + impl Label { pub fn new(text: String, style: impl Into) -> Self { Self { diff --git a/crates/gpui/src/fonts.rs b/crates/gpui/src/fonts.rs index 25e16b7170..61082f6aae 100644 --- a/crates/gpui/src/fonts.rs +++ b/crates/gpui/src/fonts.rs @@ -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 { RunStyle { font_id: self.font_id, diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index ffe3600353..5d6142b9e4 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -270,6 +270,7 @@ pub struct DiagnosticPathHeader { pub container: ContainerStyle, pub filename: ContainedText, pub path: ContainedText, + pub text_scale_factor: f32, } #[derive(Clone, Deserialize, Default)] @@ -278,6 +279,7 @@ pub struct DiagnosticHeader { pub container: ContainerStyle, pub message: ContainedLabel, pub code: ContainedText, + pub text_scale_factor: f32, pub icon_width_factor: f32, } @@ -286,6 +288,7 @@ pub struct DiagnosticStyle { pub message: LabelStyle, #[serde(default)] pub header: ContainerStyle, + pub text_scale_factor: f32, } #[derive(Clone, Copy, Default, Deserialize)] @@ -324,6 +327,7 @@ impl InputEditorStyle { let default_diagnostic_style = DiagnosticStyle { message: self.text.clone().into(), header: Default::default(), + text_scale_factor: 1., }; EditorStyle { text: self.text.clone(), @@ -351,6 +355,7 @@ impl InputEditorStyle { container: Default::default(), text: self.text.clone(), }, + text_scale_factor: 1., }, diagnostic_header: DiagnosticHeader { container: Default::default(), @@ -363,6 +368,7 @@ impl InputEditorStyle { text: self.text.clone(), }, icon_width_factor: Default::default(), + text_scale_factor: 1., }, error_diagnostic: default_diagnostic_style.clone(), invalid_error_diagnostic: default_diagnostic_style.clone(), diff --git a/crates/zed/assets/themes/_base.toml b/crates/zed/assets/themes/_base.toml index 37eb555ad0..b9858b504f 100644 --- a/crates/zed/assets/themes/_base.toml +++ b/crates/zed/assets/themes/_base.toml @@ -187,7 +187,7 @@ corner_radius = 6 [project_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] text = "$text.1" @@ -256,12 +256,14 @@ error_color = "$status.bad" [editor.diagnostic_path_header] filename = { extends = "$text.0", size = 14 } path = { extends = "$text.2", size = 14, margin.left = 12 } +text_scale_factor = 0.857 [editor.diagnostic_header] background = "$state.active_line" border = { width = 1, top = true, bottom = true, color = "$border.0" } code = { extends = "$text.2", size = 14, margin.left = 10 } icon_width_factor = 1.5 +text_scale_factor = 0.857 [editor.diagnostic_header.message] text = { extends = "$text.1", size = 14 } @@ -269,47 +271,46 @@ highlight_text = { extends = "$text.0", size = 14, weight = "bold" } [editor.error_diagnostic] header.border = { width = 1, top = true, color = "$border.0" } +text_scale_factor = 0.857 [editor.error_diagnostic.message] text = { extends = "$editor.text", size = 14, color = "$status.bad" } highlight_text = { extends = "$editor.text", size = 14, color = "$status.bad", weight = "bold" } [editor.warning_diagnostic] -header.border = { width = 1, top = true, color = "$border.0" } - -[editor.warning_diagnostic.message] -text = { extends = "$editor.text", size = 14, color = "$status.warn" } -highlight_text = { extends = "$editor.text", size = 14, color = "$status.warn", weight = "bold" } +extends = "$editor.error_diagnostic" +message.text.color = "$status.warn" +message.highlight_text.color = "$status.warn" [editor.information_diagnostic] -border = { width = 1, top = true, color = "$border.0" } - -[editor.information_diagnostic.message] -text = { extends = "$editor.text", size = 14, color = "$status.info" } -highlight_text = { extends = "$editor.text", size = 14, color = "$status.info", weight = "bold" } +extends = "$editor.error_diagnostic" +message.text.color = "$status.info" +message.highlight_text.color = "$status.info" [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] -text = { extends = "$editor.text", size = 14, color = "$status.info" } -highlight_text = { extends = "$editor.text", size = 14, color = "$status.info", weight = "bold" } +[editor.invalid_error_diagnostic] +extends = "$editor.error_diagnostic" +message.text.color = "$text.3.color" +message.highlight_text.color = "$text.3.color" -[editor.invalid_error_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" } +[editor.invalid_warning_diagnostic] +extends = "$editor.warning_diagnostic" +message.text.color = "$text.3.color" +message.highlight_text.color = "$text.3.color" -[editor.invalid_warning_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" } +[editor.invalid_information_diagnostic] +extends = "$editor.information_diagnostic" +message.text.color = "$text.3.color" +message.highlight_text.color = "$text.3.color" -[editor.invalid_information_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" } - -[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" } +[editor.invalid_hint_diagnostic] +extends = "$editor.hint_diagnostic" +message.text.color = "$text.3.color" +message.highlight_text.color = "$text.3.color" [project_diagnostics] background = "$surface.1"