N/t6 (#3360)

Mikayla Maki created

[[PR Description]]

- Fix broken pane group spacing
- Work on diagnostics styling (still wip)

Release Notes:

- N/A

Change summary

assets/icons/warning.svg                 |  7 --
crates/diagnostics2/src/diagnostics.rs   |  4 +
crates/diagnostics2/src/items.rs         | 61 +++++++++++--------------
crates/editor2/src/editor.rs             |  1 
crates/ui2/src/components/icon_button.rs |  5 +
crates/workspace2/src/pane.rs            | 12 ++--
crates/workspace2/src/status_bar.rs      |  2 
crates/workspace2/src/workspace2.rs      | 15 -----
8 files changed, 44 insertions(+), 63 deletions(-)

Detailed changes

assets/icons/warning.svg 🔗

@@ -1,6 +1 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.45563 12.3438H11.5444C11.9137 12.3438 12.1556 11.9571 11.994 11.625L10.2346 8.00952C9.77174 7.05841 8.89104 6.37821 7.85383 6.17077C7.29019 6.05804 6.70981 6.05804 6.14617 6.17077C5.10896 6.37821 4.22826 7.05841 3.76542 8.00952L2.00603 11.625C1.84442 11.9571 2.08628 12.3438 2.45563 12.3438Z" fill="#001A33" fill-opacity="0.157"/>
-<path d="M9.5 6.5L11.994 11.625C12.1556 11.9571 11.9137 12.3438 11.5444 12.3438H2.45563C2.08628 12.3438 1.84442 11.9571 2.00603 11.625L4.5 6.5" stroke="#11181C" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7 7L7 2" stroke="#11181C" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="7" cy="9.24219" r="0.75" fill="#11181C"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-alert-triangle"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

crates/diagnostics2/src/diagnostics.rs 🔗

@@ -34,6 +34,7 @@ use std::{
     path::PathBuf,
     sync::Arc,
 };
+use theme::ActiveTheme;
 pub use toolbar_controls::ToolbarControls;
 use ui::{h_stack, HighlightedLabel, Icon, IconElement, Label, TextColor};
 use util::TryFutureExt;
@@ -92,9 +93,10 @@ impl EventEmitter<ItemEvent> for ProjectDiagnosticsEditor {}
 impl Render for ProjectDiagnosticsEditor {
     type Element = Focusable<Self, Div<Self>>;
 
-    fn render(&mut self, _: &mut ViewContext<Self>) -> Self::Element {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
         let child = if self.path_states.is_empty() {
             div()
+                .bg(cx.theme().colors().editor_background)
                 .flex()
                 .items_center()
                 .justify_center()

crates/diagnostics2/src/items.rs 🔗

@@ -1,7 +1,7 @@
 use collections::HashSet;
 use editor::{Editor, GoToDiagnostic};
 use gpui::{
-    div, Div, EventEmitter, InteractiveComponent, ParentComponent, Render, Stateful,
+    rems, Div, EventEmitter, InteractiveComponent, ParentComponent, Render, Stateful,
     StatefulInteractiveComponent, Styled, Subscription, View, ViewContext, WeakView,
 };
 use language::Diagnostic;
@@ -25,15 +25,35 @@ impl Render for DiagnosticIndicator {
     type Element = Stateful<Self, Div<Self>>;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-        let mut summary_row = h_stack()
+        let diagnostic_indicator = match (self.summary.error_count, self.summary.warning_count) {
+            (0, 0) => h_stack().child(IconElement::new(Icon::Check).color(TextColor::Success)),
+            (0, warning_count) => h_stack()
+                .gap_1()
+                .child(IconElement::new(Icon::ExclamationTriangle).color(TextColor::Warning))
+                .child(Label::new(warning_count.to_string())),
+            (error_count, 0) => h_stack()
+                .gap_1()
+                .child(IconElement::new(Icon::XCircle).color(TextColor::Error))
+                .child(Label::new(error_count.to_string())),
+            (error_count, warning_count) => h_stack()
+                .gap_1()
+                .child(IconElement::new(Icon::XCircle).color(TextColor::Error))
+                .child(Label::new(error_count.to_string()))
+                .child(IconElement::new(Icon::ExclamationTriangle).color(TextColor::Warning))
+                .child(Label::new(warning_count.to_string())),
+        };
+
+        h_stack()
             .id(cx.entity_id())
             .on_action(Self::go_to_next_diagnostic)
             .rounded_md()
-            .p_1()
+            .flex_none()
+            .h(rems(1.375))
+            .px_1()
             .cursor_pointer()
-            .bg(gpui::green())
-            .hover(|style| style.bg(cx.theme().colors().element_hover))
-            .active(|style| style.bg(cx.theme().colors().element_active))
+            .bg(cx.theme().colors().ghost_element_background)
+            .hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
+            .active(|style| style.bg(cx.theme().colors().ghost_element_active))
             .tooltip(|_, cx| Tooltip::text("Project Diagnostics", cx))
             .on_click(|this, _, cx| {
                 if let Some(workspace) = this.workspace.upgrade() {
@@ -41,33 +61,8 @@ impl Render for DiagnosticIndicator {
                         ProjectDiagnosticsEditor::deploy(workspace, &Default::default(), cx)
                     })
                 }
-            });
-
-        if self.summary.error_count > 0 {
-            summary_row = summary_row.child(
-                div()
-                    .child(IconElement::new(Icon::XCircle).color(TextColor::Error))
-                    .bg(gpui::red()),
-            );
-            summary_row = summary_row.child(
-                div()
-                    .child(Label::new(self.summary.error_count.to_string()))
-                    .bg(gpui::yellow()),
-            );
-        }
-
-        if self.summary.warning_count > 0 {
-            summary_row = summary_row
-                .child(IconElement::new(Icon::ExclamationTriangle).color(TextColor::Warning));
-            summary_row = summary_row.child(Label::new(self.summary.warning_count.to_string()));
-        }
-
-        if self.summary.error_count == 0 && self.summary.warning_count == 0 {
-            summary_row =
-                summary_row.child(IconElement::new(Icon::Check).color(TextColor::Success));
-        }
-
-        summary_row
+            })
+            .child(diagnostic_indicator)
     }
 }
 

