Improve styling of diagnostic status bar item

Max Brunsfeld created 4 years ago

Change summary

crates/theme/src/lib.rs             |  8 ++++----
crates/workspace/src/items.rs       | 28 +++++++++++++++++++---------
crates/zed/assets/icons/warning.svg |  3 +++
crates/zed/assets/themes/_base.toml | 10 +++++-----
4 files changed, 31 insertions(+), 18 deletions(-)

Detailed changes

crates/theme/src/lib.rs

@@ -95,10 +95,10 @@ pub struct StatusBar {
     pub container: ContainerStyle,
     pub height: f32,
     pub cursor_position: TextStyle,
-    pub diagnostic_error: TextStyle,
-    pub diagnostic_warning: TextStyle,
-    pub diagnostic_information: TextStyle,
-    pub diagnostic_hint: TextStyle,
+    pub diagnostic_icon_size: f32,
+    pub diagnostic_icon_spacing: f32,
+    pub diagnostic_icon_color: Color,
+    pub diagnostic_message: TextStyle,
 }
 
 #[derive(Deserialize, Default)]

crates/workspace/src/items.rs

@@ -7,7 +7,7 @@ use gpui::{
     elements::*, fonts::TextStyle, AppContext, Entity, ModelHandle, RenderContext, Subscription,
     Task, View, ViewContext, ViewHandle,
 };
-use language::{Buffer, Diagnostic, DiagnosticSeverity, File as _};
+use language::{Buffer, Diagnostic, File as _};
 use postage::watch;
 use project::{ProjectPath, Worktree};
 use std::fmt::Write;
@@ -288,14 +288,24 @@ impl View for DiagnosticMessage {
     fn render(&mut self, _: &mut RenderContext<Self>) -> ElementBox {
         if let Some(diagnostic) = &self.diagnostic {
             let theme = &self.settings.borrow().theme.workspace.status_bar;
-            let style = match diagnostic.severity {
-                DiagnosticSeverity::ERROR => theme.diagnostic_error.clone(),
-                DiagnosticSeverity::WARNING => theme.diagnostic_warning.clone(),
-                DiagnosticSeverity::INFORMATION => theme.diagnostic_information.clone(),
-                DiagnosticSeverity::HINT => theme.diagnostic_hint.clone(),
-                _ => Default::default(),
-            };
-            Label::new(diagnostic.message.replace('\n', " "), style).boxed()
+            Flex::row()
+                .with_child(
+                    Svg::new("icons/warning.svg")
+                        .with_color(theme.diagnostic_icon_color)
+                        .constrained()
+                        .with_height(theme.diagnostic_icon_size)
+                        .contained()
+                        .with_margin_right(theme.diagnostic_icon_spacing)
+                        .boxed(),
+                )
+                .with_child(
+                    Label::new(
+                        diagnostic.message.replace('\n', " "),
+                        theme.diagnostic_message.clone(),
+                    )
+                    .boxed(),
+                )
+                .boxed()
         } else {
             Empty::new().boxed()
         }

crates/zed/assets/icons/warning.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1329 8.29967L6.76186 0.840494C6.59383 0.553602 6.29874 0.410156 6.00365 0.410156C5.70856 0.410156 5.41347 0.553602 5.22699 0.840494L0.858047 8.29967C0.540622 8.87141 0.959504 9.59068 1.63347 9.59068H10.3755C11.0468 9.59068 11.4669 8.87346 11.1329 8.29967ZM1.83512 8.60706L5.98521 1.49215L10.1718 8.60706H1.83512ZM6.00365 6.66234C5.64791 6.66234 5.35937 6.95087 5.35937 7.30662C5.35937 7.66236 5.64852 7.95089 6.00447 7.95089C6.36042 7.95089 6.64793 7.66236 6.64793 7.30662C6.64711 6.95128 6.36022 6.66234 6.00365 6.66234ZM5.51184 3.52498V5.49223C5.51184 5.76478 5.73315 5.98405 6.00365 5.98405C6.27415 5.98405 6.49546 5.76376 6.49546 5.49223V3.52498C6.49546 3.25448 6.2762 3.03316 6.00365 3.03316C5.7311 3.03316 5.51184 3.25448 5.51184 3.52498Z" fill="white"/>
+</svg>

crates/zed/assets/themes/_base.toml

@@ -64,10 +64,10 @@ border = { width = 1, color = "$border.0", left = true }
 padding = { left = 6, right = 6 }
 height = 24
 cursor_position = "$text.2"
-diagnostic_error = { extends = "$text.2", color = "$status.bad" }
-diagnostic_warning = { extends = "$text.2", color = "$status.warn" }
-diagnostic_information = { extends = "$text.2", color = "$status.info" }
-diagnostic_hint = { extends = "$text.2", color = "$status.info" }
+diagnostic_message = "$text.2"
+diagnostic_icon_size = 18
+diagnostic_icon_spacing = 8
+diagnostic_icon_color = "$text.2.color"
 
 [panel]
 padding = { top = 12, left = 12, bottom = 12, right = 12 }
@@ -173,7 +173,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"