From 778bcc1ef7887cacae353dc2887f0307ba25ac8d Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Sat, 12 Jun 2021 15:53:56 +0200 Subject: [PATCH] Style tweaks (#450) * 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 --- CHANGELOG.md | 1 + egui/src/containers/collapsing_header.rs | 17 +- egui/src/containers/combo_box.rs | 26 +- egui/src/containers/frame.rs | 14 +- egui/src/containers/scroll_area.rs | 29 +- egui/src/grid.rs | 7 +- egui/src/introspection.rs | 19 +- egui/src/menu.rs | 3 +- egui/src/style.rs | 328 +++++++++++++----- egui/src/ui.rs | 11 +- egui/src/widgets/button.rs | 31 +- egui/src/widgets/color_picker.rs | 14 +- egui/src/widgets/plot/mod.rs | 2 +- egui/src/widgets/slider.rs | 8 +- .../src/easy_mark/easy_mark_viewer.rs | 2 +- epaint/src/shadow.rs | 14 +- epaint/src/text/font.rs | 3 +- epaint/src/text/fonts.rs | 2 +- 18 files changed, 365 insertions(+), 166 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 27ccf4c2..1df224fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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. diff --git a/egui/src/containers/collapsing_header.rs b/egui/src/containers/collapsing_header.rs index 0af5b04d..a9b2bb27 100644 --- a/egui/src/containers/collapsing_header.rs +++ b/egui/src/containers/collapsing_header.rs @@ -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); diff --git a/egui/src/containers/combo_box.rs b/egui/src/containers/combo_box.rs index acc00c40..042ff345 100644 --- a/egui/src/containers/combo_box.rs +++ b/egui/src/containers/combo_box.rs @@ -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); @@ -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); @@ -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 @@ -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 { @@ -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, diff --git a/egui/src/containers/frame.rs b/egui/src/containers/frame.rs index cdb25d08..169f6057 100644 --- a/egui/src/containers/frame.rs +++ b/egui/src/containers/frame.rs @@ -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() } } @@ -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(), } @@ -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(), } @@ -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() diff --git a/egui/src/containers/scroll_area.rs b/egui/src/containers/scroll_area.rs index fc53cd16..71f88f58 100644 --- a/egui/src/containers/scroll_area.rs +++ b/egui/src/containers/scroll_area.rs @@ -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(); @@ -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(), @@ -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_filled( + outer_scroll_rect, + visuals.corner_radius, + ui.visuals().extreme_bg_color, + )); - 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( + handle_rect, + visuals.corner_radius, + visuals.bg_fill, + )); } let size = vec2( @@ -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 } diff --git a/egui/src/grid.rs b/egui/src/grid.rs index e1ab228e..e219e2aa 100644 --- a/egui/src/grid.rs +++ b/egui/src/grid.rs @@ -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); } } } diff --git a/egui/src/introspection.rs b/egui/src/introspection.rs index 8c490bb4..af5d2bff 100644 --- a/egui/src/introspection.rs +++ b/egui/src/introspection.rs @@ -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 } diff --git a/egui/src/menu.rs b/egui/src/menu.rs index e2bdd4af..4b9f70b5 100644 --- a/egui/src/menu.rs +++ b/egui/src/menu.rs @@ -75,7 +75,8 @@ fn menu_impl<'c>(ui: &mut Ui, title: impl ToString, add_contents: Box Self { Self { noninteractive: WidgetVisuals { - bg_fill: Color32::from_gray(30), // window background - bg_stroke: Stroke::new(1.0, Color32::from_gray(65)), // window outline - fg_stroke: Stroke::new(1.0, Color32::from_gray(160)), // normal text color - corner_radius: 4.0, + bg_fill: Color32::from_gray(27), // window background + bg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // separators, indentation lines, windows outlines + fg_stroke: Stroke::new(1.0, Color32::from_gray(140)), // normal text color + corner_radius: 2.0, expansion: 0.0, }, inactive: WidgetVisuals { - bg_fill: Color32::from_gray(70), + bg_fill: Color32::from_gray(60), // button background bg_stroke: Default::default(), - fg_stroke: Stroke::new(1.0, Color32::from_gray(200)), // Should NOT look grayed out! - corner_radius: 4.0, + fg_stroke: Stroke::new(1.0, Color32::from_gray(180)), // button text + corner_radius: 2.0, expansion: 0.0, }, hovered: WidgetVisuals { - bg_fill: Color32::from_gray(80), + bg_fill: Color32::from_gray(70), bg_stroke: Stroke::new(1.0, Color32::from_gray(150)), // e.g. hover over window edge or button fg_stroke: Stroke::new(1.5, Color32::from_gray(240)), - corner_radius: 4.0, + corner_radius: 3.0, expansion: 1.0, }, active: WidgetVisuals { - bg_fill: Color32::from_gray(90), + bg_fill: Color32::from_gray(55), bg_stroke: Stroke::new(1.0, Color32::WHITE), fg_stroke: Stroke::new(2.0, Color32::WHITE), - corner_radius: 4.0, - expansion: 2.0, + corner_radius: 2.0, + expansion: 1.0, + }, + open: WidgetVisuals { + bg_fill: Color32::from_gray(27), + bg_stroke: Stroke::new(1.0, Color32::from_gray(60)), + fg_stroke: Stroke::new(1.0, Color32::from_gray(210)), + corner_radius: 2.0, + expansion: 0.0, }, } } @@ -464,32 +502,39 @@ impl Widgets { pub fn light() -> Self { Self { noninteractive: WidgetVisuals { - bg_fill: Color32::from_gray(220), // window background - bg_stroke: Stroke::new(1.0, Color32::from_gray(180)), // window outline - fg_stroke: Stroke::new(1.0, Color32::from_gray(70)), // normal text color - corner_radius: 4.0, + bg_fill: Color32::from_gray(235), // window background + bg_stroke: Stroke::new(1.0, Color32::from_gray(190)), // separators, indentation lines, windows outlines + fg_stroke: Stroke::new(1.0, Color32::from_gray(100)), // normal text color + corner_radius: 2.0, expansion: 0.0, }, inactive: WidgetVisuals { - bg_fill: Color32::from_gray(195), + bg_fill: Color32::from_gray(215), // button background bg_stroke: Default::default(), - fg_stroke: Stroke::new(1.0, Color32::from_gray(55)), // Should NOT look grayed out! - corner_radius: 4.0, + fg_stroke: Stroke::new(1.0, Color32::from_gray(80)), // button text + corner_radius: 2.0, expansion: 0.0, }, hovered: WidgetVisuals { - bg_fill: Color32::from_gray(175), + bg_fill: Color32::from_gray(210), bg_stroke: Stroke::new(1.0, Color32::from_gray(105)), // e.g. hover over window edge or button - fg_stroke: Stroke::new(2.0, Color32::BLACK), - corner_radius: 4.0, + fg_stroke: Stroke::new(1.5, Color32::BLACK), + corner_radius: 3.0, expansion: 1.0, }, active: WidgetVisuals { bg_fill: Color32::from_gray(165), bg_stroke: Stroke::new(1.0, Color32::BLACK), fg_stroke: Stroke::new(2.0, Color32::BLACK), - corner_radius: 4.0, - expansion: 2.0, + corner_radius: 2.0, + expansion: 1.0, + }, + open: WidgetVisuals { + bg_fill: Color32::from_gray(220), + bg_stroke: Stroke::new(1.0, Color32::from_gray(160)), + fg_stroke: Stroke::new(1.0, Color32::BLACK), + corner_radius: 2.0, + expansion: 0.0, }, } } @@ -520,30 +565,55 @@ impl Style { visuals.light_dark_radio_buttons(ui); - ui.horizontal(|ui| { - ui.label("Default text style:"); - for &value in &[TextStyle::Body, TextStyle::Monospace] { - ui.radio_value(body_text_style, value, format!("{:?}", value)); - } - }); - - crate::ComboBox::from_label("Global text style override") - .selected_text(match override_text_style { - None => "None".to_owned(), - Some(override_text_style) => format!("{:?}", override_text_style), - }) - .show_ui(ui, |ui| { - ui.selectable_value(override_text_style, None, "None"); - for style in TextStyle::all() { - ui.selectable_value(override_text_style, Some(style), format!("{:?}", style)); + crate::Grid::new("_options").show(ui, |ui| { + ui.label("Default body text style:"); + ui.horizontal(|ui| { + for &style in &[TextStyle::Body, TextStyle::Monospace] { + if ui + .add( + RadioButton::new(*body_text_style == style, format!("{:?}", style)) + .text_style(style), + ) + .clicked() + { + *body_text_style = style; + }; } }); + ui.end_row(); - ui.add( - Slider::new(animation_time, 0.0..=1.0) - .text("animation durations") - .suffix(" s"), - ); + ui.label("Override text style:"); + crate::ComboBox::from_id_source("Override text style") + .selected_text(match override_text_style { + None => "None".to_owned(), + Some(override_text_style) => format!("{:?}", override_text_style), + }) + .show_ui(ui, |ui| { + ui.selectable_value(override_text_style, None, "None"); + for style in TextStyle::all() { + // ui.selectable_value(override_text_style, Some(style), format!("{:?}", style)); + let selected = *override_text_style == Some(style); + if ui + .add( + SelectableLabel::new(selected, format!("{:?}", style)) + .text_style(style), + ) + .clicked() + { + *override_text_style = Some(style); + } + } + }); + ui.end_row(); + + ui.label("Animation duration:"); + ui.add( + Slider::new(animation_time, 0.0..=1.0) + .clamp_to_range(true) + .suffix(" s"), + ); + ui.end_row(); + }); ui.collapsing("📏 Spacing", |ui| spacing.ui(ui)); ui.collapsing("☝ Interaction", |ui| interaction.ui(ui)); @@ -567,19 +637,61 @@ impl Spacing { icon_width, icon_spacing, tooltip_width, + indent_ends_with_horizontal_line, + combo_height, + scroll_bar_width, } = self; - ui.add(slider_vec2(item_spacing, 0.0..=10.0, "item_spacing")); - ui.add(slider_vec2(window_padding, 0.0..=10.0, "window_padding")); - ui.add(slider_vec2(button_padding, 0.0..=10.0, "button_padding")); - ui.add(slider_vec2(interact_size, 0.0..=60.0, "interact_size")) + ui.add(slider_vec2(item_spacing, 0.0..=20.0, "Item spacing")); + ui.add(slider_vec2(window_padding, 0.0..=20.0, "Window padding")); + ui.add(slider_vec2(button_padding, 0.0..=20.0, "Button padding")); + ui.add(slider_vec2(interact_size, 4.0..=60.0, "Interact size")) .on_hover_text("Minimum size of an interactive widget"); - ui.add(Slider::new(indent, 0.0..=100.0).text("indent")); - ui.add(Slider::new(slider_width, 0.0..=1000.0).text("slider_width")); - ui.add(Slider::new(text_edit_width, 0.0..=1000.0).text("text_edit_width")); - ui.add(Slider::new(icon_width, 0.0..=60.0).text("icon_width")); - ui.add(Slider::new(icon_spacing, 0.0..=10.0).text("icon_spacing")); - ui.add(Slider::new(tooltip_width, 0.0..=1000.0).text("tooltip_width")); + ui.horizontal(|ui| { + ui.add(DragValue::new(indent).clamp_range(0.0..=100.0)); + ui.label("Indent"); + }); + ui.horizontal(|ui| { + ui.add(DragValue::new(slider_width).clamp_range(0.0..=1000.0)); + ui.label("Slider width"); + }); + ui.horizontal(|ui| { + ui.add(DragValue::new(text_edit_width).clamp_range(0.0..=1000.0)); + ui.label("TextEdit width"); + }); + ui.horizontal(|ui| { + ui.add(DragValue::new(scroll_bar_width).clamp_range(0.0..=32.0)); + ui.label("Scroll-bar width width"); + }); + + ui.horizontal(|ui| { + ui.label("Checkboxes etc:"); + ui.add( + DragValue::new(icon_width) + .prefix("width:") + .clamp_range(0.0..=60.0), + ); + ui.add( + DragValue::new(icon_spacing) + .prefix("spacing:") + .clamp_range(0.0..=10.0), + ); + }); + + ui.horizontal(|ui| { + ui.add(DragValue::new(tooltip_width).clamp_range(0.0..=1000.0)); + ui.label("Tooltip wrap width"); + }); + + ui.checkbox( + indent_ends_with_horizontal_line, + "End indented regions with a horizontal separator", + ); + + ui.horizontal(|ui| { + ui.label("Max height of a combo box"); + ui.add(DragValue::new(combo_height).clamp_range(0.0..=1000.0)); + }); ui.vertical_centered(|ui| reset_button(ui, self)); } @@ -612,33 +724,40 @@ impl Widgets { hovered, inactive, noninteractive, + open, } = self; - ui.collapsing("noninteractive", |ui| { - ui.label("The style of a widget that you cannot interact with."); + ui.collapsing("Noninteractive", |ui| { + ui.label( + "The style of a widget that you cannot interact with, e.g. labels and separators.", + ); noninteractive.ui(ui) }); - ui.collapsing("interactive & inactive", |ui| { + ui.collapsing("Interactive but inactive", |ui| { ui.label("The style of an interactive widget, such as a button, at rest."); inactive.ui(ui) }); - ui.collapsing("interactive & hovered", |ui| { + ui.collapsing("Interactive and hovered", |ui| { ui.label("The style of an interactive widget while you hover it."); hovered.ui(ui) }); - ui.collapsing("interactive & active", |ui| { + ui.collapsing("Interactive and active", |ui| { ui.label("The style of an interactive widget as you are clicking or dragging it."); active.ui(ui) }); + ui.collapsing("Open menu", |ui| { + ui.label("The style of an open combo-box or menu button"); + open.ui(ui) + }); - ui.vertical_centered(|ui| reset_button(ui, self)); + // ui.vertical_centered(|ui| reset_button(ui, self)); } } impl Selection { pub fn ui(&mut self, ui: &mut crate::Ui) { let Self { bg_fill, stroke } = self; - + ui.label("Selectable labels"); ui_color(ui, bg_fill, "bg_fill"); stroke_ui(ui, stroke, "stroke"); } @@ -653,12 +772,12 @@ impl WidgetVisuals { fg_stroke, expansion, } = self; - ui_color(ui, bg_fill, "bg_fill"); stroke_ui(ui, bg_stroke, "bg_stroke"); ui.add(Slider::new(corner_radius, 0.0..=10.0).text("corner_radius")); stroke_ui(ui, fg_stroke, "fg_stroke (text)"); - ui.add(Slider::new(expansion, -5.0..=5.0).text("expansion")); + ui.add(Slider::new(expansion, -5.0..=5.0).text("expansion")) + .on_hover_text("make shapes this much larger"); } } @@ -703,42 +822,66 @@ impl Visuals { override_text_color: _, widgets, selection, - extreme_bg_color, hyperlink_color, + faint_bg_color, + extreme_bg_color, code_bg_color, window_corner_radius, window_shadow, + popup_shadow, resize_corner_size, text_cursor_width, text_cursor_preview, clip_rect_margin, + button_frame, + collapsing_header_frame, } = self; - ui.collapsing("widgets", |ui| widgets.ui(ui)); - ui.collapsing("selection", |ui| selection.ui(ui)); + ui.collapsing("Background Colors", |ui| { + ui_color(ui, &mut widgets.inactive.bg_fill, "Buttons"); + ui_color(ui, &mut widgets.noninteractive.bg_fill, "Windows"); + ui_color(ui, faint_bg_color, "Faint accent").on_hover_text( + "Used for faint accentuation of interactive things, like striped grids.", + ); + ui_color(ui, extreme_bg_color, "Extreme") + .on_hover_text("Background of plots and paintings"); + }); - ui.group(|ui| { - ui.label("Window"); + ui.collapsing("Window", |ui| { // Common shortcuts ui_color(ui, &mut widgets.noninteractive.bg_fill, "Fill"); stroke_ui(ui, &mut widgets.noninteractive.bg_stroke, "Outline"); - ui.add(Slider::new(window_corner_radius, 0.0..=20.0).text("Corner Radius")); + ui.add(Slider::new(window_corner_radius, 0.0..=20.0).text("Rounding")); shadow_ui(ui, window_shadow, "Shadow"); + shadow_ui(ui, popup_shadow, "Shadow (small menus and popups)"); }); + + ui.collapsing("Widgets", |ui| widgets.ui(ui)); + ui.collapsing("Selection", |ui| selection.ui(ui)); + ui_color( ui, &mut widgets.noninteractive.fg_stroke.color, "Text color", ); + ui_color(ui, code_bg_color, Label::new("Code background").code()).on_hover_ui(|ui| { + ui.horizontal(|ui| { + ui.spacing_mut().item_spacing.x = 0.0; + ui.label("For monospaced inlined text "); + ui.code("like this"); + ui.label("."); + }); + }); - ui_color(ui, extreme_bg_color, "extreme_bg_color"); ui_color(ui, hyperlink_color, "hyperlink_color"); - ui_color(ui, code_bg_color, "code_bg_color"); ui.add(Slider::new(resize_corner_size, 0.0..=20.0).text("resize_corner_size")); - ui.add(Slider::new(text_cursor_width, 0.0..=2.0).text("text_cursor_width")); - ui.checkbox(text_cursor_preview, "text_cursor_preview"); + ui.add(Slider::new(text_cursor_width, 0.0..=4.0).text("text_cursor_width")); + ui.checkbox(text_cursor_preview, "Preview text cursor on hover"); ui.add(Slider::new(clip_rect_margin, 0.0..=20.0).text("clip_rect_margin")); + ui.checkbox(button_frame, "Button has a frame"); + ui.checkbox(collapsing_header_frame, "Collapsing header has a frame"); + ui.vertical_centered(|ui| reset_button(ui, self)); } } @@ -775,17 +918,26 @@ fn slider_vec2<'a>( ) -> impl Widget + 'a { move |ui: &mut crate::Ui| { ui.horizontal(|ui| { - ui.add(Slider::new(&mut value.x, range.clone()).text("w")); - ui.add(Slider::new(&mut value.y, range.clone()).text("h")); + ui.add( + DragValue::new(&mut value.x) + .clamp_range(range.clone()) + .prefix("x: "), + ); + ui.add( + DragValue::new(&mut value.y) + .clamp_range(range.clone()) + .prefix("y: "), + ); ui.label(text); }) .response } } -fn ui_color(ui: &mut Ui, srgba: &mut Color32, text: &str) { +fn ui_color(ui: &mut Ui, srgba: &mut Color32, text: impl Into