zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-07 20:39:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Style nav buttons

Browse Source
This commit is contained in:
Piotr Osiewicz 2023-08-13 01:29:35 +02:00
parent e151555542
commit b586601cab
5 changed files with 73 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
crates/search/src/buffer_search.rs
View File

@ -209,6 +209,7 @@ impl View for BufferSearchBar {
render_nav_button(
label,
direction,
self.active_match_index.is_some(),
move |_, this, cx| match direction {
Direction::Prev => this.select_prev_match(&Default::default(), cx),
Direction::Next => this.select_next_match(&Default::default(), cx),

2
crates/search/src/project_search.rs
View File

@ -1552,12 +1552,14 @@ impl View for ProjectSearchBar {
cx,
)
};
let is_active = search.active_match_index.is_some();
let semantic_index = SemanticIndex::enabled(cx)
.then(|| search_button_for_mode(SearchMode::Semantic, cx));
let nav_button_for_direction = |label, direction, cx: &mut ViewContext<Self>| {
render_nav_button(
label,
direction,
is_active,
move |_, this, cx| {
if let Some(search) = this.active_project_search.as_ref() {
search.update(cx, |search, cx| search.select_match(direction, cx));

18
crates/search/src/search_bar.rs
View File

@ -1,5 +1,5 @@
use gpui::{
elements::{Flex, Label, MouseEventHandler, ParentElement, Svg},
elements::{Label, MouseEventHandler, Svg},
platform::{CursorStyle, MouseButton},
scene::{CornerRadii, MouseClick},
Action, AnyElement, Element, EventContext, View, ViewContext,
@ -42,6 +42,7 @@ pub(super) fn render_close_button<V: View>(
pub(super) fn render_nav_button<V: View>(
icon: &'static str,
direction: Direction,
active: bool,
on_click: impl Fn(MouseClick, &mut V, &mut EventContext<V>) + 'static,
cx: &mut ViewContext<V>,
) -> AnyElement<V> {
@ -59,11 +60,20 @@ pub(super) fn render_nav_button<V: View>(
}
};
let tooltip_style = theme::current(cx).tooltip.clone();
let cursor_style = if active {
CursorStyle::PointingHand
} else {
CursorStyle::default()
};
enum NavButton {}
MouseEventHandler::<NavButton, _>::new(direction as usize, cx, |state, cx| {
let theme = theme::current(cx);
let style = theme.search.nav_button.style_for(state).clone();
let style = theme
.search
.nav_button
.in_state(active)
.style_for(state)
.clone();
let mut container_style = style.container.clone();
let label = Label::new(icon, style.label.clone()).contained();
container_style.corner_radii = match direction {
@ -81,7 +91,7 @@ pub(super) fn render_nav_button<V: View>(
label.with_style(container_style)
})
.on_click(MouseButton::Left, on_click)
.with_cursor_style(CursorStyle::PointingHand)
.with_cursor_style(cursor_style)
.with_tooltip::<NavButton>(
direction as usize,
tooltip.to_string(),

2
crates/theme/src/theme.rs
View File

@ -388,7 +388,7 @@ pub struct Search {
pub dismiss_button: Interactive<IconButton>,
pub editor_icon: IconStyle,
pub mode_button: Toggleable<Interactive<ContainedText>>,
pub nav_button: Interactive<ContainedLabel>,
pub nav_button: Toggleable<Interactive<ContainedLabel>>,
pub search_bar_row_height: f32,
}

84
styles/src/style_tree/search.ts
View File

@ -250,36 +250,62 @@ export default function search(): any {
},
},
}),
nav_button: interactive({
base: {
text: text(theme.highest, "mono", "on"),
background: background(theme.highest, "on"),
corner_radius: 6,
border: {
...border(theme.highest, "on"),
left: false,
right: false,
},
padding: {
bottom: 3,
left: 10,
right: 10,
top: 3,
},
},
nav_button: toggleable({
state: {
hovered: {
...text(theme.highest, "mono", "on", "hovered"),
background: background(theme.highest, "on", "hovered"),
border: border(theme.highest, "on", "hovered"),
},
clicked: {
...text(theme.highest, "mono", "on", "pressed"),
background: background(theme.highest, "on", "pressed"),
border: border(theme.highest, "on", "pressed"),
},
},
inactive: interactive({
base: {
background: background(theme.highest, "disabled"),
text: text(theme.highest, "mono", "disabled"),
corner_radius: 6,
border: {
...border(theme.highest, "disabled"),
left: false,
right: false,
},
padding: {
bottom: 3,
left: 10,
right: 10,
top: 3,
},
},
state: {
hovered: {}
}
}),
active: interactive({
base: {
text: text(theme.highest, "mono", "on"),
background: background(theme.highest, "on"),
corner_radius: 6,
border: {
...border(theme.highest, "on"),
left: false,
right: false,
},
padding: {
bottom: 3,
left: 10,
right: 10,
top: 3,
},
},
state: {
hovered: {
...text(theme.highest, "mono", "on", "hovered"),
background: background(theme.highest, "on", "hovered"),
border: border(theme.highest, "on", "hovered"),
},
clicked: {
...text(theme.highest, "mono", "on", "pressed"),
background: background(theme.highest, "on", "pressed"),
border: border(theme.highest, "on", "pressed"),
},
},
})
}
}),
search_bar_row_height: 32,