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

29
crates/ui/src/list/list.rs
View File

@@ -1,21 +1,17 @@
use std::time::Duration;
use std::{cell::Cell, rc::Rc};
use crate::Icon;
use crate::{
input::{InputEvent, TextInput},
scroll::{Scrollbar, ScrollbarState},
theme::ActiveTheme,
v_flex, IconName, Size,
theme::{scale::ColorScaleStep, ActiveTheme},
v_flex, Icon, IconName, Size,
};
use gpui::{
actions, div, prelude::FluentBuilder, uniform_list, AnyElement, AppContext, Entity,
actions, div, prelude::FluentBuilder, px, uniform_list, AnyElement, AppContext, Entity,
FocusHandle, FocusableView, InteractiveElement, IntoElement, KeyBinding, Length,
ListSizingBehavior, MouseButton, ParentElement, Render, SharedString, Styled, Task,
UniformListScrollHandle, View, ViewContext, VisualContext, WindowContext,
ListSizingBehavior, MouseButton, ParentElement, Render, ScrollStrategy, SharedString, Styled,
Task, UniformListScrollHandle, View, ViewContext, VisualContext, WindowContext,
};
use gpui::{px, ScrollStrategy};
use smol::Timer;
use std::{cell::Cell, rc::Rc, time::Duration};
actions!(list, [Cancel, Confirm, SelectPrev, SelectNext]);
@@ -105,7 +101,10 @@ where
let query_input = cx.new_view(|cx| {
TextInput::new(cx)
.appearance(false)
.prefix(|cx| Icon::new(IconName::Search).text_color(cx.theme().muted_foreground))
.prefix(|cx| {
Icon::new(IconName::Search)
.text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
})
.placeholder("Search...")
.cleanable()
});
@@ -326,9 +325,9 @@ where
.left(px(0.))
.right(px(0.))
.bottom(px(0.))
.bg(cx.theme().list_active)
.bg(cx.theme().accent.step(cx, ColorScaleStep::SIX))
.border_1()
.border_color(cx.theme().list_active_border),
.border_color(cx.theme().accent.step(cx, ColorScaleStep::NINE)),
)
})
})
@@ -341,7 +340,7 @@ where
.right(px(0.))
.bottom(px(0.))
.border_1()
.border_color(cx.theme().list_active_border),
.border_color(cx.theme().accent.step(cx, ColorScaleStep::NINE)),
)
})
.on_mouse_down(
@@ -418,7 +417,7 @@ where
_ => this.py_1().px_2(),
})
.border_b_1()
.border_color(cx.theme().border)
.border_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
.child(input),
)
})

32
crates/ui/src/list/list_item.rs
View File

@@ -1,4 +1,8 @@
use crate::{h_flex, theme::ActiveTheme, Disableable, Icon, IconName, Selectable, Sizable as _};
use crate::{
h_flex,
theme::{scale::ColorScaleStep, ActiveTheme},
Disableable, Icon, IconName, Selectable, Sizable as _,
};
use gpui::{
div, prelude::FluentBuilder as _, AnyElement, ClickEvent, Div, ElementId, InteractiveElement,
IntoElement, MouseButton, MouseMoveEvent, ParentElement, RenderOnce, Stateful,
@@ -123,7 +127,7 @@ impl RenderOnce for ListItem {
let is_active = self.selected || self.confirmed;
self.base
.text_color(cx.theme().foreground)
.text_color(cx.theme().base.step(cx, ColorScaleStep::TWELVE))
.relative()
.items_center()
.justify_between()
@@ -138,9 +142,11 @@ impl RenderOnce for ListItem {
this
}
})
.when(is_active, |this| this.bg(cx.theme().list_active))
.when(is_active, |this| {
this.bg(cx.theme().accent.step(cx, ColorScaleStep::NINE))
})
.when(!is_active && !self.disabled, |this| {
this.hover(|this| this.bg(cx.theme().list_hover))
this.hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::TWO)))
})
// Mouse enter
.when_some(self.on_mouse_enter, |this, on_mouse_enter| {
@@ -158,14 +164,16 @@ impl RenderOnce for ListItem {
.gap_x_1()
.child(div().w_full().children(self.children))
.when_some(self.check_icon, |this, icon| {
this.child(
div().w_5().items_center().justify_center().when(
self.confirmed,
|this| {
this.child(icon.small().text_color(cx.theme().muted_foreground))
},
),
)
this.child(div().w_5().items_center().justify_center().when(
self.confirmed,
|this| {
this.child(
icon.small().text_color(
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
),
)
},
))
}),
)
.when_some(self.suffix, |this, suffix| this.child(suffix(cx)))