Skip to content

Commit

Permalink
Style tweaks (#450)
Browse files Browse the repository at this point in the history 
* Tweak style

More compact, less round, less noisy

* Button text is now same size as body text
* The rounder corners are now less rounded
* Collapsing headers no longer have a frame around them
* Combo-boxes looks better when opened
* Slightly more muted colors
* Remove extra line spacing after `\n` (i.e. between paragraphs)

* Thinner scrollbars

* Tweak light mode

* Tweak shadows

* Fix broken doc link

* Add style tweak to CHANGELOG
  • Loading branch information
@emilk
emilk authored Jun 12, 2021
1 parent a50ddc2 commit 778bcc1
Show file tree
Hide file tree
Showing 18 changed files with 367 additions and 168 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ NOTE: [`eframe`](eframe/CHANGELOG.md), [`egui_web`](egui_web/CHANGELOG.md) and [
* Add `ScrollArea::enable_scrolling` to allow freezing scrolling when editing TextEdit widgets within it

### Changed 🔧
* [Tweaked the default visuals style](https://github.com/emilk/egui/pull/450).
* Plot: Changed `Curve` to `Line`.
* `TopPanel::top` is now `TopBottomPanel::top`.
* `SidePanel::left` no longet takes the default width by argument, but by a builder call.
Expand Down
17 changes: 10 additions & 7 deletions egui/src/containers/collapsing_header.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,13 +246,16 @@ impl CollapsingHeader {

let visuals = ui.style().interact(&header_response);
let text_color = visuals.text_color();
ui.painter().add(Shape::Rect {
rect: header_response.rect.expand(visuals.expansion),
corner_radius: visuals.corner_radius,
fill: visuals.bg_fill,
stroke: visuals.bg_stroke,
// stroke: Default::default(),
});

if ui.visuals().collapsing_header_frame {
ui.painter().add(Shape::Rect {
rect: header_response.rect.expand(visuals.expansion),
corner_radius: visuals.corner_radius,
fill: visuals.bg_fill,
stroke: visuals.bg_stroke,
// stroke: Default::default(),
});
}

{
let (mut icon_rect, _) = ui.spacing().icon_rectangles(header_response.rect);
Expand Down
26 changes: 16 additions & 10 deletions egui/src/containers/combo_box.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,8 @@ fn combo_box(
) -> Response {
let popup_id = button_id.with("popup");

let button_active = ui.memory().is_popup_open(popup_id);
let button_response = button_frame(ui, button_id, button_active, Sense::click(), |ui| {
let is_popup_open = ui.memory().is_popup_open(popup_id);
let button_response = button_frame(ui, button_id, is_popup_open, Sense::click(), |ui| {
// We don't want to change width when user selects something new
let full_minimum_width = ui.spacing().slider_width;
let icon_size = Vec2::splat(ui.spacing().icon_width);
Expand All @@ -193,10 +193,14 @@ fn combo_box(
let (_, rect) = ui.allocate_space(Vec2::new(width, height));
let button_rect = ui.min_rect().expand2(ui.spacing().button_padding);
let response = ui.interact(button_rect, button_id, Sense::click());
// response.active |= button_active;
// response.active |= is_popup_open;

let icon_rect = Align2::RIGHT_CENTER.align_size_within_rect(icon_size, rect);
let visuals = ui.style().interact(&response);
let visuals = if is_popup_open {
&ui.visuals().widgets.open
} else {
ui.style().interact(&response)
};
paint_icon(ui.painter(), icon_rect.expand(visuals.expansion), visuals);

let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size, rect);
Expand All @@ -207,9 +211,8 @@ fn combo_box(
if button_response.clicked() {
ui.memory().toggle_popup(popup_id);
}
const MAX_COMBO_HEIGHT: f32 = 128.0;
crate::popup::popup_below_widget(ui, popup_id, &button_response, |ui| {
ScrollArea::from_max_height(MAX_COMBO_HEIGHT).show(ui, menu_contents)
ScrollArea::from_max_height(ui.spacing().combo_height).show(ui, menu_contents)
});

button_response
Expand All @@ -218,7 +221,7 @@ fn combo_box(
fn button_frame(
ui: &mut Ui,
id: Id,
button_active: bool,
is_popup_open: bool,
sense: Sense,
add_contents: impl FnOnce(&mut Ui),
) -> Response {
Expand All @@ -237,9 +240,12 @@ fn button_frame(
let mut outer_rect = content_ui.min_rect().expand2(margin);
outer_rect.set_height(outer_rect.height().at_least(interact_size.y));

let mut response = ui.interact(outer_rect, id, sense);
response.is_pointer_button_down_on |= button_active;
let visuals = ui.style().interact(&response);
let response = ui.interact(outer_rect, id, sense);
let visuals = if is_popup_open {
&ui.visuals().widgets.open
} else {
ui.style().interact(&response)
};

ui.painter().set(
where_to_put_background,
Expand Down
14 changes: 7 additions & 7 deletions egui/src/containers/frame.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ impl Frame {
pub fn group(style: &Style) -> Self {
Self {
margin: Vec2::new(8.0, 6.0),
corner_radius: 4.0,
stroke: style.visuals.window_stroke(),
corner_radius: style.visuals.widgets.noninteractive.corner_radius,
stroke: style.visuals.widgets.noninteractive.bg_stroke,
..Default::default()
}
}
Expand Down Expand Up @@ -63,8 +63,8 @@ impl Frame {
pub fn menu(style: &Style) -> Self {
Self {
margin: Vec2::splat(1.0),
corner_radius: 2.0,
shadow: Shadow::small(),
corner_radius: style.visuals.widgets.noninteractive.corner_radius,
shadow: style.visuals.popup_shadow,
fill: style.visuals.window_fill(),
stroke: style.visuals.window_stroke(),
}
Expand All @@ -73,8 +73,8 @@ impl Frame {
pub fn popup(style: &Style) -> Self {
Self {
margin: style.spacing.window_padding,
corner_radius: 5.0,
shadow: Shadow::small(),
corner_radius: style.visuals.widgets.noninteractive.corner_radius,
shadow: style.visuals.popup_shadow,
fill: style.visuals.window_fill(),
stroke: style.visuals.window_stroke(),
}
Expand All @@ -84,7 +84,7 @@ impl Frame {
pub fn dark_canvas(style: &Style) -> Self {
Self {
margin: Vec2::new(10.0, 10.0),
corner_radius: 5.0,
corner_radius: style.visuals.widgets.noninteractive.corner_radius,
fill: Color32::from_black_alpha(250),
stroke: style.visuals.window_stroke(),
..Default::default()
Expand Down
31 changes: 13 additions & 18 deletions egui/src/containers/scroll_area.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,7 +357,6 @@ impl Prepared {
let margin = animation_t * ui.spacing().item_spacing.x;
let left = inner_rect.right() + margin;
let right = outer_rect.right();
let corner_radius = (right - left) / 2.0;
let top = inner_rect.top();
let bottom = inner_rect.bottom();

Expand Down Expand Up @@ -415,7 +414,7 @@ impl Prepared {
pos2(left, from_content(state.offset.y)),
pos2(right, from_content(state.offset.y + inner_rect.height())),
);
let min_handle_height = (2.0 * corner_radius).max(8.0);
let min_handle_height = ui.spacing().scroll_bar_width;
if handle_rect.size().y < min_handle_height {
handle_rect = Rect::from_center_size(
handle_rect.center(),
Expand All @@ -429,21 +428,17 @@ impl Prepared {
&ui.style().visuals.widgets.inactive
};

ui.painter().add(epaint::Shape::Rect {
rect: outer_scroll_rect,
corner_radius,
fill: ui.visuals().extreme_bg_color,
stroke: Default::default(),
// fill: visuals.bg_fill,
// stroke: visuals.bg_stroke,
});

ui.painter().add(epaint::Shape::Rect {
rect: handle_rect.expand(-2.0),
corner_radius,
fill: visuals.bg_fill,
stroke: visuals.bg_stroke,
});
ui.painter().add(epaint::Shape::rect_filled(
outer_scroll_rect,
visuals.corner_radius,
ui.visuals().extreme_bg_color,
));

ui.painter().add(epaint::Shape::rect_filled(
handle_rect,
visuals.corner_radius,
visuals.bg_fill,
));
}

let size = vec2(
Expand All @@ -465,5 +460,5 @@ impl Prepared {
}

fn max_scroll_bar_width_with_margin(ui: &Ui) -> f32 {
ui.spacing().item_spacing.x + 16.0
ui.spacing().item_spacing.x + ui.spacing().scroll_bar_width
}
7 changes: 1 addition & 6 deletions egui/src/grid.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,12 +198,7 @@ impl GridLayout {
let rect = rect.expand2(0.5 * self.spacing.y * Vec2::Y);
let rect = rect.expand2(2.0 * Vec2::X); // HACK: just looks better with some spacing on the sides

let color = if self.style.visuals.dark_mode {
Rgba::from_white_alpha(0.0075)
} else {
Rgba::from_black_alpha(0.075)
};
painter.rect_filled(rect, 2.0, color);
painter.rect_filled(rect, 2.0, self.style.visuals.faint_bg_color);
}
}
}
Expand Down
19 changes: 11 additions & 8 deletions egui/src/introspection.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,14 +132,17 @@ impl Widget for &mut epaint::TessellationOptions {
debug_paint_text_rects,
debug_ignore_clip_rects,
} = self;
ui.checkbox(anti_alias, "Antialias");
ui.checkbox(
coarse_tessellation_culling,
"Do coarse culling in the tessellator",
);
ui.checkbox(debug_ignore_clip_rects, "Ignore clip rectangles (debug)");
ui.checkbox(debug_paint_clip_rects, "Paint clip rectangles (debug)");
ui.checkbox(debug_paint_text_rects, "Paint text bounds (debug)");
ui.checkbox(anti_alias, "Antialias")
.on_hover_text("Turn off for small performance gain.");
ui.collapsing("debug", |ui| {
ui.checkbox(
coarse_tessellation_culling,
"Do coarse culling in the tessellator)",
);
ui.checkbox(debug_ignore_clip_rects, "Ignore clip rectangles");
ui.checkbox(debug_paint_clip_rects, "Paint clip rectangles");
ui.checkbox(debug_paint_text_rects, "Paint text bounds");
});
})
.response
}
Expand Down
3 changes: 2 additions & 1 deletion egui/src/menu.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ fn menu_impl<'c>(ui: &mut Ui, title: impl ToString, add_contents: Box<dyn FnOnce
let mut button = Button::new(title);

if bar_state.open_menu == Some(menu_id) {
button = button.fill(Some(ui.visuals().selection.bg_fill));
button = button.fill(ui.visuals().widgets.open.bg_fill);
button = button.stroke(ui.visuals().widgets.open.bg_stroke);
}

let button_response = ui.add(button);
Expand Down
Loading

0 comments on commit 778bcc1

Please sign in to comment.