135 lines
3.9 KiB
Rust
135 lines
3.9 KiB
Rust
use crate::theme::ActiveTheme;
|
|
use crate::Selectable;
|
|
use gpui::prelude::FluentBuilder;
|
|
use gpui::*;
|
|
use nostr_sdk::prelude::*;
|
|
|
|
pub mod tab_bar;
|
|
|
|
#[derive(IntoElement)]
|
|
pub struct Tab {
|
|
id: ElementId,
|
|
base: Stateful<Div>,
|
|
label: AnyElement,
|
|
metadata: Option<Metadata>,
|
|
prefix: Option<AnyElement>,
|
|
suffix: Option<AnyElement>,
|
|
disabled: bool,
|
|
selected: bool,
|
|
}
|
|
|
|
impl Tab {
|
|
pub fn new(
|
|
id: impl Into<ElementId>,
|
|
label: impl IntoElement,
|
|
metadata: Option<Metadata>,
|
|
) -> Self {
|
|
let id: ElementId = id.into();
|
|
|
|
Self {
|
|
id: id.clone(),
|
|
base: div().id(id).gap_1().py_1p5().px_3().h(px(30.)),
|
|
label: label.into_any_element(),
|
|
metadata,
|
|
disabled: false,
|
|
selected: false,
|
|
prefix: None,
|
|
suffix: None,
|
|
}
|
|
}
|
|
|
|
/// 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
|
|
}
|
|
}
|
|
|
|
impl Selectable for Tab {
|
|
fn element_id(&self) -> &ElementId {
|
|
&self.id
|
|
}
|
|
|
|
fn selected(mut self, selected: bool) -> Self {
|
|
self.selected = selected;
|
|
self
|
|
}
|
|
}
|
|
|
|
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 RenderOnce for Tab {
|
|
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
|
|
let (text_color, bg_color) = match (self.selected, self.disabled) {
|
|
(true, false) => (cx.theme().tab_active_foreground, cx.theme().tab_active),
|
|
(false, false) => (cx.theme().muted_foreground, cx.theme().tab),
|
|
// disabled
|
|
(true, true) => (cx.theme().muted_foreground, cx.theme().tab_active),
|
|
(false, true) => (cx.theme().muted_foreground, cx.theme().tab),
|
|
};
|
|
|
|
self.base
|
|
.flex()
|
|
.items_center()
|
|
.flex_shrink_0()
|
|
.cursor_pointer()
|
|
.overflow_hidden()
|
|
.text_color(text_color)
|
|
.bg(bg_color)
|
|
.border_x_1()
|
|
.border_color(cx.theme().transparent)
|
|
.when(self.selected, |this| this.border_color(cx.theme().border))
|
|
.text_sm()
|
|
.when_some(self.prefix, |this, prefix| {
|
|
this.child(prefix).text_color(text_color)
|
|
})
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.items_center()
|
|
.gap_1()
|
|
.text_ellipsis()
|
|
.text_xs()
|
|
.child(div().when_some(self.metadata, |this, metadata| {
|
|
if let Some(picture) = metadata.picture {
|
|
this.flex_shrink_0().child(
|
|
img(format!("https://wsrv.nl/?url={}&w=100&h=100&n=-1", picture))
|
|
.size_4()
|
|
.rounded_full()
|
|
.object_fit(ObjectFit::Cover),
|
|
)
|
|
} else {
|
|
this.flex_shrink_0()
|
|
.child(img("brand/avatar.png").size_4().rounded_full())
|
|
}
|
|
}))
|
|
.child(self.label),
|
|
)
|
|
.when_some(self.suffix, |this, suffix| this.child(suffix))
|
|
}
|
|
}
|