Standardize button design in modal footers (#20585)

- Making sure this design and properties are the same across different
places
- No need for the `ButtonLike` here, we can use `Button` as it supports
`key_binding` and makes it for a cleaner code!
- Also, that ensures the binding is always to the right of the label,
which makes more sense
- Title-case the labels for consistency with other buttons across the
app

| File finder | Project finder |
|--------|--------|
| <img width="1136" alt="Screenshot 2024-11-13 at 09 21 06"
src="https://github.com/user-attachments/assets/dd051514-d873-4b65-a08f-af0920f2c010">
| <img width="1136" alt="Screenshot 2024-11-13 at 09 21 12"
src="https://github.com/user-attachments/assets/f958e3e7-4bfb-4752-839e-2bbc01334643">
|

Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2024-11-13 09:36:08 -03:00 committed by GitHub
parent 3b1f12af75
commit b44078781d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 41 additions and 61 deletions

View file

@ -33,8 +33,8 @@ use std::{
};
use text::Point;
use ui::{
prelude::*, ButtonLike, ContextMenu, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing,
PopoverMenu, PopoverMenuHandle, TintColor,
prelude::*, ContextMenu, HighlightedLabel, KeyBinding, ListItem, ListItemSpacing, PopoverMenu,
PopoverMenuHandle,
};
use util::{paths::PathWithPosition, post_inc, ResultExt};
use workspace::{
@ -1222,54 +1222,43 @@ impl PickerDelegate for FileFinderDelegate {
}
fn render_footer(&self, cx: &mut ViewContext<Picker<Self>>) -> Option<AnyElement> {
let menu_open = self.popover_menu_handle.is_focused(cx);
Some(
h_flex()
.w_full()
.border_t_1()
.py_2()
.pr_2()
.border_color(cx.theme().colors().border)
.p_2()
.gap_2()
.justify_end()
.border_t_1()
.border_color(cx.theme().colors().border_variant)
.child(
ButtonLike::new("open-selection")
.when_some(KeyBinding::for_action(&menu::Confirm, cx), |button, key| {
button.child(key)
})
.child(Label::new("Open"))
Button::new("open-selection", "Open")
.key_binding(KeyBinding::for_action(&menu::Confirm, cx))
.on_click(|_, cx| cx.dispatch_action(menu::Confirm.boxed_clone())),
)
.child(
div().pl_2().child(
PopoverMenu::new("menu-popover")
.with_handle(self.popover_menu_handle.clone())
.attach(gpui::AnchorCorner::TopRight)
.anchor(gpui::AnchorCorner::BottomRight)
.trigger(
ButtonLike::new("menu-trigger")
.selected(menu_open)
.selected_style(ButtonStyle::Tinted(TintColor::Accent))
.when_some(
KeyBinding::for_action_in(
&OpenMenu,
&self.focus_handle,
cx,
),
|button, key| button.child(key),
)
.child(Label::new("More actions")),
)
.menu({
move |cx| {
Some(ContextMenu::build(cx, move |menu, _| {
menu.action("Split left", pane::SplitLeft.boxed_clone())
.action("Split right", pane::SplitRight.boxed_clone())
.action("Split up", pane::SplitUp.boxed_clone())
.action("Split down", pane::SplitDown.boxed_clone())
}))
}
}),
),
PopoverMenu::new("menu-popover")
.with_handle(self.popover_menu_handle.clone())
.attach(gpui::AnchorCorner::TopRight)
.anchor(gpui::AnchorCorner::BottomRight)
.trigger(
Button::new("actions-trigger", "Split Options")
.selected_label_color(Color::Accent)
.key_binding(KeyBinding::for_action_in(
&OpenMenu,
&self.focus_handle,
cx,
)),
)
.menu({
move |cx| {
Some(ContextMenu::build(cx, move |menu, _| {
menu.action("Split Left", pane::SplitLeft.boxed_clone())
.action("Split Right", pane::SplitRight.boxed_clone())
.action("Split Up", pane::SplitUp.boxed_clone())
.action("Split Down", pane::SplitDown.boxed_clone())
}))
}
}),
)
.into_any(),
)

View file

@ -23,9 +23,7 @@ use std::{
path::{Path, PathBuf},
sync::Arc,
};
use ui::{
prelude::*, tooltip_container, ButtonLike, KeyBinding, ListItem, ListItemSpacing, Tooltip,
};
use ui::{prelude::*, tooltip_container, KeyBinding, ListItem, ListItemSpacing, Tooltip};
use util::{paths::PathExt, ResultExt};
use workspace::{
CloseIntent, ModalView, OpenOptions, SerializedWorkspaceLocation, Workspace, WorkspaceId,
@ -471,27 +469,20 @@ impl PickerDelegate for RecentProjectsDelegate {
fn render_footer(&self, cx: &mut ViewContext<Picker<Self>>) -> Option<AnyElement> {
Some(
h_flex()
.border_t_1()
.py_2()
.pr_2()
.border_color(cx.theme().colors().border_variant)
.w_full()
.p_2()
.gap_2()
.justify_end()
.gap_4()
.border_t_1()
.border_color(cx.theme().colors().border_variant)
.child(
ButtonLike::new("remote")
.when_some(KeyBinding::for_action(&OpenRemote, cx), |button, key| {
button.child(key)
})
.child(Label::new("Open Remote Folder…").color(Color::Muted))
Button::new("remote", "Open Remote Folder")
.key_binding(KeyBinding::for_action(&OpenRemote, cx))
.on_click(|_, cx| cx.dispatch_action(OpenRemote.boxed_clone())),
)
.child(
ButtonLike::new("local")
.when_some(
KeyBinding::for_action(&workspace::Open, cx),
|button, key| button.child(key),
)
.child(Label::new("Open Local Folder…").color(Color::Muted))
Button::new("local", "Open Local Folder")
.key_binding(KeyBinding::for_action(&workspace::Open, cx))
.on_click(|_, cx| cx.dispatch_action(workspace::Open.boxed_clone())),
)
.into_any(),