Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve styling of diagnostic status bar item

Browse source
This commit is contained in:
Max Brunsfeld 2021-11-03 14:15:22 -07:00
parent baf636a4a4
commit 1ec31738e6
4 changed files with 31 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

8
crates/theme/src/lib.rs
View file

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

28
crates/workspace/src/items.rs
View file

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

3
crates/zed/assets/icons/warning.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 877 B

10
crates/zed/assets/themes/_base.toml
View file

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