Show tooltip when hovering over jump to diagnostic icon

Antonio Scandurra created 3 years ago

Change summary

crates/diagnostics/src/diagnostics.rs | 25 +++++++++++++++++++++++++
crates/theme/src/theme.rs             |  1 +
styles/src/styleTree/app.ts           |  2 ++
styles/src/styleTree/tooltip.ts       | 13 +++++++++++++
4 files changed, 41 insertions(+)

Detailed changes

crates/diagnostics/src/diagnostics.rs

@@ -613,6 +613,7 @@ fn diagnostic_header_renderer(entry: DiagnosticEntry<Point>, path: ProjectPath)
     let (message, highlights) = highlight_diagnostic_message(&entry.diagnostic.message);
     Arc::new(move |cx| {
         let settings = cx.global::<Settings>();
+        let tooltip_style = settings.theme.tooltip.clone();
         let theme = &settings.theme.editor;
         let style = theme.diagnostic_header.clone();
         let font_size = (style.text_scale_factor * settings.buffer_font_size).round();
@@ -683,6 +684,30 @@ fn diagnostic_header_renderer(entry: DiagnosticEntry<Point>, path: ProjectPath)
                         });
                     }
                 })
+                .with_tooltip(
+                    entry.diagnostic.group_id,
+                    Flex::row()
+                        .with_child(
+                            Label::new(
+                                "Jump to diagnostic (".to_string(),
+                                tooltip_style.text.clone(),
+                            )
+                            .boxed(),
+                        )
+                        .with_child(
+                            KeystrokeLabel::new(
+                                Box::new(editor::OpenExcerpts),
+                                Default::default(),
+                                tooltip_style.text.clone(),
+                            )
+                            .boxed(),
+                        )
+                        .with_child(Label::new(")".to_string(), tooltip_style.text).boxed())
+                        .contained()
+                        .with_style(tooltip_style.container)
+                        .boxed(),
+                    cx,
+                )
                 .aligned()
                 .flex_float()
                 .boxed(),

crates/theme/src/theme.rs

@@ -31,6 +31,7 @@ pub struct Theme {
     pub project_diagnostics: ProjectDiagnostics,
     pub breadcrumbs: ContainedText,
     pub contact_notification: ContactNotification,
+    pub tooltip: ContainedText,
 }
 
 #[derive(Deserialize, Default)]

styles/src/styleTree/app.ts

@@ -12,6 +12,7 @@ import workspace from "./workspace";
 import contextMenu from "./contextMenu";
 import projectDiagnostics from "./projectDiagnostics";
 import contactNotification from "./contactNotification";
+import tooltip from "./tooltip";
 
 export const panel = {
   padding: { top: 12, bottom: 12 },
@@ -37,5 +38,6 @@ export default function app(theme: Theme): Object {
       },
     },
     contactNotification: contactNotification(theme),
+    tooltip: tooltip(theme),
   };
 }

styles/src/styleTree/tooltip.ts

@@ -0,0 +1,13 @@
+import Theme from "../themes/common/theme";
+import { backgroundColor, border, shadow, text } from "./components";
+
+export default function tooltip(theme: Theme) {
+  return {
+    background: backgroundColor(theme, 500),
+    border: border(theme, "primary"),
+    padding: 6,
+    shadow: shadow(theme),
+    cornerRadius: 6,
+    ...text(theme, "sans", "primary", { size: "xs" })
+  }
+}