crates/editor2/src/editor.rs 🔗

@@ -4401,6 +4401,7 @@ impl Editor {
                                         editor.fold_at(&FoldAt { buffer_row }, cx);
                                     }
                                 })
+                                .color(ui::TextColor::Muted)
                                 .render()
                         })
                     })

crates/ui2/src/components/icon_button.rs 🔗

@@ -111,7 +111,10 @@ impl<V: 'static> IconButton<V> {
             .p_1()
             .bg(bg_color)
             .cursor_pointer()
-            .hover(|style| style.bg(bg_hover_color))
+            // Nate: Trying to figure out the right places we want to show a
+            // hover state here. I think it is a bit heavy to have it on every
+            // place we use an icon button.
+            // .hover(|style| style.bg(bg_hover_color))
             .active(|style| style.bg(bg_active_color))
             .child(IconElement::new(self.icon).color(icon_color));
 

crates/workspace2/src/pane.rs 🔗

@@ -24,6 +24,7 @@ use std::{
         Arc,
     },
 };
+
 use ui::v_stack;
 use ui::{prelude::*, Icon, IconButton, IconElement, TextColor, Tooltip};
 use util::truncate_and_remove_front;
@@ -1480,15 +1481,10 @@ impl Pane {
             // Right Side
             .child(
                 div()
-                    // We only use absolute here since we don't
-                    // have opacity or `hidden()` yet
-                    .absolute()
-                    .neg_top_7()
                     .px_1()
                     .flex()
                     .flex_none()
                     .gap_2()
-                    .group_hover("tab_bar", |this| this.top_0())
                     // Nav Buttons
                     .child(
                         div()
@@ -1931,9 +1927,11 @@ impl Render for Pane {
                     .map(|task| task.detach_and_log_err(cx));
             })
             .child(self.render_tab_bar(cx))
-            .child(div() /* todo!(toolbar) */)
+            // .child(
+            //     div()
+            // ) /* todo!(toolbar) */
             .child(if let Some(item) = self.active_item() {
-                div().flex_1().child(item.to_any())
+                div().flex().flex_1().child(item.to_any())
             } else {
                 // todo!()
                 div().child("Empty Pane")

crates/workspace2/src/status_bar.rs 🔗

@@ -56,7 +56,7 @@ impl StatusBar {
     fn render_left_tools(&self, cx: &mut ViewContext<Self>) -> impl Component<Self> {
         h_stack()
             .items_center()
-            .gap_1()
+            .gap_2()
             .children(self.left_items.iter().map(|item| item.to_any()))
     }
 

crates/workspace2/src/workspace2.rs 🔗

@@ -3666,7 +3666,7 @@ impl Render for Workspace {
                                         &self.app_state,
                                         cx,
                                     ))
-                                    .child(div().flex().flex_1().child(self.bottom_dock.clone())),
+                                    .child(self.bottom_dock.clone()),
                             )
                             // Right Dock
                             .child(
@@ -3679,19 +3679,6 @@ impl Render for Workspace {
                     ),
             )
             .child(self.status_bar.clone())
-            .z_index(8)
-            // Debug
-            .child(
-                div()
-                    .flex()
-                    .flex_col()
-                    .z_index(9)
-                    .absolute()
-                    .top_20()
-                    .left_1_4()
-                    .w_40()
-                    .gap_2(),
-            )
     }
 }