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

wip: design

Browse Source
This commit is contained in:
reya
2025-01-22 16:20:28 +07:00
parent 0d445dfca1
commit 67075bb22d
8 changed files with 49 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
crates/app/src/views/app.rs
View File

@@ -4,17 +4,17 @@ use super::{
};
use crate::states::{app::AppRegistry, chat::ChatRegistry};
use gpui::{
div, impl_internal_actions, px, Axis, Context, Edges, InteractiveElement, IntoElement, Model,
ParentElement, Render, Styled, View, ViewContext, VisualContext, WeakView, WindowContext,
div, impl_internal_actions, px, svg, Axis, Context, Edges, InteractiveElement, IntoElement,
Model, ParentElement, Render, Styled, View, ViewContext, VisualContext, WeakView,
WindowContext,
};
use serde::Deserialize;
use std::sync::Arc;
use ui::{
dock_area::{dock::DockPlacement, DockArea, DockItem},
indicator::Indicator,
notification::NotificationType,
theme::Theme,
ContextModal, Root, Sizable, TitleBar,
theme::{scale::ColorScaleStep, ActiveTheme, Theme},
ContextModal, Root, TitleBar,
};
#[derive(Clone, PartialEq, Eq, Deserialize)]
@@ -163,12 +163,12 @@ impl Render for AppView {
if cx.global::<AppRegistry>().is_loading {
content = content.child(div()).child(
div()
.flex_1()
.flex()
.items_center()
.justify_center()
.child(Indicator::new().small()),
div().flex_1().flex().items_center().justify_center().child(
svg()
.path("brand/coop.svg")
.size_12()
.text_color(cx.theme().base.step(cx, ColorScaleStep::THREE)),
),
)
} else if let Some(account) = self.account.read(cx).as_ref() {
content = content

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

@@ -274,7 +274,7 @@ impl Dock {
})
.child(
div()
.bg(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.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)),
)

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

@@ -1,12 +1,9 @@
use crate::{
dock_area::{
dock::{Dock, DockPlacement},
panel::{Panel, PanelEvent, PanelStyle, PanelView},
stack_panel::StackPanel,
state::{DockAreaState, DockState},
tab_panel::TabPanel,
},
theme::{scale::ColorScaleStep, ActiveTheme},
use crate::dock_area::{
dock::{Dock, DockPlacement},
panel::{Panel, PanelEvent, PanelStyle, PanelView},
stack_panel::StackPanel,
state::{DockAreaState, DockState},
tab_panel::TabPanel,
};
use anyhow::Result;
use gpui::{
@@ -777,8 +774,7 @@ impl Render for DockArea {
.h_full()
// Left dock
.when_some(self.left_dock.clone(), |this, dock| {
this.bg(cx.theme().base.step(cx, ColorScaleStep::ONE))
.child(div().flex().flex_none().child(dock))
this.child(div().flex().flex_none().child(dock))
})
// Center
.child(

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

@@ -10,7 +10,6 @@ use crate::{
h_resizable, resizable_panel, v_resizable, ResizablePanel, ResizablePanelEvent,
ResizablePanelGroup,
},
theme::{scale::ColorScaleStep, ActiveTheme},
AxisExt as _, Placement,
};
use gpui::{
@@ -374,11 +373,10 @@ impl EventEmitter<PanelEvent> for StackPanel {}
impl EventEmitter<DismissEvent> for StackPanel {}
impl Render for StackPanel {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
h_flex()
.size_full()
.overflow_hidden()
.bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
.child(self.panel_group.clone())
}
}

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

@@ -574,11 +574,7 @@ impl TabPanel {
.top_0()
// Right -1 for avoid border overlap with the first tab
.right(-px(1.))
.border_r_1()
.border_b_1()
.h_full()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
.px_2()
.children(left_dock_button)
.children(bottom_dock_button),
@@ -658,11 +654,7 @@ impl TabPanel {
.items_center()
.top_0()
.right_0()
.border_l_1()
.border_b_1()
.h_full()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
.px_2()
.gap_1()
.child(self.render_toolbar(state, cx))
@@ -681,10 +673,23 @@ impl TabPanel {
div()
.id("tab-content")
.group("")
.overflow_y_scroll()
.overflow_x_hidden()
.overflow_hidden()
.flex_1()
.child(panel.view())
.p_1()
.child(
div()
.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))
})
.bg(cx.theme().background)
.overflow_hidden()
.child(panel.view()),
)
.when(state.droppable, |this| {
this.on_drag_move(cx.listener(Self::on_panel_drag_move))
.child(
@@ -950,7 +955,6 @@ impl Render for TabPanel {
.on_action(cx.listener(Self::on_action_close_panel))
.size_full()
.overflow_hidden()
.bg(cx.theme().background)
.child(self.render_title_bar(state, cx))
.child(self.render_active_panel(state, cx))
}

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

@@ -84,22 +84,26 @@ 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) {
let (text_color, bg_color, hover_bg_color) = match (self.selected, self.disabled) {
(true, false) => (
cx.theme().base.step(cx, ColorScaleStep::TWELVE),
cx.theme().background,
cx.theme().accent.step(cx, ColorScaleStep::TWELVE),
cx.theme().accent.step(cx, ColorScaleStep::THREE),
cx.theme().accent.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),
),
// disabled
(true, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO),
),
(false, true) => (
cx.theme().base.step(cx, ColorScaleStep::ELEVEN),
cx.theme().base.step(cx, ColorScaleStep::ONE),
cx.theme().base.step(cx, ColorScaleStep::TWO),
),
};
@@ -115,22 +119,8 @@ impl RenderOnce for Tab {
.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().base.step(cx, ColorScaleStep::FIVE))
})
.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::FIVE)),
)
})
.rounded(px(cx.theme().radius))
.hover(|this| this.bg(hover_bg_color))
.when_some(self.prefix, |this, prefix| {
this.child(prefix).text_color(text_color)
})

19
crates/ui/src/tab/tab_bar.rs
View File

@@ -1,7 +1,4 @@
use crate::{
h_flex,
theme::{scale::ColorScaleStep, ActiveTheme},
};
use crate::h_flex;
use gpui::{
div, prelude::FluentBuilder as _, px, AnyElement, Div, ElementId, InteractiveElement,
IntoElement, ParentElement, RenderOnce, ScrollHandle, StatefulInteractiveElement as _, Styled,
@@ -63,29 +60,21 @@ impl Styled for TabBar {
}
impl RenderOnce for TabBar {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
self.base
.id(self.id)
.group("tab-bar")
.relative()
.px_1()
.flex()
.flex_none()
.items_center()
.bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
.child(
div()
.id("border-b")
.absolute()
.bottom_0()
.size_full()
.border_b_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE)),
)
.when_some(self.prefix, |this, prefix| this.child(prefix))
.child(
h_flex()
.id("tabs")
.flex_grow()
.gap_1()
.overflow_x_scroll()
.track_scroll(&self.scroll_handle)
.children(self.children),

2
crates/ui/src/title_bar.rs
View File

@@ -251,8 +251,6 @@ impl RenderOnce for TitleBar {
.items_center()
.justify_between()
.h(HEIGHT)
.border_b_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.bg(cx.theme().base.step(cx, ColorScaleStep::ONE))
.when(cx.is_fullscreen(), |this| this.pl(px(12.)))
.on_double_click(|_, cx| cx.zoom_window())