refactor
This commit is contained in:
+32
-70
@@ -2,12 +2,13 @@ use std::rc::Rc;
|
||||
|
||||
use gpui::prelude::FluentBuilder as _;
|
||||
use gpui::{
|
||||
AnyElement, App, ElementId, Hsla, InteractiveElement as _, IntoElement, KeyDownEvent,
|
||||
ParentElement as _, Pixels, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
|
||||
AnyElement, App, ElementId, InteractiveElement as _, IntoElement, KeyDownEvent,
|
||||
ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
|
||||
Styled as _, Window, div,
|
||||
};
|
||||
use gpui_native_icons::{IconRole, icon};
|
||||
use gpui_native_theme::ActiveTheme as _;
|
||||
use gpui_native_theme::{ActiveTheme as _, Theme};
|
||||
use gpui_native_utils::adjacent_selectable;
|
||||
|
||||
/// The change reporter, fired with the next selected tab by pointer and keys.
|
||||
type ChangeHandler = Rc<dyn Fn(usize, &mut Window, &mut App)>;
|
||||
@@ -105,36 +106,8 @@ impl Tabs {
|
||||
}
|
||||
}
|
||||
|
||||
struct TabsChrome {
|
||||
foreground: Hsla,
|
||||
muted: Hsla,
|
||||
muted_foreground: Hsla,
|
||||
primary: Hsla,
|
||||
border: Hsla,
|
||||
radius_sm: Pixels,
|
||||
icon_size: Pixels,
|
||||
text_size: Pixels,
|
||||
/// The strip's selected index; re-selecting it reports nothing.
|
||||
selected: usize,
|
||||
}
|
||||
|
||||
impl RenderOnce for Tabs {
|
||||
fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
|
||||
let chrome = {
|
||||
let theme = cx.theme();
|
||||
TabsChrome {
|
||||
foreground: theme.colors.foreground,
|
||||
muted: theme.colors.muted,
|
||||
muted_foreground: theme.colors.muted_foreground,
|
||||
primary: theme.ramps.primary.base,
|
||||
border: theme.colors.border,
|
||||
radius_sm: theme.radius.sm,
|
||||
icon_size: theme.sizes.medium.icon_size,
|
||||
text_size: theme.sizes.medium.text_size,
|
||||
selected: self.selected,
|
||||
}
|
||||
};
|
||||
|
||||
let tabs = match self.tabs {
|
||||
Some(build) => build(window, cx),
|
||||
None => Vec::new(),
|
||||
@@ -147,11 +120,8 @@ impl RenderOnce for Tabs {
|
||||
.map(|(index, _)| index)
|
||||
.collect();
|
||||
|
||||
// Keyboard focus rides the strip across frames.
|
||||
let focus_handle = window.with_element_namespace(self.id.clone(), |window| {
|
||||
window.use_keyed_state("tabs-focus", cx, |_, cx| cx.focus_handle())
|
||||
});
|
||||
let focus = focus_handle.read(cx).clone();
|
||||
let focus = gpui_native_utils::focus_handle(&self.id, window, cx);
|
||||
let theme = cx.theme();
|
||||
|
||||
let label = self
|
||||
.a11y_label
|
||||
@@ -163,10 +133,11 @@ impl RenderOnce for Tabs {
|
||||
.enumerate()
|
||||
.map(|(index, tab)| {
|
||||
render_tab(
|
||||
theme,
|
||||
tab,
|
||||
index,
|
||||
self.selected == index,
|
||||
&chrome,
|
||||
self.selected,
|
||||
&self.on_change,
|
||||
&focus,
|
||||
)
|
||||
@@ -178,8 +149,8 @@ impl RenderOnce for Tabs {
|
||||
.flex()
|
||||
.gap_1()
|
||||
.border_b_1()
|
||||
.border_color(chrome.border)
|
||||
.text_size(chrome.text_size)
|
||||
.border_color(theme.colors.border)
|
||||
.text_size(theme.sizes.medium.text_size)
|
||||
.track_focus(&focus)
|
||||
.focusable()
|
||||
.tab_stop(true)
|
||||
@@ -190,8 +161,8 @@ impl RenderOnce for Tabs {
|
||||
let on_change = self.on_change.clone();
|
||||
move |event: &KeyDownEvent, window, cx| {
|
||||
let target = match event.keystroke.key.as_str() {
|
||||
"right" => adjacent(&selectable, selected, true),
|
||||
"left" => adjacent(&selectable, selected, false),
|
||||
"right" => adjacent_selectable(&selectable, Some(selected), true),
|
||||
"left" => adjacent_selectable(&selectable, Some(selected), false),
|
||||
"home" => selectable.first().copied(),
|
||||
"end" => selectable.last().copied(),
|
||||
_ => return,
|
||||
@@ -210,19 +181,20 @@ impl RenderOnce for Tabs {
|
||||
}
|
||||
|
||||
fn render_tab(
|
||||
theme: &Theme,
|
||||
tab: &Tab,
|
||||
index: usize,
|
||||
selected: bool,
|
||||
chrome: &TabsChrome,
|
||||
selected_index: usize,
|
||||
on_change: &Option<ChangeHandler>,
|
||||
focus: &gpui::FocusHandle,
|
||||
) -> AnyElement {
|
||||
let label_color = if tab.disabled {
|
||||
chrome.muted_foreground
|
||||
theme.colors.muted_foreground
|
||||
} else if selected {
|
||||
chrome.primary
|
||||
theme.ramps.primary.base
|
||||
} else {
|
||||
chrome.foreground
|
||||
theme.colors.foreground
|
||||
};
|
||||
|
||||
let mut strip_tab = div()
|
||||
@@ -232,31 +204,34 @@ fn render_tab(
|
||||
.gap_1p5()
|
||||
.px_2()
|
||||
.py_1()
|
||||
.rounded_tl(chrome.radius_sm)
|
||||
.rounded_tr(chrome.radius_sm)
|
||||
.rounded_tl(theme.radius.sm)
|
||||
.rounded_tr(theme.radius.sm)
|
||||
.role(Role::Tab)
|
||||
.aria_selected(selected)
|
||||
.text_color(label_color)
|
||||
.when(selected, |strip_tab| {
|
||||
// The underline sits on the strip's hairline, marking the active
|
||||
// tab the way a native tab bar does.
|
||||
strip_tab.border_b_2().border_color(chrome.primary)
|
||||
strip_tab
|
||||
.border_b_2()
|
||||
.border_color(theme.ramps.primary.base)
|
||||
})
|
||||
.when(!tab.disabled && !selected, |strip_tab| {
|
||||
strip_tab.hover(|strip_tab| strip_tab.bg(chrome.muted))
|
||||
strip_tab.hover(|strip_tab| strip_tab.bg(theme.colors.muted))
|
||||
})
|
||||
.child(
|
||||
div()
|
||||
.flex_none()
|
||||
.pb_0p5()
|
||||
.when_some(tab.icon, |strip_tab, role| {
|
||||
strip_tab.child(icon(role).size(chrome.icon_size * 0.75).color(label_color))
|
||||
strip_tab.child(
|
||||
icon(role)
|
||||
.size(theme.sizes.medium.icon_size * 0.75)
|
||||
.color(label_color),
|
||||
)
|
||||
}),
|
||||
)
|
||||
.child(strip_tab_label(tab.label.clone(), selected, chrome));
|
||||
.child(strip_tab_label(tab.label.clone(), selected, theme));
|
||||
|
||||
if !tab.disabled {
|
||||
let selected_index = chrome.selected;
|
||||
strip_tab = strip_tab.cursor_pointer().on_click({
|
||||
let on_change = on_change.clone();
|
||||
let focus = focus.clone();
|
||||
@@ -274,26 +249,13 @@ fn render_tab(
|
||||
strip_tab.into_any_element()
|
||||
}
|
||||
|
||||
fn strip_tab_label(label: SharedString, selected: bool, chrome: &TabsChrome) -> AnyElement {
|
||||
fn strip_tab_label(label: SharedString, selected: bool, theme: &Theme) -> AnyElement {
|
||||
div()
|
||||
.text_color(if selected {
|
||||
chrome.primary
|
||||
theme.ramps.primary.base
|
||||
} else {
|
||||
chrome.foreground
|
||||
theme.colors.foreground
|
||||
})
|
||||
.child(label)
|
||||
.into_any_element()
|
||||
}
|
||||
|
||||
/// The next selectable tab in the direction.
|
||||
fn adjacent(selectable: &[usize], selected: usize, forward: bool) -> Option<usize> {
|
||||
if forward {
|
||||
selectable.iter().copied().find(|index| *index > selected)
|
||||
} else {
|
||||
selectable
|
||||
.iter()
|
||||
.copied()
|
||||
.rev()
|
||||
.find(|index| *index < selected)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user