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

wip: design

Browse Source
This commit is contained in:
reya
2025-01-23 08:45:37 +07:00
parent 67075bb22d
commit 272259cd16
7 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
crates/app/src/views/chat/message.rs
View File

@@ -1,6 +1,6 @@
use crate::states::chat::room::Member;
use gpui::{
div, img, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
div, img, px, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
WindowContext,
};
use ui::{
@@ -38,16 +38,25 @@ impl Message {
impl RenderOnce for Message {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
div()
.group(&self.ago)
.relative()
.flex()
.gap_3()
.w_full()
.p_2()
.border_l_2()
.border_color(cx.theme().background)
.hover(|this| {
this.bg(cx.theme().accent.step(cx, ColorScaleStep::ONE))
.border_color(cx.theme().accent.step(cx, ColorScaleStep::NINE))
})
.hover(|this| this.bg(cx.theme().accent.step(cx, ColorScaleStep::ONE)))
.child(
div()
.absolute()
.left_0()
.top_0()
.w(px(2.))
.h_full()
.bg(cx.theme().transparent)
.group_hover(&self.ago, |this| {
this.bg(cx.theme().accent.step(cx, ColorScaleStep::NINE))
}),
)
.child(
img(self.member.avatar())
.size_8()

5
crates/ui/src/divider.rs
View File

@@ -59,9 +59,10 @@ impl RenderOnce for Divider {
.child(
div()
.absolute()
.rounded_full()
.map(|this| match self.axis {
Axis::Vertical => this.w(px(1.)).h_full(),
Axis::Horizontal => this.h(px(1.)).w_full(),
Axis::Vertical => this.w(px(2.)).h_full(),
Axis::Horizontal => this.h(px(2.)).w_full(),
})
.bg(self
.color

7
crates/ui/src/dock_area/dock.rs
View File

@@ -254,15 +254,15 @@ impl Dock {
.right(px(1.))
.h_full()
.w(HANDLE_SIZE)
.pl(HANDLE_PADDING)
.py_10()
})
.when(self.placement.is_right(), |this| {
this.cursor_col_resize()
.top_0()
.left(neg_offset)
.left(px(1.))
.h_full()
.w(HANDLE_SIZE)
.px(HANDLE_PADDING)
.py_10()
})
.when(self.placement.is_bottom(), |this| {
this.cursor_row_resize()
@@ -274,6 +274,7 @@ impl Dock {
})
.child(
div()
.rounded_full()
.hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::SIX)))
.when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE))
.when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE)),

4
crates/ui/src/dock_area/mod.rs
View File

@@ -111,6 +111,7 @@ impl DockItem {
cx: &mut WindowContext,
) -> Self {
let mut items = items;
let stack_panel = cx.new_view(|cx| {
let mut stack_panel = StackPanel::new(axis, cx);
for (i, item) in items.iter_mut().enumerate() {
@@ -623,7 +624,6 @@ impl DockArea {
}
/// Subscribe event on the panels
#[allow(clippy::only_used_in_recursion)]
fn subscribe_item(&mut self, item: &DockItem, cx: &mut ViewContext<Self>) {
match item {
DockItem::Split { items, view, .. } => {
@@ -744,7 +744,9 @@ impl DockArea {
.map(|view| view.entity_id());
}
}
impl EventEmitter<DockEvent> for DockArea {}
impl Render for DockArea {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let view = cx.view().clone();

28
crates/ui/src/dock_area/tab_panel.rs
View File

@@ -59,9 +59,9 @@ impl Render for DragPanel {
.whitespace_nowrap()
.rounded(px(cx.theme().radius))
.text_xs()
.border_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::SIX))
.bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
.shadow_lg()
.bg(cx.theme().background)
.text_color(cx.theme().accent.step(cx, ColorScaleStep::TWELVE))
.child(self.panel.title(cx))
}
}
@@ -471,7 +471,6 @@ impl TabPanel {
};
let panel_style = dock_area.read(cx).panel_style;
let left_dock_button = self.render_dock_toggle_button(DockPlacement::Left, cx);
let bottom_dock_button = self.render_dock_toggle_button(DockPlacement::Bottom, cx);
let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, cx);
@@ -681,11 +680,7 @@ impl TabPanel {
.size_full()
.rounded_lg()
.shadow_sm()
.border_1()
.border_color(cx.theme().background)
.when(cx.theme().appearance.is_dark(), |this| {
this.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
})
.when(cx.theme().appearance.is_dark(), |this| this.shadow_lg())
.bg(cx.theme().background)
.overflow_hidden()
.child(panel.view()),
@@ -696,7 +691,20 @@ impl TabPanel {
div()
.invisible()
.absolute()
.bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
.p_1()
.child(
div()
.rounded_lg()
.border_1()
.border_color(
cx.theme().accent.step(cx, ColorScaleStep::FOUR),
)
.bg(cx
.theme()
.accent
.step_alpha(cx, ColorScaleStep::THREE))
.size_full(),
)
.map(|this| match self.will_split_placement {
Some(placement) => {
let size = DefiniteLength::Fraction(0.35);

19
crates/ui/src/resizable/resize_handle.rs
View File

@@ -8,8 +8,8 @@ use gpui::{
WindowContext,
};
pub(crate) const HANDLE_PADDING: Pixels = px(4.);
pub(crate) const HANDLE_SIZE: Pixels = px(1.);
pub(crate) const HANDLE_PADDING: Pixels = px(8.);
pub(crate) const HANDLE_SIZE: Pixels = px(2.);
#[derive(IntoElement)]
pub(crate) struct ResizeHandle {
@@ -41,8 +41,6 @@ impl StatefulInteractiveElement for ResizeHandle {}
impl RenderOnce for ResizeHandle {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let neg_offset = -HANDLE_PADDING;
self.base
.occlude()
.absolute()
@@ -50,22 +48,23 @@ impl RenderOnce for ResizeHandle {
.when(self.axis.is_horizontal(), |this| {
this.cursor_col_resize()
.top_0()
.left(neg_offset)
.h_full()
.left(px(-1.))
.w(HANDLE_SIZE)
.px(HANDLE_PADDING)
.h_full()
.py_10()
})
.when(self.axis.is_vertical(), |this| {
this.cursor_row_resize()
.top(neg_offset)
.top(px(-1.))
.left_0()
.w_full()
.h(HANDLE_SIZE)
.py(HANDLE_PADDING)
.px_10()
})
.child(
div()
.bg(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.rounded_full()
.hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::SIX)))
.when(self.axis.is_horizontal(), |this| {
this.h_full().w(HANDLE_SIZE)
})

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

@@ -86,25 +86,25 @@ impl RenderOnce for Tab {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let (text_color, bg_color, hover_bg_color) = match (self.selected, self.disabled) {
(true, false) => (
cx.theme().accent.step(cx, ColorScaleStep::TWELVE),
cx.theme().accent.step(cx, ColorScaleStep::THREE),
cx.theme().accent.step(cx, ColorScaleStep::FOUR),
cx.theme().base.step(cx, ColorScaleStep::TWELVE),
cx.theme().base.step(cx, ColorScaleStep::THREE),
cx.theme().base.step(cx, ColorScaleStep::FOUR),
),
(false, false) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO),
cx.theme().base.step(cx, ColorScaleStep::FOUR),
),
// disabled
(true, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO),
cx.theme().base.step(cx, ColorScaleStep::FOUR),
),
(false, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO),
cx.theme().base.step(cx, ColorScaleStep::FOUR),
),
};