From 0291f2d54af667f34cdf77fea23e8bd2f04cb184 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Tue, 26 Apr 2022 13:10:40 -0700 Subject: [PATCH 01/12] Move sidebar toggle buttons to the status bar --- assets/themes/cave-dark.json | 67 +++----- assets/themes/cave-light.json | 67 +++----- assets/themes/dark.json | 67 +++----- assets/themes/light.json | 67 +++----- assets/themes/solarized-dark.json | 67 +++----- assets/themes/solarized-light.json | 67 +++----- assets/themes/sulphurpool-dark.json | 67 +++----- assets/themes/sulphurpool-light.json | 67 +++----- crates/theme/src/theme.rs | 15 +- crates/workspace/src/sidebar.rs | 233 ++++++++++++++++----------- crates/workspace/src/status_bar.rs | 4 +- crates/workspace/src/workspace.rs | 118 ++++++++------ crates/zed/src/zed.rs | 32 ++-- styles/src/styleTree/workspace.ts | 40 ++--- 14 files changed, 393 insertions(+), 585 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index f0cb3746326a37474de58d91f6c44670114133b2..fb5b6314b10108f7aaf11d7d07068d2c26c0f512 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#26232a", - "border": { - "color": "#19171c", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#8b8792", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#efecf4", - "icon_size": 18 - }, - "resize_handle": { - "background": "#19171c", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#26232a", - "border": { - "color": "#19171c", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#8b8792", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#efecf4", - "icon_size": 18 - }, - "resize_handle": { - "background": "#19171c", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#19171c", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#8b8792", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#8b8792", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#8b8792", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#efecf4", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index aa062d478695e7231c71500cdb2e072602f750ca..32421648471e02a87b4746bcc95a0da82a5f2c6e 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#e2dfe7", - "border": { - "color": "#efecf4", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#585260", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#19171c", - "icon_size": 18 - }, - "resize_handle": { - "background": "#efecf4", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#e2dfe7", - "border": { - "color": "#efecf4", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#585260", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#19171c", - "icon_size": 18 - }, - "resize_handle": { - "background": "#efecf4", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#efecf4", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#585260", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#585260", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#585260", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#19171c", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 2a371680f55fdfe701ec6400ac055bbb00705993..49f78bee1bfc23846bd24a2f574a8b31e1aa3942 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#1c1c1c", - "border": { - "color": "#070707", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#9c9c9c", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#ffffff", - "icon_size": 18 - }, - "resize_handle": { - "background": "#070707", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#1c1c1c", - "border": { - "color": "#070707", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#9c9c9c", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#ffffff", - "icon_size": 18 - }, - "resize_handle": { - "background": "#070707", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#070707", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#808080", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#9c9c9c", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#9c9c9c", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#ffffff", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 8d56526e20a936eb4f04338d26b4a1336b69972e..88fe8f5a914a8b18871fbf50b86aa1b02da41f78 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#f8f8f8", - "border": { - "color": "#d5d5d5", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#717171", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#000000", - "icon_size": 18 - }, - "resize_handle": { - "background": "#d5d5d5", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#f8f8f8", - "border": { - "color": "#d5d5d5", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#717171", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#000000", - "icon_size": 18 - }, - "resize_handle": { - "background": "#d5d5d5", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#d5d5d5", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#636363", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#717171", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#717171", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#000000", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index bd73ab934e1955a41016bd7bc42ec6567b8382ed..7d53cce491c481d5b1eb6ce989f9855f42fa5945 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#073642", - "border": { - "color": "#002b36", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#93a1a1", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#fdf6e3", - "icon_size": 18 - }, - "resize_handle": { - "background": "#002b36", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#073642", - "border": { - "color": "#002b36", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#93a1a1", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#fdf6e3", - "icon_size": 18 - }, - "resize_handle": { - "background": "#002b36", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#002b36", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#93a1a1", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#93a1a1", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#93a1a1", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#fdf6e3", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 35de751a2b211e9cc68e25869eb7235f2e34fb9f..167bf305cb0ac7915d5fa595a80056d6cbe78cec 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#eee8d5", - "border": { - "color": "#fdf6e3", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#586e75", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#002b36", - "icon_size": 18 - }, - "resize_handle": { - "background": "#fdf6e3", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#eee8d5", - "border": { - "color": "#fdf6e3", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#586e75", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#002b36", - "icon_size": 18 - }, - "resize_handle": { - "background": "#fdf6e3", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#fdf6e3", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#586e75", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#586e75", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#586e75", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#002b36", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 20123449bb893eb718513bb97cfbd0e49e0f0d97..db76b4502af2f27f2679ef05d07e4e6f4ba0c330 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#293256", - "border": { - "color": "#202746", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#979db4", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#f5f7ff", - "icon_size": 18 - }, - "resize_handle": { - "background": "#202746", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#293256", - "border": { - "color": "#202746", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#979db4", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#f5f7ff", - "icon_size": 18 - }, - "resize_handle": { - "background": "#202746", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#202746", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#979db4", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#979db4", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#979db4", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#f5f7ff", + "icon_size": 18 } }, "titlebar": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 9bebd8203658ebcb08cb250e92e106f539b575ac..9957f42a6b5dd25a18d0415cef9310cabf055182 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -161,54 +161,10 @@ }, "cursor": "Arrow" }, - "left_sidebar": { - "width": 30, - "background": "#dfe2f1", - "border": { - "color": "#f5f7ff", - "width": 1, - "right": true - }, - "item": { - "height": 32, - "icon_color": "#5e6687", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#202746", - "icon_size": 18 - }, - "resize_handle": { - "background": "#f5f7ff", - "padding": { - "left": 1 - } - } - }, - "right_sidebar": { - "width": 30, - "background": "#dfe2f1", - "border": { - "color": "#f5f7ff", - "width": 1, - "left": true - }, - "item": { - "height": 32, - "icon_color": "#5e6687", - "icon_size": 18 - }, - "active_item": { - "height": 32, - "icon_color": "#202746", - "icon_size": 18 - }, - "resize_handle": { - "background": "#f5f7ff", - "padding": { - "left": 1 - } + "sidebar_resize_handle": { + "background": "#f5f7ff", + "padding": { + "left": 1 } }, "pane_divider": { @@ -252,6 +208,21 @@ "family": "Zed Sans", "color": "#5e6687", "size": 14 + }, + "sidebar_item": { + "height": 32, + "icon_color": "#5e6687", + "icon_size": 18 + }, + "sidebar_item_hover": { + "height": 32, + "icon_color": "#5e6687", + "icon_size": 18 + }, + "sidebar_item_active": { + "height": 32, + "icon_color": "#202746", + "icon_size": 18 } }, "titlebar": { diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index b4533298ac1ca732f90dbde1e74556ded3c8bd17..e8bf1a15533aefac0fc3fe6b66cadad6a635818c 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -38,8 +38,7 @@ pub struct Workspace { pub pane_divider: Border, pub leader_border_opacity: f32, pub leader_border_width: f32, - pub left_sidebar: Sidebar, - pub right_sidebar: Sidebar, + pub sidebar_resize_handle: ContainerStyle, pub status_bar: StatusBar, pub toolbar: Toolbar, pub disconnected_overlay: ContainedText, @@ -139,16 +138,13 @@ pub struct FindEditor { #[derive(Deserialize, Default)] pub struct Sidebar { - #[serde(flatten)] - pub container: ContainerStyle, - pub width: f32, - pub item: SidebarItem, - pub active_item: SidebarItem, pub resize_handle: ContainerStyle, } -#[derive(Deserialize, Default)] +#[derive(Clone, Copy, Deserialize, Default)] pub struct SidebarItem { + #[serde(flatten)] + pub container: ContainerStyle, pub icon_color: Color, pub icon_size: f32, pub height: f32, @@ -165,6 +161,9 @@ pub struct StatusBar { pub lsp_message: TextStyle, pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, + pub sidebar_item: SidebarItem, + pub sidebar_item_active: SidebarItem, + pub sidebar_item_hover: SidebarItem, } #[derive(Deserialize, Default)] diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs index 46ec3089e7219fe2ca8c1eb6ae0288fb3642036c..58d4bc6afcf010598b910a0a16d318fee77dab47 100644 --- a/crates/workspace/src/sidebar.rs +++ b/crates/workspace/src/sidebar.rs @@ -1,9 +1,14 @@ -use super::Workspace; -use gpui::{elements::*, impl_actions, platform::CursorStyle, AnyViewHandle, RenderContext}; +use gpui::{ + elements::*, impl_actions, platform::CursorStyle, AnyViewHandle, Entity, RenderContext, View, + ViewContext, ViewHandle, +}; use serde::Deserialize; +use settings::Settings; use std::{cell::RefCell, rc::Rc}; use theme::Theme; +use crate::StatusItemView; + pub struct Sidebar { side: Side, items: Vec, @@ -12,31 +17,36 @@ pub struct Sidebar { custom_width: Rc>, } -#[derive(Clone, Copy, Deserialize)] +#[derive(Clone, Copy, Debug, Deserialize)] pub enum Side { Left, Right, } +#[derive(Clone)] struct Item { icon_path: &'static str, view: AnyViewHandle, } -#[derive(Clone, Deserialize)] -pub struct ToggleSidebarItem(pub SidebarItemId); - -#[derive(Clone, Deserialize)] -pub struct ToggleSidebarItemFocus(pub SidebarItemId); +pub struct SidebarButtons { + sidebar: ViewHandle, +} -impl_actions!(workspace, [ToggleSidebarItem, ToggleSidebarItemFocus]); +#[derive(Clone, Debug, Deserialize)] +pub struct ToggleSidebarItem { + pub side: Side, + pub item_index: usize, +} -#[derive(Clone, Deserialize)] -pub struct SidebarItemId { +#[derive(Clone, Debug, Deserialize)] +pub struct ToggleSidebarItemFocus { pub side: Side, pub item_index: usize, } +impl_actions!(workspace, [ToggleSidebarItem, ToggleSidebarItemFocus]); + impl Sidebar { pub fn new(side: Side) -> Self { Self { @@ -48,20 +58,28 @@ impl Sidebar { } } - pub fn add_item(&mut self, icon_path: &'static str, view: AnyViewHandle) { + pub fn add_item( + &mut self, + icon_path: &'static str, + view: AnyViewHandle, + cx: &mut ViewContext, + ) { self.items.push(Item { icon_path, view }); + cx.notify() } - pub fn activate_item(&mut self, item_ix: usize) { + pub fn activate_item(&mut self, item_ix: usize, cx: &mut ViewContext) { self.active_item_ix = Some(item_ix); + cx.notify(); } - pub fn toggle_item(&mut self, item_ix: usize) { + pub fn toggle_item(&mut self, item_ix: usize, cx: &mut ViewContext) { if self.active_item_ix == Some(item_ix) { self.active_item_ix = None; } else { self.active_item_ix = Some(item_ix); } + cx.notify(); } pub fn active_item(&self) -> Option<&AnyViewHandle> { @@ -70,75 +88,56 @@ impl Sidebar { .map(|item| &item.view) } - fn theme<'a>(&self, theme: &'a Theme) -> &'a theme::Sidebar { - match self.side { - Side::Left => &theme.workspace.left_sidebar, - Side::Right => &theme.workspace.right_sidebar, - } - } - - pub fn render(&self, theme: &Theme, cx: &mut RenderContext) -> ElementBox { + fn render_resize_handle(&self, theme: &Theme, cx: &mut RenderContext) -> ElementBox { + let actual_width = self.actual_width.clone(); + let custom_width = self.custom_width.clone(); let side = self.side; - let theme = self.theme(theme); - - ConstrainedBox::new( - Container::new( - Flex::column() - .with_children(self.items.iter().enumerate().map(|(item_index, item)| { - let theme = if Some(item_index) == self.active_item_ix { - &theme.active_item - } else { - &theme.item - }; - enum SidebarButton {} - MouseEventHandler::new::(item.view.id(), cx, |_, _| { - ConstrainedBox::new( - Align::new( - ConstrainedBox::new( - Svg::new(item.icon_path) - .with_color(theme.icon_color) - .boxed(), - ) - .with_height(theme.icon_size) - .boxed(), - ) - .boxed(), - ) - .with_height(theme.height) - .boxed() - }) - .with_cursor_style(CursorStyle::PointingHand) - .on_mouse_down(move |cx| { - cx.dispatch_action(ToggleSidebarItem(SidebarItemId { - side, - item_index, - })) - }) - .boxed() - })) - .boxed(), - ) - .with_style(theme.container) - .boxed(), - ) - .with_width(theme.width) + MouseEventHandler::new::(side as usize, cx, |_, _| { + Empty::new() + .contained() + .with_style(theme.workspace.sidebar_resize_handle) + .boxed() + }) + .with_padding(Padding { + left: 4., + right: 4., + ..Default::default() + }) + .with_cursor_style(CursorStyle::ResizeLeftRight) + .on_drag(move |delta, cx| { + let prev_width = *actual_width.borrow(); + match side { + Side::Left => *custom_width.borrow_mut() = 0f32.max(prev_width + delta.x()), + Side::Right => *custom_width.borrow_mut() = 0f32.max(prev_width - delta.x()), + } + + cx.notify(); + }) .boxed() } +} + +impl Entity for Sidebar { + type Event = (); +} - pub fn render_active_item( - &self, - theme: &Theme, - cx: &mut RenderContext, - ) -> Option { +impl View for Sidebar { + fn ui_name() -> &'static str { + "Sidebar" + } + + fn render(&mut self, cx: &mut RenderContext) -> ElementBox { + let theme = cx.global::().theme.clone(); if let Some(active_item) = self.active_item() { let mut container = Flex::row(); if matches!(self.side, Side::Right) { - container.add_child(self.render_resize_handle(theme, cx)); + container.add_child(self.render_resize_handle(&theme, cx)); } container.add_child( Hook::new( - ConstrainedBox::new(ChildView::new(active_item).boxed()) + ChildView::new(active_item) + .constrained() .with_max_width(*self.custom_width.borrow()) .boxed(), ) @@ -150,38 +149,76 @@ impl Sidebar { .boxed(), ); if matches!(self.side, Side::Left) { - container.add_child(self.render_resize_handle(theme, cx)); + container.add_child(self.render_resize_handle(&theme, cx)); } - Some(container.boxed()) + container.boxed() } else { - None + Empty::new().boxed() } } +} - fn render_resize_handle(&self, theme: &Theme, cx: &mut RenderContext) -> ElementBox { - let actual_width = self.actual_width.clone(); - let custom_width = self.custom_width.clone(); - let side = self.side; - MouseEventHandler::new::(side as usize, cx, |_, _| { - Container::new(Empty::new().boxed()) - .with_style(self.theme(theme).resize_handle) +impl SidebarButtons { + pub fn new(sidebar: ViewHandle, cx: &mut ViewContext) -> Self { + cx.observe(&sidebar, |_, _, cx| cx.notify()).detach(); + Self { sidebar } + } +} + +impl Entity for SidebarButtons { + type Event = (); +} + +impl View for SidebarButtons { + fn ui_name() -> &'static str { + "SidebarToggleButton" + } + + fn render(&mut self, cx: &mut RenderContext) -> ElementBox { + let theme = &cx.global::().theme.workspace.status_bar; + let style = theme.sidebar_item; + let hover_style = theme.sidebar_item_hover; + let active_style = theme.sidebar_item_active; + let sidebar = self.sidebar.read(cx); + let active_ix = sidebar.active_item_ix; + let side = sidebar.side; + let items = sidebar.items.clone(); + Flex::row() + .with_children(items.iter().enumerate().map(|(ix, item)| { + MouseEventHandler::new::(ix, cx, move |state, _| { + let style = if Some(ix) == active_ix { + active_style + } else if state.hovered { + hover_style + } else { + style + }; + Svg::new(item.icon_path) + .with_color(style.icon_color) + .constrained() + .with_height(style.icon_size) + .contained() + .with_style(style.container) + .boxed() + }) + .with_cursor_style(CursorStyle::PointingHand) + .on_click(move |cx| { + cx.dispatch_action(ToggleSidebarItem { + side, + item_index: ix, + }) + }) .boxed() - }) - .with_padding(Padding { - left: 4., - right: 4., - ..Default::default() - }) - .with_cursor_style(CursorStyle::ResizeLeftRight) - .on_drag(move |delta, cx| { - let prev_width = *actual_width.borrow(); - match side { - Side::Left => *custom_width.borrow_mut() = 0f32.max(prev_width + delta.x()), - Side::Right => *custom_width.borrow_mut() = 0f32.max(prev_width - delta.x()), - } + })) + .boxed() + } +} - cx.notify(); - }) - .boxed() +impl StatusItemView for SidebarButtons { + fn set_active_pane_item( + &mut self, + _: Option<&dyn crate::ItemHandle>, + _: &mut ViewContext, + ) { } } diff --git a/crates/workspace/src/status_bar.rs b/crates/workspace/src/status_bar.rs index c9a2c819e2ca59f6d7f6c47453ae6a5dfc8eb6f2..f84940e8fb65ee51e5400906e720cfdd67b2bd5e 100644 --- a/crates/workspace/src/status_bar.rs +++ b/crates/workspace/src/status_bar.rs @@ -1,9 +1,9 @@ use crate::{ItemHandle, Pane}; -use settings::Settings; use gpui::{ elements::*, AnyViewHandle, ElementBox, Entity, MutableAppContext, RenderContext, Subscription, View, ViewContext, ViewHandle, }; +use settings::Settings; pub trait StatusItemView: View { fn set_active_pane_item( @@ -48,7 +48,7 @@ impl View for StatusBar { .with_margin_right(theme.item_spacing) .boxed() })) - .with_children(self.right_items.iter().map(|i| { + .with_children(self.right_items.iter().rev().map(|i| { ChildView::new(i.as_ref()) .aligned() .contained() diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs index 88007081e11854f15c8df74581063e898e35fcef..4e7f64201b20447492cc8dd64b27d13025d13fe5 100644 --- a/crates/workspace/src/workspace.rs +++ b/crates/workspace/src/workspace.rs @@ -31,7 +31,7 @@ pub use pane_group::*; use postage::prelude::Stream; use project::{fs, Fs, Project, ProjectEntryId, ProjectPath, Worktree}; use settings::Settings; -use sidebar::{Side, Sidebar, SidebarItemId, ToggleSidebarItem, ToggleSidebarItemFocus}; +use sidebar::{Side, Sidebar, SidebarButtons, ToggleSidebarItem, ToggleSidebarItemFocus}; use status_bar::StatusBar; pub use status_bar::StatusItemView; use std::{ @@ -678,8 +678,8 @@ pub struct Workspace { themes: Arc, modal: Option, center: PaneGroup, - left_sidebar: Sidebar, - right_sidebar: Sidebar, + left_sidebar: ViewHandle, + right_sidebar: ViewHandle, panes: Vec>, active_pane: ViewHandle, status_bar: ViewHandle, @@ -751,7 +751,6 @@ impl Workspace { cx.focus(&pane); cx.emit(Event::PaneAdded(pane.clone())); - let status_bar = cx.add_view(|cx| StatusBar::new(&pane, cx)); let mut current_user = params.user_store.read(cx).watch_current_user().clone(); let mut connection_status = params.client.status().clone(); let _observe_current_user = cx.spawn_weak(|this, mut cx| async move { @@ -773,6 +772,18 @@ impl Workspace { cx.emit_global(WorkspaceCreated(weak_self.clone())); + let left_sidebar = cx.add_view(|_| Sidebar::new(Side::Left)); + let right_sidebar = cx.add_view(|_| Sidebar::new(Side::Right)); + let left_sidebar_buttons = cx.add_view(|cx| SidebarButtons::new(left_sidebar.clone(), cx)); + let right_sidebar_buttons = + cx.add_view(|cx| SidebarButtons::new(right_sidebar.clone(), cx)); + let status_bar = cx.add_view(|cx| { + let mut status_bar = StatusBar::new(&pane.clone(), cx); + status_bar.add_left_item(left_sidebar_buttons, cx); + status_bar.add_right_item(right_sidebar_buttons, cx); + status_bar + }); + let mut this = Workspace { modal: None, weak_self, @@ -785,8 +796,8 @@ impl Workspace { user_store: params.user_store.clone(), fs: params.fs.clone(), themes: params.themes.clone(), - left_sidebar: Sidebar::new(Side::Left), - right_sidebar: Sidebar::new(Side::Right), + left_sidebar, + right_sidebar, project: params.project.clone(), leader_state: Default::default(), follower_states_by_leader: Default::default(), @@ -801,12 +812,12 @@ impl Workspace { self.weak_self.clone() } - pub fn left_sidebar_mut(&mut self) -> &mut Sidebar { - &mut self.left_sidebar + pub fn left_sidebar(&self) -> &ViewHandle { + &self.left_sidebar } - pub fn right_sidebar_mut(&mut self) -> &mut Sidebar { - &mut self.right_sidebar + pub fn right_sidebar(&self) -> &ViewHandle { + &self.right_sidebar } pub fn status_bar(&self) -> &ViewHandle { @@ -1028,12 +1039,15 @@ impl Workspace { } pub fn toggle_sidebar_item(&mut self, action: &ToggleSidebarItem, cx: &mut ViewContext) { - let sidebar = match action.0.side { + let sidebar = match action.side { Side::Left => &mut self.left_sidebar, Side::Right => &mut self.right_sidebar, }; - sidebar.toggle_item(action.0.item_index); - if let Some(active_item) = sidebar.active_item() { + let active_item = sidebar.update(cx, |sidebar, cx| { + sidebar.toggle_item(action.item_index, cx); + sidebar.active_item().cloned() + }); + if let Some(active_item) = active_item { cx.focus(active_item); } else { cx.focus_self(); @@ -1046,12 +1060,15 @@ impl Workspace { action: &ToggleSidebarItemFocus, cx: &mut ViewContext, ) { - let sidebar = match action.0.side { + let sidebar = match action.side { Side::Left => &mut self.left_sidebar, Side::Right => &mut self.right_sidebar, }; - sidebar.activate_item(action.0.item_index); - if let Some(active_item) = sidebar.active_item() { + let active_item = sidebar.update(cx, |sidebar, cx| { + sidebar.toggle_item(action.item_index, cx); + sidebar.active_item().cloned() + }); + if let Some(active_item) = active_item { if active_item.is_focused(cx) { cx.focus_self(); } else { @@ -1610,7 +1627,7 @@ impl Workspace { .boxed(), ) .constrained() - .with_width(theme.workspace.right_sidebar.width) + .with_width(theme.workspace.titlebar.avatar_width) .contained() .with_margin_left(2.) .boxed(); @@ -1656,7 +1673,7 @@ impl Workspace { .with_width(24.) .aligned() .constrained() - .with_width(theme.workspace.right_sidebar.width) + .with_width(24.) .aligned() .boxed() }) @@ -1983,37 +2000,39 @@ impl View for Workspace { .with_child( Stack::new() .with_child({ - let mut content = Flex::row(); - content.add_child(self.left_sidebar.render(&theme, cx)); - if let Some(element) = - self.left_sidebar.render_active_item(&theme, cx) - { - content - .add_child(FlexItem::new(element).flex(0.8, false).boxed()); - } - content.add_child( - Flex::column() - .with_child( - FlexItem::new(self.center.render( - &theme, - &self.follower_states_by_leader, - self.project.read(cx).collaborators(), - )) - .flex(1., true) - .boxed(), - ) - .with_child(ChildView::new(&self.status_bar).boxed()) + Flex::row() + .with_children( + if self.left_sidebar.read(cx).active_item().is_some() { + Some( + ChildView::new(&self.left_sidebar) + .flex(0.8, false) + .boxed(), + ) + } else { + None + }, + ) + .with_child( + FlexItem::new(self.center.render( + &theme, + &self.follower_states_by_leader, + self.project.read(cx).collaborators(), + )) .flex(1., true) .boxed(), - ); - if let Some(element) = - self.right_sidebar.render_active_item(&theme, cx) - { - content - .add_child(FlexItem::new(element).flex(0.8, false).boxed()); - } - content.add_child(self.right_sidebar.render(&theme, cx)); - content.boxed() + ) + .with_children( + if self.right_sidebar.read(cx).active_item().is_some() { + Some( + ChildView::new(&self.right_sidebar) + .flex(0.8, false) + .boxed(), + ) + } else { + None + }, + ) + .boxed() }) .with_children(self.modal.as_ref().map(|m| { ChildView::new(m) @@ -2026,6 +2045,7 @@ impl View for Workspace { .flex(1.0, true) .boxed(), ) + .with_child(ChildView::new(&self.status_bar).boxed()) .contained() .with_background_color(theme.workspace.background) .boxed(), @@ -2202,10 +2222,10 @@ pub fn open_paths( let mut workspace = (app_state.build_workspace)(project, &app_state, cx); if contains_directory { workspace.toggle_sidebar_item( - &ToggleSidebarItem(SidebarItemId { + &ToggleSidebarItem { side: Side::Left, item_index: 0, - }), + }, cx, ); } diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs index 71ce6f065ab6a87a09717602ac0a33bad0dba35c..b4ff271f154e64a29b73faf11b9a608115d4cd06 100644 --- a/crates/zed/src/zed.rs +++ b/crates/zed/src/zed.rs @@ -6,7 +6,6 @@ pub mod test; use anyhow::{anyhow, Context, Result}; use breadcrumbs::Breadcrumbs; -use chat_panel::ChatPanel; pub use client; pub use contacts_panel; use contacts_panel::ContactsPanel; @@ -147,7 +146,7 @@ pub fn build_workspace( user_store: app_state.user_store.clone(), channel_list: app_state.channel_list.clone(), }; - let mut workspace = Workspace::new(&workspace_params, cx); + let workspace = Workspace::new(&workspace_params, cx); let project = workspace.project().clone(); let theme_names = app_state.themes.list().collect(); @@ -171,22 +170,15 @@ pub fn build_workspace( })); }); - workspace.left_sidebar_mut().add_item( - "icons/folder-tree-16.svg", - ProjectPanel::new(project, cx).into(), - ); - workspace.right_sidebar_mut().add_item( - "icons/user-16.svg", - cx.add_view(|cx| ContactsPanel::new(app_state.clone(), cx)) - .into(), - ); - workspace.right_sidebar_mut().add_item( - "icons/comment-16.svg", - cx.add_view(|cx| { - ChatPanel::new(app_state.client.clone(), app_state.channel_list.clone(), cx) - }) - .into(), - ); + let project_panel = ProjectPanel::new(project, cx); + let contact_panel = cx.add_view(|cx| ContactsPanel::new(app_state.clone(), cx)); + + workspace.left_sidebar().update(cx, |sidebar, cx| { + sidebar.add_item("icons/folder-tree-16.svg", project_panel.into(), cx) + }); + workspace.right_sidebar().update(cx, |sidebar, cx| { + sidebar.add_item("icons/user-16.svg", contact_panel.into(), cx) + }); let diagnostic_message = cx.add_view(|_| editor::items::DiagnosticMessage::new()); let diagnostic_summary = @@ -200,8 +192,8 @@ pub fn build_workspace( status_bar.add_left_item(diagnostic_summary, cx); status_bar.add_left_item(diagnostic_message, cx); status_bar.add_left_item(lsp_status, cx); - status_bar.add_right_item(auto_update, cx); status_bar.add_right_item(cursor_position, cx); + status_bar.add_right_item(auto_update, cx); }); workspace @@ -362,7 +354,7 @@ mod tests { let workspace_1 = cx.root_view::(cx.window_ids()[0]).unwrap(); workspace_1.update(cx, |workspace, cx| { assert_eq!(workspace.worktrees(cx).count(), 2); - assert!(workspace.left_sidebar_mut().active_item().is_some()); + assert!(workspace.left_sidebar().read(cx).active_item().is_some()); assert!(workspace.active_pane().is_focused(cx)); }); diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 609639c467028dc8adeca0485f4c2f6571e74a21..a960f9508dc69b339659c9bcfa6ed69f78902e9a 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -52,22 +52,6 @@ export default function workspace(theme: Theme) { iconColor: iconColor(theme, "secondary"), iconSize: 18, }; - const sidebar = { - width: 30, - background: backgroundColor(theme, 300), - border: border(theme, "primary", { right: true }), - item: sidebarItem, - activeItem: { - ...sidebarItem, - iconColor: iconColor(theme, "active"), - }, - resizeHandle: { - background: border(theme, "primary").color, - padding: { - left: 1, - }, - }, - }; const shareIcon = { margin: { top: 3, bottom: 2 }, cornerRadius: 6, @@ -86,19 +70,17 @@ export default function workspace(theme: Theme) { }, cursor: "Arrow" }, - leftSidebar: { - ...sidebar, - border: border(theme, "primary", { right: true }), - }, - rightSidebar: { - ...sidebar, - border: border(theme, "primary", { left: true }), + sidebarResizeHandle: { + background: border(theme, "primary").color, + padding: { + left: 1, + }, }, paneDivider: { color: border(theme, "secondary").color, width: 1, }, - status_bar: { + statusBar: { height: 24, itemSpacing: 8, padding: { @@ -111,6 +93,16 @@ export default function workspace(theme: Theme) { lspMessage: text(theme, "sans", "muted"), autoUpdateProgressMessage: text(theme, "sans", "muted"), autoUpdateDoneMessage: text(theme, "sans", "muted"), + sidebarItem: { + ...sidebarItem + }, + sidebarItemHover: { + ...sidebarItem + }, + sidebarItemActive: { + ...sidebarItem, + iconColor: iconColor(theme, "active"), + }, }, titlebar: { avatarWidth: 18, From 7f63ed3835032f98fb5155af3fa2e3e8425435b6 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Wed, 27 Apr 2022 09:38:31 -0700 Subject: [PATCH 02/12] Allow styling sidebar icons and groups in themes --- assets/themes/cave-dark.json | 32 +++++++++++++++++++++++++--- assets/themes/cave-light.json | 32 +++++++++++++++++++++++++--- assets/themes/dark.json | 32 +++++++++++++++++++++++++--- assets/themes/light.json | 32 +++++++++++++++++++++++++--- assets/themes/solarized-dark.json | 32 +++++++++++++++++++++++++--- assets/themes/solarized-light.json | 32 +++++++++++++++++++++++++--- assets/themes/sulphurpool-dark.json | 32 +++++++++++++++++++++++++--- assets/themes/sulphurpool-light.json | 32 +++++++++++++++++++++++++--- crates/theme/src/theme.rs | 30 ++++++++++++++------------ crates/workspace/src/sidebar.rs | 18 ++++++++++------ styles/src/styleTree/workspace.ts | 9 ++++++++ 11 files changed, 269 insertions(+), 44 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index fb5b6314b10108f7aaf11d7d07068d2c26c0f512..8fe36aac5d567dc7fd8994769bbb63d9af5f0779 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#8b8792", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#8b8792", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#efecf4", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#5852607a" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 32421648471e02a87b4746bcc95a0da82a5f2c6e..cdd23be45f0f9c05701e819467ca44373a8aeedf 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#585260", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#585260", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#19171c", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#8b87922e" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 49f78bee1bfc23846bd24a2f574a8b31e1aa3942..9a0d6762e2c35d462aea5cb06c1466fa28841c03 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#9c9c9c", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#9c9c9c", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#ffffff", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#2b2b2b" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 88fe8f5a914a8b18871fbf50b86aa1b02da41f78..6997cd2e680c8f5ac1b80e8f7a27862c5b017c7b 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#717171", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#717171", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#000000", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#e3e3e3" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 7d53cce491c481d5b1eb6ce989f9855f42fa5945..b63a0f487245735a748e3b5a03678e47db337fa8 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#93a1a1", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#93a1a1", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#fdf6e3", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#586e757a" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 167bf305cb0ac7915d5fa595a80056d6cbe78cec..2b0b1d5edd72482516b6d69558d0f53c551bb361 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#586e75", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#586e75", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#002b36", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#93a1a12e" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index db76b4502af2f27f2679ef05d07e4e6f4ba0c330..9ab07af2d1615bf937377cab7096b0a5144939fc 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#979db4", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#979db4", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#f5f7ff", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#5e66877a" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 9957f42a6b5dd25a18d0415cef9310cabf055182..1a83d53fea1bb8f4dc811613b6360c338fc51726 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -212,17 +212,43 @@ "sidebar_item": { "height": 32, "icon_color": "#5e6687", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_hover": { "height": 32, "icon_color": "#5e6687", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 }, "sidebar_item_active": { "height": 32, "icon_color": "#202746", - "icon_size": 18 + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#979db42e" + }, + "sidebar_items_left": { + "margin": { + "right": 20 + } + }, + "sidebar_items_right": { + "margin": { + "left": 20 + } } }, "titlebar": { diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index e8bf1a15533aefac0fc3fe6b66cadad6a635818c..710069d90d2d5f09cb5e4345d3661b91152507c6 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -136,20 +136,6 @@ pub struct FindEditor { pub max_width: f32, } -#[derive(Deserialize, Default)] -pub struct Sidebar { - pub resize_handle: ContainerStyle, -} - -#[derive(Clone, Copy, Deserialize, Default)] -pub struct SidebarItem { - #[serde(flatten)] - pub container: ContainerStyle, - pub icon_color: Color, - pub icon_size: f32, - pub height: f32, -} - #[derive(Deserialize, Default)] pub struct StatusBar { #[serde(flatten)] @@ -161,11 +147,27 @@ pub struct StatusBar { pub lsp_message: TextStyle, pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, + pub sidebar_items_left: ContainerStyle, + pub sidebar_items_right: ContainerStyle, pub sidebar_item: SidebarItem, pub sidebar_item_active: SidebarItem, pub sidebar_item_hover: SidebarItem, } +#[derive(Deserialize, Default)] +pub struct Sidebar { + pub resize_handle: ContainerStyle, +} + +#[derive(Clone, Copy, Deserialize, Default)] +pub struct SidebarItem { + #[serde(flatten)] + pub container: ContainerStyle, + pub icon_color: Color, + pub icon_size: f32, + pub height: f32, +} + #[derive(Deserialize, Default)] pub struct ChatPanel { #[serde(flatten)] diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs index 58d4bc6afcf010598b910a0a16d318fee77dab47..d0b786ea2d53e65ca2a5ec0dc109030fae51ff47 100644 --- a/crates/workspace/src/sidebar.rs +++ b/crates/workspace/src/sidebar.rs @@ -176,22 +176,26 @@ impl View for SidebarButtons { fn render(&mut self, cx: &mut RenderContext) -> ElementBox { let theme = &cx.global::().theme.workspace.status_bar; - let style = theme.sidebar_item; - let hover_style = theme.sidebar_item_hover; - let active_style = theme.sidebar_item_active; let sidebar = self.sidebar.read(cx); + let item_style = theme.sidebar_item; + let hover_item_style = theme.sidebar_item_hover; + let active_item_style = theme.sidebar_item_active; let active_ix = sidebar.active_item_ix; let side = sidebar.side; + let group_style = match side { + Side::Left => theme.sidebar_items_left, + Side::Right => theme.sidebar_items_right, + }; let items = sidebar.items.clone(); Flex::row() .with_children(items.iter().enumerate().map(|(ix, item)| { MouseEventHandler::new::(ix, cx, move |state, _| { let style = if Some(ix) == active_ix { - active_style + active_item_style } else if state.hovered { - hover_style + hover_item_style } else { - style + item_style }; Svg::new(item.icon_path) .with_color(style.icon_color) @@ -210,6 +214,8 @@ impl View for SidebarButtons { }) .boxed() })) + .contained() + .with_style(group_style) .boxed() } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index a960f9508dc69b339659c9bcfa6ed69f78902e9a..ce1bc05a81af0fb2181dcce7e8201e11913cdf95 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -51,6 +51,8 @@ export default function workspace(theme: Theme) { height: 32, iconColor: iconColor(theme, "secondary"), iconSize: 18, + padding: { left: 5, right: 5 }, + cornerRadius: 5, }; const shareIcon = { margin: { top: 3, bottom: 2 }, @@ -102,7 +104,14 @@ export default function workspace(theme: Theme) { sidebarItemActive: { ...sidebarItem, iconColor: iconColor(theme, "active"), + background: backgroundColor(theme, 300, "active"), }, + sidebarItemsLeft: { + margin: { right: 20 } + }, + sidebarItemsRight: { + margin: { left: 20 } + } }, titlebar: { avatarWidth: 18, From 68a7f99c1405096d1503df3eb2a6f290a97083f6 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Wed, 27 Apr 2022 10:03:46 -0700 Subject: [PATCH 03/12] Update sidebar toggle icons --- assets/icons/contacts-solid-14.svg | 3 +++ assets/icons/folder-tree-16.svg | 3 --- assets/icons/folder-tree-solid-14.svg | 3 +++ assets/icons/user-16.svg | 3 --- crates/zed/src/zed.rs | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) create mode 100644 assets/icons/contacts-solid-14.svg delete mode 100644 assets/icons/folder-tree-16.svg create mode 100644 assets/icons/folder-tree-solid-14.svg delete mode 100644 assets/icons/user-16.svg diff --git a/assets/icons/contacts-solid-14.svg b/assets/icons/contacts-solid-14.svg new file mode 100644 index 0000000000000000000000000000000000000000..05ad6ada71e38ddb1a85976a8c67207b5c753b0a --- /dev/null +++ b/assets/icons/contacts-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/folder-tree-16.svg b/assets/icons/folder-tree-16.svg deleted file mode 100644 index f22773b159ccf24fa410f37be92123fc2fa30601..0000000000000000000000000000000000000000 --- a/assets/icons/folder-tree-16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/folder-tree-solid-14.svg b/assets/icons/folder-tree-solid-14.svg new file mode 100644 index 0000000000000000000000000000000000000000..ecda94ca82716f822be5dc83b143643ede88465f --- /dev/null +++ b/assets/icons/folder-tree-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/user-16.svg b/assets/icons/user-16.svg deleted file mode 100644 index 4ec153f5380a62e4529dc1e38e47d8531a0b07cb..0000000000000000000000000000000000000000 --- a/assets/icons/user-16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs index b4ff271f154e64a29b73faf11b9a608115d4cd06..67ab164719caf9a919f1a1a1e579d04eb8a46923 100644 --- a/crates/zed/src/zed.rs +++ b/crates/zed/src/zed.rs @@ -174,10 +174,10 @@ pub fn build_workspace( let contact_panel = cx.add_view(|cx| ContactsPanel::new(app_state.clone(), cx)); workspace.left_sidebar().update(cx, |sidebar, cx| { - sidebar.add_item("icons/folder-tree-16.svg", project_panel.into(), cx) + sidebar.add_item("icons/folder-tree-solid-14.svg", project_panel.into(), cx) }); workspace.right_sidebar().update(cx, |sidebar, cx| { - sidebar.add_item("icons/user-16.svg", contact_panel.into(), cx) + sidebar.add_item("icons/contacts-solid-14.svg", contact_panel.into(), cx) }); let diagnostic_message = cx.add_view(|_| editor::items::DiagnosticMessage::new()); From b23ff7c3adc037d512e9e7068c3e8413edb36a17 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Wed, 27 Apr 2022 13:23:58 -0400 Subject: [PATCH 04/12] Update semantic status colors in all themes - for `ok`, `error`, `warning` and `info`: - backgroundColor values were all placeholder. Add real values - Update border values to new style --- assets/themes/cave-dark.json | 6 ++-- assets/themes/cave-light.json | 6 ++-- assets/themes/dark.json | 6 ++-- assets/themes/light.json | 6 ++-- assets/themes/solarized-dark.json | 6 ++-- assets/themes/solarized-light.json | 6 ++-- assets/themes/sulphurpool-dark.json | 6 ++-- assets/themes/sulphurpool-light.json | 6 ++-- styles/src/themes/base16.ts | 40 ++++++++++++------------- styles/src/themes/dark.ts | 44 +++++++++++++--------------- styles/src/themes/light.ts | 44 ++++++++++++++-------------- 11 files changed, 87 insertions(+), 89 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 8fe36aac5d567dc7fd8994769bbb63d9af5f0779..2d6b93a177dd200b3485e7e3107eedca703f6350 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -402,8 +402,8 @@ "background": "#19171c", "active_line_background": "#efecf412", "code_actions_indicator": "#8b8792", - "diff_background_deleted": "#be4678", - "diff_background_inserted": "#2a9292", + "diff_background_deleted": "#be467826", + "diff_background_inserted": "#2a929226", "document_highlight_read_background": "#19171c1f", "document_highlight_write_background": "#19171c29", "error_color": "#be4678", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#be4678", + "color": "#be467826", "width": 1 }, "margin": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index cdd23be45f0f9c05701e819467ca44373a8aeedf..1784bb8b54b01d171e552a4a368dca5eb5a21f67 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -402,8 +402,8 @@ "background": "#efecf4", "active_line_background": "#19171c12", "code_actions_indicator": "#585260", - "diff_background_deleted": "#be4678", - "diff_background_inserted": "#2a9292", + "diff_background_deleted": "#be467826", + "diff_background_inserted": "#2a929226", "document_highlight_read_background": "#efecf41f", "document_highlight_write_background": "#efecf429", "error_color": "#be4678", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#be4678", + "color": "#be467826", "width": 1 }, "margin": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 9a0d6762e2c35d462aea5cb06c1466fa28841c03..2b0d732958f2ba179a9c33812424f4772b9b05fb 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -402,8 +402,8 @@ "background": "#000000", "active_line_background": "#ffffff12", "code_actions_indicator": "#555555", - "diff_background_deleted": "#f15656", - "diff_background_inserted": "#1b9447", + "diff_background_deleted": "#c9181826", + "diff_background_inserted": "#1b944726", "document_highlight_read_background": "#ffffff1f", "document_highlight_write_background": "#ffffff29", "error_color": "#f15656", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#eb2d2d", + "color": "#eb2d2d26", "width": 1 }, "margin": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 6997cd2e680c8f5ac1b80e8f7a27862c5b017c7b..ae6036ccfffcafa07d0ba4ef2a9e3083d2cf5472 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -402,8 +402,8 @@ "background": "#ffffff", "active_line_background": "#0000000f", "code_actions_indicator": "#9c9c9c", - "diff_background_deleted": "#fcc6c6", - "diff_background_inserted": "#b7f9ce", + "diff_background_deleted": "#c9181826", + "diff_background_inserted": "#1b944726", "document_highlight_read_background": "#0000000f", "document_highlight_write_background": "#00000029", "error_color": "#eb2d2d", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#f9a0a0", + "color": "#eb2d2d26", "width": 1 }, "margin": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index b63a0f487245735a748e3b5a03678e47db337fa8..dffea6b23160aa1c40ecba80155a9c2d5433f506 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -402,8 +402,8 @@ "background": "#002b36", "active_line_background": "#fdf6e312", "code_actions_indicator": "#93a1a1", - "diff_background_deleted": "#dc322f", - "diff_background_inserted": "#859900", + "diff_background_deleted": "#dc322f26", + "diff_background_inserted": "#85990026", "document_highlight_read_background": "#002b361f", "document_highlight_write_background": "#002b3629", "error_color": "#dc322f", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#dc322f", + "color": "#dc322f26", "width": 1 }, "margin": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 2b0b1d5edd72482516b6d69558d0f53c551bb361..912f160a8341cc279e70146b2434316401d31841 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -402,8 +402,8 @@ "background": "#fdf6e3", "active_line_background": "#002b3612", "code_actions_indicator": "#586e75", - "diff_background_deleted": "#dc322f", - "diff_background_inserted": "#859900", + "diff_background_deleted": "#dc322f26", + "diff_background_inserted": "#85990026", "document_highlight_read_background": "#fdf6e31f", "document_highlight_write_background": "#fdf6e329", "error_color": "#dc322f", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#dc322f", + "color": "#dc322f26", "width": 1 }, "margin": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 9ab07af2d1615bf937377cab7096b0a5144939fc..8fe68d052673c34a25b528b6c7814f07764a84ea 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -402,8 +402,8 @@ "background": "#202746", "active_line_background": "#f5f7ff12", "code_actions_indicator": "#979db4", - "diff_background_deleted": "#c94922", - "diff_background_inserted": "#ac9739", + "diff_background_deleted": "#c9492226", + "diff_background_inserted": "#ac973926", "document_highlight_read_background": "#2027461f", "document_highlight_write_background": "#20274629", "error_color": "#c94922", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#c94922", + "color": "#c9492226", "width": 1 }, "margin": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 1a83d53fea1bb8f4dc811613b6360c338fc51726..eea0851ad54a1da78dcea2e1d1b98c4123ad18b1 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -402,8 +402,8 @@ "background": "#f5f7ff", "active_line_background": "#20274612", "code_actions_indicator": "#5e6687", - "diff_background_deleted": "#c94922", - "diff_background_inserted": "#ac9739", + "diff_background_deleted": "#c9492226", + "diff_background_inserted": "#ac973926", "document_highlight_read_background": "#f5f7ff1f", "document_highlight_write_background": "#f5f7ff29", "error_color": "#c94922", @@ -1369,7 +1369,7 @@ "size": 14 }, "border": { - "color": "#c94922", + "color": "#c9492226", "width": 1 }, "margin": { diff --git a/styles/src/themes/base16.ts b/styles/src/themes/base16.ts index a472837dbe07ac2a245708efc0cca523a79463c7..0744611fce3e020196235f0422aa609b38fd7e69 100644 --- a/styles/src/themes/base16.ts +++ b/styles/src/themes/base16.ts @@ -51,28 +51,28 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[ focused: neutral[3], }, ok: { - base: accent.green, - hovered: accent.green, - active: accent.green, - focused: accent.green, + base: withOpacity(accent.green, 0.15), + hovered: withOpacity(accent.green, 0.20), + active: withOpacity(accent.green, 0.25), + focused: withOpacity(accent.green, 0.20), }, error: { - base: accent.red, - hovered: accent.red, - active: accent.red, - focused: accent.red, + base: withOpacity(accent.red, 0.15), + hovered: withOpacity(accent.red, 0.20), + active: withOpacity(accent.red, 0.25), + focused: withOpacity(accent.red, 0.20), }, warning: { - base: accent.yellow, - hovered: accent.yellow, - active: accent.yellow, - focused: accent.yellow, + base: withOpacity(accent.yellow, 0.15), + hovered: withOpacity(accent.yellow, 0.20), + active: withOpacity(accent.yellow, 0.25), + focused: withOpacity(accent.yellow, 0.20), }, info: { - base: accent.blue, - hovered: accent.blue, - active: accent.blue, - focused: accent.blue, + base: withOpacity(accent.blue, 0.15), + hovered: withOpacity(accent.blue, 0.20), + active: withOpacity(accent.blue, 0.25), + focused: withOpacity(accent.blue, 0.20), }, }; @@ -82,10 +82,10 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[ muted: neutral[3], focused: neutral[3], active: neutral[3], - ok: accent.green, - error: accent.red, - warning: accent.yellow, - info: accent.blue, + ok: withOpacity(accent.green, 0.15), + error: withOpacity(accent.red, 0.15), + warning: withOpacity(accent.yellow, 0.15), + info: withOpacity(accent.blue, 0.15), }; const textColor = { diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts index 564ac685ae83ab72bb52c3e9426f56d611e31952..ad2cf516563946970df43a806444c305becd17f6 100644 --- a/styles/src/themes/dark.ts +++ b/styles/src/themes/dark.ts @@ -34,28 +34,28 @@ const backgroundColor = { focused: colors.neutral[800], }, ok: { - base: colors.green[600], - hovered: colors.green[600], - active: colors.green[600], - focused: colors.green[600], + base: withOpacity(colors.green[600], 0.15), + hovered: withOpacity(colors.green[600], 0.20), + active: withOpacity(colors.green[600], 0.25), + focused: withOpacity(colors.green[600], 0.20), }, error: { - base: colors.red[400], - hovered: colors.red[400], - active: colors.red[400], - focused: colors.red[400], + base: withOpacity(colors.red[600], 0.15), + hovered: withOpacity(colors.red[600], 0.20), + active: withOpacity(colors.red[600], 0.25), + focused: withOpacity(colors.red[600], 0.20), }, warning: { - base: colors.amber[300], - hovered: colors.amber[300], - active: colors.amber[300], - focused: colors.amber[300], + base: withOpacity(colors.amber[400], 0.15), + hovered: withOpacity(colors.amber[400], 0.20), + active: withOpacity(colors.amber[400], 0.25), + focused: withOpacity(colors.amber[400], 0.20), }, info: { - base: colors.blue[500], - hovered: colors.blue[500], - active: colors.blue[500], - focused: colors.blue[500], + base: withOpacity(colors.blue[500], 0.15), + hovered: withOpacity(colors.blue[500], 0.20), + active: withOpacity(colors.blue[500], 0.25), + focused: withOpacity(colors.blue[500], 0.20), }, }; @@ -65,10 +65,10 @@ const borderColor = { muted: colors.neutral[675], focused: colors.indigo[500], active: colors.neutral[900], - ok: colors.green[500], - error: colors.red[500], - warning: colors.amber[500], - info: colors.blue[500], + ok: withOpacity(colors.green[600], 0.15), + error: withOpacity(colors.red[500], 0.15), + warning: withOpacity(colors.amber[400], 0.15), + info: withOpacity(colors.blue[500], 0.15), }; const textColor = { @@ -77,7 +77,6 @@ const textColor = { muted: colors.neutral[450], placeholder: colors.neutral[650], active: colors.neutral[0], - //TODO: (design) define feature and it's correct value feature: colors.blue[400], ok: colors.green[600], error: colors.red[400], @@ -91,7 +90,6 @@ const iconColor = { muted: colors.neutral[600], placeholder: colors.neutral[700], active: colors.neutral[0], - //TODO: (design) define feature and it's correct value feature: colors.blue[500], ok: colors.green[600], error: colors.red[500], @@ -124,7 +122,7 @@ const editor = { highlight: { selection: player[1].selectionColor, occurrence: withOpacity(colors.neutral[0], 0.12), - activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side + activeOccurrence: withOpacity(colors.neutral[0], 0.16), matchingBracket: backgroundColor[500].active, match: withOpacity(colors.violet[700], 0.5), activeMatch: withOpacity(colors.violet[600], 0.7), diff --git a/styles/src/themes/light.ts b/styles/src/themes/light.ts index 710754abc58a5c80f4d39330d6e1e1fcd57ead7a..c17aaf5807eca53f0a2dd51ee72a6a96900298fc 100644 --- a/styles/src/themes/light.ts +++ b/styles/src/themes/light.ts @@ -34,28 +34,28 @@ const backgroundColor = { focused: colors.neutral[25], }, ok: { - base: colors.green[100], - hovered: colors.green[100], - active: colors.green[100], - focused: colors.green[100], + base: withOpacity(colors.green[600], 0.15), + hovered: withOpacity(colors.green[600], 0.20), + active: withOpacity(colors.green[600], 0.25), + focused: withOpacity(colors.green[600], 0.20), }, error: { - base: colors.red[100], - hovered: colors.red[100], - active: colors.red[100], - focused: colors.red[100], + base: withOpacity(colors.red[600], 0.15), + hovered: withOpacity(colors.red[600], 0.20), + active: withOpacity(colors.red[600], 0.25), + focused: withOpacity(colors.red[600], 0.20), }, warning: { - base: colors.yellow[100], - hovered: colors.yellow[100], - active: colors.yellow[100], - focused: colors.yellow[100], + base: withOpacity(colors.amber[400], 0.15), + hovered: withOpacity(colors.amber[400], 0.20), + active: withOpacity(colors.amber[400], 0.25), + focused: withOpacity(colors.amber[400], 0.20), }, info: { - base: colors.blue[100], - hovered: colors.blue[100], - active: colors.blue[100], - focused: colors.blue[100], + base: withOpacity(colors.blue[500], 0.15), + hovered: withOpacity(colors.blue[500], 0.20), + active: withOpacity(colors.blue[500], 0.25), + focused: withOpacity(colors.blue[500], 0.20), }, }; @@ -65,10 +65,10 @@ const borderColor = { muted: colors.neutral[100], focused: colors.indigo[500], active: colors.neutral[250], - ok: colors.green[200], - error: colors.red[200], - warning: colors.yellow[200], - info: colors.blue[200], + ok: withOpacity(colors.green[600], 0.15), + error: withOpacity(colors.red[500], 0.15), + warning: withOpacity(colors.amber[400], 0.15), + info: withOpacity(colors.blue[500], 0.15), }; const textColor = { @@ -122,10 +122,10 @@ const editor = { highlight: { selection: player[1].selectionColor, occurrence: withOpacity(colors.neutral[900], 0.06), - activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side + activeOccurrence: withOpacity(colors.neutral[900], 0.16), matchingBracket: colors.neutral[0], match: colors.yellow[100], - activeMatch: colors.yellow[200], // TODO: This is not hooked up to occurences on the rust side + activeMatch: colors.yellow[200], related: colors.neutral[0], }, gutter: { From 9e87be722edf6159692463b6fbeeb6b2ea19db20 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Wed, 27 Apr 2022 12:14:34 -0700 Subject: [PATCH 05/12] Start re-styling diagnostic indicator in status bar --- assets/icons/error-solid-14.svg | 3 + assets/icons/no-error-solid-14.svg | 3 + assets/icons/warning-solid-14.svg | 3 + assets/themes/cave-dark.json | 173 ++++++++++++++++++++------- assets/themes/cave-light.json | 173 ++++++++++++++++++++------- assets/themes/dark.json | 173 ++++++++++++++++++++------- assets/themes/light.json | 173 ++++++++++++++++++++------- assets/themes/solarized-dark.json | 173 ++++++++++++++++++++------- assets/themes/solarized-light.json | 173 ++++++++++++++++++++------- assets/themes/sulphurpool-dark.json | 173 ++++++++++++++++++++------- assets/themes/sulphurpool-light.json | 173 ++++++++++++++++++++------- crates/diagnostics/src/items.rs | 95 +++++++++++++-- crates/theme/src/theme.rs | 35 +++++- crates/workspace/src/sidebar.rs | 17 ++- styles/src/styleTree/workspace.ts | 77 +++++++++--- 15 files changed, 1254 insertions(+), 363 deletions(-) create mode 100644 assets/icons/error-solid-14.svg create mode 100644 assets/icons/no-error-solid-14.svg create mode 100644 assets/icons/warning-solid-14.svg diff --git a/assets/icons/error-solid-14.svg b/assets/icons/error-solid-14.svg new file mode 100644 index 0000000000000000000000000000000000000000..a74b7e9419b968d00886881e5688b486c004cf85 --- /dev/null +++ b/assets/icons/error-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/no-error-solid-14.svg b/assets/icons/no-error-solid-14.svg new file mode 100644 index 0000000000000000000000000000000000000000..4d222aac730f5cae69c89e82ac3befca9b653626 --- /dev/null +++ b/assets/icons/no-error-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/warning-solid-14.svg b/assets/icons/warning-solid-14.svg new file mode 100644 index 0000000000000000000000000000000000000000..53dd5f7eaedc25bd73c26841d2d341d38aa75704 --- /dev/null +++ b/assets/icons/warning-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 2d6b93a177dd200b3485e7e3107eedca703f6350..1b0ded6e8ee4589970112e10ccd2e4dde8b9c963 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -209,45 +209,138 @@ "color": "#8b8792", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#8b8792", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#8b8792", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#efecf4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } }, - "corner_radius": 5, - "background": "#5852607a" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#8b8792", + "size": 14 + }, + "icon_color_ok": "#2a9292", + "icon_color_warning": "#a06e3b", + "icon_color_error": "#be4678", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#8b8792", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#8b8792", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#efecf4", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#5852607a" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#8b8792" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#58526052", "color": "#8b8792" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#58526052", "color": "#efecf4" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5852607a", "color": "#efecf4" }, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 1784bb8b54b01d171e552a4a368dca5eb5a21f67..61d89bb0dc47b8560cb2c949ab26a6324c7aaec4 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -209,45 +209,138 @@ "color": "#585260", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#585260", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#585260", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#19171c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } }, - "corner_radius": 5, - "background": "#8b87922e" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#585260", + "size": 14 + }, + "icon_color_ok": "#2a9292", + "icon_color_warning": "#a06e3b", + "icon_color_error": "#be4678", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#585260", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#585260", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#19171c", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#8b87922e" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#585260" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#8b87921f", "color": "#585260" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#8b87921f", "color": "#19171c" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#8b87922e", "color": "#19171c" }, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 2b0d732958f2ba179a9c33812424f4772b9b05fb..6e72cfe2ae8449896c6754c86b283cad86281b68 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -209,45 +209,138 @@ "color": "#808080", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#9c9c9c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#9c9c9c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#ffffff", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } }, - "corner_radius": 5, - "background": "#2b2b2b" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#808080", + "size": 14 + }, + "icon_color_ok": "#1b9447", + "icon_color_warning": "#f6a724", + "icon_color_error": "#eb2d2d", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#9c9c9c", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#9c9c9c", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#ffffff", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#2b2b2b" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#9c9c9c" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#323232", "color": "#9c9c9c" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#323232", "color": "#ffffff" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#1c1c1c", "color": "#ffffff" }, diff --git a/assets/themes/light.json b/assets/themes/light.json index ae6036ccfffcafa07d0ba4ef2a9e3083d2cf5472..3312947f6020913596d2b928008105eca002409d 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -209,45 +209,138 @@ "color": "#636363", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#717171", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#717171", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#000000", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } }, - "corner_radius": 5, - "background": "#e3e3e3" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#636363", + "size": 14 + }, + "icon_color_ok": "#1b9447", + "icon_color_warning": "#f7bf17", + "icon_color_error": "#c91818", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#717171", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#717171", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#000000", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#e3e3e3" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#717171" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#e3e3e3", "color": "#717171" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#e3e3e3", "color": "#000000" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#d5d5d5", "color": "#000000" }, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index dffea6b23160aa1c40ecba80155a9c2d5433f506..6c05f73b018abd28d4b2544d36fd6e53087febc9 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -209,45 +209,138 @@ "color": "#93a1a1", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#93a1a1", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#93a1a1", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#fdf6e3", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#586e757a" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#93a1a1", + "size": 14 + }, + "icon_color_ok": "#859900", + "icon_color_warning": "#b58900", + "icon_color_error": "#dc322f", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#93a1a1", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#93a1a1", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#fdf6e3", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#586e757a" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#93a1a1" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#586e7552", "color": "#93a1a1" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#586e7552", "color": "#fdf6e3" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#586e757a", "color": "#fdf6e3" }, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 912f160a8341cc279e70146b2434316401d31841..289baa6dae504c177f356b41b99f5f005722d803 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -209,45 +209,138 @@ "color": "#586e75", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#586e75", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#586e75", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#002b36", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#93a1a12e" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#586e75", + "size": 14 + }, + "icon_color_ok": "#859900", + "icon_color_warning": "#b58900", + "icon_color_error": "#dc322f", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#586e75", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#586e75", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#002b36", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#93a1a12e" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#586e75" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#93a1a11f", "color": "#586e75" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#93a1a11f", "color": "#002b36" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#93a1a12e", "color": "#002b36" }, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 8fe68d052673c34a25b528b6c7814f07764a84ea..371aac3517037dbeeace70cfe780f30f72f1368c 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -209,45 +209,138 @@ "color": "#979db4", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#979db4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#979db4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#f5f7ff", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#5e66877a" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#979db4", + "size": 14 + }, + "icon_color_ok": "#ac9739", + "icon_color_warning": "#c08b30", + "icon_color_error": "#c94922", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#979db4", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#979db4", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#f5f7ff", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#5e66877a" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#979db4" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5e668752", "color": "#979db4" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5e668752", "color": "#f5f7ff" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5e66877a", "color": "#f5f7ff" }, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index eea0851ad54a1da78dcea2e1d1b98c4123ad18b1..0d851953266b4acf4ea1ffd3466effe48364f2ec 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -209,45 +209,138 @@ "color": "#5e6687", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#5e6687", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#5e6687", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#202746", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#979db42e" - }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#5e6687", + "size": 14 + }, + "icon_color_ok": "#ac9739", + "icon_color_warning": "#c08b30", + "icon_color_error": "#c94922", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 + }, + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#5e6687", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#5e6687", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#202746", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#979db42e" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#5e6687" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#979db41f", "color": "#5e6687" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#979db41f", "color": "#202746" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#979db42e", "color": "#202746" }, diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs index 2f9a228256f4f91993698a54ac4382b82498c629..9c6f415ab81fd13d8ce747a54bc59947b39a31ee 100644 --- a/crates/diagnostics/src/items.rs +++ b/crates/diagnostics/src/items.rs @@ -1,4 +1,3 @@ -use crate::render_summary; use gpui::{ elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, View, ViewContext, @@ -50,19 +49,91 @@ impl View for DiagnosticSummary { enum Tag {} let in_progress = self.in_progress; - MouseEventHandler::new::(0, cx, |_, cx| { - let theme = &cx.global::().theme.project_diagnostics; - if in_progress { - Label::new( - "Checking... ".to_string(), - theme.status_bar_item.text.clone(), - ) - .contained() - .with_style(theme.status_bar_item.container) - .boxed() + MouseEventHandler::new::(0, cx, |state, cx| { + let style = &cx + .global::() + .theme + .workspace + .status_bar + .diagnostics; + let summary_style = if self.summary.error_count > 0 { + if state.hovered { + &style.summary_error_hover + } else { + &style.summary_error + } + } else if self.summary.warning_count > 0 { + if state.hovered { + &style.summary_warning_hover + } else { + &style.summary_warning + } + } else if state.hovered { + &style.summary_ok_hover } else { - render_summary(&self.summary, &theme.status_bar_item.text, &theme) + &style.summary_ok + }; + + let mut row = Flex::row(); + if self.summary.error_count > 0 { + row.add_children([ + Svg::new("icons/error-solid-14.svg") + .with_color(style.icon_color_error) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_margin_right(style.icon_spacing) + .named("error-icon"), + Label::new( + self.summary.error_count.to_string(), + summary_style.text.clone(), + ) + .aligned() + .boxed(), + ]); + } + + if self.summary.warning_count > 0 { + row.add_children([ + Svg::new("icons/warning-solid-14.svg") + .with_color(style.icon_color_warning) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_margin_right(style.icon_spacing) + .with_margin_left(if self.summary.error_count > 0 { + style.summary_spacing + } else { + 0. + }) + .named("warning-icon"), + Label::new( + self.summary.warning_count.to_string(), + summary_style.text.clone(), + ) + .aligned() + .boxed(), + ]); } + + if self.summary.error_count == 0 && self.summary.warning_count == 0 { + row.add_child( + Svg::new("icons/no-error-solid-14.svg") + .with_color(style.icon_color_ok) + .constrained() + .with_width(style.icon_width) + .aligned() + .named("ok-icon"), + ); + } + + row.constrained() + .with_height(style.height) + .contained() + .with_style(summary_style.container) + .boxed() }) .with_cursor_style(CursorStyle::PointingHand) .on_click(|cx| cx.dispatch_action(crate::Deploy)) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 710069d90d2d5f09cb5e4345d3661b91152507c6..63774824e4302949eae7ebb1afb80843211f37b4 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -147,11 +147,35 @@ pub struct StatusBar { pub lsp_message: TextStyle, pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, - pub sidebar_items_left: ContainerStyle, - pub sidebar_items_right: ContainerStyle, - pub sidebar_item: SidebarItem, - pub sidebar_item_active: SidebarItem, - pub sidebar_item_hover: SidebarItem, + pub sidebar_buttons: StatusBarSidebarButtons, + pub diagnostics: StatusBarDiagnostics, +} + +#[derive(Deserialize, Default)] +pub struct StatusBarSidebarButtons { + pub group_left: ContainerStyle, + pub group_right: ContainerStyle, + pub item: SidebarItem, + pub item_active: SidebarItem, + pub item_hover: SidebarItem, +} + +#[derive(Deserialize, Default)] +pub struct StatusBarDiagnostics { + pub message: ContainedText, + pub summary_ok: ContainedText, + pub summary_ok_hover: ContainedText, + pub summary_warning: ContainedText, + pub summary_warning_hover: ContainedText, + pub summary_error: ContainedText, + pub summary_error_hover: ContainedText, + pub icon_color_ok: Color, + pub icon_color_error: Color, + pub icon_color_warning: Color, + pub height: f32, + pub icon_width: f32, + pub icon_spacing: f32, + pub summary_spacing: f32, } #[derive(Deserialize, Default)] @@ -165,7 +189,6 @@ pub struct SidebarItem { pub container: ContainerStyle, pub icon_color: Color, pub icon_size: f32, - pub height: f32, } #[derive(Deserialize, Default)] diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs index d0b786ea2d53e65ca2a5ec0dc109030fae51ff47..b3f9819764f0d714b9ebb775e220db6ec45504d5 100644 --- a/crates/workspace/src/sidebar.rs +++ b/crates/workspace/src/sidebar.rs @@ -175,16 +175,21 @@ impl View for SidebarButtons { } fn render(&mut self, cx: &mut RenderContext) -> ElementBox { - let theme = &cx.global::().theme.workspace.status_bar; + let theme = &cx + .global::() + .theme + .workspace + .status_bar + .sidebar_buttons; let sidebar = self.sidebar.read(cx); - let item_style = theme.sidebar_item; - let hover_item_style = theme.sidebar_item_hover; - let active_item_style = theme.sidebar_item_active; + let item_style = theme.item; + let hover_item_style = theme.item_hover; + let active_item_style = theme.item_active; let active_ix = sidebar.active_item_ix; let side = sidebar.side; let group_style = match side { - Side::Left => theme.sidebar_items_left, - Side::Right => theme.sidebar_items_right, + Side::Left => theme.group_left, + Side::Right => theme.group_right, }; let items = sidebar.items.clone(); Flex::row() diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index ce1bc05a81af0fb2181dcce7e8201e11913cdf95..6d5ec34d47db9d9fdc39bf32417d4c7a260eb361 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,4 +1,5 @@ import Theme from "../themes/theme"; +import { color } from "../tokens"; import { backgroundColor, border, iconColor, text } from "./components"; export default function workspace(theme: Theme) { @@ -47,16 +48,20 @@ export default function workspace(theme: Theme) { }, }; - const sidebarItem = { - height: 32, + const diagnosticSummary = { + cornerRadius: 5, + padding: { left: 5, right: 5 }, + ...text(theme, "sans", "primary", { size: "sm" }), + }; + const sidebarButton = { iconColor: iconColor(theme, "secondary"), iconSize: 18, padding: { left: 5, right: 5 }, cornerRadius: 5, }; const shareIcon = { - margin: { top: 3, bottom: 2 }, cornerRadius: 6, + margin: { top: 3, bottom: 2 }, }; return { @@ -95,23 +100,57 @@ export default function workspace(theme: Theme) { lspMessage: text(theme, "sans", "muted"), autoUpdateProgressMessage: text(theme, "sans", "muted"), autoUpdateDoneMessage: text(theme, "sans", "muted"), - sidebarItem: { - ...sidebarItem - }, - sidebarItemHover: { - ...sidebarItem - }, - sidebarItemActive: { - ...sidebarItem, - iconColor: iconColor(theme, "active"), - background: backgroundColor(theme, 300, "active"), - }, - sidebarItemsLeft: { - margin: { right: 20 } + diagnostics: { + height: 16, + summaryOk: { + ...diagnosticSummary, + }, + summaryOkHover: { + ...diagnosticSummary, + }, + summaryWarning: { + ...diagnosticSummary, + background: backgroundColor(theme, "warning"), + border: border(theme, "warning"), + }, + summaryWarningHover: { + ...diagnosticSummary, + background: backgroundColor(theme, "warning"), + border: border(theme, "warning"), + }, + summaryError: { + ...diagnosticSummary, + background: backgroundColor(theme, "error"), + border: border(theme, "error"), + }, + summaryErrorHover: { + ...diagnosticSummary, + background: backgroundColor(theme, "error"), + border: border(theme, "error"), + }, + message: text(theme, "sans", "muted"), + iconColorOk: iconColor(theme, "ok"), + iconColorWarning: iconColor(theme, "warning"), + iconColorError: iconColor(theme, "error"), + iconWidth: 14, + iconSpacing: 4, + summarySpacing: 8, + }, + sidebarButtons: { + groupLeft: { + margin: { right: 20 } + }, + groupRight: { + margin: { left: 20 } + }, + item: { ...sidebarButton }, + itemHover: { ...sidebarButton }, + itemActive: { + ...sidebarButton, + iconColor: iconColor(theme, "active"), + background: backgroundColor(theme, 300, "active"), + }, }, - sidebarItemsRight: { - margin: { left: 20 } - } }, titlebar: { avatarWidth: 18, From a3700e0dd82a365e06ce250b4e1183237f964fb4 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Wed, 27 Apr 2022 13:11:43 -0700 Subject: [PATCH 06/12] Combine diagnostic status w/ diagnostic message indicators Improve the indicator styling --- assets/themes/cave-dark.json | 55 +++--- assets/themes/cave-light.json | 55 +++--- assets/themes/dark.json | 55 +++--- assets/themes/light.json | 55 +++--- assets/themes/solarized-dark.json | 55 +++--- assets/themes/solarized-light.json | 55 +++--- assets/themes/sulphurpool-dark.json | 55 +++--- assets/themes/sulphurpool-light.json | 55 +++--- crates/diagnostics/src/items.rs | 256 +++++++++++++++++---------- crates/editor/src/items.rs | 74 +------- crates/zed/src/zed.rs | 4 +- styles/src/styleTree/workspace.ts | 23 +-- 12 files changed, 366 insertions(+), 431 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 1b0ded6e8ee4589970112e10ccd2e4dde8b9c963..c64adb53d8377da89df917d595a9a2ce2e50889e 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#e2dfe7", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#e2dfe7", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#e2dfe7", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#e2dfe7", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#e2dfe7", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#e2dfe7", @@ -296,7 +296,7 @@ "color": "#8b8792", "size": 14 }, - "icon_color_ok": "#2a9292", + "icon_color_ok": "#8b8792", "icon_color_warning": "#a06e3b", "icon_color_error": "#be4678", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#8b8792", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#58526052" }, "item_active": { "icon_color": "#efecf4", diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 61d89bb0dc47b8560cb2c949ab26a6324c7aaec4..8d7a8b4d174cf55d1981fb0b981a6c5526b14474 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#26232a", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#26232a", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#26232a", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#26232a", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#26232a", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#26232a", @@ -296,7 +296,7 @@ "color": "#585260", "size": 14 }, - "icon_color_ok": "#2a9292", + "icon_color_ok": "#585260", "icon_color_warning": "#a06e3b", "icon_color_error": "#be4678", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#585260", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#8b87921f" }, "item_active": { "icon_color": "#19171c", diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 6e72cfe2ae8449896c6754c86b283cad86281b68..aac1da9a3a8bc846b8cca35017a4ee2ba8875257 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#f1f1f1", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#f1f1f1", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#f1f1f1", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#f1f1f1", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#f1f1f1", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#f1f1f1", @@ -296,7 +296,7 @@ "color": "#808080", "size": 14 }, - "icon_color_ok": "#1b9447", + "icon_color_ok": "#9c9c9c", "icon_color_warning": "#f6a724", "icon_color_error": "#eb2d2d", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#9c9c9c", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#232323" }, "item_active": { "icon_color": "#ffffff", diff --git a/assets/themes/light.json b/assets/themes/light.json index 3312947f6020913596d2b928008105eca002409d..858ad254002749ba697227cc4551e483deed0cf8 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#2b2b2b", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#2b2b2b", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#2b2b2b", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#2b2b2b", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#2b2b2b", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#2b2b2b", @@ -296,7 +296,7 @@ "color": "#636363", "size": 14 }, - "icon_color_ok": "#1b9447", + "icon_color_ok": "#717171", "icon_color_warning": "#f7bf17", "icon_color_error": "#c91818", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#717171", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#eaeaea" }, "item_active": { "icon_color": "#000000", diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 6c05f73b018abd28d4b2544d36fd6e53087febc9..a6320433df4512c2ebaa065fe51e83598df86bb7 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#eee8d5", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#eee8d5", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#eee8d5", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#eee8d5", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#eee8d5", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#eee8d5", @@ -296,7 +296,7 @@ "color": "#93a1a1", "size": 14 }, - "icon_color_ok": "#859900", + "icon_color_ok": "#93a1a1", "icon_color_warning": "#b58900", "icon_color_error": "#dc322f", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#93a1a1", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#586e7552" }, "item_active": { "icon_color": "#fdf6e3", diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 289baa6dae504c177f356b41b99f5f005722d803..14a465d25390560d44d1864636a5b5d5ad44e830 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#073642", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#073642", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#073642", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#073642", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#073642", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#073642", @@ -296,7 +296,7 @@ "color": "#586e75", "size": 14 }, - "icon_color_ok": "#859900", + "icon_color_ok": "#586e75", "icon_color_warning": "#b58900", "icon_color_error": "#dc322f", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#586e75", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#93a1a11f" }, "item_active": { "icon_color": "#002b36", diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 371aac3517037dbeeace70cfe780f30f72f1368c..421c5bbe29e597dadd1235a7334b9fc48f4275e9 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#dfe2f1", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#dfe2f1", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#dfe2f1", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#dfe2f1", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#dfe2f1", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#dfe2f1", @@ -296,7 +296,7 @@ "color": "#979db4", "size": 14 }, - "icon_color_ok": "#ac9739", + "icon_color_ok": "#979db4", "icon_color_warning": "#c08b30", "icon_color_error": "#c94922", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#979db4", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#5e668752" }, "item_active": { "icon_color": "#f5f7ff", diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 0d851953266b4acf4ea1ffd3466effe48364f2ec..0529f1787d989be07f2127b0c3593101de537260 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -173,7 +173,7 @@ }, "status_bar": { "height": 24, - "item_spacing": 8, + "item_spacing": 12, "padding": { "left": 6, "right": 6 @@ -212,30 +212,30 @@ "diagnostics": { "height": 16, "summary_ok": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#293256", "size": 14 }, "summary_ok_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#293256", "size": 14 }, "summary_warning": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#293256", @@ -247,10 +247,10 @@ } }, "summary_warning_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#293256", @@ -262,10 +262,10 @@ } }, "summary_error": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#293256", @@ -277,10 +277,10 @@ } }, "summary_error_hover": { - "corner_radius": 5, + "corner_radius": 6, "padding": { - "left": 5, - "right": 5 + "left": 6, + "right": 6 }, "family": "Zed Sans", "color": "#293256", @@ -296,7 +296,7 @@ "color": "#5e6687", "size": 14 }, - "icon_color_ok": "#ac9739", + "icon_color_ok": "#5e6687", "icon_color_warning": "#c08b30", "icon_color_error": "#c94922", "icon_width": 14, @@ -304,16 +304,8 @@ "summary_spacing": 8 }, "sidebar_buttons": { - "group_left": { - "margin": { - "right": 20 - } - }, - "group_right": { - "margin": { - "left": 20 - } - }, + "group_left": {}, + "group_right": {}, "item": { "icon_color": "#5e6687", "icon_size": 18, @@ -330,7 +322,8 @@ "left": 5, "right": 5 }, - "corner_radius": 5 + "corner_radius": 5, + "background": "#979db41f" }, "item_active": { "icon_color": "#202746", diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs index 9c6f415ab81fd13d8ce747a54bc59947b39a31ee..cbe1850f6cae31c1297e602c9ee7efd695b48a56 100644 --- a/crates/diagnostics/src/items.rs +++ b/crates/diagnostics/src/items.rs @@ -1,29 +1,33 @@ +use editor::Editor; use gpui::{ - elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, View, - ViewContext, + elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, + Subscription, View, ViewContext, ViewHandle, }; +use language::Diagnostic; use project::Project; use settings::Settings; use workspace::StatusItemView; -pub struct DiagnosticSummary { +pub struct DiagnosticIndicator { summary: project::DiagnosticSummary, - in_progress: bool, + current_diagnostic: Option, + check_in_progress: bool, + _observe_active_editor: Option, } -impl DiagnosticSummary { +impl DiagnosticIndicator { pub fn new(project: &ModelHandle, cx: &mut ViewContext) -> Self { cx.subscribe(project, |this, project, event, cx| match event { project::Event::DiskBasedDiagnosticsUpdated => { cx.notify(); } project::Event::DiskBasedDiagnosticsStarted => { - this.in_progress = true; + this.check_in_progress = true; cx.notify(); } project::Event::DiskBasedDiagnosticsFinished => { this.summary = project.read(cx).diagnostic_summary(cx); - this.in_progress = false; + this.check_in_progress = false; cx.notify(); } _ => {} @@ -31,113 +35,163 @@ impl DiagnosticSummary { .detach(); Self { summary: project.read(cx).diagnostic_summary(cx), - in_progress: project.read(cx).is_running_disk_based_diagnostics(), + check_in_progress: project.read(cx).is_running_disk_based_diagnostics(), + current_diagnostic: None, + _observe_active_editor: None, + } + } + + fn update(&mut self, editor: ViewHandle, cx: &mut ViewContext) { + let editor = editor.read(cx); + let buffer = editor.buffer().read(cx); + let cursor_position = editor + .newest_selection_with_snapshot::(&buffer.read(cx)) + .head(); + let new_diagnostic = buffer + .read(cx) + .diagnostics_in_range::<_, usize>(cursor_position..cursor_position, false) + .filter(|entry| !entry.range.is_empty()) + .min_by_key(|entry| (entry.diagnostic.severity, entry.range.len())) + .map(|entry| entry.diagnostic); + if new_diagnostic != self.current_diagnostic { + self.current_diagnostic = new_diagnostic; + cx.notify(); } } } -impl Entity for DiagnosticSummary { +impl Entity for DiagnosticIndicator { type Event = (); } -impl View for DiagnosticSummary { +impl View for DiagnosticIndicator { fn ui_name() -> &'static str { - "DiagnosticSummary" + "DiagnosticIndicator" } fn render(&mut self, cx: &mut RenderContext) -> ElementBox { enum Tag {} - let in_progress = self.in_progress; - MouseEventHandler::new::(0, cx, |state, cx| { - let style = &cx - .global::() - .theme - .workspace - .status_bar - .diagnostics; - let summary_style = if self.summary.error_count > 0 { - if state.hovered { - &style.summary_error_hover - } else { - &style.summary_error - } - } else if self.summary.warning_count > 0 { - if state.hovered { - &style.summary_warning_hover + let in_progress = self.check_in_progress; + let mut element = Flex::row().with_child( + MouseEventHandler::new::(0, cx, |state, cx| { + let style = &cx + .global::() + .theme + .workspace + .status_bar + .diagnostics; + + let summary_style = if self.summary.error_count > 0 { + if state.hovered { + &style.summary_error_hover + } else { + &style.summary_error + } + } else if self.summary.warning_count > 0 { + if state.hovered { + &style.summary_warning_hover + } else { + &style.summary_warning + } + } else if state.hovered { + &style.summary_ok_hover } else { - &style.summary_warning - } - } else if state.hovered { - &style.summary_ok_hover - } else { - &style.summary_ok - }; - - let mut row = Flex::row(); - if self.summary.error_count > 0 { - row.add_children([ - Svg::new("icons/error-solid-14.svg") - .with_color(style.icon_color_error) - .constrained() - .with_width(style.icon_width) - .aligned() - .contained() - .with_margin_right(style.icon_spacing) - .named("error-icon"), - Label::new( - self.summary.error_count.to_string(), - summary_style.text.clone(), - ) - .aligned() - .boxed(), - ]); - } + &style.summary_ok + }; - if self.summary.warning_count > 0 { - row.add_children([ - Svg::new("icons/warning-solid-14.svg") - .with_color(style.icon_color_warning) - .constrained() - .with_width(style.icon_width) + let mut summary_row = Flex::row(); + if self.summary.error_count > 0 { + summary_row.add_children([ + Svg::new("icons/error-solid-14.svg") + .with_color(style.icon_color_error) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_margin_right(style.icon_spacing) + .named("error-icon"), + Label::new( + self.summary.error_count.to_string(), + summary_style.text.clone(), + ) .aligned() - .contained() - .with_margin_right(style.icon_spacing) - .with_margin_left(if self.summary.error_count > 0 { - style.summary_spacing - } else { - 0. - }) - .named("warning-icon"), - Label::new( - self.summary.warning_count.to_string(), - summary_style.text.clone(), - ) - .aligned() - .boxed(), - ]); - } + .boxed(), + ]); + } - if self.summary.error_count == 0 && self.summary.warning_count == 0 { - row.add_child( - Svg::new("icons/no-error-solid-14.svg") - .with_color(style.icon_color_ok) - .constrained() - .with_width(style.icon_width) + if self.summary.warning_count > 0 { + summary_row.add_children([ + Svg::new("icons/warning-solid-14.svg") + .with_color(style.icon_color_warning) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_margin_right(style.icon_spacing) + .with_margin_left(if self.summary.error_count > 0 { + style.summary_spacing + } else { + 0. + }) + .named("warning-icon"), + Label::new( + self.summary.warning_count.to_string(), + summary_style.text.clone(), + ) .aligned() - .named("ok-icon"), - ); - } + .boxed(), + ]); + } + + if self.summary.error_count == 0 && self.summary.warning_count == 0 { + summary_row.add_child( + Svg::new("icons/no-error-solid-14.svg") + .with_color(style.icon_color_ok) + .constrained() + .with_width(style.icon_width) + .aligned() + .named("ok-icon"), + ); + } + + summary_row + .constrained() + .with_height(style.height) + .contained() + .with_style(summary_style.container) + .boxed() + }) + .with_cursor_style(CursorStyle::PointingHand) + .on_click(|cx| cx.dispatch_action(crate::Deploy)) + .aligned() + .boxed(), + ); + + let style = &cx.global::().theme.workspace.status_bar; - row.constrained() - .with_height(style.height) + if in_progress { + element.add_child( + Label::new("checking…".into(), style.diagnostics.message.text.clone()) + .aligned() + .contained() + .with_margin_left(style.item_spacing) + .boxed(), + ); + } else if let Some(diagnostic) = &self.current_diagnostic { + element.add_child( + Label::new( + diagnostic.message.split('\n').next().unwrap().to_string(), + style.diagnostics.message.text.clone(), + ) + .aligned() .contained() - .with_style(summary_style.container) - .boxed() - }) - .with_cursor_style(CursorStyle::PointingHand) - .on_click(|cx| cx.dispatch_action(crate::Deploy)) - .boxed() + .with_margin_left(style.item_spacing) + .boxed(), + ); + } + + element.named("diagnostic indicator") } fn debug_json(&self, _: &gpui::AppContext) -> serde_json::Value { @@ -145,11 +199,19 @@ impl View for DiagnosticSummary { } } -impl StatusItemView for DiagnosticSummary { +impl StatusItemView for DiagnosticIndicator { fn set_active_pane_item( &mut self, - _: Option<&dyn workspace::ItemHandle>, - _: &mut ViewContext, + active_pane_item: Option<&dyn workspace::ItemHandle>, + cx: &mut ViewContext, ) { + if let Some(editor) = active_pane_item.and_then(|item| item.downcast::()) { + self._observe_active_editor = Some(cx.observe(&editor, Self::update)); + self.update(editor, cx); + } else { + self.current_diagnostic = None; + self._observe_active_editor = None; + } + cx.notify(); } } diff --git a/crates/editor/src/items.rs b/crates/editor/src/items.rs index 9fe6e21b718c85b7804f133ba0a02a22bb50a561..4712b618e27edde6fef14b524655dacdf7d3e894 100644 --- a/crates/editor/src/items.rs +++ b/crates/editor/src/items.rs @@ -5,7 +5,7 @@ use gpui::{ elements::*, geometry::vector::vec2f, AppContext, Entity, ModelHandle, MutableAppContext, RenderContext, Subscription, Task, View, ViewContext, ViewHandle, }; -use language::{Bias, Buffer, Diagnostic, File as _, SelectionGoal}; +use language::{Bias, Buffer, File as _, SelectionGoal}; use project::{File, Project, ProjectEntryId, ProjectPath}; use rpc::proto::{self, update_view}; use settings::Settings; @@ -505,75 +505,3 @@ impl StatusItemView for CursorPosition { cx.notify(); } } - -pub struct DiagnosticMessage { - diagnostic: Option, - _observe_active_editor: Option, -} - -impl DiagnosticMessage { - pub fn new() -> Self { - Self { - diagnostic: None, - _observe_active_editor: None, - } - } - - fn update(&mut self, editor: ViewHandle, cx: &mut ViewContext) { - let editor = editor.read(cx); - let buffer = editor.buffer().read(cx); - let cursor_position = editor - .newest_selection_with_snapshot::(&buffer.read(cx)) - .head(); - let new_diagnostic = buffer - .read(cx) - .diagnostics_in_range::<_, usize>(cursor_position..cursor_position, false) - .filter(|entry| !entry.range.is_empty()) - .min_by_key(|entry| (entry.diagnostic.severity, entry.range.len())) - .map(|entry| entry.diagnostic); - if new_diagnostic != self.diagnostic { - self.diagnostic = new_diagnostic; - cx.notify(); - } - } -} - -impl Entity for DiagnosticMessage { - type Event = (); -} - -impl View for DiagnosticMessage { - fn ui_name() -> &'static str { - "DiagnosticMessage" - } - - fn render(&mut self, cx: &mut RenderContext) -> ElementBox { - if let Some(diagnostic) = &self.diagnostic { - let theme = &cx.global::().theme.workspace.status_bar; - Label::new( - diagnostic.message.split('\n').next().unwrap().to_string(), - theme.diagnostic_message.clone(), - ) - .boxed() - } else { - Empty::new().boxed() - } - } -} - -impl StatusItemView for DiagnosticMessage { - fn set_active_pane_item( - &mut self, - active_pane_item: Option<&dyn ItemHandle>, - cx: &mut ViewContext, - ) { - if let Some(editor) = active_pane_item.and_then(|item| item.downcast::()) { - self._observe_active_editor = Some(cx.observe(&editor, Self::update)); - self.update(editor, cx); - } else { - self.diagnostic = Default::default(); - self._observe_active_editor = None; - } - cx.notify(); - } -} diff --git a/crates/zed/src/zed.rs b/crates/zed/src/zed.rs index 67ab164719caf9a919f1a1a1e579d04eb8a46923..d3c36b791c59396d798aca3a4a4707140564b9e4 100644 --- a/crates/zed/src/zed.rs +++ b/crates/zed/src/zed.rs @@ -180,9 +180,8 @@ pub fn build_workspace( sidebar.add_item("icons/contacts-solid-14.svg", contact_panel.into(), cx) }); - let diagnostic_message = cx.add_view(|_| editor::items::DiagnosticMessage::new()); let diagnostic_summary = - cx.add_view(|cx| diagnostics::items::DiagnosticSummary::new(workspace.project(), cx)); + cx.add_view(|cx| diagnostics::items::DiagnosticIndicator::new(workspace.project(), cx)); let lsp_status = cx.add_view(|cx| { workspace::lsp_status::LspStatus::new(workspace.project(), app_state.languages.clone(), cx) }); @@ -190,7 +189,6 @@ pub fn build_workspace( let auto_update = cx.add_view(|cx| auto_update::AutoUpdateIndicator::new(cx)); workspace.status_bar().update(cx, |status_bar, cx| { status_bar.add_left_item(diagnostic_summary, cx); - status_bar.add_left_item(diagnostic_message, cx); status_bar.add_left_item(lsp_status, cx); status_bar.add_right_item(cursor_position, cx); status_bar.add_right_item(auto_update, cx); diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 6d5ec34d47db9d9fdc39bf32417d4c7a260eb361..b82e140e35f079991e5a3d8e4ff5482158739b6e 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -49,8 +49,8 @@ export default function workspace(theme: Theme) { }; const diagnosticSummary = { - cornerRadius: 5, - padding: { left: 5, right: 5 }, + cornerRadius: 6, + padding: { left: 6, right: 6 }, ...text(theme, "sans", "primary", { size: "sm" }), }; const sidebarButton = { @@ -89,7 +89,7 @@ export default function workspace(theme: Theme) { }, statusBar: { height: 24, - itemSpacing: 8, + itemSpacing: 12, padding: { left: 6, right: 6, @@ -129,7 +129,7 @@ export default function workspace(theme: Theme) { border: border(theme, "error"), }, message: text(theme, "sans", "muted"), - iconColorOk: iconColor(theme, "ok"), + iconColorOk: iconColor(theme, "secondary"), iconColorWarning: iconColor(theme, "warning"), iconColorError: iconColor(theme, "error"), iconWidth: 14, @@ -137,14 +137,17 @@ export default function workspace(theme: Theme) { summarySpacing: 8, }, sidebarButtons: { - groupLeft: { - margin: { right: 20 } + groupLeft: {}, + groupRight: {}, + item: { + iconColor: iconColor(theme, "muted"), + ...sidebarButton }, - groupRight: { - margin: { left: 20 } + itemHover: { + ...sidebarButton, + iconColor: iconColor(theme, "secondary"), + background: backgroundColor(theme, 300, "hovered"), }, - item: { ...sidebarButton }, - itemHover: { ...sidebarButton }, itemActive: { ...sidebarButton, iconColor: iconColor(theme, "active"), From e88156645dcb34b88932220c70dfcbe2c90271d8 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Wed, 27 Apr 2022 16:48:33 -0700 Subject: [PATCH 07/12] Update the styling of the lsp status indicator --- assets/icons/download-solid-14.svg | 3 + assets/themes/cave-dark.json | 39 ++++++++-- assets/themes/cave-light.json | 39 ++++++++-- assets/themes/dark.json | 39 ++++++++-- assets/themes/light.json | 39 ++++++++-- assets/themes/solarized-dark.json | 39 ++++++++-- assets/themes/solarized-light.json | 39 ++++++++-- assets/themes/sulphurpool-dark.json | 39 ++++++++-- assets/themes/sulphurpool-light.json | 39 ++++++++-- crates/theme/src/theme.rs | 17 ++++- crates/workspace/src/lsp_status.rs | 110 ++++++++++++++++++--------- styles/src/styleTree/workspace.ts | 22 +++++- 12 files changed, 367 insertions(+), 97 deletions(-) create mode 100644 assets/icons/download-solid-14.svg diff --git a/assets/icons/download-solid-14.svg b/assets/icons/download-solid-14.svg new file mode 100644 index 0000000000000000000000000000000000000000..e2e1cf5d0216227922ed7545a49b1678e24c9b54 --- /dev/null +++ b/assets/icons/download-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index c64adb53d8377da89df917d595a9a2ce2e50889e..428768f8bfd3e2c717bdf970ad7792d9700b15bd 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -194,11 +194,6 @@ "color": "#8b8792", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#8b8792", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#8b8792", @@ -209,6 +204,36 @@ "color": "#8b8792", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#8b8792", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 + }, + "icon_color": "#8b8792", + "icon_color_hover": "#e2dfe7", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#58526052" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#a06e3b", "icon_color_error": "#be4678", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 8d7a8b4d174cf55d1981fb0b981a6c5526b14474..1b956493e6fe4a1e18d6b64ba3e990cc589521af 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -194,11 +194,6 @@ "color": "#585260", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#585260", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#585260", @@ -209,6 +204,36 @@ "color": "#585260", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#585260", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#26232a", + "size": 14 + }, + "icon_color": "#585260", + "icon_color_hover": "#26232a", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#8b87921f" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#a06e3b", "icon_color_error": "#be4678", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index aac1da9a3a8bc846b8cca35017a4ee2ba8875257..0fee98d5bb201adaa5cadb4789b087d0de08766f 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -194,11 +194,6 @@ "color": "#808080", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#808080", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#808080", @@ -209,6 +204,36 @@ "color": "#808080", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#808080", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 + }, + "icon_color": "#555555", + "icon_color_hover": "#c6c6c6", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#232323" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#f6a724", "icon_color_error": "#eb2d2d", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/light.json b/assets/themes/light.json index 858ad254002749ba697227cc4551e483deed0cf8..70710b030369ecc9f8352300c5cb5f9ea7c21971 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -194,11 +194,6 @@ "color": "#636363", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#636363", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#636363", @@ -209,6 +204,36 @@ "color": "#636363", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#636363", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 + }, + "icon_color": "#9c9c9c", + "icon_color_hover": "#393939", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#eaeaea" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#f7bf17", "icon_color_error": "#c91818", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index a6320433df4512c2ebaa065fe51e83598df86bb7..5cdc89efb77778dcb9e85516000e09a88a3d360f 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -194,11 +194,6 @@ "color": "#93a1a1", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#93a1a1", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#93a1a1", @@ -209,6 +204,36 @@ "color": "#93a1a1", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#93a1a1", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 + }, + "icon_color": "#93a1a1", + "icon_color_hover": "#eee8d5", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#586e7552" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#b58900", "icon_color_error": "#dc322f", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 14a465d25390560d44d1864636a5b5d5ad44e830..4e4e32aaf0814fa7aa046907995f319c24ee23cf 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -194,11 +194,6 @@ "color": "#586e75", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#586e75", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#586e75", @@ -209,6 +204,36 @@ "color": "#586e75", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#586e75", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#073642", + "size": 14 + }, + "icon_color": "#586e75", + "icon_color_hover": "#073642", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#93a1a11f" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#b58900", "icon_color_error": "#dc322f", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 421c5bbe29e597dadd1235a7334b9fc48f4275e9..18d1a732932b4c6b8a617f26146aa64d07ef8755 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -194,11 +194,6 @@ "color": "#979db4", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#979db4", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#979db4", @@ -209,6 +204,36 @@ "color": "#979db4", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#979db4", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 + }, + "icon_color": "#979db4", + "icon_color_hover": "#dfe2f1", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#5e668752" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#c08b30", "icon_color_error": "#c94922", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 0529f1787d989be07f2127b0c3593101de537260..08df8d7af6b96c570e5d09b9a80deb7de3c4a262 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -194,11 +194,6 @@ "color": "#5e6687", "size": 14 }, - "lsp_message": { - "family": "Zed Sans", - "color": "#5e6687", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#5e6687", @@ -209,6 +204,36 @@ "color": "#5e6687", "size": 14 }, + "lsp_status": { + "icon_spacing": 4, + "icon_width": 14, + "height": 18, + "message": { + "family": "Zed Sans", + "color": "#5e6687", + "size": 14 + }, + "message_hover": { + "family": "Zed Sans", + "color": "#293256", + "size": 14 + }, + "icon_color": "#5e6687", + "icon_color_hover": "#293256", + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "container_hover": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#979db41f" + } + }, "diagnostics": { "height": 16, "summary_ok": { @@ -300,8 +325,8 @@ "icon_color_warning": "#c08b30", "icon_color_error": "#c94922", "icon_width": 14, - "icon_spacing": 4, - "summary_spacing": 8 + "icon_spacing": 2, + "summary_spacing": 6 }, "sidebar_buttons": { "group_left": {}, diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 63774824e4302949eae7ebb1afb80843211f37b4..059e6eb51b6de74570ff069efbfd6f7157be0937 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -143,10 +143,9 @@ pub struct StatusBar { pub height: f32, pub item_spacing: f32, pub cursor_position: TextStyle, - pub diagnostic_message: TextStyle, - pub lsp_message: TextStyle, pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, + pub lsp_status: StatusBarLspStatus, pub sidebar_buttons: StatusBarSidebarButtons, pub diagnostics: StatusBarDiagnostics, } @@ -178,6 +177,20 @@ pub struct StatusBarDiagnostics { pub summary_spacing: f32, } +#[derive(Deserialize, Default)] +pub struct StatusBarLspStatus { + #[serde(flatten)] + pub container: ContainerStyle, + pub height: f32, + pub container_hover: ContainerStyle, + pub icon_spacing: f32, + pub icon_color: Color, + pub icon_color_hover: Color, + pub icon_width: f32, + pub message: TextStyle, + pub message_hover: TextStyle, +} + #[derive(Deserialize, Default)] pub struct Sidebar { pub resize_handle: ContainerStyle, diff --git a/crates/workspace/src/lsp_status.rs b/crates/workspace/src/lsp_status.rs index 1accbcad3ce4a2790f2f6cd607317c109988da08..7a6b8f070d3738abc0d66194e47892b6d57256de 100644 --- a/crates/workspace/src/lsp_status.rs +++ b/crates/workspace/src/lsp_status.rs @@ -1,6 +1,6 @@ use crate::{ItemHandle, StatusItemView}; use futures::StreamExt; -use gpui::{actions, AppContext}; +use gpui::{actions, AppContext, EventContext}; use gpui::{ elements::*, platform::CursorStyle, Entity, ModelHandle, MutableAppContext, RenderContext, View, ViewContext, @@ -117,11 +117,13 @@ impl View for LspStatus { } fn render(&mut self, cx: &mut RenderContext) -> ElementBox { - let theme = &cx.global::().theme; + let mut message; + let mut icon = None; + let mut handler = None; let mut pending_work = self.pending_language_server_work(cx); if let Some((lang_server_name, progress_token, progress)) = pending_work.next() { - let mut message = lang_server_name.to_string(); + message = lang_server_name.to_string(); message.push_str(": "); if let Some(progress_message) = progress.message.as_ref() { @@ -138,21 +140,19 @@ impl View for LspStatus { if additional_work_count > 0 { write!(&mut message, " + {} more", additional_work_count).unwrap(); } + } else { + drop(pending_work); - Label::new(message, theme.workspace.status_bar.lsp_message.clone()).boxed() - } else if !self.downloading.is_empty() { - Label::new( - format!( + if !self.downloading.is_empty() { + icon = Some("icons/download-solid-14.svg"); + message = format!( "Downloading {} language server{}...", self.downloading.join(", "), if self.downloading.len() > 1 { "s" } else { "" } - ), - theme.workspace.status_bar.lsp_message.clone(), - ) - .boxed() - } else if !self.checking_for_update.is_empty() { - Label::new( - format!( + ); + } else if !self.checking_for_update.is_empty() { + icon = Some("icons/download-solid-14.svg"); + message = format!( "Checking for updates to {} language server{}...", self.checking_for_update.join(", "), if self.checking_for_update.len() > 1 { @@ -160,30 +160,70 @@ impl View for LspStatus { } else { "" } - ), - theme.workspace.status_bar.lsp_message.clone(), - ) - .boxed() - } else if !self.failed.is_empty() { - drop(pending_work); - MouseEventHandler::new::(0, cx, |_, cx| { - let theme = &cx.global::().theme; - Label::new( - format!( - "Failed to download {} language server{}. Click to dismiss.", - self.failed.join(", "), - if self.failed.len() > 1 { "s" } else { "" } - ), - theme.workspace.status_bar.lsp_message.clone(), + ); + } else if !self.failed.is_empty() { + icon = Some("icons/warning-solid-14.svg"); + message = format!( + "Failed to download {} language server{}. Click to dismiss.", + self.failed.join(", "), + if self.failed.len() > 1 { "s" } else { "" } + ); + handler = Some(|cx: &mut EventContext| cx.dispatch_action(DismissErrorMessage)); + } else { + return Empty::new().boxed(); + } + } + + let mut element = MouseEventHandler::new::(0, cx, |state, cx| { + let hovered = state.hovered && handler.is_some(); + let theme = &cx.global::().theme; + let style = &theme.workspace.status_bar.lsp_status; + Flex::row() + .with_children(icon.map(|path| { + Svg::new(path) + .with_color(if hovered { + style.icon_color_hover + } else { + style.icon_color + }) + .constrained() + .with_width(style.icon_width) + .contained() + .with_margin_right(style.icon_spacing) + .aligned() + .named("warning-icon") + })) + .with_child( + Label::new( + message, + if hovered { + style.message_hover.clone() + } else { + style.message.clone() + }, + ) + .aligned() + .boxed(), ) + .constrained() + .with_height(style.height) + .contained() + .with_style(if hovered { + style.container_hover + } else { + style.container + }) + .aligned() .boxed() - }) - .with_cursor_style(CursorStyle::PointingHand) - .on_click(|cx| cx.dispatch_action(DismissErrorMessage)) - .boxed() - } else { - Empty::new().boxed() + }); + + if let Some(handler) = handler { + element = element + .with_cursor_style(CursorStyle::PointingHand) + .on_click(handler); } + + element.boxed() } } diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index b82e140e35f079991e5a3d8e4ff5482158739b6e..1d80f32349fa8f28d7f2e698bc46648e416e3c17 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,5 +1,4 @@ import Theme from "../themes/theme"; -import { color } from "../tokens"; import { backgroundColor, border, iconColor, text } from "./components"; export default function workspace(theme: Theme) { @@ -97,9 +96,24 @@ export default function workspace(theme: Theme) { border: border(theme, "primary", { top: true, overlay: true }), cursorPosition: text(theme, "sans", "muted"), diagnosticMessage: text(theme, "sans", "muted"), - lspMessage: text(theme, "sans", "muted"), autoUpdateProgressMessage: text(theme, "sans", "muted"), autoUpdateDoneMessage: text(theme, "sans", "muted"), + lspStatus: { + iconSpacing: 4, + iconWidth: 14, + height: 18, + message: text(theme, "sans", "muted"), + messageHover: text(theme, "sans", "primary"), + iconColor: iconColor(theme, "muted"), + iconColorHover: iconColor(theme, "primary"), + cornerRadius: 6, + padding: { left: 6, right: 6 }, + containerHover: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, + background: backgroundColor(theme, 300, "hovered"), + } + }, diagnostics: { height: 16, summaryOk: { @@ -133,8 +147,8 @@ export default function workspace(theme: Theme) { iconColorWarning: iconColor(theme, "warning"), iconColorError: iconColor(theme, "error"), iconWidth: 14, - iconSpacing: 4, - summarySpacing: 8, + iconSpacing: 2, + summarySpacing: 6, }, sidebarButtons: { groupLeft: {}, From 772f4579fc6a972241c5dee5579cbbe854e6e030 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Thu, 28 Apr 2022 10:59:32 -0700 Subject: [PATCH 08/12] Restructure status bar theme to style interactive elements more concisely Introduce an `Interactive` wrapper type that allows themes to selectively override properties of items in a hovered or active state. --- assets/themes/cave-dark.json | 112 +++++++------------------- assets/themes/cave-light.json | 112 +++++++------------------- assets/themes/dark.json | 112 +++++++------------------- assets/themes/light.json | 112 +++++++------------------- assets/themes/solarized-dark.json | 112 +++++++------------------- assets/themes/solarized-light.json | 112 +++++++------------------- assets/themes/sulphurpool-dark.json | 112 +++++++------------------- assets/themes/sulphurpool-light.json | 112 +++++++------------------- crates/diagnostics/src/diagnostics.rs | 1 + crates/diagnostics/src/items.rs | 77 ++++++++++++------ crates/theme/src/theme.rs | 95 ++++++++++++++++++---- crates/workspace/src/lsp_status.rs | 39 ++++----- crates/workspace/src/sidebar.rs | 8 +- styles/src/styleTree/workspace.ts | 64 ++++++--------- 14 files changed, 423 insertions(+), 757 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 428768f8bfd3e2c717bdf970ad7792d9700b15bd..cf78eab6f102b1a05dd74039d35650bf20ea9c2c 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -189,11 +189,6 @@ "color": "#8b8792", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#8b8792", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#8b8792", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#8b8792", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14 - }, "icon_color": "#8b8792", - "icon_color_hover": "#e2dfe7", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 }, + "icon_color": "#e2dfe7", "background": "#58526052" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#e2dfe7", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#a06e3b26", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14, - "background": "#a06e3b26", - "border": { - "color": "#a06e3b26", - "width": 1 + "hover": { + "background": "#a06e3b33" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#be467826", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14, - "background": "#be467826", - "border": { - "color": "#be467826", - "width": 1 + "hover": { + "background": "#be467833" } }, "message": { "family": "Zed Sans", "color": "#8b8792", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#8b8792", + "size": 14 + } }, "icon_color_ok": "#8b8792", "icon_color_warning": "#a06e3b", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#8b8792", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#8b8792", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#58526052" - }, - "item_active": { - "icon_color": "#efecf4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#8b8792", + "hover": { + "icon_color": "#8b8792", + "background": "#58526052" }, - "corner_radius": 5, - "background": "#5852607a" + "active": { + "icon_color": "#efecf4", + "background": "#5852607a" + } } } }, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 1b956493e6fe4a1e18d6b64ba3e990cc589521af..fd4fa33df92fda3f196773b48d5be7972f718547 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -189,11 +189,6 @@ "color": "#585260", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#585260", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#585260", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#585260", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#26232a", - "size": 14 - }, "icon_color": "#585260", - "icon_color_hover": "#26232a", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#26232a", + "size": 14 }, + "icon_color": "#26232a", "background": "#8b87921f" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#26232a", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#26232a", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#a06e3b26", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#26232a", - "size": 14, - "background": "#a06e3b26", - "border": { - "color": "#a06e3b26", - "width": 1 + "hover": { + "background": "#a06e3b33" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#be467826", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#26232a", - "size": 14, - "background": "#be467826", - "border": { - "color": "#be467826", - "width": 1 + "hover": { + "background": "#be467833" } }, "message": { "family": "Zed Sans", "color": "#585260", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#585260", + "size": 14 + } }, "icon_color_ok": "#585260", "icon_color_warning": "#a06e3b", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#585260", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#585260", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#8b87921f" - }, - "item_active": { - "icon_color": "#19171c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#585260", + "hover": { + "icon_color": "#585260", + "background": "#8b87921f" }, - "corner_radius": 5, - "background": "#8b87922e" + "active": { + "icon_color": "#19171c", + "background": "#8b87922e" + } } } }, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 0fee98d5bb201adaa5cadb4789b087d0de08766f..9ff57e895ac955a43b455c104b6216f79b1ac3fd 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -189,11 +189,6 @@ "color": "#808080", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#808080", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#808080", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#808080", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14 - }, "icon_color": "#555555", - "icon_color_hover": "#c6c6c6", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 }, + "icon_color": "#c6c6c6", "background": "#232323" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#f1f1f1", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#f6a72426", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14, - "background": "#f6a72426", - "border": { - "color": "#f6a72426", - "width": 1 + "hover": { + "background": "#f6a72433" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#eb2d2d26", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14, - "background": "#c9181826", - "border": { - "color": "#eb2d2d26", - "width": 1 + "hover": { + "background": "#c9181833" } }, "message": { "family": "Zed Sans", "color": "#808080", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#9c9c9c", + "size": 14 + } }, "icon_color_ok": "#9c9c9c", "icon_color_warning": "#f6a724", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#9c9c9c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#9c9c9c", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#232323" - }, - "item_active": { - "icon_color": "#ffffff", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#555555", + "hover": { + "icon_color": "#9c9c9c", + "background": "#232323" }, - "corner_radius": 5, - "background": "#2b2b2b" + "active": { + "icon_color": "#ffffff", + "background": "#2b2b2b" + } } } }, diff --git a/assets/themes/light.json b/assets/themes/light.json index 70710b030369ecc9f8352300c5cb5f9ea7c21971..58405ed984a7813e980851f574da4295c5ed2085 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -189,11 +189,6 @@ "color": "#636363", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#636363", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#636363", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#636363", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14 - }, "icon_color": "#9c9c9c", - "icon_color_hover": "#393939", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 }, + "icon_color": "#393939", "background": "#eaeaea" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#2b2b2b", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#f6a72426", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14, - "background": "#f6a72426", - "border": { - "color": "#f6a72426", - "width": 1 + "hover": { + "background": "#f6a72433" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#eb2d2d26", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14, - "background": "#c9181826", - "border": { - "color": "#eb2d2d26", - "width": 1 + "hover": { + "background": "#c9181833" } }, "message": { "family": "Zed Sans", "color": "#636363", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#474747", + "size": 14 + } }, "icon_color_ok": "#717171", "icon_color_warning": "#f7bf17", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#717171", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#717171", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#eaeaea" - }, - "item_active": { - "icon_color": "#000000", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#9c9c9c", + "hover": { + "icon_color": "#717171", + "background": "#eaeaea" }, - "corner_radius": 5, - "background": "#e3e3e3" + "active": { + "icon_color": "#000000", + "background": "#e3e3e3" + } } } }, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 5cdc89efb77778dcb9e85516000e09a88a3d360f..0addf4ea8d5251038b0ff23c0abfa22cce9a4e1f 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -189,11 +189,6 @@ "color": "#93a1a1", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#93a1a1", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#93a1a1", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#93a1a1", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14 - }, "icon_color": "#93a1a1", - "icon_color_hover": "#eee8d5", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 }, + "icon_color": "#eee8d5", "background": "#586e7552" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#eee8d5", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#b5890026", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14, - "background": "#b5890026", - "border": { - "color": "#b5890026", - "width": 1 + "hover": { + "background": "#b5890033" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#dc322f26", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14, - "background": "#dc322f26", - "border": { - "color": "#dc322f26", - "width": 1 + "hover": { + "background": "#dc322f33" } }, "message": { "family": "Zed Sans", "color": "#93a1a1", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#93a1a1", + "size": 14 + } }, "icon_color_ok": "#93a1a1", "icon_color_warning": "#b58900", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#93a1a1", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#93a1a1", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#586e7552" - }, - "item_active": { - "icon_color": "#fdf6e3", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#93a1a1", + "hover": { + "icon_color": "#93a1a1", + "background": "#586e7552" }, - "corner_radius": 5, - "background": "#586e757a" + "active": { + "icon_color": "#fdf6e3", + "background": "#586e757a" + } } } }, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 4e4e32aaf0814fa7aa046907995f319c24ee23cf..cde86237ecdcc01323095e729d457423e0103369 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -189,11 +189,6 @@ "color": "#586e75", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#586e75", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#586e75", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#586e75", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#073642", - "size": 14 - }, "icon_color": "#586e75", - "icon_color_hover": "#073642", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#073642", + "size": 14 }, + "icon_color": "#073642", "background": "#93a1a11f" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#073642", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#073642", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#b5890026", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#073642", - "size": 14, - "background": "#b5890026", - "border": { - "color": "#b5890026", - "width": 1 + "hover": { + "background": "#b5890033" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#dc322f26", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#073642", - "size": 14, - "background": "#dc322f26", - "border": { - "color": "#dc322f26", - "width": 1 + "hover": { + "background": "#dc322f33" } }, "message": { "family": "Zed Sans", "color": "#586e75", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#586e75", + "size": 14 + } }, "icon_color_ok": "#586e75", "icon_color_warning": "#b58900", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#586e75", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#586e75", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#93a1a11f" - }, - "item_active": { - "icon_color": "#002b36", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#586e75", + "hover": { + "icon_color": "#586e75", + "background": "#93a1a11f" }, - "corner_radius": 5, - "background": "#93a1a12e" + "active": { + "icon_color": "#002b36", + "background": "#93a1a12e" + } } } }, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 18d1a732932b4c6b8a617f26146aa64d07ef8755..3b837996084abc6330cefa2cdcdb47ac307d06bc 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -189,11 +189,6 @@ "color": "#979db4", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#979db4", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#979db4", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#979db4", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14 - }, "icon_color": "#979db4", - "icon_color_hover": "#dfe2f1", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 }, + "icon_color": "#dfe2f1", "background": "#5e668752" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#dfe2f1", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#c08b3026", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14, - "background": "#c08b3026", - "border": { - "color": "#c08b3026", - "width": 1 + "hover": { + "background": "#c08b3033" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#c9492226", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14, - "background": "#c9492226", - "border": { - "color": "#c9492226", - "width": 1 + "hover": { + "background": "#c9492233" } }, "message": { "family": "Zed Sans", "color": "#979db4", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#979db4", + "size": 14 + } }, "icon_color_ok": "#979db4", "icon_color_warning": "#c08b30", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#979db4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#979db4", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#5e668752" - }, - "item_active": { - "icon_color": "#f5f7ff", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#979db4", + "hover": { + "icon_color": "#979db4", + "background": "#5e668752" }, - "corner_radius": 5, - "background": "#5e66877a" + "active": { + "icon_color": "#f5f7ff", + "background": "#5e66877a" + } } } }, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 08df8d7af6b96c570e5d09b9a80deb7de3c4a262..3ec5eae4b5f756ab50ebd4e97965b2bd1af136bc 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -189,11 +189,6 @@ "color": "#5e6687", "size": 14 }, - "diagnostic_message": { - "family": "Zed Sans", - "color": "#5e6687", - "size": 14 - }, "auto_update_progress_message": { "family": "Zed Sans", "color": "#5e6687", @@ -208,29 +203,24 @@ "icon_spacing": 4, "icon_width": 14, "height": 18, + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, "message": { "family": "Zed Sans", "color": "#5e6687", "size": 14 }, - "message_hover": { - "family": "Zed Sans", - "color": "#293256", - "size": 14 - }, "icon_color": "#5e6687", - "icon_color_hover": "#293256", - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "container_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 + "hover": { + "message": { + "family": "Zed Sans", + "color": "#293256", + "size": 14 }, + "icon_color": "#293256", "background": "#979db41f" } }, @@ -244,17 +234,8 @@ }, "family": "Zed Sans", "color": "#293256", - "size": 14 - }, - "summary_ok_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 - }, - "family": "Zed Sans", - "color": "#293256", - "size": 14 + "size": 14, + "hover": {} }, "summary_warning": { "corner_radius": 6, @@ -269,21 +250,9 @@ "border": { "color": "#c08b3026", "width": 1 - } - }, - "summary_warning_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#293256", - "size": 14, - "background": "#c08b3026", - "border": { - "color": "#c08b3026", - "width": 1 + "hover": { + "background": "#c08b3033" } }, "summary_error": { @@ -299,27 +268,20 @@ "border": { "color": "#c9492226", "width": 1 - } - }, - "summary_error_hover": { - "corner_radius": 6, - "padding": { - "left": 6, - "right": 6 }, - "family": "Zed Sans", - "color": "#293256", - "size": 14, - "background": "#c9492226", - "border": { - "color": "#c9492226", - "width": 1 + "hover": { + "background": "#c9492233" } }, "message": { "family": "Zed Sans", "color": "#5e6687", - "size": 14 + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#5e6687", + "size": 14 + } }, "icon_color_ok": "#5e6687", "icon_color_warning": "#c08b30", @@ -332,33 +294,21 @@ "group_left": {}, "group_right": {}, "item": { - "icon_color": "#5e6687", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 - }, - "corner_radius": 5 - }, - "item_hover": { - "icon_color": "#5e6687", "icon_size": 18, "padding": { "left": 5, "right": 5 }, "corner_radius": 5, - "background": "#979db41f" - }, - "item_active": { - "icon_color": "#202746", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "icon_color": "#5e6687", + "hover": { + "icon_color": "#5e6687", + "background": "#979db41f" }, - "corner_radius": 5, - "background": "#979db42e" + "active": { + "icon_color": "#202746", + "background": "#979db42e" + } } } }, diff --git a/crates/diagnostics/src/diagnostics.rs b/crates/diagnostics/src/diagnostics.rs index c15c20c775e05b8b91e2302849ba2c6be7fd6e59..eb8fae2ab2c106892aafb39ca70202f4adb4948e 100644 --- a/crates/diagnostics/src/diagnostics.rs +++ b/crates/diagnostics/src/diagnostics.rs @@ -35,6 +35,7 @@ const CONTEXT_LINE_COUNT: u32 = 1; pub fn init(cx: &mut MutableAppContext) { cx.add_action(ProjectDiagnosticsEditor::deploy); + items::init(cx); } type Event = editor::Event; diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs index cbe1850f6cae31c1297e602c9ee7efd695b48a56..560b87af40c3372ee55cd7ae42fcf6ea0c44a9c3 100644 --- a/crates/diagnostics/src/items.rs +++ b/crates/diagnostics/src/items.rs @@ -1,7 +1,7 @@ -use editor::Editor; +use editor::{Editor, GoToNextDiagnostic}; use gpui::{ - elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, - Subscription, View, ViewContext, ViewHandle, + elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, MutableAppContext, + RenderContext, Subscription, View, ViewContext, ViewHandle, WeakViewHandle, }; use language::Diagnostic; use project::Project; @@ -10,11 +10,16 @@ use workspace::StatusItemView; pub struct DiagnosticIndicator { summary: project::DiagnosticSummary, + active_editor: Option>, current_diagnostic: Option, check_in_progress: bool, _observe_active_editor: Option, } +pub fn init(cx: &mut MutableAppContext) { + cx.add_action(DiagnosticIndicator::go_to_next_diagnostic); +} + impl DiagnosticIndicator { pub fn new(project: &ModelHandle, cx: &mut ViewContext) -> Self { cx.subscribe(project, |this, project, event, cx| match event { @@ -36,11 +41,20 @@ impl DiagnosticIndicator { Self { summary: project.read(cx).diagnostic_summary(cx), check_in_progress: project.read(cx).is_running_disk_based_diagnostics(), + active_editor: None, current_diagnostic: None, _observe_active_editor: None, } } + fn go_to_next_diagnostic(&mut self, _: &GoToNextDiagnostic, cx: &mut ViewContext) { + if let Some(editor) = self.active_editor.as_ref().and_then(|e| e.upgrade(cx)) { + editor.update(cx, |editor, cx| { + editor.go_to_diagnostic(editor::Direction::Next, cx); + }) + } + } + fn update(&mut self, editor: ViewHandle, cx: &mut ViewContext) { let editor = editor.read(cx); let buffer = editor.buffer().read(cx); @@ -70,11 +84,12 @@ impl View for DiagnosticIndicator { } fn render(&mut self, cx: &mut RenderContext) -> ElementBox { - enum Tag {} + enum Summary {} + enum Message {} let in_progress = self.check_in_progress; let mut element = Flex::row().with_child( - MouseEventHandler::new::(0, cx, |state, cx| { + MouseEventHandler::new::(0, cx, |state, cx| { let style = &cx .global::() .theme @@ -83,23 +98,19 @@ impl View for DiagnosticIndicator { .diagnostics; let summary_style = if self.summary.error_count > 0 { - if state.hovered { - &style.summary_error_hover - } else { - &style.summary_error - } + &style.summary_error } else if self.summary.warning_count > 0 { - if state.hovered { - &style.summary_warning_hover - } else { - &style.summary_warning - } - } else if state.hovered { - &style.summary_ok_hover + &style.summary_warning } else { &style.summary_ok }; + let summary_style = if state.hovered { + summary_style.hover() + } else { + &summary_style.default + }; + let mut summary_row = Flex::row(); if self.summary.error_count > 0 { summary_row.add_children([ @@ -169,24 +180,36 @@ impl View for DiagnosticIndicator { ); let style = &cx.global::().theme.workspace.status_bar; + let item_spacing = style.item_spacing; + let message_style = &style.diagnostics.message; if in_progress { element.add_child( - Label::new("checking…".into(), style.diagnostics.message.text.clone()) + Label::new("checking…".into(), message_style.default.text.clone()) .aligned() .contained() - .with_margin_left(style.item_spacing) + .with_margin_left(item_spacing) .boxed(), ); } else if let Some(diagnostic) = &self.current_diagnostic { + let message_style = message_style.clone(); element.add_child( - Label::new( - diagnostic.message.split('\n').next().unwrap().to_string(), - style.diagnostics.message.text.clone(), - ) - .aligned() - .contained() - .with_margin_left(style.item_spacing) + MouseEventHandler::new::(0, cx, |state, _| { + Label::new( + diagnostic.message.split('\n').next().unwrap().to_string(), + if state.hovered { + message_style.hover().text.clone() + } else { + message_style.default.text.clone() + }, + ) + .aligned() + .contained() + .with_margin_left(item_spacing) + .boxed() + }) + .with_cursor_style(CursorStyle::PointingHand) + .on_click(|cx| cx.dispatch_action(GoToNextDiagnostic)) .boxed(), ); } @@ -206,9 +229,11 @@ impl StatusItemView for DiagnosticIndicator { cx: &mut ViewContext, ) { if let Some(editor) = active_pane_item.and_then(|item| item.downcast::()) { + self.active_editor = Some(editor.downgrade()); self._observe_active_editor = Some(cx.observe(&editor, Self::update)); self.update(editor, cx); } else { + self.active_editor = None; self.current_diagnostic = None; self._observe_active_editor = None; } diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 059e6eb51b6de74570ff069efbfd6f7157be0937..6d729b906487e61e60b63fa2cca9f82b453b6b90 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -6,7 +6,8 @@ use gpui::{ fonts::{HighlightStyle, TextStyle}, Border, }; -use serde::Deserialize; +use serde::{de::DeserializeOwned, Deserialize}; +use serde_json::Value; use std::{collections::HashMap, sync::Arc}; pub use theme_registry::*; @@ -145,7 +146,7 @@ pub struct StatusBar { pub cursor_position: TextStyle, pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, - pub lsp_status: StatusBarLspStatus, + pub lsp_status: Interactive, pub sidebar_buttons: StatusBarSidebarButtons, pub diagnostics: StatusBarDiagnostics, } @@ -154,20 +155,15 @@ pub struct StatusBar { pub struct StatusBarSidebarButtons { pub group_left: ContainerStyle, pub group_right: ContainerStyle, - pub item: SidebarItem, - pub item_active: SidebarItem, - pub item_hover: SidebarItem, + pub item: Interactive, } #[derive(Deserialize, Default)] pub struct StatusBarDiagnostics { - pub message: ContainedText, - pub summary_ok: ContainedText, - pub summary_ok_hover: ContainedText, - pub summary_warning: ContainedText, - pub summary_warning_hover: ContainedText, - pub summary_error: ContainedText, - pub summary_error_hover: ContainedText, + pub message: Interactive, + pub summary_ok: Interactive, + pub summary_warning: Interactive, + pub summary_error: Interactive, pub icon_color_ok: Color, pub icon_color_error: Color, pub icon_color_warning: Color, @@ -182,13 +178,10 @@ pub struct StatusBarLspStatus { #[serde(flatten)] pub container: ContainerStyle, pub height: f32, - pub container_hover: ContainerStyle, pub icon_spacing: f32, pub icon_color: Color, - pub icon_color_hover: Color, pub icon_width: f32, pub message: TextStyle, - pub message_hover: TextStyle, } #[derive(Deserialize, Default)] @@ -421,6 +414,78 @@ pub struct FieldEditor { pub selection: SelectionStyle, } +#[derive(Default, Clone, Copy)] +pub struct Interactive { + pub default: T, + pub hover: Option, + pub active: Option, +} + +impl Interactive { + pub fn active(&self) -> &T { + self.active.as_ref().unwrap_or(&self.default) + } + + pub fn hover(&self) -> &T { + self.hover.as_ref().unwrap_or(&self.default) + } +} + +impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { + fn deserialize(deserializer: D) -> Result + where + D: serde::Deserializer<'de>, + { + #[derive(Deserialize)] + struct Helper { + #[serde(flatten)] + default: Value, + hover: Option, + active: Option, + } + + let json = Helper::deserialize(deserializer)?; + + let hover = if let Some(mut hovered) = json.hover { + if let Value::Object(hovered) = &mut hovered { + if let Value::Object(default) = &json.default { + for (key, value) in default { + if !hovered.contains_key(key) { + hovered.insert(key.clone(), value.clone()); + } + } + } + } + Some(serde_json::from_value::(hovered).map_err(serde::de::Error::custom)?) + } else { + None + }; + + let active = if let Some(mut active) = json.active { + if let Value::Object(active) = &mut active { + if let Value::Object(default) = &json.default { + for (key, value) in default { + if !active.contains_key(key) { + active.insert(key.clone(), value.clone()); + } + } + } + } + Some(serde_json::from_value::(active).map_err(serde::de::Error::custom)?) + } else { + None + }; + + let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?; + + Ok(Interactive { + default, + hover, + active, + }) + } +} + impl Editor { pub fn replica_selection_style(&self, replica_id: u16) -> &SelectionStyle { let style_ix = replica_id as usize % (self.guest_selections.len() + 1); diff --git a/crates/workspace/src/lsp_status.rs b/crates/workspace/src/lsp_status.rs index 7a6b8f070d3738abc0d66194e47892b6d57256de..ddc6d893086dfe71d73fa57f887800fa64445749 100644 --- a/crates/workspace/src/lsp_status.rs +++ b/crates/workspace/src/lsp_status.rs @@ -175,17 +175,21 @@ impl View for LspStatus { } let mut element = MouseEventHandler::new::(0, cx, |state, cx| { - let hovered = state.hovered && handler.is_some(); - let theme = &cx.global::().theme; - let style = &theme.workspace.status_bar.lsp_status; + let theme = &cx + .global::() + .theme + .workspace + .status_bar + .lsp_status; + let style = if state.hovered && handler.is_some() { + theme.hover.as_ref().unwrap_or(&theme.default) + } else { + &theme.default + }; Flex::row() .with_children(icon.map(|path| { Svg::new(path) - .with_color(if hovered { - style.icon_color_hover - } else { - style.icon_color - }) + .with_color(style.icon_color) .constrained() .with_width(style.icon_width) .contained() @@ -193,26 +197,11 @@ impl View for LspStatus { .aligned() .named("warning-icon") })) - .with_child( - Label::new( - message, - if hovered { - style.message_hover.clone() - } else { - style.message.clone() - }, - ) - .aligned() - .boxed(), - ) + .with_child(Label::new(message, style.message.clone()).aligned().boxed()) .constrained() .with_height(style.height) .contained() - .with_style(if hovered { - style.container_hover - } else { - style.container - }) + .with_style(style.container) .aligned() .boxed() }); diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs index b3f9819764f0d714b9ebb775e220db6ec45504d5..5f185e47bfe41b1735daff86798b49b80c7fb743 100644 --- a/crates/workspace/src/sidebar.rs +++ b/crates/workspace/src/sidebar.rs @@ -183,8 +183,6 @@ impl View for SidebarButtons { .sidebar_buttons; let sidebar = self.sidebar.read(cx); let item_style = theme.item; - let hover_item_style = theme.item_hover; - let active_item_style = theme.item_active; let active_ix = sidebar.active_item_ix; let side = sidebar.side; let group_style = match side { @@ -196,11 +194,11 @@ impl View for SidebarButtons { .with_children(items.iter().enumerate().map(|(ix, item)| { MouseEventHandler::new::(ix, cx, move |state, _| { let style = if Some(ix) == active_ix { - active_item_style + item_style.active() } else if state.hovered { - hover_item_style + item_style.hover() } else { - item_style + &item_style.default }; Svg::new(item.icon_path) .with_color(style.icon_color) diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 1d80f32349fa8f28d7f2e698bc46648e416e3c17..59bb1fe362cfd062cb19a1a96649dabf1aa387d3 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -52,12 +52,6 @@ export default function workspace(theme: Theme) { padding: { left: 6, right: 6 }, ...text(theme, "sans", "primary", { size: "sm" }), }; - const sidebarButton = { - iconColor: iconColor(theme, "secondary"), - iconSize: 18, - padding: { left: 5, right: 5 }, - cornerRadius: 5, - }; const shareIcon = { cornerRadius: 6, margin: { top: 3, bottom: 2 }, @@ -95,22 +89,19 @@ export default function workspace(theme: Theme) { }, border: border(theme, "primary", { top: true, overlay: true }), cursorPosition: text(theme, "sans", "muted"), - diagnosticMessage: text(theme, "sans", "muted"), autoUpdateProgressMessage: text(theme, "sans", "muted"), autoUpdateDoneMessage: text(theme, "sans", "muted"), lspStatus: { iconSpacing: 4, iconWidth: 14, height: 18, - message: text(theme, "sans", "muted"), - messageHover: text(theme, "sans", "primary"), - iconColor: iconColor(theme, "muted"), - iconColorHover: iconColor(theme, "primary"), cornerRadius: 6, padding: { left: 6, right: 6 }, - containerHover: { - cornerRadius: 6, - padding: { left: 6, right: 6 }, + message: text(theme, "sans", "muted"), + iconColor: iconColor(theme, "muted"), + hover: { + message: text(theme, "sans", "primary"), + iconColor: iconColor(theme, "primary"), background: backgroundColor(theme, 300, "hovered"), } }, @@ -118,31 +109,28 @@ export default function workspace(theme: Theme) { height: 16, summaryOk: { ...diagnosticSummary, - }, - summaryOkHover: { - ...diagnosticSummary, + hover: {} }, summaryWarning: { ...diagnosticSummary, background: backgroundColor(theme, "warning"), border: border(theme, "warning"), - }, - summaryWarningHover: { - ...diagnosticSummary, - background: backgroundColor(theme, "warning"), - border: border(theme, "warning"), + hover: { + background: backgroundColor(theme, "warning", "hovered"), + } }, summaryError: { ...diagnosticSummary, background: backgroundColor(theme, "error"), border: border(theme, "error"), + hover: { + background: backgroundColor(theme, "error", "hovered"), + } }, - summaryErrorHover: { - ...diagnosticSummary, - background: backgroundColor(theme, "error"), - border: border(theme, "error"), + message: { + ...text(theme, "sans", "muted"), + hover: text(theme, "sans", "secondary"), }, - message: text(theme, "sans", "muted"), iconColorOk: iconColor(theme, "secondary"), iconColorWarning: iconColor(theme, "warning"), iconColorError: iconColor(theme, "error"), @@ -154,18 +142,18 @@ export default function workspace(theme: Theme) { groupLeft: {}, groupRight: {}, item: { + iconSize: 18, + padding: { left: 5, right: 5 }, + cornerRadius: 5, iconColor: iconColor(theme, "muted"), - ...sidebarButton - }, - itemHover: { - ...sidebarButton, - iconColor: iconColor(theme, "secondary"), - background: backgroundColor(theme, 300, "hovered"), - }, - itemActive: { - ...sidebarButton, - iconColor: iconColor(theme, "active"), - background: backgroundColor(theme, 300, "active"), + hover: { + iconColor: iconColor(theme, "secondary"), + background: backgroundColor(theme, 300, "hovered"), + }, + active: { + iconColor: iconColor(theme, "active"), + background: backgroundColor(theme, 300, "active"), + } }, }, }, From 6fc68a8ddd23c6303e5098fa3879423cbda9eda5 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 28 Apr 2022 14:52:12 -0400 Subject: [PATCH 09/12] Move projectDiagnostics to it's own file and remove unused code Co-Authored-By: Max Brunsfeld --- crates/theme/src/theme.rs | 1 - styles/src/styleTree/app.ts | 14 ++------------ styles/src/styleTree/projectDiagnostics.ts | 15 +++++++++++++++ 3 files changed, 17 insertions(+), 13 deletions(-) create mode 100644 styles/src/styleTree/projectDiagnostics.ts diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 6d729b906487e61e60b63fa2cca9f82b453b6b90..334a11b739689dc385be16b1d772cb337a2524cd 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -321,7 +321,6 @@ pub struct ProjectDiagnostics { #[serde(flatten)] pub container: ContainerStyle, pub empty_message: TextStyle, - pub status_bar_item: ContainedText, pub tab_icon_width: f32, pub tab_icon_spacing: f32, pub tab_summary_spacing: f32, diff --git a/styles/src/styleTree/app.ts b/styles/src/styleTree/app.ts index 9596e319370a3d105619e00583aa5bb020921d7e..a06696de476aae725455419e9c2355277b5b38b0 100644 --- a/styles/src/styleTree/app.ts +++ b/styles/src/styleTree/app.ts @@ -8,6 +8,7 @@ import projectPanel from "./projectPanel"; import search from "./search"; import selectorModal from "./selectorModal"; import workspace from "./workspace"; +import projectDiagnostics from "./projectDiagnostics"; export const panel = { padding: { top: 12, left: 12, bottom: 12, right: 12 }, @@ -18,18 +19,7 @@ export default function app(theme: Theme): Object { selector: selectorModal(theme), workspace: workspace(theme), editor: editor(theme), - projectDiagnostics: { - tabIconSpacing: 4, - tabIconWidth: 13, - tabSummarySpacing: 10, - emptyMessage: text(theme, "sans", "primary", { size: "lg" }), - statusBarItem: { - ...text(theme, "sans", "muted"), - margin: { - right: 10, - }, - }, - }, + projectDiagnostics: projectDiagnostics(theme), commandPalette: commandPalette(theme), projectPanel: projectPanel(theme), chatPanel: chatPanel(theme), diff --git a/styles/src/styleTree/projectDiagnostics.ts b/styles/src/styleTree/projectDiagnostics.ts new file mode 100644 index 0000000000000000000000000000000000000000..7331df1f98e45480d5032a81f21fa80cdd2feaea --- /dev/null +++ b/styles/src/styleTree/projectDiagnostics.ts @@ -0,0 +1,15 @@ +import Theme from "../themes/theme"; +import { + backgroundColor, + text, +} from "./components"; + +export default function projectDiagnostics(theme: Theme) { + return { + background: backgroundColor(theme, 500), + tabIconSpacing: 4, + tabIconWidth: 13, + tabSummarySpacing: 10, + emptyMessage: text(theme, "sans", "secondary", { size: "md" }), + } +} From b41bf65c96e3f5f29f8283ad8bb237dbac515350 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 28 Apr 2022 14:52:31 -0400 Subject: [PATCH 10/12] Statusbar style tweaks --- assets/themes/cave-dark.json | 33 ++++++++++++------------- assets/themes/cave-light.json | 33 ++++++++++++------------- assets/themes/dark.json | 37 ++++++++++++++-------------- assets/themes/light.json | 37 ++++++++++++++-------------- assets/themes/solarized-dark.json | 33 ++++++++++++------------- assets/themes/solarized-light.json | 33 ++++++++++++------------- assets/themes/sulphurpool-dark.json | 33 ++++++++++++------------- assets/themes/sulphurpool-light.json | 33 ++++++++++++------------- styles/src/styleTree/workspace.ts | 20 +++++++++------ 9 files changed, 144 insertions(+), 148 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index cf78eab6f102b1a05dd74039d35650bf20ea9c2c..42d88dff8f90f5e9167a42266d5273a7eaa3f3e9 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#e2dfe7", "size": 14, - "hover": {} + "hover": { + "background": "#58526052" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, + "corner_radius": 6, "icon_color": "#8b8792", "hover": { - "icon_color": "#8b8792", + "icon_color": "#e2dfe7", "background": "#58526052" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#19171c", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 18 - }, - "status_bar_item": { "family": "Zed Sans", "color": "#8b8792", - "size": 14, - "margin": { - "right": 10 - } + "size": 16 } }, "command_palette": { diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index fd4fa33df92fda3f196773b48d5be7972f718547..e296cf4099f35becd3af1bc2c9e728ac465e3e5b 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#26232a", "size": 14, - "hover": {} + "hover": { + "background": "#8b87921f" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, + "corner_radius": 6, "icon_color": "#585260", "hover": { - "icon_color": "#585260", + "icon_color": "#26232a", "background": "#8b87921f" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#efecf4", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { - "family": "Zed Sans", - "color": "#26232a", - "size": 18 - }, - "status_bar_item": { "family": "Zed Sans", "color": "#585260", - "size": 14, - "margin": { - "right": 10 - } + "size": 16 } }, "command_palette": { diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 9ff57e895ac955a43b455c104b6216f79b1ac3fd..6650b4914bb7f96c5616f010131749843b9fd188 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#f1f1f1", "size": 14, - "hover": {} + "hover": { + "background": "#232323" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, - "icon_color": "#555555", + "corner_radius": 6, + "icon_color": "#9c9c9c", "hover": { - "icon_color": "#9c9c9c", + "icon_color": "#c6c6c6", "background": "#232323" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#000000", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { "family": "Zed Sans", - "color": "#f1f1f1", - "size": 18 - }, - "status_bar_item": { - "family": "Zed Sans", - "color": "#808080", - "size": 14, - "margin": { - "right": 10 - } + "color": "#9c9c9c", + "size": 16 } }, "command_palette": { diff --git a/assets/themes/light.json b/assets/themes/light.json index 58405ed984a7813e980851f574da4295c5ed2085..3d7556c3b4e900a7114fca5bebc9f596407671db 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#2b2b2b", "size": 14, - "hover": {} + "hover": { + "background": "#eaeaea" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, - "icon_color": "#9c9c9c", + "corner_radius": 6, + "icon_color": "#717171", "hover": { - "icon_color": "#717171", + "icon_color": "#393939", "background": "#eaeaea" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#ffffff", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { "family": "Zed Sans", - "color": "#2b2b2b", - "size": 18 - }, - "status_bar_item": { - "family": "Zed Sans", - "color": "#636363", - "size": 14, - "margin": { - "right": 10 - } + "color": "#474747", + "size": 16 } }, "command_palette": { diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 0addf4ea8d5251038b0ff23c0abfa22cce9a4e1f..139d54af07daf363cce0af2875c84acb5d57e3ee 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#eee8d5", "size": 14, - "hover": {} + "hover": { + "background": "#586e7552" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, + "corner_radius": 6, "icon_color": "#93a1a1", "hover": { - "icon_color": "#93a1a1", + "icon_color": "#eee8d5", "background": "#586e7552" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#002b36", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { - "family": "Zed Sans", - "color": "#eee8d5", - "size": 18 - }, - "status_bar_item": { "family": "Zed Sans", "color": "#93a1a1", - "size": 14, - "margin": { - "right": 10 - } + "size": 16 } }, "command_palette": { diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index cde86237ecdcc01323095e729d457423e0103369..d9d5bc899485c34a7f35a4c91580e693db7c3a6b 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#073642", "size": 14, - "hover": {} + "hover": { + "background": "#93a1a11f" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, + "corner_radius": 6, "icon_color": "#586e75", "hover": { - "icon_color": "#586e75", + "icon_color": "#073642", "background": "#93a1a11f" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#fdf6e3", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { - "family": "Zed Sans", - "color": "#073642", - "size": 18 - }, - "status_bar_item": { "family": "Zed Sans", "color": "#586e75", - "size": 14, - "margin": { - "right": 10 - } + "size": 16 } }, "command_palette": { diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 3b837996084abc6330cefa2cdcdb47ac307d06bc..92ea11ff4bebc74564c8342a1da0e943ac5d2266 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#dfe2f1", "size": 14, - "hover": {} + "hover": { + "background": "#5e668752" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, + "corner_radius": 6, "icon_color": "#979db4", "hover": { - "icon_color": "#979db4", + "icon_color": "#dfe2f1", "background": "#5e668752" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#202746", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 18 - }, - "status_bar_item": { "family": "Zed Sans", "color": "#979db4", - "size": 14, - "margin": { - "right": 10 - } + "size": 16 } }, "command_palette": { diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 3ec5eae4b5f756ab50ebd4e97965b2bd1af136bc..d9245e7fcb6f31621cb27ddf582694520779674e 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -172,9 +172,11 @@ "width": 1 }, "status_bar": { - "height": 24, - "item_spacing": 12, + "height": 30, + "item_spacing": 8, "padding": { + "top": 1, + "bottom": 1, "left": 6, "right": 6 }, @@ -235,7 +237,9 @@ "family": "Zed Sans", "color": "#293256", "size": 14, - "hover": {} + "hover": { + "background": "#979db41f" + } }, "summary_warning": { "corner_radius": 6, @@ -294,15 +298,17 @@ "group_left": {}, "group_right": {}, "item": { - "icon_size": 18, + "icon_size": 14, "padding": { - "left": 5, - "right": 5 + "top": 3, + "bottom": 3, + "left": 6, + "right": 6 }, - "corner_radius": 5, + "corner_radius": 6, "icon_color": "#5e6687", "hover": { - "icon_color": "#5e6687", + "icon_color": "#293256", "background": "#979db41f" }, "active": { @@ -874,21 +880,14 @@ } }, "project_diagnostics": { + "background": "#f5f7ff", "tab_icon_spacing": 4, "tab_icon_width": 13, "tab_summary_spacing": 10, "empty_message": { - "family": "Zed Sans", - "color": "#293256", - "size": 18 - }, - "status_bar_item": { "family": "Zed Sans", "color": "#5e6687", - "size": 14, - "margin": { - "right": 10 - } + "size": 16 } }, "command_palette": { diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 59bb1fe362cfd062cb19a1a96649dabf1aa387d3..b8cc07155310df2cae8dc5ce6448e95c42300441 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -81,9 +81,11 @@ export default function workspace(theme: Theme) { width: 1, }, statusBar: { - height: 24, - itemSpacing: 12, + height: 30, + itemSpacing: 8, padding: { + top: 1, + bottom: 1, left: 6, right: 6, }, @@ -109,7 +111,9 @@ export default function workspace(theme: Theme) { height: 16, summaryOk: { ...diagnosticSummary, - hover: {} + hover: { + background: backgroundColor(theme, 300, "hovered"), + } }, summaryWarning: { ...diagnosticSummary, @@ -142,12 +146,12 @@ export default function workspace(theme: Theme) { groupLeft: {}, groupRight: {}, item: { - iconSize: 18, - padding: { left: 5, right: 5 }, - cornerRadius: 5, - iconColor: iconColor(theme, "muted"), + iconSize: 14, + padding: { top: 3, bottom: 3, left: 6, right: 6 }, + cornerRadius: 6, + iconColor: iconColor(theme, "secondary"), hover: { - iconColor: iconColor(theme, "secondary"), + iconColor: iconColor(theme, "primary"), background: backgroundColor(theme, 300, "hovered"), }, active: { From 6578ae5393dd3365327cebfc3fead0a72d42bf19 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Thu, 28 Apr 2022 12:08:15 -0700 Subject: [PATCH 11/12] Use Interactive helper to theme titlebar buttons --- assets/themes/cave-dark.json | 62 ++++++++------------------ assets/themes/cave-light.json | 62 ++++++++------------------ assets/themes/dark.json | 62 ++++++++------------------ assets/themes/light.json | 62 ++++++++------------------ assets/themes/solarized-dark.json | 62 ++++++++------------------ assets/themes/solarized-light.json | 62 ++++++++------------------ assets/themes/sulphurpool-dark.json | 62 ++++++++------------------ assets/themes/sulphurpool-light.json | 62 ++++++++------------------ crates/theme/src/theme.rs | 55 +++++++++++------------ crates/workspace/src/workspace.rs | 17 ++++---- styles/src/styleTree/workspace.ts | 65 ++++++++++++---------------- 11 files changed, 196 insertions(+), 437 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 42d88dff8f90f5e9167a42266d5273a7eaa3f3e9..ebccd62cd5adcb0d13ce4d05dcb9f06994803797 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#8b8792", - "size": 12, "border": { "color": "#19171c", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#efecf4", + "color": "#8b8792", "size": 12, - "border": { - "color": "#19171c", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#efecf4", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#8b8792" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#58526052", - "color": "#8b8792" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#8b8792", + "hover": { + "background": "#58526052", + "color": "#8b8792" }, - "background": "#58526052", - "color": "#efecf4" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#5852607a", + "color": "#efecf4" }, - "background": "#5852607a", - "color": "#efecf4" + "active_hover": { + "background": "#58526052", + "color": "#efecf4" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index e296cf4099f35becd3af1bc2c9e728ac465e3e5b..ae47f0277f0f5cbebee67044f457e9888150fd74 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#585260", - "size": 12, "border": { "color": "#efecf4", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#19171c", + "color": "#585260", "size": 12, - "border": { - "color": "#efecf4", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#19171c", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#585260" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#8b87921f", - "color": "#585260" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#585260", + "hover": { + "background": "#8b87921f", + "color": "#585260" }, - "background": "#8b87921f", - "color": "#19171c" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#8b87922e", + "color": "#19171c" }, - "background": "#8b87922e", - "color": "#19171c" + "active_hover": { + "background": "#8b87921f", + "color": "#19171c" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 6650b4914bb7f96c5616f010131749843b9fd188..9a87bb1d25179b53006bd1dc8aab676abfa9bbe3 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#9c9c9c", - "size": 12, "border": { "color": "#070707", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#ffffff", + "color": "#9c9c9c", "size": 12, - "border": { - "color": "#070707", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#ffffff", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#9c9c9c" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#323232", - "color": "#9c9c9c" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#9c9c9c", + "hover": { + "background": "#323232", + "color": "#9c9c9c" }, - "background": "#323232", - "color": "#ffffff" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#1c1c1c", + "color": "#ffffff" }, - "background": "#1c1c1c", - "color": "#ffffff" + "active_hover": { + "background": "#323232", + "color": "#ffffff" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/light.json b/assets/themes/light.json index 3d7556c3b4e900a7114fca5bebc9f596407671db..1686c1797ae7242a60f18da10866eec060f843ff 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#474747", - "size": 12, "border": { "color": "#d5d5d5", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#000000", + "color": "#474747", "size": 12, - "border": { - "color": "#d5d5d5", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#000000", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#717171" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#e3e3e3", - "color": "#717171" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#717171", + "hover": { + "background": "#e3e3e3", + "color": "#717171" }, - "background": "#e3e3e3", - "color": "#000000" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#d5d5d5", + "color": "#000000" }, - "background": "#d5d5d5", - "color": "#000000" + "active_hover": { + "background": "#e3e3e3", + "color": "#000000" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 139d54af07daf363cce0af2875c84acb5d57e3ee..3f14f9d12dce04c09c876d61aa138178bc93721c 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#93a1a1", - "size": 12, "border": { "color": "#002b36", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#fdf6e3", + "color": "#93a1a1", "size": 12, - "border": { - "color": "#002b36", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#fdf6e3", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#93a1a1" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#586e7552", - "color": "#93a1a1" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#93a1a1", + "hover": { + "background": "#586e7552", + "color": "#93a1a1" }, - "background": "#586e7552", - "color": "#fdf6e3" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#586e757a", + "color": "#fdf6e3" }, - "background": "#586e757a", - "color": "#fdf6e3" + "active_hover": { + "background": "#586e7552", + "color": "#fdf6e3" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index d9d5bc899485c34a7f35a4c91580e693db7c3a6b..328687871163b01d665a55698155adb1db36ba8c 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#586e75", - "size": 12, "border": { "color": "#fdf6e3", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#002b36", + "color": "#586e75", "size": 12, - "border": { - "color": "#fdf6e3", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#002b36", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#586e75" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#93a1a11f", - "color": "#586e75" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#586e75", + "hover": { + "background": "#93a1a11f", + "color": "#586e75" }, - "background": "#93a1a11f", - "color": "#002b36" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#93a1a12e", + "color": "#002b36" }, - "background": "#93a1a12e", - "color": "#002b36" + "active_hover": { + "background": "#93a1a11f", + "color": "#002b36" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 92ea11ff4bebc74564c8342a1da0e943ac5d2266..a068c0d42aef9c04ea9106bd87674f67d579e024 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#979db4", - "size": 12, "border": { "color": "#202746", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#f5f7ff", + "color": "#979db4", "size": 12, - "border": { - "color": "#202746", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#f5f7ff", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#979db4" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#5e668752", - "color": "#979db4" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#979db4", + "hover": { + "background": "#5e668752", + "color": "#979db4" }, - "background": "#5e668752", - "color": "#f5f7ff" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#5e66877a", + "color": "#f5f7ff" }, - "background": "#5e66877a", - "color": "#f5f7ff" + "active_hover": { + "background": "#5e668752", + "color": "#f5f7ff" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index d9245e7fcb6f31621cb27ddf582694520779674e..274a4f7e3e1f521ad8f58a6c0a13bb30e0918b73 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -347,9 +347,6 @@ "bottom": true }, "sign_in_prompt": { - "family": "Zed Sans", - "color": "#5e6687", - "size": 12, "border": { "color": "#f5f7ff", "width": 1 @@ -362,24 +359,14 @@ "padding": { "left": 6, "right": 6 - } - }, - "hovered_sign_in_prompt": { + }, "family": "Zed Sans", - "color": "#202746", + "color": "#5e6687", "size": 12, - "border": { - "color": "#f5f7ff", - "width": 1 - }, - "corner_radius": 6, - "margin": { - "top": 1, - "right": 6 - }, - "padding": { - "left": 6, - "right": 6 + "hover": { + "family": "Zed Sans", + "color": "#202746", + "size": 12 } }, "offline_icon": { @@ -395,34 +382,19 @@ "top": 3, "bottom": 2 }, - "color": "#5e6687" - }, - "hovered_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 - }, - "background": "#979db41f", - "color": "#5e6687" - }, - "hovered_active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "color": "#5e6687", + "hover": { + "background": "#979db41f", + "color": "#5e6687" }, - "background": "#979db41f", - "color": "#202746" - }, - "active_share_icon": { - "corner_radius": 6, - "margin": { - "top": 3, - "bottom": 2 + "active": { + "background": "#979db42e", + "color": "#202746" }, - "background": "#979db42e", - "color": "#202746" + "active_hover": { + "background": "#979db41f", + "color": "#202746" + } }, "outdated_warning": { "family": "Zed Sans", diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 334a11b739689dc385be16b1d772cb337a2524cd..dd3ce883c680c15a86665e149ca9ae2b87426064 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -55,13 +55,9 @@ pub struct Titlebar { pub avatar_width: f32, pub avatar_ribbon: AvatarRibbon, pub offline_icon: OfflineIcon, - pub share_icon: ShareIcon, - pub hovered_share_icon: ShareIcon, - pub active_share_icon: ShareIcon, - pub hovered_active_share_icon: ShareIcon, + pub share_icon: Interactive, pub avatar: ImageStyle, - pub sign_in_prompt: ContainedText, - pub hovered_sign_in_prompt: ContainedText, + pub sign_in_prompt: Interactive, pub outdated_warning: ContainedText, } @@ -418,6 +414,7 @@ pub struct Interactive { pub default: T, pub hover: Option, pub active: Option, + pub active_hover: Option, } impl Interactive { @@ -428,6 +425,10 @@ impl Interactive { pub fn hover(&self) -> &T { self.hover.as_ref().unwrap_or(&self.default) } + + pub fn active_hover(&self) -> &T { + self.active_hover.as_ref().unwrap_or(self.active()) + } } impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { @@ -441,46 +442,40 @@ impl<'de, T: DeserializeOwned> Deserialize<'de> for Interactive { default: Value, hover: Option, active: Option, + active_hover: Option, } let json = Helper::deserialize(deserializer)?; - let hover = if let Some(mut hovered) = json.hover { - if let Value::Object(hovered) = &mut hovered { - if let Value::Object(default) = &json.default { - for (key, value) in default { - if !hovered.contains_key(key) { - hovered.insert(key.clone(), value.clone()); - } - } - } - } - Some(serde_json::from_value::(hovered).map_err(serde::de::Error::custom)?) - } else { - None - }; - - let active = if let Some(mut active) = json.active { - if let Value::Object(active) = &mut active { - if let Value::Object(default) = &json.default { - for (key, value) in default { - if !active.contains_key(key) { - active.insert(key.clone(), value.clone()); + let deserialize_state = |state_json: Option| -> Result, D::Error> { + if let Some(mut state_json) = state_json { + if let Value::Object(state_json) = &mut state_json { + if let Value::Object(default) = &json.default { + for (key, value) in default { + if !state_json.contains_key(key) { + state_json.insert(key.clone(), value.clone()); + } } } } + Ok(Some( + serde_json::from_value::(state_json).map_err(serde::de::Error::custom)?, + )) + } else { + Ok(None) } - Some(serde_json::from_value::(active).map_err(serde::de::Error::custom)?) - } else { - None }; + let hover = deserialize_state(json.hover)?; + let active = deserialize_state(json.active)?; + let active_hover = deserialize_state(json.active_hover)?; let default = serde_json::from_value(json.default).map_err(serde::de::Error::custom)?; Ok(Interactive { default, hover, active, + active_hover, }) } } diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs index 4e7f64201b20447492cc8dd64b27d13025d13fe5..3b8c132fc33539bb877c79225f5e05dde35e4d03 100644 --- a/crates/workspace/src/workspace.rs +++ b/crates/workspace/src/workspace.rs @@ -1575,9 +1575,9 @@ impl Workspace { Some( MouseEventHandler::new::(0, cx, |state, _| { let style = if state.hovered { - &theme.workspace.titlebar.hovered_sign_in_prompt + &theme.workspace.titlebar.sign_in_prompt.hover() } else { - &theme.workspace.titlebar.sign_in_prompt + &theme.workspace.titlebar.sign_in_prompt.default }; Label::new("Sign in".to_string(), style.text.clone()) .contained() @@ -1649,18 +1649,17 @@ impl Workspace { { Some( MouseEventHandler::new::(0, cx, |state, cx| { + let style = &theme.workspace.titlebar.share_icon; let style = if self.project().read(cx).is_shared() { if state.hovered { - &theme.workspace.titlebar.hovered_active_share_icon + style.active_hover() } else { - &theme.workspace.titlebar.active_share_icon + &style.active() } + } else if state.hovered { + &style.active() } else { - if state.hovered { - &theme.workspace.titlebar.hovered_share_icon - } else { - &theme.workspace.titlebar.share_icon - } + &style.default }; Svg::new("icons/share.svg") .with_color(style.color) diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index b8cc07155310df2cae8dc5ce6448e95c42300441..9d753e9784e1adf0da0ef00e8474524782004a8b 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -2,20 +2,6 @@ import Theme from "../themes/theme"; import { backgroundColor, border, iconColor, text } from "./components"; export default function workspace(theme: Theme) { - const signInPrompt = { - ...text(theme, "sans", "secondary", { size: "xs" }), - border: border(theme, "primary"), - cornerRadius: 6, - margin: { - top: 1, - right: 6, - }, - padding: { - left: 6, - right: 6, - }, - }; - const tab = { height: 32, background: backgroundColor(theme, 300), @@ -52,10 +38,6 @@ export default function workspace(theme: Theme) { padding: { left: 6, right: 6 }, ...text(theme, "sans", "primary", { size: "sm" }), }; - const shareIcon = { - cornerRadius: 6, - margin: { top: 3, bottom: 2 }, - }; return { background: backgroundColor(theme, 300), @@ -183,10 +165,19 @@ export default function workspace(theme: Theme) { // set with a token, not hardcoded in rust }, border: border(theme, "primary", { bottom: true }), - signInPrompt, - hoveredSignInPrompt: { - ...signInPrompt, - ...text(theme, "sans", "active", { size: "xs" }), + signInPrompt: { + border: border(theme, "primary"), + cornerRadius: 6, + margin: { + top: 1, + right: 6, + }, + padding: { + left: 6, + right: 6, + }, + ...text(theme, "sans", "secondary", { size: "xs" }), + hover: text(theme, "sans", "active", { size: "xs" }), }, offlineIcon: { color: iconColor(theme, "secondary"), @@ -196,23 +187,21 @@ export default function workspace(theme: Theme) { }, }, shareIcon: { - ...shareIcon, - color: iconColor(theme, "secondary") - }, - hoveredShareIcon: { - ...shareIcon, - background: backgroundColor(theme, 100, "hovered"), + cornerRadius: 6, + margin: { top: 3, bottom: 2 }, color: iconColor(theme, "secondary"), - }, - hoveredActiveShareIcon: { - ...shareIcon, - background: backgroundColor(theme, 100, "hovered"), - color: iconColor(theme, "active"), - }, - activeShareIcon: { - ...shareIcon, - background: backgroundColor(theme, 100, "active"), - color: iconColor(theme, "active"), + hover: { + background: backgroundColor(theme, 100, "hovered"), + color: iconColor(theme, "secondary"), + }, + active: { + background: backgroundColor(theme, 100, "active"), + color: iconColor(theme, "active"), + }, + activeHover: { + background: backgroundColor(theme, 100, "hovered"), + color: iconColor(theme, "active"), + } }, outdatedWarning: { ...text(theme, "sans", "warning"), From e48a975b1edb2f188ef2c3bbfe11b30c212cbd1b Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Thu, 28 Apr 2022 12:35:20 -0700 Subject: [PATCH 12/12] Give no-error diagnostic indicator a hover state --- assets/themes/cave-dark.json | 97 +++++++++++++++++----------- assets/themes/cave-light.json | 97 +++++++++++++++++----------- assets/themes/dark.json | 97 +++++++++++++++++----------- assets/themes/light.json | 97 +++++++++++++++++----------- assets/themes/solarized-dark.json | 97 +++++++++++++++++----------- assets/themes/solarized-light.json | 97 +++++++++++++++++----------- assets/themes/sulphurpool-dark.json | 97 +++++++++++++++++----------- assets/themes/sulphurpool-light.json | 97 +++++++++++++++++----------- crates/diagnostics/src/items.rs | 61 ++++++++--------- crates/theme/src/theme.rs | 15 +++-- styles/src/styleTree/workspace.ts | 70 +++++++++++--------- 11 files changed, 555 insertions(+), 367 deletions(-) diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index ebccd62cd5adcb0d13ce4d05dcb9f06994803797..a26a6b9983d1926b4dc46f1b55ecddc352588029 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -226,73 +226,96 @@ "background": "#58526052" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#8b8792", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#8b8792", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 + }, + "icon_color_ok": "#8b8792", + "icon_color_warning": "#a06e3b", + "icon_color_error": "#be4678", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14, - "hover": { - "background": "#58526052" - } + "background": "#58526052" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14, "background": "#a06e3b26", "border": { "color": "#a06e3b26", "width": 1 - }, - "hover": { - "background": "#a06e3b33" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#e2dfe7", - "size": 14, "background": "#be467826", "border": { "color": "#be467826", "width": 1 - }, - "hover": { - "background": "#be467833" } }, - "message": { - "family": "Zed Sans", - "color": "#8b8792", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#8b8792", - "size": 14 + "hover": { + "icon_color_ok": "#e2dfe7", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#58526052" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#a06e3b33", + "border": { + "color": "#a06e3b26", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#be467833", + "border": { + "color": "#be467826", + "width": 1 + } } - }, - "icon_color_ok": "#8b8792", - "icon_color_warning": "#a06e3b", - "icon_color_error": "#be4678", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index ae47f0277f0f5cbebee67044f457e9888150fd74..1037255e3c768f350c2e9bfd550fed0c6d4dfbb2 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -226,73 +226,96 @@ "background": "#8b87921f" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#585260", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#585260", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#26232a", + "size": 14 + }, + "icon_color_ok": "#585260", + "icon_color_warning": "#a06e3b", + "icon_color_error": "#be4678", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#26232a", - "size": 14, - "hover": { - "background": "#8b87921f" - } + "background": "#8b87921f" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#26232a", - "size": 14, "background": "#a06e3b26", "border": { "color": "#a06e3b26", "width": 1 - }, - "hover": { - "background": "#a06e3b33" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#26232a", - "size": 14, "background": "#be467826", "border": { "color": "#be467826", "width": 1 - }, - "hover": { - "background": "#be467833" } }, - "message": { - "family": "Zed Sans", - "color": "#585260", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#585260", - "size": 14 + "hover": { + "icon_color_ok": "#26232a", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#8b87921f" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#a06e3b33", + "border": { + "color": "#a06e3b26", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#be467833", + "border": { + "color": "#be467826", + "width": 1 + } } - }, - "icon_color_ok": "#585260", - "icon_color_warning": "#a06e3b", - "icon_color_error": "#be4678", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 9a87bb1d25179b53006bd1dc8aab676abfa9bbe3..9ecf36dd2356158ee1dac11e4ad60815ae7541b4 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -226,73 +226,96 @@ "background": "#232323" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#808080", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#9c9c9c", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 + }, + "icon_color_ok": "#9c9c9c", + "icon_color_warning": "#f6a724", + "icon_color_error": "#eb2d2d", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14, - "hover": { - "background": "#232323" - } + "background": "#232323" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14, "background": "#f6a72426", "border": { "color": "#f6a72426", "width": 1 - }, - "hover": { - "background": "#f6a72433" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#f1f1f1", - "size": 14, "background": "#c9181826", "border": { "color": "#eb2d2d26", "width": 1 - }, - "hover": { - "background": "#c9181833" } }, - "message": { - "family": "Zed Sans", - "color": "#808080", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#9c9c9c", - "size": 14 + "hover": { + "icon_color_ok": "#c6c6c6", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#232323" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#f6a72433", + "border": { + "color": "#f6a72426", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#c9181833", + "border": { + "color": "#eb2d2d26", + "width": 1 + } } - }, - "icon_color_ok": "#9c9c9c", - "icon_color_warning": "#f6a724", - "icon_color_error": "#eb2d2d", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/light.json b/assets/themes/light.json index 1686c1797ae7242a60f18da10866eec060f843ff..53e9d185d73b1ebd228eeac92c28726d06bfd734 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -226,73 +226,96 @@ "background": "#eaeaea" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#636363", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#474747", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 + }, + "icon_color_ok": "#717171", + "icon_color_warning": "#f7bf17", + "icon_color_error": "#c91818", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14, - "hover": { - "background": "#eaeaea" - } + "background": "#eaeaea" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14, "background": "#f6a72426", "border": { "color": "#f6a72426", "width": 1 - }, - "hover": { - "background": "#f6a72433" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#2b2b2b", - "size": 14, "background": "#c9181826", "border": { "color": "#eb2d2d26", "width": 1 - }, - "hover": { - "background": "#c9181833" } }, - "message": { - "family": "Zed Sans", - "color": "#636363", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#474747", - "size": 14 + "hover": { + "icon_color_ok": "#393939", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#eaeaea" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#f6a72433", + "border": { + "color": "#f6a72426", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#c9181833", + "border": { + "color": "#eb2d2d26", + "width": 1 + } } - }, - "icon_color_ok": "#717171", - "icon_color_warning": "#f7bf17", - "icon_color_error": "#c91818", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 3f14f9d12dce04c09c876d61aa138178bc93721c..6b4d22d4b6be8526c297a997a10b86d0d4bb181d 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -226,73 +226,96 @@ "background": "#586e7552" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#93a1a1", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#93a1a1", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 + }, + "icon_color_ok": "#93a1a1", + "icon_color_warning": "#b58900", + "icon_color_error": "#dc322f", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14, - "hover": { - "background": "#586e7552" - } + "background": "#586e7552" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14, "background": "#b5890026", "border": { "color": "#b5890026", "width": 1 - }, - "hover": { - "background": "#b5890033" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#eee8d5", - "size": 14, "background": "#dc322f26", "border": { "color": "#dc322f26", "width": 1 - }, - "hover": { - "background": "#dc322f33" } }, - "message": { - "family": "Zed Sans", - "color": "#93a1a1", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#93a1a1", - "size": 14 + "hover": { + "icon_color_ok": "#eee8d5", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#586e7552" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#b5890033", + "border": { + "color": "#b5890026", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#dc322f33", + "border": { + "color": "#dc322f26", + "width": 1 + } } - }, - "icon_color_ok": "#93a1a1", - "icon_color_warning": "#b58900", - "icon_color_error": "#dc322f", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 328687871163b01d665a55698155adb1db36ba8c..1e3e645bf11b8d787e282e3293edee456bfcedcf 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -226,73 +226,96 @@ "background": "#93a1a11f" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#586e75", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#586e75", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#073642", + "size": 14 + }, + "icon_color_ok": "#586e75", + "icon_color_warning": "#b58900", + "icon_color_error": "#dc322f", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#073642", - "size": 14, - "hover": { - "background": "#93a1a11f" - } + "background": "#93a1a11f" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#073642", - "size": 14, "background": "#b5890026", "border": { "color": "#b5890026", "width": 1 - }, - "hover": { - "background": "#b5890033" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#073642", - "size": 14, "background": "#dc322f26", "border": { "color": "#dc322f26", "width": 1 - }, - "hover": { - "background": "#dc322f33" } }, - "message": { - "family": "Zed Sans", - "color": "#586e75", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#586e75", - "size": 14 + "hover": { + "icon_color_ok": "#073642", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#93a1a11f" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#b5890033", + "border": { + "color": "#b5890026", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#dc322f33", + "border": { + "color": "#dc322f26", + "width": 1 + } } - }, - "icon_color_ok": "#586e75", - "icon_color_warning": "#b58900", - "icon_color_error": "#dc322f", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index a068c0d42aef9c04ea9106bd87674f67d579e024..c199a57241821696a5b629671b794a066882ae73 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -226,73 +226,96 @@ "background": "#5e668752" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#979db4", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#979db4", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 + }, + "icon_color_ok": "#979db4", + "icon_color_warning": "#c08b30", + "icon_color_error": "#c94922", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14, - "hover": { - "background": "#5e668752" - } + "background": "#5e668752" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14, "background": "#c08b3026", "border": { "color": "#c08b3026", "width": 1 - }, - "hover": { - "background": "#c08b3033" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#dfe2f1", - "size": 14, "background": "#c9492226", "border": { "color": "#c9492226", "width": 1 - }, - "hover": { - "background": "#c9492233" } }, - "message": { - "family": "Zed Sans", - "color": "#979db4", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#979db4", - "size": 14 + "hover": { + "icon_color_ok": "#dfe2f1", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#5e668752" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#c08b3033", + "border": { + "color": "#c08b3026", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#c9492233", + "border": { + "color": "#c9492226", + "width": 1 + } } - }, - "icon_color_ok": "#979db4", - "icon_color_warning": "#c08b30", - "icon_color_error": "#c94922", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 274a4f7e3e1f521ad8f58a6c0a13bb30e0918b73..097a0059cb3d7991eb78024e0ca358f925081922 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -226,73 +226,96 @@ "background": "#979db41f" } }, - "diagnostics": { + "diagnostic_message": { + "family": "Zed Sans", + "color": "#5e6687", + "size": 14, + "hover": { + "family": "Zed Sans", + "color": "#5e6687", + "size": 14 + } + }, + "diagnostic_summary": { "height": 16, - "summary_ok": { + "icon_width": 14, + "icon_spacing": 2, + "summary_spacing": 6, + "text": { + "family": "Zed Sans", + "color": "#293256", + "size": 14 + }, + "icon_color_ok": "#5e6687", + "icon_color_warning": "#c08b30", + "icon_color_error": "#c94922", + "container_ok": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#293256", - "size": 14, - "hover": { - "background": "#979db41f" - } + "background": "#979db41f" }, - "summary_warning": { + "container_warning": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#293256", - "size": 14, "background": "#c08b3026", "border": { "color": "#c08b3026", "width": 1 - }, - "hover": { - "background": "#c08b3033" } }, - "summary_error": { + "container_error": { "corner_radius": 6, "padding": { "left": 6, "right": 6 }, - "family": "Zed Sans", - "color": "#293256", - "size": 14, "background": "#c9492226", "border": { "color": "#c9492226", "width": 1 - }, - "hover": { - "background": "#c9492233" } }, - "message": { - "family": "Zed Sans", - "color": "#5e6687", - "size": 14, - "hover": { - "family": "Zed Sans", - "color": "#5e6687", - "size": 14 + "hover": { + "icon_color_ok": "#293256", + "container_ok": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#979db41f" + }, + "container_warning": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#c08b3033", + "border": { + "color": "#c08b3026", + "width": 1 + } + }, + "container_error": { + "corner_radius": 6, + "padding": { + "left": 6, + "right": 6 + }, + "background": "#c9492233", + "border": { + "color": "#c9492226", + "width": 1 + } } - }, - "icon_color_ok": "#5e6687", - "icon_color_warning": "#c08b30", - "icon_color_error": "#c94922", - "icon_width": 14, - "icon_spacing": 2, - "summary_spacing": 6 + } }, "sidebar_buttons": { "group_left": {}, diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs index 560b87af40c3372ee55cd7ae42fcf6ea0c44a9c3..06b14698cd8febe090aa6dedaf031d1d3254a767 100644 --- a/crates/diagnostics/src/items.rs +++ b/crates/diagnostics/src/items.rs @@ -95,20 +95,11 @@ impl View for DiagnosticIndicator { .theme .workspace .status_bar - .diagnostics; - - let summary_style = if self.summary.error_count > 0 { - &style.summary_error - } else if self.summary.warning_count > 0 { - &style.summary_warning + .diagnostic_summary; + let style = if state.hovered { + style.hover() } else { - &style.summary_ok - }; - - let summary_style = if state.hovered { - summary_style.hover() - } else { - &summary_style.default + &style.default }; let mut summary_row = Flex::row(); @@ -122,12 +113,9 @@ impl View for DiagnosticIndicator { .contained() .with_margin_right(style.icon_spacing) .named("error-icon"), - Label::new( - self.summary.error_count.to_string(), - summary_style.text.clone(), - ) - .aligned() - .boxed(), + Label::new(self.summary.error_count.to_string(), style.text.clone()) + .aligned() + .boxed(), ]); } @@ -146,12 +134,9 @@ impl View for DiagnosticIndicator { 0. }) .named("warning-icon"), - Label::new( - self.summary.warning_count.to_string(), - summary_style.text.clone(), - ) - .aligned() - .boxed(), + Label::new(self.summary.warning_count.to_string(), style.text.clone()) + .aligned() + .boxed(), ]); } @@ -170,7 +155,13 @@ impl View for DiagnosticIndicator { .constrained() .with_height(style.height) .contained() - .with_style(summary_style.container) + .with_style(if self.summary.error_count > 0 { + style.container_error + } else if self.summary.warning_count > 0 { + style.container_warning + } else { + style.container_ok + }) .boxed() }) .with_cursor_style(CursorStyle::PointingHand) @@ -181,20 +172,22 @@ impl View for DiagnosticIndicator { let style = &cx.global::().theme.workspace.status_bar; let item_spacing = style.item_spacing; - let message_style = &style.diagnostics.message; if in_progress { element.add_child( - Label::new("checking…".into(), message_style.default.text.clone()) - .aligned() - .contained() - .with_margin_left(item_spacing) - .boxed(), + Label::new( + "checking…".into(), + style.diagnostic_message.default.text.clone(), + ) + .aligned() + .contained() + .with_margin_left(item_spacing) + .boxed(), ); } else if let Some(diagnostic) = &self.current_diagnostic { - let message_style = message_style.clone(); + let message_style = style.diagnostic_message.clone(); element.add_child( - MouseEventHandler::new::(0, cx, |state, _| { + MouseEventHandler::new::(1, cx, |state, _| { Label::new( diagnostic.message.split('\n').next().unwrap().to_string(), if state.hovered { diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index dd3ce883c680c15a86665e149ca9ae2b87426064..3fb31d78b189cb7b1ebb64d58c3623b29d611dba 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -144,7 +144,8 @@ pub struct StatusBar { pub auto_update_done_message: TextStyle, pub lsp_status: Interactive, pub sidebar_buttons: StatusBarSidebarButtons, - pub diagnostics: StatusBarDiagnostics, + pub diagnostic_summary: Interactive, + pub diagnostic_message: Interactive, } #[derive(Deserialize, Default)] @@ -155,14 +156,14 @@ pub struct StatusBarSidebarButtons { } #[derive(Deserialize, Default)] -pub struct StatusBarDiagnostics { - pub message: Interactive, - pub summary_ok: Interactive, - pub summary_warning: Interactive, - pub summary_error: Interactive, +pub struct StatusBarDiagnosticSummary { + pub container_ok: ContainerStyle, + pub container_warning: ContainerStyle, + pub container_error: ContainerStyle, + pub text: TextStyle, pub icon_color_ok: Color, - pub icon_color_error: Color, pub icon_color_warning: Color, + pub icon_color_error: Color, pub height: f32, pub icon_width: f32, pub icon_spacing: f32, diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 9d753e9784e1adf0da0ef00e8474524782004a8b..d4e7f146c01e3fbd888af27f14d2e35857d5517e 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -33,12 +33,6 @@ export default function workspace(theme: Theme) { }, }; - const diagnosticSummary = { - cornerRadius: 6, - padding: { left: 6, right: 6 }, - ...text(theme, "sans", "primary", { size: "sm" }), - }; - return { background: backgroundColor(theme, 300), leaderBorderOpacity: 0.7, @@ -89,40 +83,56 @@ export default function workspace(theme: Theme) { background: backgroundColor(theme, 300, "hovered"), } }, - diagnostics: { + diagnosticMessage: { + ...text(theme, "sans", "muted"), + hover: text(theme, "sans", "secondary"), + }, + diagnosticSummary: { height: 16, - summaryOk: { - ...diagnosticSummary, - hover: { - background: backgroundColor(theme, 300, "hovered"), - } + iconWidth: 14, + iconSpacing: 2, + summarySpacing: 6, + text: text(theme, "sans", "primary", { size: "sm" }), + iconColorOk: iconColor(theme, "secondary"), + iconColorWarning: iconColor(theme, "warning"), + iconColorError: iconColor(theme, "error"), + containerOk: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, + background: backgroundColor(theme, 300, "hovered"), }, - summaryWarning: { - ...diagnosticSummary, + containerWarning: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, background: backgroundColor(theme, "warning"), border: border(theme, "warning"), - hover: { - background: backgroundColor(theme, "warning", "hovered"), - } }, - summaryError: { - ...diagnosticSummary, + containerError: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, background: backgroundColor(theme, "error"), border: border(theme, "error"), - hover: { + }, + hover: { + iconColorOk: iconColor(theme, "primary"), + containerOk: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, + background: backgroundColor(theme, 300, "hovered"), + }, + containerWarning: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, + background: backgroundColor(theme, "warning", "hovered"), + border: border(theme, "warning"), + }, + containerError: { + cornerRadius: 6, + padding: { left: 6, right: 6 }, background: backgroundColor(theme, "error", "hovered"), + border: border(theme, "error"), } }, - message: { - ...text(theme, "sans", "muted"), - hover: text(theme, "sans", "secondary"), - }, - iconColorOk: iconColor(theme, "secondary"), - iconColorWarning: iconColor(theme, "warning"), - iconColorError: iconColor(theme, "error"), - iconWidth: 14, - iconSpacing: 2, - summarySpacing: 6, }, sidebarButtons: { groupLeft: {},