reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

wip: design

Browse Source
This commit is contained in:
reya
2025-01-15 09:11:21 +07:00
parent e8b34ae69e
commit ec24bba69c
35 changed files with 534 additions and 1566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
crates/ui/src/tab/mod.rs
View File

@@ -1,3 +1,4 @@
use crate::theme::scale::ColorScaleStep;
use crate::theme::ActiveTheme;
use crate::Selectable;
use gpui::prelude::FluentBuilder;
@@ -28,7 +29,7 @@ impl Tab {
Self {
id: id.clone(),
base: div().id(id).gap_1().py_1p5().px_3().h(px(30.)),
base: div().id(id),
label: label.into_any_element(),
metadata,
disabled: false,
@@ -85,30 +86,58 @@ impl Styled for Tab {
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),
(true, false) => (
cx.theme().base.step(cx, ColorScaleStep::TWELVE),
cx.theme().background,
),
(false, false) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::TWO),
),
// disabled
(true, true) => (cx.theme().muted_foreground, cx.theme().tab_active),
(false, true) => (cx.theme().muted_foreground, cx.theme().tab),
(true, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::TWO),
),
(false, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::TWO),
),
};
self.base
.h(px(30.))
.relative()
.flex()
.items_center()
.flex_shrink_0()
.cursor_pointer()
.overflow_hidden()
.text_sm()
.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(self.selected, |this| {
this.border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
})
.when(!self.selected, |this| {
this.child(
div()
.absolute()
.left_0()
.bottom_0()
.size_full()
.border_b_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::THREE)),
)
})
.when_some(self.prefix, |this, prefix| {
this.child(prefix).text_color(text_color)
})
.child(
div()
.px_3()
.flex()
.items_center()
.gap_1()