Initial public release of Warp.

Repo-Sync-Origin: warpdotdev/warp-internal@12af1d983b

app/src/view_components/compact_dropdown.rs

@@ -0,0 +1,301 @@
+use super::dropdown::DropdownAction;
+use crate::{
+    appearance::Appearance,
+    menu::{Event as MenuEvent, Menu, MenuItem, MenuItemFields, MenuVariant},
+    themes::theme::Fill,
+    ui_components::icons::Icon,
+};
+use pathfinder_geometry::vector::vec2f;
+use warpui::{
+    elements::{
+        Border, ChildAnchor, ConstrainedBox, CornerRadius, CrossAxisAlignment, Flex,
+        Icon as WarpUiIcon, MainAxisAlignment, MouseStateHandle, OffsetPositioning, ParentElement,
+        PositionedElementAnchor, PositionedElementOffsetBounds, Radius, SavePosition, Stack,
+    },
+    presenter::ChildView,
+    ui_components::{
+        button::ButtonVariant,
+        components::{Coords, UiComponent, UiComponentStyles},
+    },
+    Action, AppContext, BlurContext, Element, Entity, SingletonEntity, TypedActionView, View,
+    ViewContext, ViewHandle,
+};
+
+#[cfg(test)]
+#[path = "compact_dropdown_tests.rs"]
+mod tests;
+
+/// A compact dropdown view. Each item has a corresponding icon, which is shown
+/// when the dropdown is closed.
+///
+/// This is useful instead of [`crate::dropdown::Dropdown`] when showing a
+/// dropdown alongside other controls, such as in a formatting UI.
+pub struct CompactDropdown<A: Action + Clone> {
+    /// Whether the dropdown is open.
+    is_expanded: bool,
+    /// Mouse state for the dropdown button.
+    top_bar_mouse_state: MouseStateHandle,
+    /// Dropdown menu.
+    dropdown: ViewHandle<Menu<DropdownAction<A>>>,
+    /// The size that icons are scaled to. Defaults to the UI font size if not set.
+    icon_size: Option<f32>,
+}
+
+pub struct CompactDropdownItem<A: Action + Clone> {
+    /// Icon identifier for this item.
+    icon: Icon,
+    /// Optional override color for the icon.
+    icon_color: Option<Fill>,
+    /// Text to display for this item when the dropdown is open.
+    display_text: String,
+    /// Typed action dispatched when this item is selected.
+    action: A,
+}
+
+impl<A: Action + Clone> CompactDropdown<A> {
+    /// Create a new, empty compact dropdown. The [`MenuVariant`] determines whether or not the
+    /// dropdown is scrollable when expanded.
+    pub fn new(menu_variant: MenuVariant, ctx: &mut ViewContext<Self>) -> Self {
+        let dropdown = ctx.add_typed_action_view(|ctx| {
+            let theme = Appearance::as_ref(ctx).theme();
+            Menu::new()
+                .with_menu_variant(menu_variant)
+                .with_border(Border::all(1.).with_border_fill(theme.outline()))
+                .prevent_interaction_with_other_elements()
+        });
+
+        ctx.subscribe_to_view(&dropdown, move |me, _, event, ctx| {
+            me.handle_menu_event(event, ctx);
+        });
+
+        Self {
+            is_expanded: false,
+            dropdown,
+            top_bar_mouse_state: Default::default(),
+            icon_size: None,
+        }
+    }
+
+    /// Sets the size of the icons in the dropdown top bar. This defaults
+    /// to the UI font size.
+    pub fn set_icon_size(&mut self, icon_size: f32) {
+        self.icon_size = Some(icon_size);
+    }
+
+    /// Replaces the items in the dropdown.
+    pub fn set_items(
+        &mut self,
+        items: impl IntoIterator<Item = CompactDropdownItem<A>>,
+        ctx: &mut ViewContext<Self>,
+    ) {
+        self.dropdown.update(ctx, |dropdown, ctx| {
+            dropdown.set_items(items.into_iter().map(CompactDropdownItem::menu_item), ctx);
+        });
+        ctx.notify();
+    }
+
+    /// Change the selected item by name, if it exists.
+    pub fn set_selected_by_name(
+        &mut self,
+        selected_item: impl AsRef<str>,
+        ctx: &mut ViewContext<Self>,
+    ) {
+        self.dropdown.update(ctx, |dropdown, ctx| {
+            dropdown.set_selected_by_name(selected_item, ctx);
+            ctx.notify();
+        });
+        ctx.notify();
+    }
+
+    /// Render an icon at the configured icon size.
+    fn render_sized_icon(&self, appearance: &Appearance, icon: WarpUiIcon) -> Box<dyn Element> {
+        let icon_size = self.icon_size.unwrap_or(appearance.ui_font_size());
+        ConstrainedBox::new(icon.finish())
+            .with_width(icon_size)
+            .with_height(icon_size)
+            .finish()
+    }
+
+    /// Render the top bar, the part of the dropdown that is always visible.
+    fn render_top_bar(&self, app: &AppContext) -> Box<dyn Element> {
+        let appearance = Appearance::as_ref(app);
+
+        let mut button_label = Flex::row()
+            .with_main_axis_alignment(MainAxisAlignment::SpaceBetween)
+            .with_cross_axis_alignment(CrossAxisAlignment::Center);
+
+        if let Some(MenuItem::Item(fields)) = self.dropdown.as_ref(app).selected_item() {
+            if let Some(icon) = fields.icon() {
+                let icon_color = fields
+                    .override_icon_color()
+                    .unwrap_or_else(|| appearance.theme().active_ui_text_color());
+                button_label
+                    .add_child(self.render_sized_icon(appearance, icon.to_warpui_icon(icon_color)));
+            }
+        }
+
+        button_label.add_child(self.render_sized_icon(
+            appearance,
+            WarpUiIcon::new(
+                "bundled/svg/chevron-down.svg",
+                appearance.theme().active_ui_text_color(),
+            ),
+        ));
+
+        let mut top_bar = appearance
+            .ui_builder()
+            .button(ButtonVariant::Text, self.top_bar_mouse_state.clone())
+            .with_custom_label(button_label.finish())
+            .set_clicked_styles(None)
+            .with_style(UiComponentStyles {
+                padding: Some(Coords::uniform(4.)),
+                border_radius: Some(CornerRadius::with_all(Radius::Pixels(4.))),
+                ..Default::default()
+            })
+            .with_hovered_styles(UiComponentStyles {
+                background: Some(appearance.theme().surface_3().into()),
+                ..Default::default()
+            })
+            .build();
+
+        // See the Dropdown implementation for why this callback is only added
+        // if the dropdown is not expanded.
+        if !self.is_expanded {
+            top_bar = top_bar.on_click(|ctx, _, _| {
+                ctx.dispatch_typed_action(DropdownAction::<A>::ToggleExpanded);
+            });
+        }
+
+        SavePosition::new(top_bar.finish(), &self.top_bar_label()).finish()
+    }
+
+    /// Saved position label for the top bar, used to position the expanded menu.
+    fn top_bar_label(&self) -> String {
+        format!("compact_dropdown_top_bar_{}", self.dropdown.id())
+    }
+
+    fn handle_menu_event(&mut self, event: &MenuEvent, ctx: &mut ViewContext<Self>) {
+        match event {
+            MenuEvent::Close { via_select_item: _ } => self.close(ctx),
+            MenuEvent::ItemSelected => {
+                // If the selection changes, we should re-render, but don't need
+                // to do anything else unless the item is actively clicked.
+                ctx.notify();
+            }
+            MenuEvent::ItemHovered => {}
+        }
+    }
+
+    /// Toggles whether or not the dropdown is expanded.
+    fn toggle_expanded(&mut self, ctx: &mut ViewContext<Self>) {
+        self.is_expanded = !self.is_expanded;
+        if self.is_expanded {
+            ctx.focus(&self.dropdown);
+        }
+        ctx.notify();
+    }
+
+    fn focus(&mut self, ctx: &mut ViewContext<Self>) {
+        ctx.focus(&self.dropdown);
+        ctx.notify();
+    }
+
+    /// Adapter between [`MenuItem`] click callbacks and the parent action type.
+    /// When a dropdown menu item is selected, we dispatch its action and close
+    /// the dropdown.
+    fn select_action_and_close(&mut self, action: &A, ctx: &mut ViewContext<Self>) {
+        ctx.dispatch_typed_action(action);
+        self.close(ctx);
+    }
+
+    /// Close the dropdown.
+    fn close(&mut self, ctx: &mut ViewContext<Self>) {
+        self.is_expanded = false;
+        ctx.notify();
+        ctx.emit(CompactDropdownEvent::Close);
+    }
+}
+
+impl<A: Action + Clone> Entity for CompactDropdown<A> {
+    type Event = CompactDropdownEvent;
+}
+
+impl<A: Action + Clone> View for CompactDropdown<A> {
+    fn ui_name() -> &'static str {
+        "CompactDropdown"
+    }
+
+    fn render(&self, app: &AppContext) -> Box<dyn Element> {
+        let mut dropdown_stack = Stack::new().with_child(self.render_top_bar(app));
+
+        if self.is_expanded {
+            dropdown_stack.add_positioned_overlay_child(
+                ChildView::new(&self.dropdown).finish(),
+                OffsetPositioning::offset_from_save_position_element(
+                    self.top_bar_label(),
+                    vec2f(0., 0.),
+                    PositionedElementOffsetBounds::WindowByPosition,
+                    PositionedElementAnchor::BottomLeft,
+                    ChildAnchor::TopLeft,
+                ),
+            );
+        }
+
+        dropdown_stack.finish()
+    }
+
+    fn on_blur(&mut self, blur_ctx: &BlurContext, ctx: &mut ViewContext<Self>) {
+        if blur_ctx.is_self_blurred() {
+            self.close(ctx);
+        }
+    }
+}
+
+impl<A: Action + Clone> TypedActionView for CompactDropdown<A> {
+    type Action = DropdownAction<A>;
+
+    fn handle_action(&mut self, action: &DropdownAction<A>, ctx: &mut ViewContext<Self>) {
+        match action {
+            DropdownAction::Focus(_) => self.focus(ctx),
+            DropdownAction::Close => self.close(ctx),
+            DropdownAction::SelectActionAndClose(action) => {
+                self.select_action_and_close(action, ctx)
+            }
+            DropdownAction::ToggleExpanded => self.toggle_expanded(ctx),
+        }
+    }
+}
+
+impl<A: Action + Clone> CompactDropdownItem<A> {
+    pub fn new(icon: Icon, display_text: impl Into<String>, action: A) -> Self {
+        Self {
+            display_text: display_text.into(),
+            icon,
+            icon_color: None,
+            action,
+        }
+    }
+
+    /// Override the fill of the item's icon. If not set, the default is to
+    /// match the active text color.
+    pub fn with_icon_color(mut self, color: Fill) -> Self {
+        self.icon_color = Some(color);
+        self
+    }
+
+    fn menu_item(self) -> MenuItem<DropdownAction<A>> {
+        let mut item = MenuItemFields::new(self.display_text)
+            .with_icon(self.icon)
+            .with_on_select_action(DropdownAction::SelectActionAndClose(self.action));
+        if let Some(color) = self.icon_color {
+            item = item.with_override_icon_color(color);
+        }
+        item.into_item()
+    }
+}
+
+/// Events sent from the [`CompactDropdown`] to its parent.
+pub enum CompactDropdownEvent {
+    /// Sent when the dropdown is closed. Generally, the parent view will take back focus when this happens.
+    Close,
+}