Unbreak toolbar layout & improve disabling ButtonLike

Julia created 2 years ago

Change summary

crates/breadcrumbs2/src/breadcrumbs.rs          | 47 ++++++++++--------
crates/ui2/src/components/button/button_like.rs |  2 
crates/workspace2/src/toolbar.rs                | 15 -----
3 files changed, 30 insertions(+), 34 deletions(-)

Detailed changes

crates/breadcrumbs2/src/breadcrumbs.rs

@@ -1,10 +1,11 @@
 use gpui::{
-    Div, Element, EventEmitter, InteractiveElement, IntoElement, ParentElement, Render, Stateful,
-    StatefulInteractiveElement, Styled, StyledText, Subscription, ViewContext, WeakView,
+    AnyElement, Component, Div, Element, EventEmitter, InteractiveElement, IntoElement,
+    ParentElement, Render, Stateful, StatefulInteractiveElement, Styled, StyledText, Subscription,
+    ViewContext, WeakView,
 };
 use itertools::Itertools;
 use theme::ActiveTheme;
-use ui::{h_stack, Label};
+use ui::{h_stack, ButtonCommon, ButtonLike, ButtonStyle2, Clickable, Disableable, Label};
 use workspace::{
     item::{ItemEvent, ItemHandle},
     ToolbarItemEvent, ToolbarItemLocation, ToolbarItemView, Workspace,
@@ -36,20 +37,22 @@ impl EventEmitter<Event> for Breadcrumbs {}
 impl EventEmitter<ToolbarItemEvent> for Breadcrumbs {}
 
 impl Render for Breadcrumbs {
-    type Element = Stateful<Div>;
+    type Element = Component<ButtonLike>;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-        let div = h_stack().id("breadcrumbs").bg(gpui::red());
+        let button = ButtonLike::new("breadcrumbs")
+            .style(ButtonStyle2::Transparent)
+            .disabled(true);
 
         let active_item = match &self.active_item {
             Some(active_item) => active_item,
-            None => return div,
+            None => return button.into_element(),
         };
         let not_editor = active_item.downcast::<editor::Editor>().is_none();
 
         let breadcrumbs = match active_item.breadcrumbs(cx.theme(), cx) {
             Some(breadcrumbs) => breadcrumbs,
-            None => return div,
+            None => return button.into_element(),
         }
         .into_iter()
         .map(|breadcrumb| {
@@ -58,26 +61,30 @@ impl Render for Breadcrumbs {
                 .into_any()
         });
 
-        let crumbs = div.children(Itertools::intersperse_with(breadcrumbs, || {
+        let button = button.children(Itertools::intersperse_with(breadcrumbs, || {
             Label::new(" › ").into_any_element()
         }));
 
         if not_editor || !self.pane_focused {
-            return crumbs;
+            return button.into_element();
         }
 
         // let this = cx.view().downgrade();
-        crumbs.on_click(move |_, _cx| {
-            todo!("outline::toggle");
-            // this.update(cx, |this, cx| {
-            //     if let Some(workspace) = this.workspace.upgrade() {
-            //         workspace.update(cx, |_workspace, _cx| {
-            //             outline::toggle(workspace, &Default::default(), cx)
-            //         })
-            //     }
-            // })
-            // .ok();
-        })
+        button
+            .style(ButtonStyle2::Filled)
+            .disabled(false)
+            .on_click(move |_, _cx| {
+                todo!("outline::toggle");
+                // this.update(cx, |this, cx| {
+                //     if let Some(workspace) = this.workspace.upgrade() {
+                //         workspace.update(cx, |_workspace, _cx| {
+                //             outline::toggle(workspace, &Default::default(), cx)
+                //         })
+                //     }
+                // })
+                // .ok();
+            })
+            .into_element()
     }
 }
 

crates/ui2/src/components/button/button_like.rs

@@ -250,7 +250,7 @@ impl RenderOnce for ButtonLike {
             .id(self.id.clone())
             .h(self.size.height())
             .rounded_md()
-            .cursor_pointer()
+            .when(!self.disabled, |el| el.cursor_pointer())
             .gap_1()
             .px_1()
             .bg(self.style.enabled(cx).background)

crates/workspace2/src/toolbar.rs

@@ -80,7 +80,6 @@ impl Render for Toolbar {
     type Element = Div;
 
     fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
-        //dbg!(&self.items.len());
         v_stack()
             .border_b()
             .border_color(cx.theme().colors().border_variant)
@@ -88,17 +87,8 @@ impl Render for Toolbar {
             .child(
                 h_stack()
                     .justify_between()
-                    .child(
-                        // Toolbar left side
-                        h_stack().border().border_color(gpui::red()).p_1().child(
-                            ButtonLike::new("breadcrumb")
-                                .child(Label::new("crates/workspace2/src/toolbar.rs"))
-                                .child(Label::new("›").color(Color::Muted))
-                                .child(Label::new("impl Render for Toolbar"))
-                                .child(Label::new("›").color(Color::Muted))
-                                .child(Label::new("fn render")),
-                        ),
-                    )
+                    // Toolbar left side
+                    .children(self.items.iter().map(|(child, _)| child.to_any()))
                     // Toolbar right side
                     .child(
                         h_stack()
@@ -117,7 +107,6 @@ impl Render for Toolbar {
                             ),
                     ),
             )
-            .children(self.items.iter().map(|(child, _)| child.to_any()))
     }
 }