oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement VisibleOnHover for IconButton (#3642)

Browse Source 
This PR implements the `VisibleOnHover` trait for `IconButton`s.

I noticed that in a lot of places we were wrapping an `IconButton` in an
extra `div` just so we could call `visible_on_hover` on it. By
implementing the trait on `IconButton` directly it allows us to avoid
the interstitial `div` entirely.

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers
2023-12-13 20:42:27 -05:00
committed by GitHub
parent 15f62a49f7
commit 057b235c56
6 changed files with 81 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/collab_ui2/src/chat_panel.rs
+7 -13
View File
@@ -384,7 +384,13 @@ impl ChatPanel {
.right_2()
.w_8()
.visible_on_hover("")
.child(render_remove(message_id_to_remove, cx)),
.children(message_id_to_remove.map(|message_id| {
IconButton::new(("remove", message_id), Icon::XCircle).on_click(
cx.listener(move |this, _, cx| {
this.remove_message(message_id, cx);
}),
)
})),
)
.into_any()
}
@@ -524,18 +530,6 @@ impl ChatPanel {
}
}
fn render_remove(message_id_to_remove: Option<u64>, cx: &mut ViewContext<ChatPanel>) -> AnyElement {
if let Some(message_id) = message_id_to_remove {
IconButton::new(("remove", message_id), Icon::XCircle)
.on_click(cx.listener(move |this, _, cx| {
this.remove_message(message_id, cx);
}))
.into_any_element()
} else {
div().into_any_element()
}
}
impl EventEmitter<Event> for ChatPanel {}
impl Render for ChatPanel {
crates/collab_ui2/src/collab_panel.rs
+42 -52
View File
@@ -2289,18 +2289,15 @@ impl CollabPanel {
let button = match section {
Section::ActiveCall => channel_link.map(|channel_link| {
let channel_link_copy = channel_link.clone();
div()
IconButton::new("channel-link", Icon::Copy)
.icon_size(IconSize::Small)
.size(ButtonSize::None)
.visible_on_hover("section-header")
.child(
IconButton::new("channel-link", Icon::Copy)
.icon_size(IconSize::Small)
.size(ButtonSize::None)
.on_click(move |_, cx| {
let item = ClipboardItem::new(channel_link_copy.clone());
cx.write_to_clipboard(item)
})
.tooltip(|cx| Tooltip::text("Copy channel link", cx)),
)
.on_click(move |_, cx| {
let item = ClipboardItem::new(channel_link_copy.clone());
cx.write_to_clipboard(item)
})
.tooltip(|cx| Tooltip::text("Copy channel link", cx))
.into_any_element()
}),
Section::Contacts => Some(
@@ -2380,17 +2377,16 @@ impl CollabPanel {
})
.when(!calling, |el| {
el.child(
div().visible_on_hover("").child(
IconButton::new("remove_contact", Icon::Close)
.icon_color(Color::Muted)
.tooltip(|cx| Tooltip::text("Remove Contact", cx))
.on_click(cx.listener({
let github_login = github_login.clone();
move |this, _, cx| {
this.remove_contact(user_id, &github_login, cx);
}
})),
),
IconButton::new("remove_contact", Icon::Close)
.icon_color(Color::Muted)
.visible_on_hover("")
.tooltip(|cx| Tooltip::text("Remove Contact", cx))
.on_click(cx.listener({
let github_login = github_login.clone();
move |this, _, cx| {
this.remove_contact(user_id, &github_login, cx);
}
})),
)
}),
)
@@ -2619,38 +2615,32 @@ impl CollabPanel {
.end_slot(
h_stack()
.child(
div()
.id("channel_chat")
.when(!has_messages_notification, |el| el.visible_on_hover(""))
.child(
IconButton::new("channel_chat", Icon::MessageBubbles)
.icon_color(if has_messages_notification {
Color::Default
} else {
Color::Muted
})
.on_click(cx.listener(move |this, _, cx| {
this.join_channel_chat(channel_id, cx)
}))
.tooltip(|cx| Tooltip::text("Open channel chat", cx)),
),
IconButton::new("channel_chat", Icon::MessageBubbles)
.icon_color(if has_messages_notification {
Color::Default
} else {
Color::Muted
})
.when(!has_messages_notification, |this| {
this.visible_on_hover("")
})
.on_click(cx.listener(move |this, _, cx| {
this.join_channel_chat(channel_id, cx)
}))
.tooltip(|cx| Tooltip::text("Open channel chat", cx)),
)
.child(
div()
.id("channel_notes")
.when(!has_notes_notification, |el| el.visible_on_hover(""))
.child(
IconButton::new("channel_notes", Icon::File)
.icon_color(if has_notes_notification {
Color::Default
} else {
Color::Muted
})
.on_click(cx.listener(move |this, _, cx| {
this.open_channel_notes(channel_id, cx)
}))
.tooltip(|cx| Tooltip::text("Open channel notes", cx)),
),
IconButton::new("channel_notes", Icon::File)
.icon_color(if has_notes_notification {
Color::Default
} else {
Color::Muted
})
.when(!has_notes_notification, |this| this.visible_on_hover(""))
.on_click(cx.listener(move |this, _, cx| {
this.open_channel_notes(channel_id, cx)
}))
.tooltip(|cx| Tooltip::text("Open channel notes", cx)),
),
),
)