wip: refactor

crates/ui/src/accordion.rs

@@ -1,310 +0,0 @@
-use std::{cell::Cell, rc::Rc, sync::Arc};
-
-use gpui::{
-    div, prelude::FluentBuilder as _, rems, AnyElement, Div, ElementId, InteractiveElement as _,
-    IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _, Styled,
-    WindowContext,
-};
-
-use crate::{h_flex, theme::ActiveTheme as _, v_flex, Icon, IconName, Sizable, Size};
-
-type OnToggleClick = Option<Arc<dyn Fn(&[usize], &mut WindowContext) + Send + Sync>>;
-
-/// An AccordionGroup is a container for multiple Accordion elements.
-#[derive(IntoElement)]
-pub struct Accordion {
-    id: ElementId,
-    base: Div,
-    multiple: bool,
-    size: Size,
-    bordered: bool,
-    disabled: bool,
-    children: Vec<AccordionItem>,
-    on_toggle_click: OnToggleClick,
-}
-
-impl Accordion {
-    pub fn new(id: impl Into<ElementId>) -> Self {
-        Self {
-            id: id.into(),
-            base: v_flex().gap_1(),
-            multiple: false,
-            size: Size::default(),
-            bordered: true,
-            children: Vec::new(),
-            disabled: false,
-            on_toggle_click: None,
-        }
-    }
-
-    pub fn multiple(mut self, multiple: bool) -> Self {
-        self.multiple = multiple;
-        self
-    }
-
-    pub fn bordered(mut self, bordered: bool) -> Self {
-        self.bordered = bordered;
-        self
-    }
-
-    pub fn disabled(mut self, disabled: bool) -> Self {
-        self.disabled = disabled;
-        self
-    }
-
-    pub fn item<F>(mut self, child: F) -> Self
-    where
-        F: FnOnce(AccordionItem) -> AccordionItem,
-    {
-        let item = child(AccordionItem::new());
-        self.children.push(item);
-        self
-    }
-
-    /// Sets the on_toggle_click callback for the AccordionGroup.
-    ///
-    /// The first argument `Vec<usize>` is the indices of the open accordions.
-    pub fn on_toggle_click(
-        mut self,
-        on_toggle_click: impl Fn(&[usize], &mut WindowContext) + Send + Sync + 'static,
-    ) -> Self {
-        self.on_toggle_click = Some(Arc::new(on_toggle_click));
-        self
-    }
-}
-
-impl Sizable for Accordion {
-    fn with_size(mut self, size: impl Into<Size>) -> Self {
-        self.size = size.into();
-        self
-    }
-}
-
-impl RenderOnce for Accordion {
-    fn render(self, _: &mut WindowContext) -> impl IntoElement {
-        let mut open_ixs: Vec<usize> = Vec::new();
-        let multiple = self.multiple;
-        let state = Rc::new(Cell::new(None));
-
-        self.children
-            .iter()
-            .enumerate()
-            .for_each(|(ix, accordion)| {
-                if accordion.open {
-                    open_ixs.push(ix);
-                }
-            });
-
-        self.base
-            .id(self.id)
-            .children(
-                self.children
-                    .into_iter()
-                    .enumerate()
-                    .map(|(ix, accordion)| {
-                        let state = Rc::clone(&state);
-                        accordion
-                            .with_size(self.size)
-                            .bordered(self.bordered)
-                            .when(self.disabled, |this| this.disabled(true))
-                            .on_toggle_click(move |_, _| {
-                                state.set(Some(ix));
-                            })
-                    }),
-            )
-            .when_some(
-                self.on_toggle_click.filter(|_| !self.disabled),
-                move |this, on_toggle_click| {
-                    this.on_click(move |_, cx| {
-                        let mut open_ixs = open_ixs.clone();
-                        if let Some(ix) = state.get() {
-                            if multiple {
-                                if let Some(pos) = open_ixs.iter().position(|&i| i == ix) {
-                                    open_ixs.remove(pos);
-                                } else {
-                                    open_ixs.push(ix);
-                                }
-                            } else {
-                                let was_open = open_ixs.iter().any(|&i| i == ix);
-                                open_ixs.clear();
-                                if !was_open {
-                                    open_ixs.push(ix);
-                                }
-                            }
-                        }
-
-                        on_toggle_click(&open_ixs, cx);
-                    })
-                },
-            )
-    }
-}
-
-type OnToggle = Option<Arc<dyn Fn(&bool, &mut WindowContext)>>;
-
-/// An Accordion is a vertically stacked list of items, each of which can be expanded to reveal the content associated with it.
-#[derive(IntoElement)]
-pub struct AccordionItem {
-    icon: Option<Icon>,
-    title: AnyElement,
-    content: AnyElement,
-    open: bool,
-    size: Size,
-    bordered: bool,
-    disabled: bool,
-    on_toggle_click: OnToggle,
-}
-
-impl AccordionItem {
-    pub fn new() -> Self {
-        Self {
-            icon: None,
-            title: SharedString::default().into_any_element(),
-            content: SharedString::default().into_any_element(),
-            open: false,
-            disabled: false,
-            on_toggle_click: None,
-            size: Size::default(),
-            bordered: true,
-        }
-    }
-
-    pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
-        self.icon = Some(icon.into());
-        self
-    }
-
-    pub fn title(mut self, title: impl IntoElement) -> Self {
-        self.title = title.into_any_element();
-        self
-    }
-
-    pub fn content(mut self, content: impl IntoElement) -> Self {
-        self.content = content.into_any_element();
-        self
-    }
-
-    pub fn bordered(mut self, bordered: bool) -> Self {
-        self.bordered = bordered;
-        self
-    }
-
-    pub fn open(mut self, open: bool) -> Self {
-        self.open = open;
-        self
-    }
-
-    pub fn disabled(mut self, disabled: bool) -> Self {
-        self.disabled = disabled;
-        self
-    }
-
-    fn on_toggle_click(
-        mut self,
-        on_toggle_click: impl Fn(&bool, &mut WindowContext) + 'static,
-    ) -> Self {
-        self.on_toggle_click = Some(Arc::new(on_toggle_click));
-        self
-    }
-}
-
-impl Default for AccordionItem {
-    fn default() -> Self {
-        Self::new()
-    }
-}
-
-impl Sizable for AccordionItem {
-    fn with_size(mut self, size: impl Into<Size>) -> Self {
-        self.size = size.into();
-        self
-    }
-}
-
-impl RenderOnce for AccordionItem {
-    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        let text_size = match self.size {
-            Size::XSmall => rems(0.875),
-            Size::Small => rems(0.875),
-            _ => rems(1.0),
-        };
-
-        v_flex()
-            .bg(cx.theme().accordion)
-            .overflow_hidden()
-            .when(self.bordered, |this| {
-                this.border_1().border_color(cx.theme().border).rounded_md()
-            })
-            .text_size(text_size)
-            .child(
-                h_flex()
-                    .id("accordion-title")
-                    .justify_between()
-                    .map(|this| match self.size {
-                        Size::XSmall => this.py_0().px_1p5(),
-                        Size::Small => this.py_0p5().px_2(),
-                        Size::Large => this.py_1p5().px_4(),
-                        _ => this.py_1().px_3(),
-                    })
-                    .when(self.open, |this| {
-                        this.when(self.bordered, |this| {
-                            this.bg(cx.theme().accordion_active)
-                                .text_color(cx.theme().foreground)
-                                .border_b_1()
-                                .border_color(cx.theme().border)
-                        })
-                    })
-                    .child(
-                        h_flex()
-                            .items_center()
-                            .map(|this| match self.size {
-                                Size::XSmall => this.gap_1(),
-                                Size::Small => this.gap_1(),
-                                _ => this.gap_2(),
-                            })
-                            .when_some(self.icon, |this, icon| {
-                                this.child(
-                                    icon.with_size(self.size)
-                                        .text_color(cx.theme().muted_foreground),
-                                )
-                            })
-                            .child(self.title),
-                    )
-                    .when(!self.disabled, |this| {
-                        this.cursor_pointer()
-                            .hover(|this| this.bg(cx.theme().accordion_hover))
-                            .child(
-                                Icon::new(if self.open {
-                                    IconName::ChevronUp
-                                } else {
-                                    IconName::ChevronDown
-                                })
-                                .xsmall()
-                                .text_color(cx.theme().muted_foreground),
-                            )
-                    })
-                    .when_some(
-                        self.on_toggle_click.filter(|_| !self.disabled),
-                        |this, on_toggle_click| {
-                            this.on_click({
-                                move |_, cx| {
-                                    on_toggle_click(&!self.open, cx);
-                                }
-                            })
-                        },
-                    ),
-            )
-            .when(self.open, |this| {
-                this.child(
-                    div()
-                        .map(|this| match self.size {
-                            Size::XSmall => this.p_1p5(),
-                            Size::Small => this.p_2(),
-                            Size::Large => this.p_4(),
-                            _ => this.p_3(),
-                        })
-                        .child(self.content),
-                )
-            })
-    }
-}

