oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP working on resizable dock

Browse Source
This commit is contained in:
K Simmons
2022-09-12 14:24:57 -07:00
parent 1dfa711d2e
commit f2b72eb6d2
15 changed files with 435 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crates/workspace/src/dock.rs
+71 -43
View File
@@ -1,6 +1,6 @@
use gpui::{
actions,
elements::{ChildView, Container, FlexItem, Margin, MouseEventHandler, Svg},
elements::{ChildView, Container, Empty, FlexItem, Margin, MouseEventHandler, Side, Svg},
impl_internal_actions, CursorStyle, Element, ElementBox, Entity, MouseButton,
MutableAppContext, RenderContext, View, ViewContext, ViewHandle, WeakViewHandle,
};
@@ -36,7 +36,22 @@ impl Default for DockPosition {
}
}
pub fn icon_for_dock_anchor(anchor: DockAnchor) -> &'static str {
match anchor {
DockAnchor::Right => "icons/dock_right_12.svg",
DockAnchor::Bottom => "icons/dock_bottom_12.svg",
DockAnchor::Expanded => "icons/dock_modal_12.svg",
}
}
impl DockPosition {
fn is_visible(&self) -> bool {
match self {
DockPosition::Shown(_) => true,
DockPosition::Hidden(_) => false,
}
}
fn anchor(&self) -> DockAnchor {
match self {
DockPosition::Shown(anchor) | DockPosition::Hidden(anchor) => *anchor,
@@ -50,13 +65,6 @@ impl DockPosition {
}
}
fn visible(&self) -> Option<DockAnchor> {
match self {
DockPosition::Shown(anchor) => Some(*anchor),
DockPosition::Hidden(_) => None,
}
}
fn hide(self) -> Self {
match self {
DockPosition::Shown(anchor) => DockPosition::Hidden(anchor),
@@ -96,7 +104,7 @@ impl Dock {
}
pub fn visible_pane(&self) -> Option<&ViewHandle<Pane>> {
self.position.visible().map(|_| self.pane())
self.position.is_visible().then(|| self.pane())
}
fn set_dock_position(
@@ -124,6 +132,7 @@ impl Dock {
cx.focus(last_active_center_pane);
}
}
cx.emit(crate::Event::DockAnchorChanged);
cx.notify();
}
@@ -152,29 +161,32 @@ impl Dock {
let style = &theme.workspace.dock;
self.position
.visible()
.is_visible()
.then(|| self.position.anchor())
.filter(|current_anchor| *current_anchor == anchor)
.map(|anchor| match anchor {
DockAnchor::Bottom | DockAnchor::Right => {
let mut panel_style = style.panel.clone();
if anchor == DockAnchor::Bottom {
let resize_side = if anchor == DockAnchor::Bottom {
panel_style.margin = Margin {
top: panel_style.margin.top,
..Default::default()
};
Side::Top
} else {
panel_style.margin = Margin {
left: panel_style.margin.left,
..Default::default()
};
}
FlexItem::new(
Container::new(ChildView::new(self.pane.clone()).boxed())
.with_style(style.panel)
.boxed(),
)
.flex(style.flex, true)
.boxed()
Side::Left
};
enum DockResizeHandle {}
Container::new(ChildView::new(self.pane.clone()).boxed())
.with_style(style.panel)
.with_resize_handle::<DockResizeHandle, _>(0, resize_side, 4., 200., cx)
.flex(style.flex, false)
.boxed()
}
DockAnchor::Expanded => Container::new(
MouseEventHandler::<Dock>::new(0, cx, |_state, _cx| {
@@ -197,8 +209,13 @@ pub struct ToggleDockButton {
}
impl ToggleDockButton {
pub fn new(workspace: WeakViewHandle<Workspace>, _cx: &mut ViewContext<Self>) -> Self {
Self { workspace }
pub fn new(workspace: ViewHandle<Workspace>, cx: &mut ViewContext<Self>) -> Self {
// When dock moves, redraw so that the icon and toggle status matches.
cx.subscribe(&workspace, |_, _, _, cx| cx.notify()).detach();
Self {
workspace: workspace.downgrade(),
}
}
}
@@ -212,35 +229,46 @@ impl View for ToggleDockButton {
}
fn render(&mut self, cx: &mut gpui::RenderContext<'_, Self>) -> ElementBox {
let dock_is_open = self
.workspace
.upgrade(cx)
.map(|workspace| workspace.read(cx).dock.position.visible().is_some())
.unwrap_or(false);
let workspace = self.workspace.upgrade(cx);
MouseEventHandler::<Self>::new(0, cx, |state, cx| {
let theme = &cx
.global::<Settings>()
.theme
.workspace
.status_bar
.sidebar_buttons;
let style = theme.item.style_for(state, dock_is_open);
if workspace.is_none() {
return Empty::new().boxed();
}
Svg::new("icons/terminal_16.svg")
.with_color(style.icon_color)
.constrained()
.with_width(style.icon_size)
.with_height(style.icon_size)
.contained()
.with_style(style.container)
.boxed()
let dock_position = workspace.unwrap().read(cx).dock.position;
let theme = cx.global::<Settings>().theme.clone();
MouseEventHandler::<Self>::new(0, cx, {
let theme = theme.clone();
move |state, _| {
let style = theme
.workspace
.status_bar
.sidebar_buttons
.item
.style_for(state, dock_position.is_visible());
Svg::new(icon_for_dock_anchor(dock_position.anchor()))
.with_color(style.icon_color)
.constrained()
.with_width(style.icon_size)
.with_height(style.icon_size)
.contained()
.with_style(style.container)
.boxed()
}
})
.with_cursor_style(CursorStyle::PointingHand)
.on_click(MouseButton::Left, |_, cx| {
cx.dispatch_action(ToggleDock);
})
// TODO: Add tooltip
.with_tooltip::<Self, _>(
0,
"Toggle Dock".to_string(),
Some(Box::new(ToggleDock)),
theme.tooltip.clone(),
cx,
)
.boxed()
}
}
crates/workspace/src/pane.rs
+3 -12
View File
@@ -1,6 +1,6 @@
use super::{ItemHandle, SplitDirection};
use crate::{
dock::{MoveDock, ToggleDock},
dock::{icon_for_dock_anchor, MoveDock, ToggleDock},
toolbar::Toolbar,
Item, NewFile, NewSearch, NewTerminal, WeakItemHandle, Workspace,
};
@@ -1385,17 +1385,8 @@ impl View for Pane {
self.docked
.map(|anchor| {
// Add the dock menu button if this pane is a dock
let dock_icon = match anchor {
DockAnchor::Right => {
"icons/dock_right_12.svg"
}
DockAnchor::Bottom => {
"icons/dock_bottom_12.svg"
}
DockAnchor::Expanded => {
"icons/dock_modal_12.svg"
}
};
let dock_icon =
icon_for_dock_anchor(anchor);
tab_bar_button(
2,
crates/workspace/src/sidebar.rs
+30 -71
View File
@@ -5,8 +5,7 @@ use gpui::{
};
use serde::Deserialize;
use settings::Settings;
use std::{cell::RefCell, rc::Rc};
use theme::Theme;
use std::rc::Rc;
pub trait SidebarItem: View {
fn should_activate_item_on_event(&self, _: &Self::Event, _: &AppContext) -> bool {
@@ -53,20 +52,27 @@ impl From<&dyn SidebarItemHandle> for AnyViewHandle {
}
pub struct Sidebar {
side: Side,
sidebar_side: SidebarSide,
items: Vec<Item>,
is_open: bool,
active_item_ix: usize,
actual_width: Rc<RefCell<f32>>,
custom_width: Rc<RefCell<f32>>,
}
#[derive(Clone, Copy, Debug, Deserialize, PartialEq)]
pub enum Side {
pub enum SidebarSide {
Left,
Right,
}
impl SidebarSide {
fn to_resizable_side(self) -> Side {
match self {
Self::Left => Side::Right,
Self::Right => Side::Left,
}
}
}
struct Item {
icon_path: &'static str,
tooltip: String,
@@ -80,21 +86,19 @@ pub struct SidebarButtons {
#[derive(Clone, Debug, Deserialize, PartialEq)]
pub struct ToggleSidebarItem {
pub side: Side,
pub sidebar_side: SidebarSide,
pub item_index: usize,
}
impl_actions!(workspace, [ToggleSidebarItem]);
impl Sidebar {
pub fn new(side: Side) -> Self {
pub fn new(sidebar_side: SidebarSide) -> Self {
Self {
side,
sidebar_side,
items: Default::default(),
active_item_ix: 0,
is_open: false,
actual_width: Rc::new(RefCell::new(260.)),
custom_width: Rc::new(RefCell::new(260.)),
}
}
@@ -171,38 +175,6 @@ impl Sidebar {
None
}
}
fn render_resize_handle(&self, theme: &Theme, cx: &mut RenderContext<Self>) -> ElementBox {
let actual_width = self.actual_width.clone();
let custom_width = self.custom_width.clone();
let side = self.side;
MouseEventHandler::<Self>::new(side as usize, cx, |_, _| {
Empty::new()
.contained()
.with_style(theme.workspace.sidebar_resize_handle)
.boxed()
})
.with_padding(Padding {
left: 4.,
right: 4.,
..Default::default()
})
.with_cursor_style(CursorStyle::ResizeLeftRight)
.on_down(MouseButton::Left, |_, _| {}) // This prevents the mouse down event from being propagated elsewhere
.on_drag(MouseButton::Left, move |e, cx| {
let delta = e.position.x() - e.prev_mouse_position.x();
let prev_width = *actual_width.borrow();
*custom_width.borrow_mut() = 0f32
.max(match side {
Side::Left => prev_width + delta,
Side::Right => prev_width - delta,
})
.round();
cx.notify();
})
.boxed()
}
}
impl Entity for Sidebar {
@@ -215,31 +187,18 @@ impl View for Sidebar {
}
fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
let theme = cx.global::<Settings>().theme.clone();
if let Some(active_item) = self.active_item() {
let mut container = Flex::row();
if matches!(self.side, Side::Right) {
container.add_child(self.render_resize_handle(&theme, cx));
}
container.add_child(
Hook::new(
ChildView::new(active_item.to_any())
.constrained()
.with_max_width(*self.custom_width.borrow())
.boxed(),
enum ResizeHandleTag {}
ChildView::new(active_item.to_any())
.with_resize_handle::<ResizeHandleTag, _>(
self.sidebar_side as usize,
self.sidebar_side.to_resizable_side(),
// TODO: Expose both of these constants in the theme
4.,
260.,
cx,
)
.on_after_layout({
let actual_width = self.actual_width.clone();
move |size, _| *actual_width.borrow_mut() = size.x()
})
.flex(1., false)
.boxed(),
);
if matches!(self.side, Side::Left) {
container.add_child(self.render_resize_handle(&theme, cx));
}
container.boxed()
.boxed()
} else {
Empty::new().boxed()
}
@@ -271,10 +230,10 @@ impl View for SidebarButtons {
let badge_style = theme.badge;
let active_ix = sidebar.active_item_ix;
let is_open = sidebar.is_open;
let side = sidebar.side;
let group_style = match side {
Side::Left => theme.group_left,
Side::Right => theme.group_right,
let sidebar_side = sidebar.sidebar_side;
let group_style = match sidebar_side {
SidebarSide::Left => theme.group_left,
SidebarSide::Right => theme.group_right,
};
#[allow(clippy::needless_collect)]
@@ -288,7 +247,7 @@ impl View for SidebarButtons {
.with_children(items.into_iter().enumerate().map(
|(ix, (icon_path, tooltip, item_view))| {
let action = ToggleSidebarItem {
side,
sidebar_side,
item_index: ix,
};
MouseEventHandler::<Self>::new(ix, cx, move |state, cx| {
crates/workspace/src/waiting_room.rs
+2 -2
View File
@@ -1,4 +1,4 @@
use crate::{sidebar::Side, AppState, ToggleFollow, Workspace};
use crate::{sidebar::SidebarSide, AppState, ToggleFollow, Workspace};
use anyhow::Result;
use client::{proto, Client, Contact};
use gpui::{
@@ -101,7 +101,7 @@ impl WaitingRoom {
&app_state,
cx,
);
workspace.toggle_sidebar(Side::Left, cx);
workspace.toggle_sidebar(SidebarSide::Left, cx);
if let Some((host_peer_id, _)) = workspace
.project
.read(cx)
crates/workspace/src/workspace.rs
+26 -22
View File
@@ -42,7 +42,7 @@ use project::{fs, Fs, Project, ProjectEntryId, ProjectPath, ProjectStore, Worktr
use searchable::SearchableItemHandle;
use serde::Deserialize;
use settings::{Autosave, DockAnchor, Settings};
use sidebar::{Side, Sidebar, SidebarButtons, ToggleSidebarItem};
use sidebar::{Sidebar, SidebarButtons, SidebarSide, ToggleSidebarItem};
use smallvec::SmallVec;
use status_bar::StatusBar;
pub use status_bar::StatusItemView;
@@ -215,10 +215,10 @@ pub fn init(app_state: Arc<AppState>, cx: &mut MutableAppContext) {
workspace.activate_next_pane(cx)
});
cx.add_action(|workspace: &mut Workspace, _: &ToggleLeftSidebar, cx| {
workspace.toggle_sidebar(Side::Left, cx);
workspace.toggle_sidebar(SidebarSide::Left, cx);
});
cx.add_action(|workspace: &mut Workspace, _: &ToggleRightSidebar, cx| {
workspace.toggle_sidebar(Side::Right, cx);
workspace.toggle_sidebar(SidebarSide::Right, cx);
});
cx.add_action(Workspace::activate_pane_at_index);
@@ -875,6 +875,7 @@ impl AppState {
}
pub enum Event {
DockAnchorChanged,
PaneAdded(ViewHandle<Pane>),
ContactRequestedJoin(u64),
}
@@ -984,16 +985,18 @@ impl Workspace {
}
});
let weak_self = cx.weak_handle();
cx.emit_global(WorkspaceCreated(weak_self.clone()));
let handle = cx.handle();
let weak_handle = cx.weak_handle();
cx.emit_global(WorkspaceCreated(weak_handle.clone()));
let dock = Dock::new(cx, dock_default_factory);
let dock_pane = dock.pane().clone();
let left_sidebar = cx.add_view(|_| Sidebar::new(Side::Left));
let right_sidebar = cx.add_view(|_| Sidebar::new(Side::Right));
let left_sidebar = cx.add_view(|_| Sidebar::new(SidebarSide::Left));
let right_sidebar = cx.add_view(|_| Sidebar::new(SidebarSide::Right));
let left_sidebar_buttons = cx.add_view(|cx| SidebarButtons::new(left_sidebar.clone(), cx));
let toggle_dock = cx.add_view(|cx| ToggleDockButton::new(weak_self.clone(), cx));
let toggle_dock = cx.add_view(|cx| ToggleDockButton::new(handle, cx));
let right_sidebar_buttons =
cx.add_view(|cx| SidebarButtons::new(right_sidebar.clone(), cx));
let status_bar = cx.add_view(|cx| {
@@ -1005,12 +1008,12 @@ impl Workspace {
});
cx.update_default_global::<DragAndDrop<Workspace>, _, _>(|drag_and_drop, _| {
drag_and_drop.register_container(weak_self.clone());
drag_and_drop.register_container(weak_handle.clone());
});
let mut this = Workspace {
modal: None,
weak_self,
weak_self: weak_handle,
center: PaneGroup::new(center_pane.clone()),
dock,
panes: vec![center_pane.clone(), dock_pane],
@@ -1472,10 +1475,11 @@ impl Workspace {
}
}
pub fn toggle_sidebar(&mut self, side: Side, cx: &mut ViewContext<Self>) {
let sidebar = match side {
Side::Left => &mut self.left_sidebar,
Side::Right => &mut self.right_sidebar,
pub fn toggle_sidebar(&mut self, sidebar_side: SidebarSide, cx: &mut ViewContext<Self>) {
let sidebar = match sidebar_side {
SidebarSide::Left => &mut self.left_sidebar,
SidebarSide::Right => &mut self.right_sidebar,
// Side::Top | Side::Bottom => unreachable!(),
};
sidebar.update(cx, |sidebar, cx| {
sidebar.set_open(!sidebar.is_open(), cx);
@@ -1485,9 +1489,9 @@ impl Workspace {
}
pub fn toggle_sidebar_item(&mut self, action: &ToggleSidebarItem, cx: &mut ViewContext<Self>) {
let sidebar = match action.side {
Side::Left => &mut self.left_sidebar,
Side::Right => &mut self.right_sidebar,
let sidebar = match action.sidebar_side {
SidebarSide::Left => &mut self.left_sidebar,
SidebarSide::Right => &mut self.right_sidebar,
};
let active_item = sidebar.update(cx, |sidebar, cx| {
if sidebar.is_open() && sidebar.active_item_ix() == action.item_index {
@@ -1513,13 +1517,13 @@ impl Workspace {
pub fn toggle_sidebar_item_focus(
&mut self,
side: Side,
sidebar_side: SidebarSide,
item_index: usize,
cx: &mut ViewContext<Self>,
) {
let sidebar = match side {
Side::Left => &mut self.left_sidebar,
Side::Right => &mut self.right_sidebar,
let sidebar = match sidebar_side {
SidebarSide::Left => &mut self.left_sidebar,
SidebarSide::Right => &mut self.right_sidebar,
};
let active_item = sidebar.update(cx, |sidebar, cx| {
sidebar.set_open(true, cx);
@@ -2840,7 +2844,7 @@ pub fn open_paths(
let mut workspace = Workspace::new(project, app_state.default_item_factory, cx);
(app_state.initialize_workspace)(&mut workspace, &app_state, cx);
if contains_directory {
workspace.toggle_sidebar(Side::Left, cx);
workspace.toggle_sidebar(SidebarSide::Left, cx);
}
workspace
})