feat: design touch up

This commit is contained in:
2026-05-14 00:05:31 +08:00
parent 2c3de1fd6e
commit aa99ba2596
6 changed files with 114 additions and 113 deletions

View File

@@ -87,8 +87,8 @@ impl gpui::RenderOnce for Button {
let theme = app::current_theme(cx); let theme = app::current_theme(cx);
let icon_color = match self.variant { let icon_color = match self.variant {
| Variant::Primary => theme.colors.accent_on_solid, | Variant::Primary => theme.colors.accent_on_solid,
| Variant::Secondary => theme.colors.text, | Variant::Secondary => theme.colors.text,
}; };
let mut children: Vec<AnyElement> = Vec::with_capacity(3); let mut children: Vec<AnyElement> = Vec::with_capacity(3);

View File

@@ -210,25 +210,22 @@ impl gpui::RenderOnce for IssueListItem {
) )
.child(pills_row), .child(pills_row),
) )
.when(!self.is_last, |it| {
it.border_b_1().border_color(theme.colors.border)
})
.when(self.is_selected, |it| { .when(self.is_selected, |it| {
it.bg(theme.colors.selection_bg) it.bg(theme.colors.selection_bg)
.overflow_hidden() .overflow_hidden()
.border_r_1() .rounded_md()
.child( .child(
div() div()
.absolute() .absolute()
.right_0() .left_0()
.top_0() .top(px(6.))
.bottom_0() .bottom(px(6.))
.w_px() .w_0p5()
.bg(theme.colors.selection_border) .bg(theme.colors.selection_border)
.shadow(vec![gpui::BoxShadow { .shadow(vec![gpui::BoxShadow {
blur_radius: px(16.), blur_radius: px(10.),
spread_radius: px(2.), spread_radius: px(2.),
color: gpui::Hsla::from(theme.colors.selection_border).alpha(0.8), color: gpui::Hsla::from(theme.colors.selection_border),
offset: point(px(-2.), px(0.)), offset: point(px(-2.), px(0.)),
}]), }]),
) )

View File

@@ -89,41 +89,41 @@ impl PullRequestView {
.rounded_full(); .rounded_full();
match pr.state { match pr.state {
| api::issues::PullRequestState::Open => { | api::issues::PullRequestState::Open => {
status_pill = status_pill status_pill = status_pill
.bg(theme.colors.success_solid) .bg(theme.colors.success_solid)
.child( .child(
font_icon(FontIcon::PullRequestArrow) font_icon(FontIcon::PullRequestArrow)
.size_3() .size_3()
.text_color(theme.colors.success_on_solid), .text_color(theme.colors.success_on_solid),
) )
.child( .child(
text("Open") text("Open")
.text_color(theme.colors.success_on_solid) .text_color(theme.colors.success_on_solid)
.text_xs(),
);
}
| api::issues::PullRequestState::Closed => {
status_pill = status_pill
.bg(theme.colors.danger_solid)
.child(
font_icon(FontIcon::PullRequestClosed)
.size_3()
.text_color(theme.colors.danger_on_solid),
)
.child(
text("Closed")
.text_color(theme.colors.danger_on_solid)
.text_xs(),
);
}
| api::issues::PullRequestState::Merged => {
status_pill = status_pill.bg(theme.colors.accent_solid).child(
text("Merged")
.text_color(theme.colors.accent_on_solid)
.text_xs(), .text_xs(),
); );
} }
| api::issues::PullRequestState::Closed => {
status_pill = status_pill
.bg(theme.colors.danger_solid)
.child(
font_icon(FontIcon::PullRequestClosed)
.size_3()
.text_color(theme.colors.danger_on_solid),
)
.child(
text("Closed")
.text_color(theme.colors.danger_on_solid)
.text_xs(),
);
}
| api::issues::PullRequestState::Merged => {
status_pill = status_pill.bg(theme.colors.accent_solid).child(
text("Merged")
.text_color(theme.colors.accent_on_solid)
.text_xs(),
);
}
} }
let merge_text = match ( let merge_text = match (
@@ -131,48 +131,48 @@ impl PullRequestView {
pr.base_branch_name.as_ref(), pr.base_branch_name.as_ref(),
pr.head_branch_name.as_ref(), pr.head_branch_name.as_ref(),
) { ) {
| (Some(author), Some(base_branch), Some(head_branch)) => { | (Some(author), Some(base_branch), Some(head_branch)) => {
let str = format!( let str = format!(
"{} requested to merge {} into {}", "{} requested to merge {} into {}",
author.login, head_branch, base_branch author.login, head_branch, base_branch
); );
let head_branch_text_offset = author.login.len() + 20; let head_branch_text_offset = author.login.len() + 20;
let base_branch_text_offset = head_branch_text_offset + head_branch.len() + 6; let base_branch_text_offset = head_branch_text_offset + head_branch.len() + 6;
let highlights = [ let highlights = [
( (
0..author.login.len(), 0..author.login.len(),
gpui::HighlightStyle { gpui::HighlightStyle {
font_weight: Some(gpui::FontWeight::BOLD), font_weight: Some(gpui::FontWeight::BOLD),
..Default::default() ..Default::default()
}, },
), ),
( (
head_branch_text_offset..head_branch_text_offset + head_branch.len(), head_branch_text_offset..head_branch_text_offset + head_branch.len(),
gpui::HighlightStyle { gpui::HighlightStyle {
font_weight: Some(gpui::FontWeight::BOLD), font_weight: Some(gpui::FontWeight::BOLD),
color: Some(theme.colors.accent_fg.into()), color: Some(theme.colors.accent_fg.into()),
..Default::default() ..Default::default()
}, },
), ),
( (
base_branch_text_offset..base_branch_text_offset + base_branch.len(), base_branch_text_offset..base_branch_text_offset + base_branch.len(),
gpui::HighlightStyle { gpui::HighlightStyle {
font_weight: Some(gpui::FontWeight::BOLD), font_weight: Some(gpui::FontWeight::BOLD),
color: Some(theme.colors.accent_fg.into()), color: Some(theme.colors.accent_fg.into()),
..Default::default() ..Default::default()
}, },
), ),
]; ];
Some(( Some((
author, author,
gpui::StyledText::new(str).with_highlights(highlights), gpui::StyledText::new(str).with_highlights(highlights),
)) ))
} }
| _ => None, | _ => None,
}; };
let metadata_line = let metadata_line =
@@ -205,6 +205,7 @@ impl PullRequestView {
.size_full() .size_full()
.flex() .flex()
.flex_col() .flex_col()
.bg(theme.colors.surface)
.overflow_hidden() .overflow_hidden()
.child(Toolbar {}) .child(Toolbar {})
.child( .child(
@@ -217,7 +218,7 @@ impl PullRequestView {
.px_3p5() .px_3p5()
.py_3() .py_3()
.border_b_1() .border_b_1()
.border_color(theme.colors.border) .border_color(theme.colors.border_muted)
.child( .child(
div() div()
.w_full() .w_full()
@@ -261,18 +262,18 @@ impl gpui::Render for PullRequestView {
cx: &mut gpui::Context<Self>, cx: &mut gpui::Context<Self>,
) -> impl gpui::IntoElement { ) -> impl gpui::IntoElement {
div().size_full().child(match &self.pull_request_query { div().size_full().child(match &self.pull_request_query {
| Some(q) => match read_query(q, cx) { | Some(q) => match read_query(q, cx) {
| QueryStatus::Loaded(pr) => self.pr_content(pr, cx), | QueryStatus::Loaded(pr) => self.pr_content(pr, cx),
| QueryStatus::Err(e) => div() | QueryStatus::Err(e) => div()
.size_full() .size_full()
.child(format!("{:?}", e)) .child(format!("{:?}", e))
.into_any_element(), .into_any_element(),
| QueryStatus::Loading => div() | QueryStatus::Loading => div()
.size_full() .size_full()
.child("loading pr content") .child("loading pr content")
.into_any_element(), .into_any_element(),
}, },
| None => div().size_full().child("no pr selected").into_any_element(), | None => div().size_full().child("no pr selected").into_any_element(),
}) })
} }
} }
@@ -284,6 +285,7 @@ impl gpui::RenderOnce for Toolbar {
.px_2p5() .px_2p5()
.py_1() .py_1()
.variant(button::Variant::Secondary) .variant(button::Variant::Secondary)
.border_0()
} }
fn divider() -> gpui::Div { fn divider() -> gpui::Div {
@@ -291,6 +293,7 @@ impl gpui::RenderOnce for Toolbar {
} }
let theme = app::current_theme(cx); let theme = app::current_theme(cx);
div() div()
.w_full() .w_full()
.flex() .flex()
@@ -298,9 +301,9 @@ impl gpui::RenderOnce for Toolbar {
.items_center() .items_center()
.justify_start() .justify_start()
.p_1() .p_1()
.bg(theme.colors.background) .bg(theme.colors.surface)
.border_b_1() .border_b_1()
.border_color(theme.colors.border) .border_color(theme.colors.border_muted)
.child( .child(
toolbar_button("pr-review-btn") toolbar_button("pr-review-btn")
.leading(font_icon(FontIcon::Eye)) .leading(font_icon(FontIcon::Eye))
@@ -309,9 +312,9 @@ impl gpui::RenderOnce for Toolbar {
.child( .child(
toolbar_button("pr-review-btn") toolbar_button("pr-review-btn")
.leading(font_icon(FontIcon::RefreshCw)) .leading(font_icon(FontIcon::RefreshCw))
.mr_2(), .mr_1(),
) )
.child(divider().bg(theme.colors.border).mr_2()) .child(divider().bg(theme.colors.border).mr_1())
.child(toolbar_button("pr-review-btn").leading(font_icon(FontIcon::Star))) .child(toolbar_button("pr-review-btn").leading(font_icon(FontIcon::Star)))
.child(div().flex_1()) .child(div().flex_1())
.child( .child(

View File

@@ -33,9 +33,9 @@ impl Screen {
fn on_create(&mut self, cx: &mut gpui::Context<Self>) { fn on_create(&mut self, cx: &mut gpui::Context<Self>) {
_ = cx _ = cx
.subscribe(&self.issue_list, |this, _, event, cx| match event { .subscribe(&self.issue_list, |this, _, event, cx| match event {
| issue_list::Event::ItemSelected(pr_id) => { | issue_list::Event::ItemSelected(pr_id) => {
this.handle_issue_list_item_selected(pr_id, cx); this.handle_issue_list_item_selected(pr_id, cx);
} }
}) })
.detach(); .detach();
} }
@@ -64,8 +64,8 @@ impl gpui::Render for Screen {
div() div()
.flex() .flex()
.flex_col() .flex_col()
.bg(theme.colors.background)
.size_full() .size_full()
.bg(theme.colors.surface_chrome)
.child(self.titlebar.clone()) .child(self.titlebar.clone())
.child( .child(
div() div()
@@ -79,7 +79,7 @@ impl gpui::Render for Screen {
.w_64() .w_64()
.flex_shrink_0() .flex_shrink_0()
.h_full() .h_full()
.bg(theme.colors.surface_chrome) .ml_2()
.overflow_hidden() .overflow_hidden()
.child(self.issue_list.clone()), .child(self.issue_list.clone()),
) )
@@ -88,9 +88,12 @@ impl gpui::Render for Screen {
.flex_1() .flex_1()
.min_w_0() .min_w_0()
.min_h_0() .min_h_0()
.h_full() .m_2()
.mt_0()
.rounded_lg()
.overflow_hidden() .overflow_hidden()
.bg(theme.colors.surface) .border_1()
.border_color(theme.colors.border_muted)
.child(self.pull_request_view.clone()), .child(self.pull_request_view.clone()),
), ),
) )

View File

@@ -53,8 +53,6 @@ impl gpui::Render for TitleBar {
.bg(g.current_theme.colors.surface_chrome) .bg(g.current_theme.colors.surface_chrome)
.text_color(g.current_theme.colors.text) .text_color(g.current_theme.colors.text)
.relative() .relative()
.border_b_1()
.border_color(g.current_theme.colors.border)
.child(repo_selector(cx)) .child(repo_selector(cx))
.child(user_avatar) .child(user_avatar)
} }

View File

@@ -15,11 +15,11 @@ pub(crate) const fn latte() -> Theme {
mode: ThemeMode::Light, mode: ThemeMode::Light,
colors: ThemeColors { colors: ThemeColors {
background: hex(0xeff1f5), background: hex(0xeff1f5),
surface: hex(0xeff1f5), surface: hex(0xe6e9ef),
surface_elevated: hex(0xdce0e8), surface_elevated: hex(0xdce0e8),
surface_chrome: hex(0xe6e9ef), surface_chrome: hex(0xdce0e8),
surface_hover: hex(0xe6e9ef), surface_hover: hex(0xdce0e8),
surface_active: hex(0xdce0e8), surface_active: hex(0xccd0da),
border: hex(0xbcc0cc), border: hex(0xbcc0cc),
border_muted: hex(0xccd0da), border_muted: hex(0xccd0da),
border_strong: hex(0xacb0be), border_strong: hex(0xacb0be),