diff --git a/crates/moon-ui-components/src/moon/data_table.rs b/crates/moon-ui-components/src/moon/data_table.rs index 998d55d..4c7d073 100644 --- a/crates/moon-ui-components/src/moon/data_table.rs +++ b/crates/moon-ui-components/src/moon/data_table.rs @@ -89,6 +89,9 @@ pub enum MoonDataTableWidthPolicy { pub struct MoonDataTableColumn { pub key: SharedString, pub title: SharedString, + /// Hover text for the header cell, e.g. the raw schema name behind a translated title. + /// `None` renders the bare title as before. + pub tooltip: Option, /// Base column width in logical design pixels. /// /// `MoonDataTable` treats this value as both the minimum width and the proportional weight for @@ -136,6 +139,7 @@ impl MoonDataTableColumn { Self { key: key.into(), title: title.into(), + tooltip: None, width, fill: false, no_grow: false, @@ -167,6 +171,12 @@ impl MoonDataTableColumn { self } + /// Attach a hover tooltip to the header cell. + pub fn tooltip(mut self, tooltip: impl Into) -> Self { + self.tooltip = Some(tooltip.into()); + self + } + pub fn sortable(mut self, sortable: bool) -> Self { self.sortable = sortable; self diff --git a/crates/moon-ui-components/src/moon/data_table/header.rs b/crates/moon-ui-components/src/moon/data_table/header.rs index 5c648a2..9d0742d 100644 --- a/crates/moon-ui-components/src/moon/data_table/header.rs +++ b/crates/moon-ui-components/src/moon/data_table/header.rs @@ -9,6 +9,7 @@ use super::super::{ table::{MoonTableAlign, MoonTableStyle}, theme::MoonTheme, tokens::{MoonPalette, rgba_from}, + tooltip::MoonTooltipView, }; use super::drag::{MoonDataColumnDrag, MoonDataColumnResizeDrag}; use super::{ @@ -123,7 +124,12 @@ pub(super) fn render_header( }, 1.0, )) - .child(label); + .child(label) + .when_some(column.tooltip.clone(), |cell, tooltip| { + cell.tooltip(move |_window, cx| { + cx.new(|_| MoonTooltipView::new(tooltip.clone())).into() + }) + }); cell = cell.child( canvas( diff --git a/crates/moon-ui-components/src/moon/theme.rs b/crates/moon-ui-components/src/moon/theme.rs index 9cac6b9..160c7f2 100644 --- a/crates/moon-ui-components/src/moon/theme.rs +++ b/crates/moon-ui-components/src/moon/theme.rs @@ -251,7 +251,7 @@ impl MoonThemeTokens { table_head_foreground: rgba_from(p.text_soft, 1.0), table_foot: rgba_from(p.head_row, 1.0), table_foot_foreground: rgba_from(p.text_soft, 1.0), - table_hover: rgba_from(p.panel_high, 1.0), + table_hover: rgba_from(p.table_hover, 1.0), table_row_border: rgba_from(p.row_line, 1.0), title_bar: rgba_from(p.chrome, 1.0), title_bar_border: rgba_from(p.border, 1.0), diff --git a/crates/moon-ui-components/src/moon/tokens.rs b/crates/moon-ui-components/src/moon/tokens.rs index e5aca9d..66fdc28 100644 --- a/crates/moon-ui-components/src/moon/tokens.rs +++ b/crates/moon-ui-components/src/moon/tokens.rs @@ -50,6 +50,9 @@ pub struct MoonPalette { pub table_head: u32, pub table_body: u32, pub table_selected: u32, + /// Row hover fill for data tables: one step off the row surface in EITHER theme, so a + /// hovered row is visible on a white light-theme table (where `panel_high` is itself white). + pub table_hover: u32, pub green: u32, pub green_btn: u32, pub green_text: u32, @@ -132,6 +135,7 @@ impl MoonPalette { table_head: 0x20232A, table_body: 0x1A1C1F, table_selected: 0xFFB347, + table_hover: 0x22252B, green: 0x1E8C5B, green_btn: 0x1E8C5B, green_text: 0x1E8C5B, @@ -178,6 +182,7 @@ impl MoonPalette { table_head: 0xF3F6F8, table_body: 0xFFFFFF, table_selected: 0x009DFF, + table_hover: 0xEEF2F6, green: 0x178A57, green_btn: 0x178A57, green_text: 0x0E6E45, diff --git a/crates/moon-ui-components/themes/moon-light.toml b/crates/moon-ui-components/themes/moon-light.toml index e3defa3..e0ae9d4 100644 --- a/crates/moon-ui-components/themes/moon-light.toml +++ b/crates/moon-ui-components/themes/moon-light.toml @@ -31,6 +31,7 @@ text_faint = 0x7D7669 table_head = 0x20232A table_body = 0x1A1C1F table_selected = 0xFFB347 +table_hover = 0x22252B green = 0x1E8C5B green_btn = 0x1E8C5B green_text = 0x1E8C5B @@ -99,6 +100,7 @@ text_faint = 0x98A3AE table_head = 0xF3F6F8 table_body = 0xFFFFFF table_selected = 0x009DFF +table_hover = 0xEEF2F6 green = 0x178A57 green_btn = 0x178A57 green_text = 0x0E6E45 diff --git a/crates/moon-ui-components/themes/moon-terminal.toml b/crates/moon-ui-components/themes/moon-terminal.toml index 2ff118e..daf7830 100644 --- a/crates/moon-ui-components/themes/moon-terminal.toml +++ b/crates/moon-ui-components/themes/moon-terminal.toml @@ -31,6 +31,7 @@ text_faint = 0x7D7669 table_head = 0x20232A table_body = 0x1A1C1F table_selected = 0xFFB347 +table_hover = 0x22252B green = 0x1E8C5B green_btn = 0x1E8C5B green_text = 0x1E8C5B @@ -99,6 +100,7 @@ text_faint = 0x98A3AE table_head = 0xF3F6F8 table_body = 0xFFFFFF table_selected = 0x009DFF +table_hover = 0xEEF2F6 green = 0x178A57 green_btn = 0x178A57 green_text = 0x0E6E45 diff --git a/docs/component-api-baseline.json b/docs/component-api-baseline.json index 0952891..dd5a0fc 100644 --- a/docs/component-api-baseline.json +++ b/docs/component-api-baseline.json @@ -949,6 +949,10 @@ "file": "crates/moon-ui-components/src/moon/data_table.rs", "signature": "pub fn tone(mut self, tone: MoonTone) -> Self" }, + { + "file": "crates/moon-ui-components/src/moon/data_table.rs", + "signature": "pub fn tooltip(mut self, tooltip: impl Into) -> Self" + }, { "file": "crates/moon-ui-components/src/moon/data_table.rs", "signature": "pub fn track_scroll(mut self, handle: &MoonVirtualListScrollHandle) -> Self"