Fix hit boxes and hover styles for new buttons

co-authored-by: conrad <conrad.irwin@gmail.com>
This commit is contained in:
Mikayla 2023-10-04 14:43:58 -07:00
parent 73e78a2257
commit 2f3c3d510f
No known key found for this signature in database
2 changed files with 29 additions and 7 deletions

View file

@ -1937,6 +1937,8 @@ impl CollabPanel {
is_dragged_over = true; is_dragged_over = true;
} }
let has_messages_notification = channel.unseen_message_id.is_some();
MouseEventHandler::new::<Channel, _>(ix, cx, |state, cx| { MouseEventHandler::new::<Channel, _>(ix, cx, |state, cx| {
let row_hovered = state.hovered(); let row_hovered = state.hovered();
@ -2022,24 +2024,33 @@ impl CollabPanel {
.flex(1., true) .flex(1., true)
}) })
.with_child( .with_child(
MouseEventHandler::new::<ChannelNote, _>(ix, cx, move |_, _| { MouseEventHandler::new::<ChannelNote, _>(ix, cx, move |mouse_state, _| {
let container_style = collab_theme
.disclosure
.button
.style_for(mouse_state)
.container;
if channel.unseen_message_id.is_some() { if channel.unseen_message_id.is_some() {
Svg::new("icons/conversations.svg") Svg::new("icons/conversations.svg")
.with_color(collab_theme.channel_note_active_color) .with_color(collab_theme.channel_note_active_color)
.constrained() .constrained()
.with_width(collab_theme.channel_hash.width) .with_width(collab_theme.channel_hash.width)
.contained()
.with_style(container_style)
.with_uniform_padding(4.)
.into_any() .into_any()
} else if row_hovered { } else if row_hovered {
Svg::new("icons/conversations.svg") Svg::new("icons/conversations.svg")
.with_color(collab_theme.channel_hash.color) .with_color(collab_theme.channel_hash.color)
.constrained() .constrained()
.with_width(collab_theme.channel_hash.width) .with_width(collab_theme.channel_hash.width)
.contained()
.with_style(container_style)
.with_uniform_padding(4.)
.into_any() .into_any()
} else { } else {
Empty::new() Empty::new().into_any()
.constrained()
.with_width(collab_theme.channel_hash.width)
.into_any()
} }
}) })
.on_click(MouseButton::Left, move |_, this, cx| { .on_click(MouseButton::Left, move |_, this, cx| {
@ -2056,7 +2067,12 @@ impl CollabPanel {
.with_margin_right(4.), .with_margin_right(4.),
) )
.with_child( .with_child(
MouseEventHandler::new::<ChannelCall, _>(ix, cx, move |_, cx| { MouseEventHandler::new::<ChannelCall, _>(ix, cx, move |mouse_state, cx| {
let container_style = collab_theme
.disclosure
.button
.style_for(mouse_state)
.container;
if row_hovered || channel.unseen_note_version.is_some() { if row_hovered || channel.unseen_note_version.is_some() {
Svg::new("icons/file.svg") Svg::new("icons/file.svg")
.with_color(if channel.unseen_note_version.is_some() { .with_color(if channel.unseen_note_version.is_some() {
@ -2067,6 +2083,8 @@ impl CollabPanel {
.constrained() .constrained()
.with_width(collab_theme.channel_hash.width) .with_width(collab_theme.channel_hash.width)
.contained() .contained()
.with_style(container_style)
.with_uniform_padding(4.)
.with_margin_right(collab_theme.channel_hash.container.margin.left) .with_margin_right(collab_theme.channel_hash.container.margin.left)
.with_tooltip::<NotesTooltip>( .with_tooltip::<NotesTooltip>(
ix as usize, ix as usize,
@ -2076,13 +2094,16 @@ impl CollabPanel {
cx, cx,
) )
.into_any() .into_any()
} else { } else if has_messages_notification {
Empty::new() Empty::new()
.constrained() .constrained()
.with_width(collab_theme.channel_hash.width) .with_width(collab_theme.channel_hash.width)
.contained() .contained()
.with_uniform_padding(4.)
.with_margin_right(collab_theme.channel_hash.container.margin.left) .with_margin_right(collab_theme.channel_hash.container.margin.left)
.into_any() .into_any()
} else {
Empty::new().into_any()
} }
}) })
.on_click(MouseButton::Left, move |_, this, cx| { .on_click(MouseButton::Left, move |_, this, cx| {

View file

@ -21,6 +21,7 @@ export default function contacts_panel(): any {
...text(theme.lowest, "sans", "base"), ...text(theme.lowest, "sans", "base"),
button: icon_button({ variant: "ghost" }), button: icon_button({ variant: "ghost" }),
spacing: 4, spacing: 4,
padding: 4,
}, },
} }
} }