accordion: Improve Accordion style, and remove item gap when no border. (#1004)

<img width="635" alt="image"
src="https://github.com/user-attachments/assets/a18aaa73-9cca-4adb-bee9-8cac2178bda0"
/>
<img width="650" alt="image"
src="https://github.com/user-attachments/assets/02b10d8c-47a3-4226-9585-d1d970679dde"
/>
This commit is contained in:
Jason Lee 2025-06-24 17:46:55 +08:00 committed by GitHub
parent 21c8844377
commit c05d63dfbe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,9 +1,9 @@
use std::{cell::RefCell, collections::HashSet, rc::Rc, sync::Arc};
use gpui::{
div, prelude::FluentBuilder as _, rems, AnyElement, App, Div, ElementId,
InteractiveElement as _, IntoElement, ParentElement, RenderOnce, SharedString,
StatefulInteractiveElement as _, Styled, Window,
div, prelude::FluentBuilder as _, rems, AnyElement, App, ElementId, InteractiveElement as _,
IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement as _, Styled,
Window,
};
use crate::{h_flex, v_flex, ActiveTheme as _, Icon, IconName, Sizable, Size};
@ -12,7 +12,6 @@ use crate::{h_flex, v_flex, ActiveTheme as _, Icon, IconName, Sizable, Size};
#[derive(IntoElement)]
pub struct Accordion {
id: ElementId,
base: Div,
multiple: bool,
size: Size,
bordered: bool,
@ -25,7 +24,6 @@ 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,
@ -83,8 +81,9 @@ impl RenderOnce for Accordion {
let open_ixs = Rc::new(RefCell::new(HashSet::new()));
let is_multiple = self.multiple;
self.base
v_flex()
.id(self.id)
.when(self.bordered, |this| this.gap_1())
.children(
self.children
.into_iter()
@ -241,14 +240,15 @@ impl RenderOnce for AccordionItem {
})
.when(self.open, |this| {
this.when(self.bordered, |this| {
this.bg(cx.theme().accordion_active)
.text_color(cx.theme().foreground)
this.text_color(cx.theme().foreground)
.border_b_1()
.border_color(cx.theme().border)
})
})
.when(!self.bordered, |this| {
this.border_b_1().border_color(cx.theme().border)
this.border_b_1()
.border_color(cx.theme().border)
.rounded_t(cx.theme().radius)
})
.child(
h_flex()