Redesign for the v1 stable release (#3)

Only half done. Will continue in another PR.

Reviewed-on: #3

crates/dock/src/tab/mod.rs

@@ -0,0 +1,165 @@
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
+    RenderOnce, StatefulInteractiveElement, Styled, Window,
+};
+use theme::{ActiveTheme, TABBAR_HEIGHT};
+use ui::{Selectable, Sizable, Size};
+
+pub mod tab_bar;
+
+#[derive(IntoElement)]
+pub struct Tab {
+    ix: usize,
+    base: Div,
+    label: Option<AnyElement>,
+    prefix: Option<AnyElement>,
+    suffix: Option<AnyElement>,
+    disabled: bool,
+    selected: bool,
+    size: Size,
+}
+
+impl Tab {
+    pub fn new() -> Self {
+        Self {
+            ix: 0,
+            base: div(),
+            label: None,
+            disabled: false,
+            selected: false,
+            prefix: None,
+            suffix: None,
+            size: Size::default(),
+        }
+    }
+
+    /// Set label for the tab.
+    pub fn label(mut self, label: impl Into<AnyElement>) -> Self {
+        self.label = Some(label.into());
+        self
+    }
+
+    /// Set the left side of the tab
+    pub fn prefix(mut self, prefix: impl Into<AnyElement>) -> Self {
+        self.prefix = Some(prefix.into());
+        self
+    }
+
+    /// Set the right side of the tab
+    pub fn suffix(mut self, suffix: impl Into<AnyElement>) -> Self {
+        self.suffix = Some(suffix.into());
+        self
+    }
+
+    /// Set disabled state to the tab
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    /// Set index to the tab.
+    pub fn ix(mut self, ix: usize) -> Self {
+        self.ix = ix;
+        self
+    }
+}
+
+impl Default for Tab {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl Selectable for Tab {
+    fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    fn is_selected(&self) -> bool {
+        self.selected
+    }
+}
+
+impl InteractiveElement for Tab {
+    fn interactivity(&mut self) -> &mut gpui::Interactivity {
+        self.base.interactivity()
+    }
+}
+
+impl StatefulInteractiveElement for Tab {}
+
+impl Styled for Tab {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
+impl Sizable for Tab {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
+impl RenderOnce for Tab {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let (text_color, hover_text_color, bg_color, border_color) =
+            match (self.selected, self.disabled) {
+                (true, false) => (
+                    cx.theme().tab_active_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().tab_active_background,
+                    cx.theme().border,
+                ),
+                (false, false) => (
+                    cx.theme().tab_inactive_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().ghost_element_background,
+                    cx.theme().border_transparent,
+                ),
+                (true, true) => (
+                    cx.theme().tab_inactive_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().ghost_element_background,
+                    cx.theme().border_disabled,
+                ),
+                (false, true) => (
+                    cx.theme().tab_inactive_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().ghost_element_background,
+                    cx.theme().border_disabled,
+                ),
+            };
+
+        self.base
+            .id(self.ix)
+            .h(TABBAR_HEIGHT)
+            .px_4()
+            .relative()
+            .flex()
+            .items_center()
+            .flex_shrink_0()
+            .cursor_pointer()
+            .overflow_hidden()
+            .text_xs()
+            .text_ellipsis()
+            .text_color(text_color)
+            .bg(bg_color)
+            .border_l(px(1.))
+            .border_r(px(1.))
+            .border_color(border_color)
+            .when(!self.selected && !self.disabled, |this| {
+                this.hover(|this| this.text_color(hover_text_color))
+            })
+            .when_some(self.prefix, |this, prefix| {
+                this.child(prefix).text_color(text_color)
+            })
+            .when_some(self.label, |this, label| this.child(label))
+            .when_some(self.suffix, |this, suffix| this.child(suffix))
+            .on_mouse_down(MouseButton::Left, |_ev, _window, cx| {
+                cx.stop_propagation();
+            })
+    }
+}

crates/dock/src/tab/tab_bar.rs

@@ -0,0 +1,127 @@
+use gpui::prelude::FluentBuilder as _;
+#[cfg(not(target_os = "windows"))]
+use gpui::Pixels;
+use gpui::{
+    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    ScrollHandle, StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
+};
+use smallvec::SmallVec;
+use theme::ActiveTheme;
+use ui::{h_flex, Sizable, Size, StyledExt};
+
+#[derive(IntoElement)]
+pub struct TabBar {
+    base: Div,
+    style: StyleRefinement,
+    scroll_handle: Option<ScrollHandle>,
+    prefix: Option<AnyElement>,
+    suffix: Option<AnyElement>,
+    last_empty_space: AnyElement,
+    children: SmallVec<[AnyElement; 2]>,
+    size: Size,
+}
+
+impl TabBar {
+    pub fn new() -> Self {
+        Self {
+            base: h_flex().px(px(-1.)),
+            style: StyleRefinement::default(),
+            scroll_handle: None,
+            children: SmallVec::new(),
+            prefix: None,
+            suffix: None,
+            size: Size::default(),
+            last_empty_space: div().w_3().into_any_element(),
+        }
+    }
+
+    /// Track the scroll of the TabBar.
+    pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
+        self.scroll_handle = Some(scroll_handle.clone());
+        self
+    }
+
+    /// Set the prefix element of the TabBar
+    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
+        self.prefix = Some(prefix.into_any_element());
+        self
+    }
+
+    /// Set the suffix element of the TabBar
+    pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
+        self.suffix = Some(suffix.into_any_element());
+        self
+    }
+
+    /// Set the last empty space element of the TabBar.
+    pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self {
+        self.last_empty_space = last_empty_space.into_any_element();
+        self
+    }
+
+    #[cfg(not(target_os = "windows"))]
+    pub fn height(window: &mut Window) -> Pixels {
+        (1.75 * window.rem_size()).max(px(36.))
+    }
+}
+
+impl Default for TabBar {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl ParentElement for TabBar {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements)
+    }
+}
+
+impl Styled for TabBar {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.style
+    }
+}
+
+impl Sizable for TabBar {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
+impl RenderOnce for TabBar {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        self.base
+            .group("tab-bar")
+            .relative()
+            .refine_style(&self.style)
+            .bg(cx.theme().surface_background)
+            .child(
+                div()
+                    .id("border-bottom")
+                    .absolute()
+                    .left_0()
+                    .bottom_0()
+                    .size_full()
+                    .border_b_1()
+                    .border_color(cx.theme().border),
+            )
+            .text_color(cx.theme().text)
+            .when_some(self.prefix, |this, prefix| this.child(prefix))
+            .child(
+                h_flex()
+                    .id("tabs")
+                    .flex_grow()
+                    .overflow_x_scroll()
+                    .when_some(self.scroll_handle, |this, scroll_handle| {
+                        this.track_scroll(&scroll_handle)
+                    })
+                    .children(self.children)
+                    .when(self.suffix.is_some(), |this| {
+                        this.child(self.last_empty_space)
+                    }),
+            )
+            .when_some(self.suffix, |this, suffix| this.child(suffix))
+    }
+}