Add tooltip to Toggle Dock Button

huacnlee · Oct 2, 2024 · b4b65ad · b4b65ad
1 parent a844c67
commit b4b65ad
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 64 deletions.
diff --git a/crates/app/src/story_workspace.rs b/crates/app/src/story_workspace.rs
@@ -15,7 +15,7 @@ use ui::{
     h_flex,
     popup_menu::PopupMenuExt,
     theme::{ActiveTheme, Colorize as _, Theme},
-    ContextModal, IconName, Root, Selectable, Sizable,
+    ContextModal, IconName, Root, Sizable,
 };
 use workspace::TitleBar;
 
@@ -274,61 +274,6 @@ impl StoryWorkspace {
             Ok(window)
         })
     }
-
-    fn render_panel_buttons(&self, cx: &mut ViewContext<Self>) -> impl IntoElement {
-        let left_open = self
-            .dock_area
-            .read(cx)
-            .is_dock_open(ui::dock::DockPlacement::Left, cx);
-        let bottom_open = self
-            .dock_area
-            .read(cx)
-            .is_dock_open(ui::dock::DockPlacement::Bottom, cx);
-        let right_open = self
-            .dock_area
-            .read(cx)
-            .is_dock_open(ui::dock::DockPlacement::Right, cx);
-
-        h_flex()
-            .mr_2()
-            .gap_1()
-            .child(
-                Button::new("panel-left")
-                    .icon(IconName::PanelLeft)
-                    .small()
-                    .ghost()
-                    .selected(left_open)
-                    .on_click(cx.listener(move |this, _: &ClickEvent, cx| {
-                        this.dock_area.update(cx, |dock_area, cx| {
-                            dock_area.toggle_dock(ui::dock::DockPlacement::Left, cx);
-                        })
-                    })),
-            )
-            .child(
-                Button::new("panel-bottom")
-                    .icon(IconName::PanelBottom)
-                    .small()
-                    .ghost()
-                    .selected(bottom_open)
-                    .on_click(cx.listener(move |this, _: &ClickEvent, cx| {
-                        this.dock_area.update(cx, |dock_area, cx| {
-                            dock_area.toggle_dock(ui::dock::DockPlacement::Bottom, cx);
-                        })
-                    })),
-            )
-            .child(
-                Button::new("panel-right")
-                    .icon(IconName::PanelRight)
-                    .small()
-                    .ghost()
-                    .selected(right_open)
-                    .on_click(cx.listener(move |this, _: &ClickEvent, cx| {
-                        this.dock_area.update(cx, |dock_area, cx| {
-                            dock_area.toggle_dock(ui::dock::DockPlacement::Right, cx);
-                        })
-                    })),
-            )
-    }
 }
 
 pub fn open_new(
@@ -379,7 +324,6 @@ impl Render for StoryWorkspace {
                             .justify_end()
                             .px_2()
                             .gap_2()
-                            .child(self.render_panel_buttons(cx))
                             .child(self.theme_color_picker.clone())
                             .child(
                                 Button::new("theme-mode")

diff --git a/crates/ui/locales/ui.yml b/crates/ui/locales/ui.yml
@@ -103,3 +103,11 @@ Dock:
     en: Zoom Out
     zh-CN: 缩小
     zh-HK: 縮小
+  Collapse:
+    en: Collapse
+    zh-CN: 隐藏
+    zh-HK: 隱藏
+  Expand:
+    en: Expand
+    zh-CN: 展开
+    zh-HK: 展開
diff --git a/crates/ui/src/dock/tab_panel.rs b/crates/ui/src/dock/tab_panel.rs
@@ -389,26 +389,26 @@ impl TabPanel {
             .read(cx)
             .is_dock_open(super::DockPlacement::Bottom, cx);
 
-        let icon = match placement {
+        let (icon, is_open) = match placement {
             DockPlacement::Left => {
                 if is_left_dock_open {
-                    IconName::PanelLeft
+                    (IconName::PanelLeft, true)
                 } else {
-                    IconName::PanelLeftOpen
+                    (IconName::PanelLeftOpen, false)
                 }
             }
             DockPlacement::Right => {
                 if is_right_dock_open {
-                    IconName::PanelRight
+                    (IconName::PanelRight, true)
                 } else {
-                    IconName::PanelRightOpen
+                    (IconName::PanelRightOpen, false)
                 }
             }
             DockPlacement::Bottom => {
                 if is_bottom_dock_open {
-                    IconName::PanelBottom
+                    (IconName::PanelBottom, true)
                 } else {
-                    IconName::PanelBottomOpen
+                    (IconName::PanelBottomOpen, false)
                 }
             }
         };
@@ -418,6 +418,10 @@ impl TabPanel {
                 .icon(icon)
                 .xsmall()
                 .ghost()
+                .tooltip(match is_open {
+                    true => t!("Dock.Collapse"),
+                    false => t!("Dock.Expand"),
+                })
                 .on_click(cx.listener({
                     let dock_area = dock_area.clone();
                     move |_, _, cx| {