feat: design touch up
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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.)),
|
||||||
}]),
|
}]),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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(
|
||||||
|
|||||||
@@ -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()),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
Reference in New Issue
Block a user