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

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

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

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

@@ -254,15 +254,15 @@ impl Dock {
.right(px(1.)) .right(px(1.))
.h_full() .h_full()
.w(HANDLE_SIZE) .w(HANDLE_SIZE)
.pl(HANDLE_PADDING) .py_10()
}) })
.when(self.placement.is_right(), |this| { .when(self.placement.is_right(), |this| {
this.cursor_col_resize() this.cursor_col_resize()
.top_0() .top_0()
.left(neg_offset) .left(px(1.))
.h_full() .h_full()
.w(HANDLE_SIZE) .w(HANDLE_SIZE)
.px(HANDLE_PADDING) .py_10()
}) })
.when(self.placement.is_bottom(), |this| { .when(self.placement.is_bottom(), |this| {
this.cursor_row_resize() this.cursor_row_resize()
@@ -274,6 +274,7 @@ impl Dock {
}) })
.child( .child(
div() div()
.rounded_full()
.hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::SIX))) .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_horizontal(), |this| this.h_full().w(HANDLE_SIZE))
.when(axis.is_vertical(), |this| this.w_full().h(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, cx: &mut WindowContext,
) -> Self { ) -> Self {
let mut items = items; let mut items = items;
let stack_panel = cx.new_view(|cx| { let stack_panel = cx.new_view(|cx| {
let mut stack_panel = StackPanel::new(axis, cx); let mut stack_panel = StackPanel::new(axis, cx);
for (i, item) in items.iter_mut().enumerate() { for (i, item) in items.iter_mut().enumerate() {
@@ -623,7 +624,6 @@ impl DockArea {
} }
/// Subscribe event on the panels /// Subscribe event on the panels
#[allow(clippy::only_used_in_recursion)]
fn subscribe_item(&mut self, item: &DockItem, cx: &mut ViewContext<Self>) { fn subscribe_item(&mut self, item: &DockItem, cx: &mut ViewContext<Self>) {
match item { match item {
DockItem::Split { items, view, .. } => { DockItem::Split { items, view, .. } => {
@@ -744,7 +744,9 @@ impl DockArea {
.map(|view| view.entity_id()); .map(|view| view.entity_id());
} }
} }
impl EventEmitter<DockEvent> for DockArea {} impl EventEmitter<DockEvent> for DockArea {}
impl Render for DockArea { impl Render for DockArea {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement { fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
let view = cx.view().clone(); 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() .whitespace_nowrap()
.rounded(px(cx.theme().radius)) .rounded(px(cx.theme().radius))
.text_xs() .text_xs()
.border_1() .shadow_lg()
.border_color(cx.theme().base.step(cx, ColorScaleStep::SIX)) .bg(cx.theme().background)
.bg(cx.theme().base.step(cx, ColorScaleStep::TWO)) .text_color(cx.theme().accent.step(cx, ColorScaleStep::TWELVE))
.child(self.panel.title(cx)) .child(self.panel.title(cx))
} }
} }
@@ -471,7 +471,6 @@ impl TabPanel {
}; };
let panel_style = dock_area.read(cx).panel_style; let panel_style = dock_area.read(cx).panel_style;
let left_dock_button = self.render_dock_toggle_button(DockPlacement::Left, cx); 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 bottom_dock_button = self.render_dock_toggle_button(DockPlacement::Bottom, cx);
let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, cx); let right_dock_button = self.render_dock_toggle_button(DockPlacement::Right, cx);
@@ -681,11 +680,7 @@ impl TabPanel {
.size_full() .size_full()
.rounded_lg() .rounded_lg()
.shadow_sm() .shadow_sm()
.border_1() .when(cx.theme().appearance.is_dark(), |this| this.shadow_lg())
.border_color(cx.theme().background)
.when(cx.theme().appearance.is_dark(), |this| {
this.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
})
.bg(cx.theme().background) .bg(cx.theme().background)
.overflow_hidden() .overflow_hidden()
.child(panel.view()), .child(panel.view()),
@@ -696,7 +691,20 @@ impl TabPanel {
div() div()
.invisible() .invisible()
.absolute() .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 { .map(|this| match self.will_split_placement {
Some(placement) => { Some(placement) => {
let size = DefiniteLength::Fraction(0.35); let size = DefiniteLength::Fraction(0.35);

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

@@ -8,8 +8,8 @@ use gpui::{
WindowContext, WindowContext,
}; };
pub(crate) const HANDLE_PADDING: Pixels = px(4.); pub(crate) const HANDLE_PADDING: Pixels = px(8.);
pub(crate) const HANDLE_SIZE: Pixels = px(1.); pub(crate) const HANDLE_SIZE: Pixels = px(2.);
#[derive(IntoElement)] #[derive(IntoElement)]
pub(crate) struct ResizeHandle { pub(crate) struct ResizeHandle {
@@ -41,8 +41,6 @@ impl StatefulInteractiveElement for ResizeHandle {}
impl RenderOnce for ResizeHandle { impl RenderOnce for ResizeHandle {
fn render(self, cx: &mut WindowContext) -> impl IntoElement { fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let neg_offset = -HANDLE_PADDING;
self.base self.base
.occlude() .occlude()
.absolute() .absolute()
@@ -50,22 +48,23 @@ impl RenderOnce for ResizeHandle {
.when(self.axis.is_horizontal(), |this| { .when(self.axis.is_horizontal(), |this| {
this.cursor_col_resize() this.cursor_col_resize()
.top_0() .top_0()
.left(neg_offset) .left(px(-1.))
.h_full()
.w(HANDLE_SIZE) .w(HANDLE_SIZE)
.px(HANDLE_PADDING) .h_full()
.py_10()
}) })
.when(self.axis.is_vertical(), |this| { .when(self.axis.is_vertical(), |this| {
this.cursor_row_resize() this.cursor_row_resize()
.top(neg_offset) .top(px(-1.))
.left_0() .left_0()
.w_full() .w_full()
.h(HANDLE_SIZE) .h(HANDLE_SIZE)
.py(HANDLE_PADDING) .px_10()
}) })
.child( .child(
div() 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| { .when(self.axis.is_horizontal(), |this| {
this.h_full().w(HANDLE_SIZE) 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 { fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let (text_color, bg_color, hover_bg_color) = match (self.selected, self.disabled) { let (text_color, bg_color, hover_bg_color) = match (self.selected, self.disabled) {
(true, false) => ( (true, false) => (
cx.theme().accent.step(cx, ColorScaleStep::TWELVE), cx.theme().base.step(cx, ColorScaleStep::TWELVE),
cx.theme().accent.step(cx, ColorScaleStep::THREE), cx.theme().base.step(cx, ColorScaleStep::THREE),
cx.theme().accent.step(cx, ColorScaleStep::FOUR), cx.theme().base.step(cx, ColorScaleStep::FOUR),
), ),
(false, false) => ( (false, false) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN), cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE), cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO), cx.theme().base.step(cx, ColorScaleStep::FOUR),
), ),
// disabled // disabled
(true, true) => ( (true, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN), cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE), cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO), cx.theme().base.step(cx, ColorScaleStep::FOUR),
), ),
(false, true) => ( (false, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN), cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE), cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO), cx.theme().base.step(cx, ColorScaleStep::FOUR),
), ),
}; };