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.
This commit is contained in:
Max Brunsfeld 2022-04-28 10:59:32 -07:00
parent e88156645d
commit 772f4579fc
14 changed files with 431 additions and 765 deletions

View file

@ -175,17 +175,21 @@ impl View for LspStatus {
}
let mut element = MouseEventHandler::new::<Self, _, _>(0, cx, |state, cx| {
let hovered = state.hovered && handler.is_some();
let theme = &cx.global::<Settings>().theme;
let style = &theme.workspace.status_bar.lsp_status;
let theme = &cx
.global::<Settings>()
.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()
});

View file

@ -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::<Self, _, _>(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)