Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add some basic styling to FindBar

Browse source
This commit is contained in:
Antonio Scandurra 2022-01-31 11:00:29 +01:00
parent 7db4cad9e0
commit 803cdd00a6
3 changed files with 49 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

54
crates/find/src/find.rs
View file

@ -6,8 +6,8 @@ use editor::{
MultiBufferSnapshot,
};
use gpui::{
action, elements::*, keymap::Binding, Entity, MutableAppContext, RenderContext, Subscription,
Task, View, ViewContext, ViewHandle, WeakViewHandle,
action, elements::*, keymap::Binding, platform::CursorStyle, Entity, MutableAppContext,
RenderContext, Subscription, Task, View, ViewContext, ViewHandle, WeakViewHandle,
};
use postage::watch;
use regex::RegexBuilder;
@ -85,34 +85,30 @@ impl View for FindBar {
}
fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
let theme = &self.settings.borrow().theme.find;
let theme = &self.settings.borrow().theme;
let editor_container = if self.query_contains_error {
theme.invalid_editor
theme.find.invalid_editor
} else {
theme.editor.input.container
theme.find.editor.input.container
};
Flex::row()
.with_child(
ChildView::new(&self.query_editor)
.contained()
.with_style(editor_container)
.aligned()
.constrained()
.with_max_width(theme.editor.max_width)
.with_max_width(theme.find.editor.max_width)
.boxed(),
)
.with_child(
Flex::row()
.with_child(self.render_mode_button("Aa", SearchMode::CaseSensitive, theme, cx))
.with_child(self.render_mode_button("|ab|", SearchMode::WholeWord, theme, cx))
.with_child(self.render_mode_button(".*", SearchMode::Regex, theme, cx))
.with_child(self.render_mode_button("Case", SearchMode::CaseSensitive, cx))
.with_child(self.render_mode_button("Word", SearchMode::WholeWord, cx))
.with_child(self.render_mode_button("Regex", SearchMode::Regex, cx))
.contained()
.with_style(theme.mode_button_group)
.boxed(),
)
.with_child(
Flex::row()
.with_child(self.render_nav_button("<", Direction::Prev, theme, cx))
.with_child(self.render_nav_button(">", Direction::Next, theme, cx))
.with_style(theme.find.mode_button_group)
.aligned()
.boxed(),
)
.with_children(self.active_editor.as_ref().and_then(|editor| {
@ -122,18 +118,28 @@ impl View for FindBar {
let message = if highlighted_ranges.is_empty() {
"No matches".to_string()
} else {
format!("{} of {}", match_ix, highlighted_ranges.len())
format!("{}/{}", match_ix, highlighted_ranges.len())
};
Some(
Label::new(message, theme.match_index.text.clone())
Label::new(message, theme.find.match_index.text.clone())
.contained()
.with_style(theme.match_index.container)
.with_style(theme.find.match_index.container)
.aligned()
.boxed(),
)
}))
.with_child(
Flex::row()
.with_child(self.render_nav_button("<", Direction::Prev, cx))
.with_child(self.render_nav_button(">", Direction::Next, cx))
.aligned()
.boxed(),
)
.contained()
.with_style(theme.container)
.boxed()
.with_style(theme.find.container)
.constrained()
.with_height(theme.workspace.toolbar.height)
.named("find bar")
}
}
@ -217,9 +223,9 @@ impl FindBar {
&self,
icon: &str,
mode: SearchMode,
theme: &theme::Find,
cx: &mut RenderContext<Self>,
) -> ElementBox {
let theme = &self.settings.borrow().theme.find;
let is_active = self.is_mode_enabled(mode);
MouseEventHandler::new::<Self, _, _, _>((cx.view_id(), mode as usize), cx, |state, _| {
let style = match (is_active, state.hovered) {
@ -234,6 +240,7 @@ impl FindBar {
.boxed()
})
.on_click(move |cx| cx.dispatch_action(ToggleMode(mode)))
.with_cursor_style(CursorStyle::PointingHand)
.boxed()
}
@ -241,9 +248,9 @@ impl FindBar {
&self,
icon: &str,
direction: Direction,
theme: &theme::Find,
cx: &mut RenderContext<Self>,
) -> ElementBox {
let theme = &self.settings.borrow().theme.find;
MouseEventHandler::new::<Self, _, _, _>(
(cx.view_id(), 10 + direction as usize),
cx,
@ -260,6 +267,7 @@ impl FindBar {
},
)
.on_click(move |cx| cx.dispatch_action(GoToMatch(direction)))
.with_cursor_style(CursorStyle::PointingHand)
.boxed()
}

6
crates/theme/src/theme.rs
View file

@ -38,6 +38,7 @@ pub struct Workspace {
pub left_sidebar: Sidebar,
pub right_sidebar: Sidebar,
pub status_bar: StatusBar,
pub toolbar: Toolbar,
}
#[derive(Clone, Deserialize, Default)]
@ -88,6 +89,11 @@ pub struct Tab {
pub icon_conflict: Color,
}
#[derive(Clone, Deserialize, Default)]
pub struct Toolbar {
pub height: f32,
}
#[derive(Clone, Deserialize, Default)]
pub struct Find {
#[serde(flatten)]

15
crates/zed/assets/themes/_base.toml
View file

@ -81,6 +81,9 @@ item_spacing = 24
cursor_position = "$text.2"
diagnostic_message = "$text.2"
[workspace.toolbar]
height = 44
[panel]
padding = { top = 12, left = 12, bottom = 12, right = 12 }
@ -325,10 +328,14 @@ background = "$surface.1"
[find.mode_button]
extends = "$text.1"
[find.mode_button_group]
padding = { left = 6, right = 6, top = 1, bottom = 1 }
corner_radius = 6
border = { width = 1, color = "$border.0" }
margin.left = 1
margin.right = 1
[find.mode_button_group]
padding = { left = 2, right = 2 }
[find.active_mode_button]
extends = "$find.mode_button"
@ -344,12 +351,14 @@ background = "$surface.2"
[find.match_index]
extends = "$text.1"
padding = 6
margin.left = 24
[find.editor]
max_width = 400
background = "$surface.0"
corner_radius = 6
padding = { left = 16, right = 16, top = 7, bottom = 7 }
padding = { left = 13, right = 13, top = 3, bottom = 3 }
margin = { top = 5, bottom = 5, left = 5, right = 5 }
text = "$text.0"
placeholder_text = "$text.2"