@ context menu fixes. (#9237)
## Description <!-- Please remember to add your design buddy onto the PR for review, if it contains any UI changes! --> WISOTT! Fixes: - positioning of the menu in the new cloud mode input - some sharp corners poking through rounded ones for the selected item <img width="588" height="312" alt="Screenshot 2026-04-27 at 9 01 19 PM" src="https://github.com/user-attachments/assets/03cd565a-e869-4a3a-9ae3-98dd3d86c068" /> ## Testing <!-- How did you test this change? What automated tests did you add? If you didn't add any new tests, what's your justification for not adding any? If you're not sure whether you should add a test, check our testing policy: https://www.notion.so/warpdev/How-We-Code-at-Warp-257fe43d556e4b3c8dfd42f70004cc72#1f97825450504baa9c5fd87a737daa09 --> See image! ## Agent Mode - [x] Warp Agent Mode - This PR was created via Warp's AI Agent Mode
This commit is contained in:
@@ -3,3 +3,4 @@ pub const MARGIN_RIGHT: f32 = 8.0;
|
|||||||
pub const ESTIMATED_RESULT_HEIGHT: f32 = 24.0;
|
pub const ESTIMATED_RESULT_HEIGHT: f32 = 24.0;
|
||||||
pub const MENU_ITEM_HORIZONTAL_PADDING: f32 = 16.0;
|
pub const MENU_ITEM_HORIZONTAL_PADDING: f32 = 16.0;
|
||||||
pub const MENU_ITEM_VERTICAL_PADDING: f32 = 4.0;
|
pub const MENU_ITEM_VERTICAL_PADDING: f32 = 4.0;
|
||||||
|
pub const MENU_ITEM_HIGHLIGHT_CORNER_RADIUS: f32 = 8.0;
|
||||||
|
|||||||
@@ -1287,8 +1287,11 @@ impl AIContextMenu {
|
|||||||
return self.render_no_results(app);
|
return self.render_no_results(app);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let last_display_index = filtered_categories.len().saturating_sub(1);
|
||||||
for (display_index, category) in filtered_categories.iter().enumerate() {
|
for (display_index, category) in filtered_categories.iter().enumerate() {
|
||||||
let is_selected = display_index == self.state.selected_category_index;
|
let is_selected = display_index == self.state.selected_category_index;
|
||||||
|
let is_first = display_index == 0;
|
||||||
|
let is_last = display_index == last_display_index;
|
||||||
let text_color = if is_selected {
|
let text_color = if is_selected {
|
||||||
theme.main_text_color(theme.accent()).into_solid()
|
theme.main_text_color(theme.accent()).into_solid()
|
||||||
} else {
|
} else {
|
||||||
@@ -1347,11 +1350,20 @@ impl AIContextMenu {
|
|||||||
let accent_color = theme.accent();
|
let accent_color = theme.accent();
|
||||||
let accent_overlay_color = theme.accent_overlay();
|
let accent_overlay_color = theme.accent_overlay();
|
||||||
|
|
||||||
|
let highlight_radius = Radius::Pixels(styles::MENU_ITEM_HIGHLIGHT_CORNER_RADIUS);
|
||||||
|
let highlight_corner_radius = match (is_first, is_last) {
|
||||||
|
(true, true) => CornerRadius::with_all(highlight_radius),
|
||||||
|
(true, false) => CornerRadius::with_top(highlight_radius),
|
||||||
|
(false, true) => CornerRadius::with_bottom(highlight_radius),
|
||||||
|
(false, false) => CornerRadius::default(),
|
||||||
|
};
|
||||||
|
|
||||||
let category_clone_for_click = *category;
|
let category_clone_for_click = *category;
|
||||||
let category_row = Hoverable::new(hover_state, move |hover_state| {
|
let category_row = Hoverable::new(hover_state, move |hover_state| {
|
||||||
let mut container = Container::new(row)
|
let mut container = Container::new(row)
|
||||||
.with_horizontal_padding(styles::MENU_ITEM_HORIZONTAL_PADDING)
|
.with_horizontal_padding(styles::MENU_ITEM_HORIZONTAL_PADDING)
|
||||||
.with_vertical_padding(styles::MENU_ITEM_VERTICAL_PADDING);
|
.with_vertical_padding(styles::MENU_ITEM_VERTICAL_PADDING)
|
||||||
|
.with_corner_radius(highlight_corner_radius);
|
||||||
if is_selected {
|
if is_selected {
|
||||||
container = container.with_background(accent_color);
|
container = container.with_background(accent_color);
|
||||||
} else if hover_state.is_hovered() {
|
} else if hover_state.is_hovered() {
|
||||||
|
|||||||
@@ -3429,6 +3429,12 @@ impl Input {
|
|||||||
if let Some(ai_context_menu) = self.editor.as_ref(app).render_ai_context_menu() {
|
if let Some(ai_context_menu) = self.editor.as_ref(app).render_ai_context_menu() {
|
||||||
let position = position_id_for_cursor(self.editor.id());
|
let position = position_id_for_cursor(self.editor.id());
|
||||||
|
|
||||||
|
let y_anchor = if self.is_cloud_mode_input_v2_composing(app) {
|
||||||
|
AnchorPair::new(YAxisAnchor::Bottom, YAxisAnchor::Top)
|
||||||
|
} else {
|
||||||
|
menu_positioning.completion_suggestions_y_anchor()
|
||||||
|
};
|
||||||
|
|
||||||
stack.add_positioned_overlay_child(
|
stack.add_positioned_overlay_child(
|
||||||
ai_context_menu,
|
ai_context_menu,
|
||||||
OffsetPositioning::from_axes(
|
OffsetPositioning::from_axes(
|
||||||
@@ -3442,7 +3448,7 @@ impl Input {
|
|||||||
&position,
|
&position,
|
||||||
PositionedElementOffsetBounds::Unbounded,
|
PositionedElementOffsetBounds::Unbounded,
|
||||||
OffsetType::Pixel(0.),
|
OffsetType::Pixel(0.),
|
||||||
menu_positioning.completion_suggestions_y_anchor(),
|
y_anchor,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -333,7 +333,7 @@ impl Input {
|
|||||||
let menu_positioning = self.menu_positioning(app);
|
let menu_positioning = self.menu_positioning(app);
|
||||||
let model = self.model.lock();
|
let model = self.model.lock();
|
||||||
|
|
||||||
let mut stack = Stack::new().with_constrain_absolute_children();
|
let mut stack = Stack::new();
|
||||||
|
|
||||||
// Apply the V2 gutter symmetrically (left + right) so the floating
|
// Apply the V2 gutter symmetrically (left + right) so the floating
|
||||||
// input keeps equal breathing room on both sides as the pane shrinks.
|
// input keeps equal breathing room on both sides as the pane shrinks.
|
||||||
|
|||||||
Reference in New Issue
Block a user