mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-24 17:28:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Deploy context menu when clicking on split icon

Browse source
This commit is contained in:
Antonio Scandurra 2022-07-13 12:15:36 +02:00
parent c87efb0dbc
commit 9677db9f8f
7 changed files with 100 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Cargo.lock generated
View file

@ -6934,6 +6934,7 @@ dependencies = [
"client",
"clock",
"collections",
"context_menu",
"futures",
"gpui",
"language",

3
assets/icons/split.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.8 0.800476C11.4619 0.800476 12 1.33766 12 2.00048V8.00048C12 8.66235 11.4619 9.20048 10.8 9.20048H1.2C0.537188 9.20048 0 8.66235 0 8.00048V2.00048C0 1.33766 0.537188 0.800476 1.2 0.800476H10.8ZM3.6 2.00048H1.2V8.00048H3.6V2.00048ZM4.8 8.00048H7.2V2.00048H4.8V8.00048ZM10.8 2.00048H8.4V8.00048H10.8V2.00048Z" fill="#8B8792"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 441 B

2
crates/context_menu/src/context_menu.rs
View file

@ -277,6 +277,8 @@ impl ContextMenu {
.boxed(),
}
}))
.contained()
.with_margin_left(style.keystroke_margin)
.boxed(),
)
.contained()

1
crates/theme/src/theme.rs
View file

@ -242,6 +242,7 @@ pub struct ContextMenu {
#[serde(flatten)]
pub container: ContainerStyle,
pub item: Interactive<ContextMenuItem>,
pub keystroke_margin: f32,
pub separator: ContainerStyle,
}

1
crates/workspace/Cargo.toml
View file

