Skip to content

Commit ba59626

Browse files
danilo-lealdanilo-leal
authored
ui: Remove the ToggleButton component (#43115)
This PR removes the old `ToggleButton` component, replacing it with the newer `ToggleButtonGroup` component in the couple of places that used to use it. Ended up also adding a few more methods to the newer toggle button group so the UI for the extensions page and the debugger main picker didn't get visually impacted much. Then, as I was already in the extensions page, decided to bake in some reasonably small UI improvements to it as well. Release Notes: - N/A
1 parent 1fab43d commit ba59626

File tree

6 files changed

+174
-532
lines changed

6 files changed

+174
-532
lines changed

‎crates/debugger_ui/src/new_process_modal.rs‎

Lines changed: 60 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,9 @@ use settings::Settings;
2525
use task::{DebugScenario, RevealTarget, VariableName, ZedDebugConfig};
2626
use theme::ThemeSettings;
2727
use ui::{
28-
ActiveTheme, Button, ButtonCommon, ButtonSize, CheckboxWithLabel, Clickable, Color, Context,
29-
ContextMenu, Disableable, DropdownMenu, FluentBuilder, Icon, IconName, IconSize,
30-
IconWithIndicator, Indicator, InteractiveElement, IntoElement, KeyBinding, Label,
31-
LabelCommon as _, LabelSize, ListItem, ListItemSpacing, ParentElement, RenderOnce,
32-
SharedString, Styled, StyledExt, ToggleButton, ToggleState, Toggleable, Tooltip, Window, div,
33-
h_flex, relative, rems, v_flex,
28+
CheckboxWithLabel, ContextMenu, DropdownMenu, FluentBuilder, IconWithIndicator, Indicator,
29+
KeyBinding, ListItem, ListItemSpacing, ToggleButtonGroup, ToggleButtonSimple, ToggleState,
30+
Tooltip, prelude::*,
3431
};
3532
use util::{ResultExt, rel_path::RelPath, shell::ShellKind};
3633
use workspace::{ModalView, Workspace, notifications::DetachAndPromptErr, pane};
@@ -620,72 +617,64 @@ impl Render for NewProcessModal {
620617
.border_b_1()
621618
.border_color(cx.theme().colors().border_variant)
622619
.child(
623-
ToggleButton::new(
624-
"debugger-session-ui-tasks-button",
625-
NewProcessMode::Task.to_string(),
626-
)
627-
.size(ButtonSize::Default)
628-
.toggle_state(matches!(self.mode, NewProcessMode::Task))
629-
.style(ui::ButtonStyle::Subtle)
630-
.on_click(cx.listener(|this, _, window, cx| {
631-
this.mode = NewProcessMode::Task;
632-
this.mode_focus_handle(cx).focus(window);
633-
cx.notify();
634-
}))
635-
.tooltip(Tooltip::text("Run predefined task"))
636-
.first(),
637-
)
638-
.child(
639-
ToggleButton::new(
640-
"debugger-session-ui-launch-button",
641-
NewProcessMode::Debug.to_string(),
642-
)
643-
.size(ButtonSize::Default)
644-
.style(ui::ButtonStyle::Subtle)
645-
.toggle_state(matches!(self.mode, NewProcessMode::Debug))
646-
.on_click(cx.listener(|this, _, window, cx| {
647-
this.mode = NewProcessMode::Debug;
648-
this.mode_focus_handle(cx).focus(window);
649-
cx.notify();
650-
}))
651-
.tooltip(Tooltip::text("Start a predefined debug scenario"))
652-
.middle(),
653-
)
654-
.child(
655-
ToggleButton::new(
656-
"debugger-session-ui-attach-button",
657-
NewProcessMode::Attach.to_string(),
658-
)
659-
.size(ButtonSize::Default)
660-
.toggle_state(matches!(self.mode, NewProcessMode::Attach))
661-
.style(ui::ButtonStyle::Subtle)
662-
.on_click(cx.listener(|this, _, window, cx| {
663-
this.mode = NewProcessMode::Attach;
664-
665-
if let Some(debugger) = this.debugger.as_ref() {
666-
Self::update_attach_picker(&this.attach_mode, debugger, window, cx);
667-
}
668-
this.mode_focus_handle(cx).focus(window);
669-
cx.notify();
670-
}))
671-
.tooltip(Tooltip::text("Attach the debugger to a running process"))
672-
.middle(),
673-
)
674-
.child(
675-
ToggleButton::new(
676-
"debugger-session-ui-custom-button",
677-
NewProcessMode::Launch.to_string(),
620+
ToggleButtonGroup::single_row(
621+
"debugger-mode-buttons",
622+
[
623+
ToggleButtonSimple::new(
624+
NewProcessMode::Task.to_string(),
625+
cx.listener(|this, _, window, cx| {
626+
this.mode = NewProcessMode::Task;
627+
this.mode_focus_handle(cx).focus(window);
628+
cx.notify();
629+
}),
630+
)
631+
.tooltip(Tooltip::text("Run predefined task")),
632+
ToggleButtonSimple::new(
633+
NewProcessMode::Debug.to_string(),
634+
cx.listener(|this, _, window, cx| {
635+
this.mode = NewProcessMode::Debug;
636+
this.mode_focus_handle(cx).focus(window);
637+
cx.notify();
638+
}),
639+
)
640+
.tooltip(Tooltip::text("Start a predefined debug scenario")),
641+
ToggleButtonSimple::new(
642+
NewProcessMode::Attach.to_string(),
643+
cx.listener(|this, _, window, cx| {
644+
this.mode = NewProcessMode::Attach;
645+
646+
if let Some(debugger) = this.debugger.as_ref() {
647+
Self::update_attach_picker(
648+
&this.attach_mode,
649+
debugger,
650+
window,
651+
cx,
652+
);
653+
}
654+
this.mode_focus_handle(cx).focus(window);
655+
cx.notify();
656+
}),
657+
)
658+
.tooltip(Tooltip::text("Attach the debugger to a running process")),
659+
ToggleButtonSimple::new(
660+
NewProcessMode::Launch.to_string(),
661+
cx.listener(|this, _, window, cx| {
662+
this.mode = NewProcessMode::Launch;
663+
this.mode_focus_handle(cx).focus(window);
664+
cx.notify();
665+
}),
666+
)
667+
.tooltip(Tooltip::text("Launch a new process with a debugger")),
668+
],
678669
)
679-
.size(ButtonSize::Default)
680-
.toggle_state(matches!(self.mode, NewProcessMode::Launch))
681-
.style(ui::ButtonStyle::Subtle)
682-
.on_click(cx.listener(|this, _, window, cx| {
683-
this.mode = NewProcessMode::Launch;
684-
this.mode_focus_handle(cx).focus(window);
685-
cx.notify();
686-
}))
687-
.tooltip(Tooltip::text("Launch a new process with a debugger"))
688-
.last(),
670+
.label_size(LabelSize::Default)
671+
.auto_width()
672+
.selected_index(match self.mode {
673+
NewProcessMode::Task => 0,
674+
NewProcessMode::Debug => 1,
675+
NewProcessMode::Attach => 2,
676+
NewProcessMode::Launch => 3,
677+
}),
689678
),
690679
)
691680
.child(v_flex().child(self.render_mode(window, cx)))

‎crates/extensions_ui/src/extensions_ui.rs‎

Lines changed: 77 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ use settings::{Settings, SettingsContent};
2424
use strum::IntoEnumIterator as _;
2525
use theme::ThemeSettings;
2626
use ui::{
27-
Banner, Chip, ContextMenu, Divider, PopoverMenu, ScrollableHandle, Switch, ToggleButton,
28-
Tooltip, WithScrollbar, prelude::*,
27+
Banner, Chip, ContextMenu, Divider, PopoverMenu, ScrollableHandle, Switch, ToggleButtonGroup,
28+
ToggleButtonGroupSize, ToggleButtonGroupStyle, ToggleButtonSimple, Tooltip, WithScrollbar,
29+
prelude::*,
2930
};
3031
use vim_mode_setting::VimModeSetting;
3132
use workspace::{
@@ -805,37 +806,47 @@ impl ExtensionsPage {
805806
)
806807
.child(
807808
h_flex()
808-
.gap_1()
809809
.justify_between()
810810
.child(
811-
Icon::new(IconName::Person)
812-
.size(IconSize::XSmall)
813-
.color(Color::Muted),
814-
)
815-
.child(
816-
Label::new(extension.manifest.authors.join(", "))
817-
.size(LabelSize::Small)
818-
.color(Color::Muted)
819-
.truncate(),
811+
h_flex()
812+
.gap_1()
813+
.child(
814+
Icon::new(IconName::Person)
815+
.size(IconSize::XSmall)
816+
.color(Color::Muted),
817+
)
818+
.child(
819+
Label::new(extension.manifest.authors.join(", "))
820+
.size(LabelSize::Small)
821+
.color(Color::Muted)
822+
.truncate(),
823+
),
820824
)
821825
.child(
822826
h_flex()
823-
.ml_auto()
824827
.gap_1()
825-
.child(
828+
.child({
829+
let repo_url_for_tooltip = repository_url.clone();
830+
826831
IconButton::new(
827832
SharedString::from(format!("repository-{}", extension.id)),
828833
IconName::Github,
829834
)
830835
.icon_size(IconSize::Small)
831-
.on_click(cx.listener({
832-
let repository_url = repository_url.clone();
836+
.tooltip(move |_, cx| {
837+
Tooltip::with_meta(
838+
"Visit Extension Repository",
839+
None,
840+
repo_url_for_tooltip.clone(),
841+
cx,
842+
)
843+
})
844+
.on_click(cx.listener(
833845
move |_, _, _, cx| {
834846
cx.open_url(&repository_url);
835-
}
836-
}))
837-
.tooltip(Tooltip::text(repository_url)),
838-
)
847+
},
848+
))
849+
})
839850
.child(
840851
PopoverMenu::new(SharedString::from(format!(
841852
"more-{}",
@@ -1136,15 +1147,14 @@ impl ExtensionsPage {
11361147
h_flex()
11371148
.key_context(key_context)
11381149
.h_8()
1139-
.flex_1()
11401150
.min_w(rems_from_px(384.))
1151+
.flex_1()
11411152
.pl_1p5()
11421153
.pr_2()
1143-
.py_1()
11441154
.gap_2()
11451155
.border_1()
11461156
.border_color(editor_border)
1147-
.rounded_lg()
1157+
.rounded_md()
11481158
.child(Icon::new(IconName::MagnifyingGlass).color(Color::Muted))
11491159
.child(self.render_text_input(&self.query_editor, cx))
11501160
}
@@ -1544,13 +1554,13 @@ impl Render for ExtensionsPage {
15441554
.child(
15451555
h_flex()
15461556
.w_full()
1547-
.gap_2()
1557+
.gap_1p5()
15481558
.justify_between()
15491559
.child(Headline::new("Extensions").size(HeadlineSize::XLarge))
15501560
.child(
15511561
Button::new("install-dev-extension", "Install Dev Extension")
1552-
.style(ButtonStyle::Filled)
1553-
.size(ButtonSize::Large)
1562+
.style(ButtonStyle::Outlined)
1563+
.size(ButtonSize::Medium)
15541564
.on_click(|_event, window, cx| {
15551565
window.dispatch_action(Box::new(InstallDevExtension), cx)
15561566
}),
@@ -1559,58 +1569,51 @@ impl Render for ExtensionsPage {
15591569
.child(
15601570
h_flex()
15611571
.w_full()
1562-
.gap_4()
15631572
.flex_wrap()
1573+
.gap_2()
15641574
.child(self.render_search(cx))
15651575
.child(
1566-
h_flex()
1567-
.child(
1568-
ToggleButton::new("filter-all", "All")
1569-
.style(ButtonStyle::Filled)
1570-
.size(ButtonSize::Large)
1571-
.toggle_state(self.filter == ExtensionFilter::All)
1572-
.on_click(cx.listener(|this, _event, _, cx| {
1573-
this.filter = ExtensionFilter::All;
1574-
this.filter_extension_entries(cx);
1575-
this.scroll_to_top(cx);
1576-
}))
1577-
.tooltip(move |_, cx| {
1578-
Tooltip::simple("Show all extensions", cx)
1579-
})
1580-
.first(),
1581-
)
1582-
.child(
1583-
ToggleButton::new("filter-installed", "Installed")
1584-
.style(ButtonStyle::Filled)
1585-
.size(ButtonSize::Large)
1586-
.toggle_state(self.filter == ExtensionFilter::Installed)
1587-
.on_click(cx.listener(|this, _event, _, cx| {
1588-
this.filter = ExtensionFilter::Installed;
1589-
this.filter_extension_entries(cx);
1590-
this.scroll_to_top(cx);
1591-
}))
1592-
.tooltip(move |_, cx| {
1593-
Tooltip::simple("Show installed extensions", cx)
1594-
})
1595-
.middle(),
1576+
div().child(
1577+
ToggleButtonGroup::single_row(
1578+
"filter-buttons",
1579+
[
1580+
ToggleButtonSimple::new(
1581+
"All",
1582+
cx.listener(|this, _event, _, cx| {
1583+
this.filter = ExtensionFilter::All;
1584+
this.filter_extension_entries(cx);
1585+
this.scroll_to_top(cx);
1586+
}),
1587+
),
1588+
ToggleButtonSimple::new(
1589+
"Installed",
1590+
cx.listener(|this, _event, _, cx| {
1591+
this.filter = ExtensionFilter::Installed;
1592+
this.filter_extension_entries(cx);
1593+
this.scroll_to_top(cx);
1594+
}),
1595+
),
1596+
ToggleButtonSimple::new(
1597+
"Not Installed",
1598+
cx.listener(|this, _event, _, cx| {
1599+
this.filter = ExtensionFilter::NotInstalled;
1600+
this.filter_extension_entries(cx);
1601+
this.scroll_to_top(cx);
1602+
}),
1603+
),
1604+
],
15961605
)
1597-
.child(
1598-
ToggleButton::new("filter-not-installed", "Not Installed")
1599-
.style(ButtonStyle::Filled)
1600-
.size(ButtonSize::Large)
1601-
.toggle_state(
1602-
self.filter == ExtensionFilter::NotInstalled,
1603-
)
1604-
.on_click(cx.listener(|this, _event, _, cx| {
1605-
this.filter = ExtensionFilter::NotInstalled;
1606-
this.filter_extension_entries(cx);
1607-
this.scroll_to_top(cx);
1608-
}))
1609-
.tooltip(move |_, cx| {
1610-
Tooltip::simple("Show not installed extensions", cx)
1611-
})
1612-
.last(),
1613-
),
1606+
.style(ToggleButtonGroupStyle::Outlined)
1607+
.size(ToggleButtonGroupSize::Custom(rems_from_px(30.))) // Perfectly matches the input
1608+
.label_size(LabelSize::Default)
1609+
.auto_width()
1610+
.selected_index(match self.filter {
1611+
ExtensionFilter::All => 0,
1612+
ExtensionFilter::Installed => 1,
1613+
ExtensionFilter::NotInstalled => 2,
1614+
})
1615+
.into_any_element(),
1616+
),
16141617
),
16151618
),
16161619
)

0 commit comments

Comments
 (0)