crates/ui/src/button.rs

@@ -384,7 +384,7 @@ impl RenderOnce for Button {
                 |this| match self.rounded {
                     ButtonRounded::Small => this.rounded_l(px(cx.theme().radius * 0.5)),
                     ButtonRounded::Medium => this.rounded_l(px(cx.theme().radius)),
-                    ButtonRounded::Large => this.rounded_l(px(cx.theme().radius * 2.0)),
+                    ButtonRounded::Large => this.rounded_l(px(cx.theme().radius * 1.6)),
                     ButtonRounded::Size(px) => this.rounded_l(px),
                     ButtonRounded::None => this.rounded_none(),
                 },
@@ -394,7 +394,7 @@ impl RenderOnce for Button {
                 |this| match self.rounded {
                     ButtonRounded::Small => this.rounded_r(px(cx.theme().radius * 0.5)),
                     ButtonRounded::Medium => this.rounded_r(px(cx.theme().radius)),
-                    ButtonRounded::Large => this.rounded_r(px(cx.theme().radius * 2.0)),
+                    ButtonRounded::Large => this.rounded_r(px(cx.theme().radius * 1.6)),
                     ButtonRounded::Size(px) => this.rounded_r(px),
                     ButtonRounded::None => this.rounded_none(),
                 },
@@ -460,7 +460,7 @@ impl RenderOnce for Button {
                     .map(|this| match self.size {
                         Size::XSmall => this.gap_0p5().text_xs(),
                         Size::Small => this.gap_1().text_xs(),
-                        _ => this.gap_2().text_base(),
+                        _ => this.gap_2().text_xs(),
                     })
                     .when(!self.loading, |this| {
                         this.when_some(self.icon, |this, icon| {

crates/ui/src/lib.rs

@@ -1,4 +1,3 @@
-pub mod accordion;
 pub mod animation;
 pub mod badge;
 pub mod breadcrumb;
@@ -35,8 +34,6 @@ pub mod tab;
 pub mod theme;
 pub mod tooltip;
 
-pub use crate::Disableable;
-
 pub use colors::*;
 pub use event::InteractiveElementExt;
 pub use focusable::FocusableCycle;
@@ -46,6 +43,8 @@ pub use styled::*;
 pub use title_bar::*;
 pub use window_border::{window_border, WindowBorder};
 
+pub use crate::Disableable;
+
 mod colors;
 mod event;
 mod focusable;

crates/ui/src/styled.rs

@@ -1,14 +1,13 @@
+use gpui::{
+    div, px, Axis, Div, Element, ElementId, EntityId, FocusHandle, Pixels, Styled, WindowContext,
+};
+use serde::{Deserialize, Serialize};
 use std::fmt::{self, Display, Formatter};
 
 use crate::{
     scroll::{Scrollable, ScrollbarAxis},
     theme::ActiveTheme,
 };
-use gpui::{
-    div, px, Axis, Div, Edges, Element, ElementId, EntityId, FocusHandle, Pixels, Styled,
-    WindowContext,
-};
-use serde::{Deserialize, Serialize};
 
 /// Returns a `Div` as horizontal flex layout.
 pub fn h_flex() -> Div {
@@ -147,47 +146,6 @@ pub enum Size {
     Large,
 }
 
-impl Size {
-    /// Returns the height for table row.
-    pub fn table_row_height(&self) -> Pixels {
-        match self {
-            Size::XSmall => px(26.),
-            Size::Small => px(30.),
-            Size::Large => px(40.),
-            _ => px(32.),
-        }
-    }
-    /// Returns the padding for a table cell.
-    pub fn table_cell_padding(&self) -> Edges<Pixels> {
-        match self {
-            Size::XSmall => Edges {
-                top: px(2.),
-                bottom: px(2.),
-                left: px(4.),
-                right: px(4.),
-            },
-            Size::Small => Edges {
-                top: px(3.),
-                bottom: px(3.),
-                left: px(6.),
-                right: px(6.),
-            },
-            Size::Large => Edges {
-                top: px(8.),
-                bottom: px(8.),
-                left: px(12.),
-                right: px(12.),
-            },
-            _ => Edges {
-                top: px(4.),
-                bottom: px(4.),
-                left: px(8.),
-                right: px(8.),
-            },
-        }
-    }
-}
-
 impl From<Pixels> for Size {
     fn from(size: Pixels) -> Self {
         Size::Size(size)
@@ -250,8 +208,6 @@ pub trait StyleSized<T: Styled> {
     fn list_py(self, size: Size) -> Self;
     /// Apply size with the given `Size`.
     fn size_with(self, size: Size) -> Self;
-    /// Apply the table cell size (Font size, padding) with the given `Size`.
-    fn table_cell_size(self, size: Size) -> Self;
 }
 
 impl<T: Styled> StyleSized<T> for T {
@@ -339,19 +295,6 @@ impl<T: Styled> StyleSized<T> for T {
             Size::Size(size) => self.size(size),
         }
     }
-
-    fn table_cell_size(self, size: Size) -> Self {
-        let padding = size.table_cell_padding();
-        match size {
-            Size::XSmall => self.text_sm(),
-            Size::Small => self.text_sm(),
-            _ => self,
-        }
-        .pl(padding.left)
-        .pr(padding.right)
-        .pt(padding.top)
-        .pb(padding.bottom)
-    }
 }
 
 pub trait AxisExt {

crates/ui/src/theme.rs

@@ -149,9 +149,6 @@ impl Colorize for Hsla {
 pub struct ThemeColor {
     pub accent: Hsla,
     pub accent_foreground: Hsla,
-    pub accordion: Hsla,
-    pub accordion_active: Hsla,
-    pub accordion_hover: Hsla,
     pub background: Hsla,
     pub border: Hsla,
     pub window_border: Hsla,
@@ -201,14 +198,6 @@ pub struct ThemeColor {
     pub tab_active_foreground: Hsla,
     pub tab_bar: Hsla,
     pub tab_foreground: Hsla,
-    pub table: Hsla,
-    pub table_active: Hsla,
-    pub table_active_border: Hsla,
-    pub table_even: Hsla,
-    pub table_head: Hsla,
-    pub table_head_foreground: Hsla,
-    pub table_hover: Hsla,
-    pub table_row_border: Hsla,
     pub title_bar: Hsla,
     pub title_bar_border: Hsla,
     pub sidebar: Hsla,
@@ -225,9 +214,6 @@ impl ThemeColor {
         Self {
             accent: hsl(240.0, 5.0, 96.0),
             accent_foreground: hsl(240.0, 5.9, 10.0),
-            accordion: hsl(0.0, 0.0, 100.0),
-            accordion_active: hsl(240.0, 5.9, 90.0),
-            accordion_hover: hsl(240.0, 4.8, 95.9).opacity(0.7),
             background: hsl(0.0, 0.0, 100.),
             border: hsl(240.0, 5.9, 90.0),
             window_border: hsl(240.0, 5.9, 78.0),
@@ -277,14 +263,6 @@ impl ThemeColor {
             tab_active_foreground: hsl(240.0, 10., 3.9),
             tab_bar: hsl(240.0, 4.8, 95.9),
             tab_foreground: hsl(240.0, 10., 3.9),
-            table: hsl(0.0, 0.0, 100.),
-            table_active: hsl(211.0, 97.0, 85.0).opacity(0.2),
-            table_active_border: hsl(211.0, 97.0, 85.0),
-            table_even: hsl(240.0, 5.0, 96.0),
-            table_head: hsl(0.0, 0.0, 100.),
-            table_head_foreground: hsl(240.0, 10., 3.9).opacity(0.7),
-            table_hover: hsl(240.0, 4.8, 95.0),
-            table_row_border: hsl(240.0, 7.7, 94.5),
             title_bar: hsl(0.0, 0.0, 98.0),
             title_bar_border: hsl(220.0, 13.0, 91.0),
             sidebar: hsl(0.0, 0.0, 98.0),
@@ -301,9 +279,6 @@ impl ThemeColor {
         Self {
             accent: hsl(240.0, 3.7, 15.9),
             accent_foreground: hsl(0.0, 0.0, 78.0),
-            accordion: hsl(299.0, 2., 11.),
-            accordion_active: hsl(240.0, 3.7, 16.9),
-            accordion_hover: hsl(240.0, 3.7, 15.9).opacity(0.7),
             background: hsl(0.0, 0.0, 8.0),
             border: hsl(240.0, 3.7, 16.9),
             window_border: hsl(240.0, 3.7, 28.0),
@@ -353,14 +328,6 @@ impl ThemeColor {
             tab_active_foreground: hsl(0., 0., 78.),
             tab_bar: hsl(299.0, 0., 5.5),
             tab_foreground: hsl(0., 0., 78.),
-            table: hsl(0.0, 0.0, 8.0),
-            table_active: hsl(240.0, 3.7, 15.0).opacity(0.2),
-            table_active_border: hsl(240.0, 5.9, 35.5),
-            table_even: hsl(240.0, 3.7, 10.0),
-            table_head: hsl(0.0, 0.0, 8.0),
-            table_head_foreground: hsl(0., 0., 78.).opacity(0.7),
-            table_hover: hsl(240.0, 3.7, 15.9).opacity(0.5),
-            table_row_border: hsl(240.0, 3.7, 16.9).opacity(0.5),
             title_bar: hsl(240.0, 0.0, 10.0),
             title_bar_border: hsl(240.0, 3.7, 15.9),
             sidebar: hsl(240.0, 0.0, 10.0),
@@ -433,10 +400,6 @@ impl Theme {
         self.secondary_hover = self.secondary_hover.apply(mask_color);
         self.secondary_active = self.secondary_active.apply(mask_color);
         self.secondary_foreground = self.secondary_foreground.apply(mask_color);
-        // self.destructive = self.destructive.apply(mask_color);
-        // self.destructive_hover = self.destructive_hover.apply(mask_color);
-        // self.destructive_active = self.destructive_active.apply(mask_color);
-        // self.destructive_foreground = self.destructive_foreground.apply(mask_color);
         self.muted = self.muted.apply(mask_color);
         self.muted_foreground = self.muted_foreground.apply(mask_color);
         self.accent = self.accent.apply(mask_color);
@@ -444,7 +407,6 @@ impl Theme {
         self.border = self.border.apply(mask_color);
         self.input = self.input.apply(mask_color);
         self.ring = self.ring.apply(mask_color);
-        // self.selection = self.selection.apply(mask_color);
         self.scrollbar = self.scrollbar.apply(mask_color);
         self.scrollbar_thumb = self.scrollbar_thumb.apply(mask_color);
         self.scrollbar_thumb_hover = self.scrollbar_thumb_hover.apply(mask_color);
@@ -465,21 +427,10 @@ impl Theme {
         self.list_active = self.list_active.apply(mask_color);
         self.list_active_border = self.list_active_border.apply(mask_color);
         self.list_hover = self.list_hover.apply(mask_color);
-        self.table = self.table.apply(mask_color);
-        self.table_even = self.table_even.apply(mask_color);
-        self.table_active = self.table_active.apply(mask_color);
-        self.table_active_border = self.table_active_border.apply(mask_color);
-        self.table_hover = self.table_hover.apply(mask_color);
-        self.table_row_border = self.table_row_border.apply(mask_color);
-        self.table_head = self.table_head.apply(mask_color);
-        self.table_head_foreground = self.table_head_foreground.apply(mask_color);
         self.link = self.link.apply(mask_color);
         self.link_hover = self.link_hover.apply(mask_color);
         self.link_active = self.link_active.apply(mask_color);
         self.skeleton = self.skeleton.apply(mask_color);
-        self.accordion = self.accordion.apply(mask_color);
-        self.accordion_hover = self.accordion_hover.apply(mask_color);
-        self.accordion_active = self.accordion_active.apply(mask_color);
         self.title_bar = self.title_bar.apply(mask_color);
         self.title_bar_border = self.title_bar_border.apply(mask_color);
         self.sidebar = self.sidebar.apply(mask_color);

crates/ui/src/window_border.rs

@@ -1,6 +1,3 @@
-// From:
-// https://github.com/zed-industries/zed/blob/a8afc63a91f6b75528540dcffe73dc8ce0c92ad8/crates/gpui/examples/window_shadow.rs
-
 use gpui::{
     canvas, div, point, prelude::FluentBuilder as _, px, AnyElement, Bounds, CursorStyle,
     Decorations, Edges, Hsla, InteractiveElement as _, IntoElement, MouseButton, ParentElement,