@ -14,6 +14,7 @@ test-support = ["client/test-support", "project/test-support", "settings/test-su
client = { path = "../client" }
clock = { path = "../clock" }
collections = { path = "../collections" }
context_menu = { path = "../context_menu" }
gpui = { path = "../gpui" }
language = { path = "../language" }
menu = { path = "../menu" }

133
crates/workspace/src/pane.rs
View file

@ -2,11 +2,15 @@ use super::{ItemHandle, SplitDirection};
use crate::{toolbar::Toolbar, Item, WeakItemHandle, Workspace};
use anyhow::Result;
use collections::{HashMap, HashSet, VecDeque};
use context_menu::{ContextMenu, ContextMenuItem};
use futures::StreamExt;
use gpui::{
actions,
elements::*,
geometry::{rect::RectF, vector::vec2f},
geometry::{
rect::RectF,
vector::{vec2f, Vector2F},
},
impl_actions, impl_internal_actions,
platform::{CursorStyle, NavigationDirection},
AppContext, AsyncAppContext, Entity, ModelHandle, MutableAppContext, PromptLevel, Quad,
@ -55,8 +59,13 @@ pub struct GoForward {
pub pane: Option<WeakViewHandle<Pane>>,
}
#[derive(Clone, PartialEq)]
pub struct DeploySplitMenu {
position: Vector2F,
}
impl_actions!(pane, [GoBack, GoForward, ActivateItem]);
impl_internal_actions!(pane, [CloseItem]);
impl_internal_actions!(pane, [CloseItem, DeploySplitMenu]);
const MAX_NAVIGATION_HISTORY_LEN: usize = 1024;
@ -87,6 +96,7 @@ pub fn init(cx: &mut MutableAppContext) {
cx.add_action(|pane: &mut Pane, _: &SplitUp, cx| pane.split(SplitDirection::Up, cx));
cx.add_action(|pane: &mut Pane, _: &SplitRight, cx| pane.split(SplitDirection::Right, cx));
cx.add_action(|pane: &mut Pane, _: &SplitDown, cx| pane.split(SplitDirection::Down, cx));
cx.add_action(Pane::deploy_split_menu);
cx.add_action(|workspace: &mut Workspace, _: &ReopenClosedItem, cx| {
Pane::reopen_closed_item(workspace, cx).detach();
});
@ -129,6 +139,7 @@ pub struct Pane {
autoscroll: bool,
nav_history: Rc<RefCell<NavHistory>>,
toolbar: ViewHandle<Toolbar>,
split_menu: ViewHandle<ContextMenu>,
}
pub struct ItemNavHistory {
@ -169,6 +180,7 @@ pub struct NavigationEntry {
impl Pane {
pub fn new(cx: &mut ViewContext<Self>) -> Self {
let handle = cx.weak_handle();
let split_menu = cx.add_view(|cx| ContextMenu::new(cx));
Self {
items: Vec::new(),
active_item_index: 0,
@ -182,6 +194,7 @@ impl Pane {
pane: handle.clone(),
})),
toolbar: cx.add_view(|_| Toolbar::new(handle)),
split_menu,
}
}
@ -786,6 +799,21 @@ impl Pane {
cx.emit(Event::Split(direction));
}
fn deploy_split_menu(&mut self, action: &DeploySplitMenu, cx: &mut ViewContext<Self>) {
self.split_menu.update(cx, |menu, cx| {
menu.show(
action.position,
vec![
ContextMenuItem::item("Split Right", SplitRight),
ContextMenuItem::item("Split Left", SplitLeft),
ContextMenuItem::item("Split Up", SplitUp),
ContextMenuItem::item("Split Down", SplitDown),
],
cx,
);
});
}
pub fn toolbar(&self) -> &ViewHandle<Toolbar> {
&self.toolbar
}
@ -959,51 +987,68 @@ impl View for Pane {
let this = cx.handle();
EventHandler::new(if let Some(active_item) = self.active_item() {
Flex::column()
.with_child(
Flex::row()
.with_child(self.render_tabs(cx).flex(1., true).named("tabs"))
Stack::new()
.with_child(
EventHandler::new(if let Some(active_item) = self.active_item() {
Flex::column()
.with_child(
MouseEventHandler::new::<SplitIcon, _, _>(0, cx, |mouse_state, cx| {
let theme = &cx.global::<Settings>().theme.workspace;
let style = theme.pane_button.style_for(mouse_state, false);
Svg::new("icons/split.svg")
.with_color(style.color)
.constrained()
.with_width(style.icon_width)
.aligned()
.contained()
.with_style(style.container)
.constrained()
.with_width(style.button_width)
.with_height(style.button_width)
.aligned()
.boxed()
})
.with_cursor_style(CursorStyle::PointingHand)
.boxed(),
Flex::row()
.with_child(self.render_tabs(cx).flex(1., true).named("tabs"))
.with_child(
MouseEventHandler::new::<SplitIcon, _, _>(
0,
cx,
|mouse_state, cx| {
let theme = &cx.global::<Settings>().theme.workspace;
let style =
theme.pane_button.style_for(mouse_state, false);
Svg::new("icons/split.svg")
.with_color(style.color)
.constrained()
.with_width(style.icon_width)
.aligned()
.contained()
.with_style(style.container)
.constrained()
.with_width(style.button_width)
.with_height(style.button_width)
.aligned()
.boxed()
},
)
.with_cursor_style(CursorStyle::PointingHand)
.on_mouse_down(|position, cx| {
cx.dispatch_action(DeploySplitMenu { position });
})
.boxed(),
)
.constrained()
.with_height(cx.global::<Settings>().theme.workspace.tab.height)
.boxed(),
)
.constrained()
.with_height(cx.global::<Settings>().theme.workspace.tab.height)
.boxed(),
)
.with_child(ChildView::new(&self.toolbar).boxed())
.with_child(ChildView::new(active_item).flex(1., true).boxed())
.boxed()
} else {
Empty::new().boxed()
})
.on_navigate_mouse_down(move |direction, cx| {
let this = this.clone();
match direction {
NavigationDirection::Back => cx.dispatch_action(GoBack { pane: Some(this) }),
NavigationDirection::Forward => cx.dispatch_action(GoForward { pane: Some(this) }),
}
.with_child(ChildView::new(&self.toolbar).boxed())
.with_child(ChildView::new(active_item).flex(1., true).boxed())
.boxed()
} else {
Empty::new().boxed()
})
.on_navigate_mouse_down(move |direction, cx| {
let this = this.clone();
match direction {
NavigationDirection::Back => {
cx.dispatch_action(GoBack { pane: Some(this) })
}
NavigationDirection::Forward => {
cx.dispatch_action(GoForward { pane: Some(this) })
}
}
true
})
.named("pane")
true
})
.boxed(),
)
.with_child(ChildView::new(&self.split_menu).boxed())
.named("pane")
}
fn on_focus(&mut self, cx: &mut ViewContext<Self>) {

5
styles/src/styleTree/contextMenu.ts
View file

@ -8,13 +8,14 @@ export default function contextMenu(theme: Theme) {
padding: 6,
shadow: popoverShadow(theme),
border: border(theme, "primary"),
keystrokeMargin: 30,
item: {
padding: { left: 4, right: 4, top: 2, bottom: 2 },
cornerRadius: 6,
label: text(theme, "sans", "secondary", { size: "sm" }),
keystroke: {
margin: { left: 60 },
...text(theme, "sans", "muted", { size: "sm", weight: "bold" })
...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 }
},
hover: {
background: backgroundColor(theme, 300, "hovered"),