dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve PopupMenu style (#108)

Browse source 
<img width="216" alt="image"
src="https://github.com/user-attachments/assets/9dcfd30f-62cc-41ff-a97d-f69b79bd997c">
<img width="346" alt="image"
src="https://github.com/user-attachments/assets/c7e564e9-c0f9-4282-9df1-9c2cd92efea9">
This commit is contained in:
Jason Lee 2024-08-05 21:23:57 +08:00 committed by GitHub
parent 4b61c3c25a
commit a5989f6a7c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/ui/src/input/input.rs
View file

@ -8,6 +8,7 @@ use std::ops::Range;
use super::blink_cursor::BlinkCursor; use super::blink_cursor::BlinkCursor;
use super::history::History; use super::history::History;
use crate::button::{Button, ButtonStyle}; use crate::button::{Button, ButtonStyle};
use crate::context_menu::ContextMenuExt;
use crate::indicator::Indicator; use crate::indicator::Indicator;
use crate::styled_ext::StyleSized; use crate::styled_ext::StyleSized;
use crate::theme::ActiveTheme; use crate::theme::ActiveTheme;
@ -990,6 +991,7 @@ impl Element for TextElement {
impl Render for TextInput { impl Render for TextInput {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement { fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let focus_handle = self.focus_handle.clone();
let focused = self.focus_handle.is_focused(cx); let focused = self.focus_handle.is_focused(cx);
let prefix = self.prefix.as_ref().map(|build| build(cx)); let prefix = self.prefix.as_ref().map(|build| build(cx));

18
crates/ui/src/popup_menu.rs
View file

@ -7,7 +7,7 @@ use gpui::{
VisualContext as _, WindowContext, VisualContext as _, WindowContext,
}; };
use crate::{h_flex, list::ListItem, theme::ActiveTheme, v_flex, Icon, IconName}; use crate::{h_flex, list::ListItem, theme::ActiveTheme, v_flex, Icon, IconName, Size};
actions!(menu, [Confirm, Dismiss, SelectNext, SelectPrev]); actions!(menu, [Confirm, Dismiss, SelectNext, SelectPrev]);
@ -34,6 +34,10 @@ impl PopupMenuItem {
fn is_clickable(&self) -> bool { fn is_clickable(&self) -> bool {
!matches!(self, PopupMenuItem::Separator) !matches!(self, PopupMenuItem::Separator)
} }
fn has_icon(&self) -> bool {
matches!(self, PopupMenuItem::Item { icon: Some(_), .. })
}
} }
pub struct PopupMenu { pub struct PopupMenu {
@ -240,6 +244,8 @@ impl Render for PopupMenu {
None None
}; };
let has_icon = self.menu_items.iter().any(|item| item.has_icon());
v_flex() v_flex()
.key_context("PopupMenu") .key_context("PopupMenu")
.track_focus(&self.focus_handle) .track_focus(&self.focus_handle)
@ -250,7 +256,7 @@ impl Render for PopupMenu {
.on_mouse_down_out(cx.listener(|this, _, cx| this.dismiss(&Dismiss, cx))) .on_mouse_down_out(cx.listener(|this, _, cx| this.dismiss(&Dismiss, cx)))
.max_h(self.max_width) .max_h(self.max_width)
.min_w(self.min_width) .min_w(self.min_width)
.p_0p5() .p_1()
.gap_y_0p5() .gap_y_0p5()
.bg(cx.theme().menu) .bg(cx.theme().menu)
.children(self.menu_items.iter_mut().enumerate().map(|(ix, item)| { .children(self.menu_items.iter_mut().enumerate().map(|(ix, item)| {
@ -274,13 +280,17 @@ impl Render for PopupMenu {
.map(|this| { .map(|this| {
this.child(div().absolute().text_sm().map(|this| { this.child(div().absolute().text_sm().map(|this| {
if let Some(icon) = icon { if let Some(icon) = icon {
this.child(icon.clone()) this.child(icon.clone().size(Size::Small).clone())
} else { } else {
this.children(icon_placeholder.clone()) this.children(icon_placeholder.clone())
} }
})) }))
}) })
.child(div().pl_6().pr_2().child(label.clone())), .child(
div()
.when(has_icon, |this| this.pl(px(18.)))
.child(label.clone()),
),
) )
} }
} }