From f1765978898135260e0b08125b3391c51f4113ee Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 16:27:39 +0100 Subject: [PATCH 01/13] Add Spacing::combo_width --- crates/egui/src/containers/combo_box.rs | 8 ++++---- crates/egui/src/containers/popup.rs | 2 ++ crates/egui/src/style.rs | 13 +++++++++++-- crates/egui_demo_lib/src/demo/widget_gallery.rs | 2 ++ 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/crates/egui/src/containers/combo_box.rs b/crates/egui/src/containers/combo_box.rs index 9942e899acf..37a58a8c8c5 100644 --- a/crates/egui/src/containers/combo_box.rs +++ b/crates/egui/src/containers/combo_box.rs @@ -162,9 +162,6 @@ impl ComboBox { let button_id = ui.make_persistent_id(id_source); ui.horizontal(|ui| { - if let Some(width) = width { - ui.spacing_mut().slider_width = width; // yes, this is ugly. Will remove later. - } let mut ir = combo_box_dyn( ui, button_id, @@ -172,6 +169,7 @@ impl ComboBox { menu_contents, icon, wrap_enabled, + width, ); if let Some(label) = label { ir.response @@ -240,6 +238,7 @@ fn combo_box_dyn<'c, R>( menu_contents: Box R + 'c>, icon: Option, wrap_enabled: bool, + width: Option, ) -> InnerResponse> { let popup_id = button_id.with("popup"); @@ -269,7 +268,8 @@ fn combo_box_dyn<'c, R>( ui.available_width() } else { // Occupy at least the minimum width assigned to Slider and ComboBox. - ui.spacing().slider_width - 2.0 * margin.x + let width = width.unwrap_or_else(|| ui.spacing().combo_width); + width - 2.0 * margin.x }; let icon_size = Vec2::splat(ui.spacing().icon_width); let wrap_width = if wrap_enabled { diff --git a/crates/egui/src/containers/popup.rs b/crates/egui/src/containers/popup.rs index 4decca3f165..add02b22b51 100644 --- a/crates/egui/src/containers/popup.rs +++ b/crates/egui/src/containers/popup.rs @@ -314,6 +314,8 @@ pub fn popup_below_widget( /// /// Useful for drop-down menus (combo boxes) or suggestion menus under text fields. /// +/// The opened popup will have the same width as the parent. +/// /// You must open the popup with [`Memory::open_popup`] or [`Memory::toggle_popup`]. /// /// Returns `None` if the popup is not open. diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs index 963f1b909ae..b72a4cabb7a 100644 --- a/crates/egui/src/style.rs +++ b/crates/egui/src/style.rs @@ -264,8 +264,11 @@ pub struct Spacing { /// Anything clickable should be (at least) this size. pub interact_size: Vec2, // TODO(emilk): rename min_interact_size ? - /// Default width of a [`Slider`] and [`ComboBox`](crate::ComboBox). - pub slider_width: f32, // TODO(emilk): rename big_interact_size ? + /// Default width of a [`Slider`]. + pub slider_width: f32, + + /// Default (minimum) width of a [`ComboBox`](crate::ComboBox). + pub combo_width: f32, /// Default width of a [`TextEdit`]. pub text_edit_width: f32, @@ -684,6 +687,7 @@ impl Default for Spacing { indent: 18.0, // match checkbox/radio-button with `button_padding.x + icon_width + icon_spacing` interact_size: vec2(40.0, 18.0), slider_width: 100.0, + combo_width: 100.0, text_edit_width: 280.0, icon_width: 14.0, icon_width_inner: 8.0, @@ -984,6 +988,7 @@ impl Spacing { indent, interact_size, slider_width, + combo_width, text_edit_width, icon_width, icon_width_inner, @@ -1012,6 +1017,10 @@ impl Spacing { ui.add(DragValue::new(slider_width).clamp_range(0.0..=1000.0)); ui.label("Slider width"); }); + ui.horizontal(|ui| { + ui.add(DragValue::new(combo_width).clamp_range(0.0..=1000.0)); + ui.label("ComboBox width"); + }); ui.horizontal(|ui| { ui.add(DragValue::new(text_edit_width).clamp_range(0.0..=1000.0)); ui.label("TextEdit width"); diff --git a/crates/egui_demo_lib/src/demo/widget_gallery.rs b/crates/egui_demo_lib/src/demo/widget_gallery.rs index 22d4ac06d37..d91ae395e74 100644 --- a/crates/egui_demo_lib/src/demo/widget_gallery.rs +++ b/crates/egui_demo_lib/src/demo/widget_gallery.rs @@ -175,6 +175,8 @@ impl WidgetGallery { egui::ComboBox::from_label("Take your pick") .selected_text(format!("{:?}", radio)) .show_ui(ui, |ui| { + ui.style_mut().wrap = Some(false); + ui.set_min_width(60.0); ui.selectable_value(radio, Enum::First, "First"); ui.selectable_value(radio, Enum::Second, "Second"); ui.selectable_value(radio, Enum::Third, "Third"); From 150818bf28155e6bda99533a02d1c9d510df5cc5 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 16:31:47 +0100 Subject: [PATCH 02/13] Put ComboBox arrow closer to the text --- crates/egui/src/containers/combo_box.rs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/crates/egui/src/containers/combo_box.rs b/crates/egui/src/containers/combo_box.rs index 37a58a8c8c5..b4483a95d72 100644 --- a/crates/egui/src/containers/combo_box.rs +++ b/crates/egui/src/containers/combo_box.rs @@ -262,6 +262,7 @@ fn combo_box_dyn<'c, R>( let margin = ui.spacing().button_padding; let button_response = button_frame(ui, button_id, is_popup_open, Sense::click(), |ui| { + let icon_spacing = ui.spacing().icon_spacing; // We don't want to change width when user selects something new let full_minimum_width = if wrap_enabled { // Currently selected value's text will be wrapped if needed, so occupy the available width. @@ -274,7 +275,7 @@ fn combo_box_dyn<'c, R>( let icon_size = Vec2::splat(ui.spacing().icon_width); let wrap_width = if wrap_enabled { // Use the available width, currently selected value's text will be wrapped if exceeds this value. - ui.available_width() - ui.spacing().item_spacing.x - icon_size.x + ui.available_width() - icon_spacing - icon_size.x } else { // Use all the width necessary to display the currently selected value's text. f32::INFINITY @@ -288,7 +289,7 @@ fn combo_box_dyn<'c, R>( full_minimum_width } else { // Occupy at least the minimum width needed to contain the widget with the currently selected value's text. - galley.size().x + ui.spacing().item_spacing.x + icon_size.x + galley.size().x + icon_spacing + icon_size.x }; // Case : wrap_enabled : occupy all the available width. From cb78a3feebc46844bd1b2570390dfb14264e11ce Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 16:42:55 +0100 Subject: [PATCH 03/13] Tweak faint_bg_color --- crates/egui/src/style.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs index b72a4cabb7a..f8bd9545eef 100644 --- a/crates/egui/src/style.rs +++ b/crates/egui/src/style.rs @@ -721,7 +721,7 @@ impl Visuals { widgets: Widgets::default(), selection: Selection::default(), hyperlink_color: Color32::from_rgb(90, 170, 255), - faint_bg_color: Color32::from_gray(35), + faint_bg_color: Color32::from_additive_luminance(8), extreme_bg_color: Color32::from_gray(10), // e.g. TextEdit background code_bg_color: Color32::from_gray(64), warn_fg_color: Color32::from_rgb(255, 143, 0), // orange @@ -755,7 +755,7 @@ impl Visuals { widgets: Widgets::light(), selection: Selection::light(), hyperlink_color: Color32::from_rgb(0, 155, 255), - faint_bg_color: Color32::from_gray(242), + faint_bg_color: Color32::from_additive_luminance(8), extreme_bg_color: Color32::from_gray(255), // e.g. TextEdit background code_bg_color: Color32::from_gray(230), warn_fg_color: Color32::from_rgb(255, 100, 0), // slightly orange red. it's difficult to find a warning color that pops on bright background. From dca97b5eafd015a0ffb7502939f01505337432ca Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 17:18:13 +0100 Subject: [PATCH 04/13] Make it possible to have buttons without background MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit …while still having background for sliders, checkboxes, etc --- .../egui/src/containers/collapsing_header.rs | 10 +++- crates/egui/src/containers/combo_box.rs | 2 +- crates/egui/src/containers/scroll_area.rs | 2 +- crates/egui/src/menu.rs | 6 +- crates/egui/src/style.rs | 58 +++++++++++++------ crates/egui/src/widgets/button.rs | 8 +-- crates/egui/src/widgets/color_picker.rs | 2 +- crates/egui/src/widgets/plot/legend.rs | 2 +- crates/egui/src/widgets/selected_label.rs | 8 ++- crates/egui/src/widgets/slider.rs | 8 +-- .../egui_demo_lib/src/demo/drag_and_drop.rs | 2 +- .../egui_demo_lib/src/demo/toggle_switch.rs | 20 +++++-- crates/egui_extras/src/datepicker/button.rs | 4 +- 13 files changed, 85 insertions(+), 47 deletions(-) diff --git a/crates/egui/src/containers/collapsing_header.rs b/crates/egui/src/containers/collapsing_header.rs index 942e06254c4..a4f7daae6d3 100644 --- a/crates/egui/src/containers/collapsing_header.rs +++ b/crates/egui/src/containers/collapsing_header.rs @@ -555,7 +555,7 @@ impl CollapsingHeader { ui.painter().add(epaint::RectShape { rect: header_response.rect.expand(visuals.expansion), rounding: visuals.rounding, - fill: visuals.bg_fill, + fill: visuals.optional_bg_fill, stroke: visuals.bg_stroke, // stroke: Default::default(), }); @@ -565,8 +565,12 @@ impl CollapsingHeader { { let rect = rect.expand(visuals.expansion); - ui.painter() - .rect(rect, visuals.rounding, visuals.bg_fill, visuals.bg_stroke); + ui.painter().rect( + rect, + visuals.rounding, + visuals.mandatory_bg_fill, + visuals.bg_stroke, + ); } { diff --git a/crates/egui/src/containers/combo_box.rs b/crates/egui/src/containers/combo_box.rs index b4483a95d72..04e7c5bf08e 100644 --- a/crates/egui/src/containers/combo_box.rs +++ b/crates/egui/src/containers/combo_box.rs @@ -391,7 +391,7 @@ fn button_frame( epaint::RectShape { rect: outer_rect.expand(visuals.expansion), rounding: visuals.rounding, - fill: visuals.bg_fill, + fill: visuals.optional_bg_fill, stroke: visuals.bg_stroke, }, ); diff --git a/crates/egui/src/containers/scroll_area.rs b/crates/egui/src/containers/scroll_area.rs index 7af37e40ce7..a9efe993b4e 100644 --- a/crates/egui/src/containers/scroll_area.rs +++ b/crates/egui/src/containers/scroll_area.rs @@ -846,7 +846,7 @@ impl Prepared { ui.painter().add(epaint::Shape::rect_filled( handle_rect, visuals.rounding, - visuals.bg_fill, + visuals.mandatory_bg_fill, )); } } diff --git a/crates/egui/src/menu.rs b/crates/egui/src/menu.rs index 089a290cf3f..db04898b3c8 100644 --- a/crates/egui/src/menu.rs +++ b/crates/egui/src/menu.rs @@ -68,7 +68,7 @@ fn set_menu_style(style: &mut Style) { style.spacing.button_padding = vec2(2.0, 0.0); style.visuals.widgets.active.bg_stroke = Stroke::NONE; style.visuals.widgets.hovered.bg_stroke = Stroke::NONE; - style.visuals.widgets.inactive.bg_fill = Color32::TRANSPARENT; + style.visuals.widgets.inactive.optional_bg_fill = Color32::TRANSPARENT; style.visuals.widgets.inactive.bg_stroke = Stroke::NONE; } @@ -180,7 +180,7 @@ fn stationary_menu_impl<'c, R>( let mut button = Button::new(title); if bar_state.open_menu.is_menu_open(menu_id) { - button = button.fill(ui.visuals().widgets.open.bg_fill); + button = button.fill(ui.visuals().widgets.open.optional_bg_fill); button = button.stroke(ui.visuals().widgets.open.bg_stroke); } @@ -492,7 +492,7 @@ impl SubMenuButton { ui.painter().rect_filled( rect.expand(visuals.expansion), visuals.rounding, - visuals.bg_fill, + visuals.optional_bg_fill, ); } diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs index f8bd9545eef..2b550f37ff1 100644 --- a/crates/egui/src/style.rs +++ b/crates/egui/src/style.rs @@ -216,7 +216,8 @@ impl Style { pub fn interact_selectable(&self, response: &Response, selected: bool) -> WidgetVisuals { let mut visuals = *self.visuals.widgets.style(response); if selected { - visuals.bg_fill = self.visuals.selection.bg_fill; + visuals.optional_bg_fill = self.visuals.selection.bg_fill; + visuals.mandatory_bg_fill = self.visuals.selection.bg_fill; // visuals.bg_stroke = self.visuals.selection.stroke; visuals.fg_stroke = self.visuals.selection.stroke; } @@ -536,7 +537,7 @@ impl Visuals { // TODO(emilk): replace with an alpha #[inline(always)] pub fn fade_out_to_color(&self) -> Color32 { - self.widgets.noninteractive.bg_fill + self.widgets.noninteractive.optional_bg_fill } /// Returned a "grayed out" version of the given color. @@ -597,8 +598,17 @@ impl Widgets { #[derive(Clone, Copy, Debug, PartialEq)] #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))] pub struct WidgetVisuals { - /// Background color of widget. - pub bg_fill: Color32, + /// Background color of widget that must have a background fill, + /// such as the slider background or a checkbox background. + /// + /// Must never be [`Color32::TRANSPARENT`]. + pub mandatory_bg_fill: Color32, + + /// Background color of widget that can _optionally_ have a background fill, + /// such as buttons. + /// + /// May be [`Color32::TRANSPARENT`]. + pub optional_bg_fill: Color32, /// For surrounding rectangle of things that need it, /// like buttons, the box of the checkbox, etc. @@ -805,35 +815,40 @@ impl Widgets { pub fn dark() -> Self { Self { noninteractive: WidgetVisuals { - bg_fill: Color32::from_gray(27), + optional_bg_fill: Color32::from_gray(27), + mandatory_bg_fill: Color32::from_gray(27), bg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // separators, indentation lines fg_stroke: Stroke::new(1.0, Color32::from_gray(140)), // normal text color rounding: Rounding::same(2.0), expansion: 0.0, }, inactive: WidgetVisuals { - bg_fill: Color32::from_gray(60), // button background + optional_bg_fill: Color32::from_gray(60), // button background + mandatory_bg_fill: Color32::from_gray(60), // checkbox background bg_stroke: Default::default(), fg_stroke: Stroke::new(1.0, Color32::from_gray(180)), // button text rounding: Rounding::same(2.0), expansion: 0.0, }, hovered: WidgetVisuals { - bg_fill: Color32::from_gray(70), + optional_bg_fill: Color32::from_gray(70), + mandatory_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)), rounding: Rounding::same(3.0), expansion: 1.0, }, active: WidgetVisuals { - bg_fill: Color32::from_gray(55), + optional_bg_fill: Color32::from_gray(55), + mandatory_bg_fill: Color32::from_gray(55), bg_stroke: Stroke::new(1.0, Color32::WHITE), fg_stroke: Stroke::new(2.0, Color32::WHITE), rounding: Rounding::same(2.0), expansion: 1.0, }, open: WidgetVisuals { - bg_fill: Color32::from_gray(27), + optional_bg_fill: Color32::from_gray(27), + mandatory_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)), rounding: Rounding::same(2.0), @@ -845,35 +860,40 @@ impl Widgets { pub fn light() -> Self { Self { noninteractive: WidgetVisuals { - bg_fill: Color32::from_gray(248), + optional_bg_fill: Color32::from_gray(248), + mandatory_bg_fill: Color32::from_gray(248), bg_stroke: Stroke::new(1.0, Color32::from_gray(190)), // separators, indentation lines fg_stroke: Stroke::new(1.0, Color32::from_gray(80)), // normal text color rounding: Rounding::same(2.0), expansion: 0.0, }, inactive: WidgetVisuals { - bg_fill: Color32::from_gray(230), // button background + optional_bg_fill: Color32::from_gray(230), // button background + mandatory_bg_fill: Color32::from_gray(230), // checkbox background bg_stroke: Default::default(), fg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // button text rounding: Rounding::same(2.0), expansion: 0.0, }, hovered: WidgetVisuals { - bg_fill: Color32::from_gray(220), + optional_bg_fill: Color32::from_gray(220), + mandatory_bg_fill: Color32::from_gray(220), bg_stroke: Stroke::new(1.0, Color32::from_gray(105)), // e.g. hover over window edge or button fg_stroke: Stroke::new(1.5, Color32::BLACK), rounding: Rounding::same(3.0), expansion: 1.0, }, active: WidgetVisuals { - bg_fill: Color32::from_gray(165), + optional_bg_fill: Color32::from_gray(165), + mandatory_bg_fill: Color32::from_gray(165), bg_stroke: Stroke::new(1.0, Color32::BLACK), fg_stroke: Stroke::new(2.0, Color32::BLACK), rounding: Rounding::same(2.0), expansion: 1.0, }, open: WidgetVisuals { - bg_fill: Color32::from_gray(220), + optional_bg_fill: Color32::from_gray(220), + mandatory_bg_fill: Color32::from_gray(220), bg_stroke: Stroke::new(1.0, Color32::from_gray(160)), fg_stroke: Stroke::new(1.0, Color32::BLACK), rounding: Rounding::same(2.0), @@ -1194,13 +1214,17 @@ impl Selection { impl WidgetVisuals { pub fn ui(&mut self, ui: &mut crate::Ui) { let Self { - bg_fill, + optional_bg_fill, + mandatory_bg_fill, bg_stroke, rounding, fg_stroke, expansion, } = self; - ui_color(ui, bg_fill, "background fill"); + ui_color(ui, optional_bg_fill, "optional background fill") + .on_hover_text("For buttons, combo-boxes, etc"); + ui_color(ui, mandatory_bg_fill, "mandatory background fill") + .on_hover_text("For checkboxes, sliders, etc"); stroke_ui(ui, bg_stroke, "background stroke"); rounding_ui(ui, rounding); @@ -1279,7 +1303,7 @@ impl Visuals { } = self; ui.collapsing("Background Colors", |ui| { - ui_color(ui, &mut widgets.inactive.bg_fill, "Buttons"); + ui_color(ui, &mut widgets.inactive.optional_bg_fill, "Buttons"); ui_color(ui, window_fill, "Windows"); ui_color(ui, panel_fill, "Panels"); ui_color(ui, faint_bg_color, "Faint accent").on_hover_text( diff --git a/crates/egui/src/widgets/button.rs b/crates/egui/src/widgets/button.rs index e485dbb9337..b802a1d55a4 100644 --- a/crates/egui/src/widgets/button.rs +++ b/crates/egui/src/widgets/button.rs @@ -193,7 +193,7 @@ impl Widget for Button { let visuals = ui.style().interact(&response); if frame { - let fill = fill.unwrap_or(visuals.bg_fill); + let fill = fill.unwrap_or(visuals.optional_bg_fill); let stroke = stroke.unwrap_or(visuals.bg_stroke); let rounding = rounding.unwrap_or(visuals.rounding); ui.painter() @@ -316,7 +316,7 @@ impl<'a> Widget for Checkbox<'a> { ui.painter().add(epaint::RectShape { rect: big_icon_rect.expand(visuals.expansion), rounding: visuals.rounding, - fill: visuals.bg_fill, + fill: visuals.mandatory_bg_fill, stroke: visuals.bg_stroke, }); @@ -425,7 +425,7 @@ impl Widget for RadioButton { painter.add(epaint::CircleShape { center: big_icon_rect.center(), radius: big_icon_rect.width() / 2.0 + visuals.expansion, - fill: visuals.bg_fill, + fill: visuals.mandatory_bg_fill, stroke: visuals.bg_stroke, }); @@ -540,7 +540,7 @@ impl Widget for ImageButton { ( expansion, visuals.rounding, - visuals.bg_fill, + visuals.optional_bg_fill, visuals.bg_stroke, ) } else { diff --git a/crates/egui/src/widgets/color_picker.rs b/crates/egui/src/widgets/color_picker.rs index 7777bec624b..464644e7408 100644 --- a/crates/egui/src/widgets/color_picker.rs +++ b/crates/egui/src/widgets/color_picker.rs @@ -95,7 +95,7 @@ fn color_button(ui: &mut Ui, color: Color32, open: bool) -> Response { let rounding = visuals.rounding.at_most(2.0); ui.painter() - .rect_stroke(rect, rounding, (2.0, visuals.bg_fill)); // fill is intentional, because default style has no border + .rect_stroke(rect, rounding, (2.0, visuals.mandatory_bg_fill)); // fill is intentional, because default style has no border } response diff --git a/crates/egui/src/widgets/plot/legend.rs b/crates/egui/src/widgets/plot/legend.rs index f626e569b0d..9a4df114c7f 100644 --- a/crates/egui/src/widgets/plot/legend.rs +++ b/crates/egui/src/widgets/plot/legend.rs @@ -119,7 +119,7 @@ impl LegendEntry { painter.add(epaint::CircleShape { center: icon_rect.center(), radius: icon_size * 0.5, - fill: visuals.bg_fill, + fill: visuals.mandatory_bg_fill, stroke: visuals.bg_stroke, }); diff --git a/crates/egui/src/widgets/selected_label.rs b/crates/egui/src/widgets/selected_label.rs index 2f2d49d23d7..8ec1b07f247 100644 --- a/crates/egui/src/widgets/selected_label.rs +++ b/crates/egui/src/widgets/selected_label.rs @@ -64,8 +64,12 @@ impl Widget for SelectableLabel { if selected || response.hovered() || response.has_focus() { let rect = rect.expand(visuals.expansion); - ui.painter() - .rect(rect, visuals.rounding, visuals.bg_fill, visuals.bg_stroke); + ui.painter().rect( + rect, + visuals.rounding, + visuals.optional_bg_fill, + visuals.bg_stroke, + ); } text.paint_with_visuals(ui.painter(), text_pos, &visuals); diff --git a/crates/egui/src/widgets/slider.rs b/crates/egui/src/widgets/slider.rs index 0142e2e3f63..f17653d1c4d 100644 --- a/crates/egui/src/widgets/slider.rs +++ b/crates/egui/src/widgets/slider.rs @@ -623,12 +623,8 @@ impl<'a> Slider<'a> { ui.painter().add(epaint::RectShape { rect: rail_rect, rounding: ui.visuals().widgets.inactive.rounding, - fill: ui.visuals().widgets.inactive.bg_fill, - // fill: visuals.bg_fill, - // fill: ui.visuals().extreme_bg_color, + fill: ui.visuals().widgets.inactive.mandatory_bg_fill, stroke: Default::default(), - // stroke: visuals.bg_stroke, - // stroke: ui.visuals().widgets.inactive.bg_stroke, }); let center = self.marker_center(position_1d, &rail_rect); @@ -636,7 +632,7 @@ impl<'a> Slider<'a> { ui.painter().add(epaint::CircleShape { center, radius: self.handle_radius(rect) + visuals.expansion, - fill: visuals.bg_fill, + fill: visuals.mandatory_bg_fill, stroke: visuals.fg_stroke, }); } diff --git a/crates/egui_demo_lib/src/demo/drag_and_drop.rs b/crates/egui_demo_lib/src/demo/drag_and_drop.rs index 019ace90271..e58377ef32a 100644 --- a/crates/egui_demo_lib/src/demo/drag_and_drop.rs +++ b/crates/egui_demo_lib/src/demo/drag_and_drop.rs @@ -55,7 +55,7 @@ pub fn drop_target( ui.visuals().widgets.inactive }; - let mut fill = style.bg_fill; + let mut fill = style.mandatory_bg_fill; let mut stroke = style.bg_stroke; if is_being_dragged && !can_accept_what_is_being_dragged { fill = ui.visuals().gray_out(fill); diff --git a/crates/egui_demo_lib/src/demo/toggle_switch.rs b/crates/egui_demo_lib/src/demo/toggle_switch.rs index 8a2d533654a..a4864d08e62 100644 --- a/crates/egui_demo_lib/src/demo/toggle_switch.rs +++ b/crates/egui_demo_lib/src/demo/toggle_switch.rs @@ -55,12 +55,16 @@ pub fn toggle_ui(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { let rect = rect.expand(visuals.expansion); let radius = 0.5 * rect.height(); ui.painter() - .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke); + .rect(rect, radius, visuals.mandatory_bg_fill, visuals.bg_stroke); // Paint the circle, animating it from left to right with `how_on`: let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on); let center = egui::pos2(circle_x, rect.center().y); - ui.painter() - .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke); + ui.painter().circle( + center, + 0.75 * radius, + visuals.mandatory_bg_fill, + visuals.fg_stroke, + ); } // All done! Return the interaction response so the user can check what happened @@ -85,11 +89,15 @@ fn toggle_ui_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { let rect = rect.expand(visuals.expansion); let radius = 0.5 * rect.height(); ui.painter() - .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke); + .rect(rect, radius, visuals.mandatory_bg_fill, visuals.bg_stroke); let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on); let center = egui::pos2(circle_x, rect.center().y); - ui.painter() - .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke); + ui.painter().circle( + center, + 0.75 * radius, + visuals.mandatory_bg_fill, + visuals.fg_stroke, + ); } response diff --git a/crates/egui_extras/src/datepicker/button.rs b/crates/egui_extras/src/datepicker/button.rs index 9c5cb11188f..f678094973c 100644 --- a/crates/egui_extras/src/datepicker/button.rs +++ b/crates/egui_extras/src/datepicker/button.rs @@ -76,7 +76,9 @@ impl<'a> Widget for DatePickerButton<'a> { } let mut button = Button::new(text); if button_state.picker_visible { - button = button.fill(visuals.bg_fill).stroke(visuals.bg_stroke); + button = button + .fill(visuals.optional_bg_fill) + .stroke(visuals.bg_stroke); } let mut button_response = ui.add(button); if button_response.clicked() { From 95286c70259ddf84757559d0b47c482e2fcd62c4 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 17:26:26 +0100 Subject: [PATCH 05/13] Rename mandatory_bg_fill -> bg_fill --- .../egui/src/containers/collapsing_header.rs | 8 ++---- crates/egui/src/containers/scroll_area.rs | 2 +- crates/egui/src/style.rs | 26 +++++++++---------- crates/egui/src/widgets/button.rs | 4 +-- crates/egui/src/widgets/color_picker.rs | 2 +- crates/egui/src/widgets/plot/legend.rs | 2 +- crates/egui/src/widgets/slider.rs | 4 +-- .../egui_demo_lib/src/demo/drag_and_drop.rs | 2 +- .../egui_demo_lib/src/demo/toggle_switch.rs | 20 +++++--------- 9 files changed, 29 insertions(+), 41 deletions(-) diff --git a/crates/egui/src/containers/collapsing_header.rs b/crates/egui/src/containers/collapsing_header.rs index a4f7daae6d3..d8315ed9220 100644 --- a/crates/egui/src/containers/collapsing_header.rs +++ b/crates/egui/src/containers/collapsing_header.rs @@ -565,12 +565,8 @@ impl CollapsingHeader { { let rect = rect.expand(visuals.expansion); - ui.painter().rect( - rect, - visuals.rounding, - visuals.mandatory_bg_fill, - visuals.bg_stroke, - ); + ui.painter() + .rect(rect, visuals.rounding, visuals.bg_fill, visuals.bg_stroke); } { diff --git a/crates/egui/src/containers/scroll_area.rs b/crates/egui/src/containers/scroll_area.rs index a9efe993b4e..7af37e40ce7 100644 --- a/crates/egui/src/containers/scroll_area.rs +++ b/crates/egui/src/containers/scroll_area.rs @@ -846,7 +846,7 @@ impl Prepared { ui.painter().add(epaint::Shape::rect_filled( handle_rect, visuals.rounding, - visuals.mandatory_bg_fill, + visuals.bg_fill, )); } } diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs index 2b550f37ff1..3bcf62dc379 100644 --- a/crates/egui/src/style.rs +++ b/crates/egui/src/style.rs @@ -217,7 +217,7 @@ impl Style { let mut visuals = *self.visuals.widgets.style(response); if selected { visuals.optional_bg_fill = self.visuals.selection.bg_fill; - visuals.mandatory_bg_fill = self.visuals.selection.bg_fill; + visuals.bg_fill = self.visuals.selection.bg_fill; // visuals.bg_stroke = self.visuals.selection.stroke; visuals.fg_stroke = self.visuals.selection.stroke; } @@ -602,7 +602,7 @@ pub struct WidgetVisuals { /// such as the slider background or a checkbox background. /// /// Must never be [`Color32::TRANSPARENT`]. - pub mandatory_bg_fill: Color32, + pub bg_fill: Color32, /// Background color of widget that can _optionally_ have a background fill, /// such as buttons. @@ -816,7 +816,7 @@ impl Widgets { Self { noninteractive: WidgetVisuals { optional_bg_fill: Color32::from_gray(27), - mandatory_bg_fill: Color32::from_gray(27), + bg_fill: Color32::from_gray(27), bg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // separators, indentation lines fg_stroke: Stroke::new(1.0, Color32::from_gray(140)), // normal text color rounding: Rounding::same(2.0), @@ -824,7 +824,7 @@ impl Widgets { }, inactive: WidgetVisuals { optional_bg_fill: Color32::from_gray(60), // button background - mandatory_bg_fill: Color32::from_gray(60), // checkbox background + bg_fill: Color32::from_gray(60), // checkbox background bg_stroke: Default::default(), fg_stroke: Stroke::new(1.0, Color32::from_gray(180)), // button text rounding: Rounding::same(2.0), @@ -832,7 +832,7 @@ impl Widgets { }, hovered: WidgetVisuals { optional_bg_fill: Color32::from_gray(70), - mandatory_bg_fill: Color32::from_gray(70), + 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)), rounding: Rounding::same(3.0), @@ -840,7 +840,7 @@ impl Widgets { }, active: WidgetVisuals { optional_bg_fill: Color32::from_gray(55), - mandatory_bg_fill: Color32::from_gray(55), + bg_fill: Color32::from_gray(55), bg_stroke: Stroke::new(1.0, Color32::WHITE), fg_stroke: Stroke::new(2.0, Color32::WHITE), rounding: Rounding::same(2.0), @@ -848,7 +848,7 @@ impl Widgets { }, open: WidgetVisuals { optional_bg_fill: Color32::from_gray(27), - mandatory_bg_fill: Color32::from_gray(27), + 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)), rounding: Rounding::same(2.0), @@ -861,7 +861,7 @@ impl Widgets { Self { noninteractive: WidgetVisuals { optional_bg_fill: Color32::from_gray(248), - mandatory_bg_fill: Color32::from_gray(248), + bg_fill: Color32::from_gray(248), bg_stroke: Stroke::new(1.0, Color32::from_gray(190)), // separators, indentation lines fg_stroke: Stroke::new(1.0, Color32::from_gray(80)), // normal text color rounding: Rounding::same(2.0), @@ -869,7 +869,7 @@ impl Widgets { }, inactive: WidgetVisuals { optional_bg_fill: Color32::from_gray(230), // button background - mandatory_bg_fill: Color32::from_gray(230), // checkbox background + bg_fill: Color32::from_gray(230), // checkbox background bg_stroke: Default::default(), fg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // button text rounding: Rounding::same(2.0), @@ -877,7 +877,7 @@ impl Widgets { }, hovered: WidgetVisuals { optional_bg_fill: Color32::from_gray(220), - mandatory_bg_fill: Color32::from_gray(220), + bg_fill: Color32::from_gray(220), bg_stroke: Stroke::new(1.0, Color32::from_gray(105)), // e.g. hover over window edge or button fg_stroke: Stroke::new(1.5, Color32::BLACK), rounding: Rounding::same(3.0), @@ -885,7 +885,7 @@ impl Widgets { }, active: WidgetVisuals { optional_bg_fill: Color32::from_gray(165), - mandatory_bg_fill: Color32::from_gray(165), + bg_fill: Color32::from_gray(165), bg_stroke: Stroke::new(1.0, Color32::BLACK), fg_stroke: Stroke::new(2.0, Color32::BLACK), rounding: Rounding::same(2.0), @@ -893,7 +893,7 @@ impl Widgets { }, open: WidgetVisuals { optional_bg_fill: Color32::from_gray(220), - mandatory_bg_fill: Color32::from_gray(220), + bg_fill: Color32::from_gray(220), bg_stroke: Stroke::new(1.0, Color32::from_gray(160)), fg_stroke: Stroke::new(1.0, Color32::BLACK), rounding: Rounding::same(2.0), @@ -1215,7 +1215,7 @@ impl WidgetVisuals { pub fn ui(&mut self, ui: &mut crate::Ui) { let Self { optional_bg_fill, - mandatory_bg_fill, + bg_fill: mandatory_bg_fill, bg_stroke, rounding, fg_stroke, diff --git a/crates/egui/src/widgets/button.rs b/crates/egui/src/widgets/button.rs index b802a1d55a4..46f5dd57e88 100644 --- a/crates/egui/src/widgets/button.rs +++ b/crates/egui/src/widgets/button.rs @@ -316,7 +316,7 @@ impl<'a> Widget for Checkbox<'a> { ui.painter().add(epaint::RectShape { rect: big_icon_rect.expand(visuals.expansion), rounding: visuals.rounding, - fill: visuals.mandatory_bg_fill, + fill: visuals.bg_fill, stroke: visuals.bg_stroke, }); @@ -425,7 +425,7 @@ impl Widget for RadioButton { painter.add(epaint::CircleShape { center: big_icon_rect.center(), radius: big_icon_rect.width() / 2.0 + visuals.expansion, - fill: visuals.mandatory_bg_fill, + fill: visuals.bg_fill, stroke: visuals.bg_stroke, }); diff --git a/crates/egui/src/widgets/color_picker.rs b/crates/egui/src/widgets/color_picker.rs index 464644e7408..7777bec624b 100644 --- a/crates/egui/src/widgets/color_picker.rs +++ b/crates/egui/src/widgets/color_picker.rs @@ -95,7 +95,7 @@ fn color_button(ui: &mut Ui, color: Color32, open: bool) -> Response { let rounding = visuals.rounding.at_most(2.0); ui.painter() - .rect_stroke(rect, rounding, (2.0, visuals.mandatory_bg_fill)); // fill is intentional, because default style has no border + .rect_stroke(rect, rounding, (2.0, visuals.bg_fill)); // fill is intentional, because default style has no border } response diff --git a/crates/egui/src/widgets/plot/legend.rs b/crates/egui/src/widgets/plot/legend.rs index 9a4df114c7f..f626e569b0d 100644 --- a/crates/egui/src/widgets/plot/legend.rs +++ b/crates/egui/src/widgets/plot/legend.rs @@ -119,7 +119,7 @@ impl LegendEntry { painter.add(epaint::CircleShape { center: icon_rect.center(), radius: icon_size * 0.5, - fill: visuals.mandatory_bg_fill, + fill: visuals.bg_fill, stroke: visuals.bg_stroke, }); diff --git a/crates/egui/src/widgets/slider.rs b/crates/egui/src/widgets/slider.rs index f17653d1c4d..9d03fa06d20 100644 --- a/crates/egui/src/widgets/slider.rs +++ b/crates/egui/src/widgets/slider.rs @@ -623,7 +623,7 @@ impl<'a> Slider<'a> { ui.painter().add(epaint::RectShape { rect: rail_rect, rounding: ui.visuals().widgets.inactive.rounding, - fill: ui.visuals().widgets.inactive.mandatory_bg_fill, + fill: ui.visuals().widgets.inactive.bg_fill, stroke: Default::default(), }); @@ -632,7 +632,7 @@ impl<'a> Slider<'a> { ui.painter().add(epaint::CircleShape { center, radius: self.handle_radius(rect) + visuals.expansion, - fill: visuals.mandatory_bg_fill, + fill: visuals.bg_fill, stroke: visuals.fg_stroke, }); } diff --git a/crates/egui_demo_lib/src/demo/drag_and_drop.rs b/crates/egui_demo_lib/src/demo/drag_and_drop.rs index e58377ef32a..019ace90271 100644 --- a/crates/egui_demo_lib/src/demo/drag_and_drop.rs +++ b/crates/egui_demo_lib/src/demo/drag_and_drop.rs @@ -55,7 +55,7 @@ pub fn drop_target( ui.visuals().widgets.inactive }; - let mut fill = style.mandatory_bg_fill; + let mut fill = style.bg_fill; let mut stroke = style.bg_stroke; if is_being_dragged && !can_accept_what_is_being_dragged { fill = ui.visuals().gray_out(fill); diff --git a/crates/egui_demo_lib/src/demo/toggle_switch.rs b/crates/egui_demo_lib/src/demo/toggle_switch.rs index a4864d08e62..8a2d533654a 100644 --- a/crates/egui_demo_lib/src/demo/toggle_switch.rs +++ b/crates/egui_demo_lib/src/demo/toggle_switch.rs @@ -55,16 +55,12 @@ pub fn toggle_ui(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { let rect = rect.expand(visuals.expansion); let radius = 0.5 * rect.height(); ui.painter() - .rect(rect, radius, visuals.mandatory_bg_fill, visuals.bg_stroke); + .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke); // Paint the circle, animating it from left to right with `how_on`: let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on); let center = egui::pos2(circle_x, rect.center().y); - ui.painter().circle( - center, - 0.75 * radius, - visuals.mandatory_bg_fill, - visuals.fg_stroke, - ); + ui.painter() + .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke); } // All done! Return the interaction response so the user can check what happened @@ -89,15 +85,11 @@ fn toggle_ui_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { let rect = rect.expand(visuals.expansion); let radius = 0.5 * rect.height(); ui.painter() - .rect(rect, radius, visuals.mandatory_bg_fill, visuals.bg_stroke); + .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke); let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on); let center = egui::pos2(circle_x, rect.center().y); - ui.painter().circle( - center, - 0.75 * radius, - visuals.mandatory_bg_fill, - visuals.fg_stroke, - ); + ui.painter() + .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke); } response From 459d650cc9063d03b54ebc95bd47901d6d929cf8 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 17:54:15 +0100 Subject: [PATCH 06/13] tweak grid stripe color (again) --- crates/egui/src/style.rs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs index 3bcf62dc379..f760683dd05 100644 --- a/crates/egui/src/style.rs +++ b/crates/egui/src/style.rs @@ -731,8 +731,8 @@ impl Visuals { widgets: Widgets::default(), selection: Selection::default(), hyperlink_color: Color32::from_rgb(90, 170, 255), - faint_bg_color: Color32::from_additive_luminance(8), - extreme_bg_color: Color32::from_gray(10), // e.g. TextEdit background + faint_bg_color: Color32::from_additive_luminance(5), // visible, but barely so + extreme_bg_color: Color32::from_gray(10), // e.g. TextEdit background code_bg_color: Color32::from_gray(64), warn_fg_color: Color32::from_rgb(255, 143, 0), // orange error_fg_color: Color32::from_rgb(255, 0, 0), // red @@ -765,8 +765,8 @@ impl Visuals { widgets: Widgets::light(), selection: Selection::light(), hyperlink_color: Color32::from_rgb(0, 155, 255), - faint_bg_color: Color32::from_additive_luminance(8), - extreme_bg_color: Color32::from_gray(255), // e.g. TextEdit background + faint_bg_color: Color32::from_additive_luminance(5), // visible, but barely so + extreme_bg_color: Color32::from_gray(255), // e.g. TextEdit background code_bg_color: Color32::from_gray(230), warn_fg_color: Color32::from_rgb(255, 100, 0), // slightly orange red. it's difficult to find a warning color that pops on bright background. error_fg_color: Color32::from_rgb(255, 0, 0), // red From c0281da12b226ccf7f1f03714ba7ad2f65b8672f Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 17:56:29 +0100 Subject: [PATCH 07/13] Make the animated part of the ProgressBar more visible --- crates/egui/src/widgets/progress_bar.rs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/crates/egui/src/widgets/progress_bar.rs b/crates/egui/src/widgets/progress_bar.rs index 6762a2dd209..89f4b0bf28e 100644 --- a/crates/egui/src/widgets/progress_bar.rs +++ b/crates/egui/src/widgets/progress_bar.rs @@ -127,10 +127,8 @@ impl Widget for ProgressBar { + vec2(-rounding, 0.0) }) .collect(); - ui.painter().add(Shape::line( - points, - Stroke::new(2.0, visuals.faint_bg_color), - )); + ui.painter() + .add(Shape::line(points, Stroke::new(2.0, visuals.text_color()))); } if let Some(text_kind) = text { From 41a4604acfc7a7c5bf94d2a42c0db9e7fbf2fd4e Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 17:57:39 +0100 Subject: [PATCH 08/13] Add line in changelog --- CHANGELOG.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c19304ba37e..3113fbc25ba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,9 +12,10 @@ NOTE: [`epaint`](crates/epaint/CHANGELOG.md), [`eframe`](crates/eframe/CHANGELOG * Add `Plot::clamp_grid` to only show grid where there is data ([#2480](https://github.com/emilk/egui/pull/2480)). * Add `ScrollArea::drag_to_scroll` if you want to turn off that feature. * Add `Response::on_hover_and_drag_cursor`. -* Add `Window::default_open` ([#2539](https://github.com/emilk/egui/pull/2539)) -* Add `ProgressBar::fill` if you want to set the fill color manually. ([#2618](https://github.com/emilk/egui/pull/2618)) -* Add `Button::rounding` to enable round buttons ([#2539](https://github.com/emilk/egui/pull/2539)) +* Add `Window::default_open` ([#2539](https://github.com/emilk/egui/pull/2539)). +* Add `ProgressBar::fill` if you want to set the fill color manually. ([#2618](https://github.com/emilk/egui/pull/2618)). +* Add `Button::rounding` to enable round buttons ([#2616](https://github.com/emilk/egui/pull/2616)). +* Add `WidgetVisuals::optional_bg_color` - set it to `Color32::TRANSPARENT` to hide button backgrounds ([#2621](https://github.com/emilk/egui/pull/2621)). ### Changed 🔧 * Improved plot grid appearance ([#2412](https://github.com/emilk/egui/pull/2412)). From c19829122ae7fb954dd5f3685f9a1f892edeca3d Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 17:58:21 +0100 Subject: [PATCH 09/13] Add another line in changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3113fbc25ba..e30fc98e40d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ NOTE: [`epaint`](crates/epaint/CHANGELOG.md), [`eframe`](crates/eframe/CHANGELOG ### Changed 🔧 * Improved plot grid appearance ([#2412](https://github.com/emilk/egui/pull/2412)). * Improved the algorithm for picking the number of decimals to show when hovering values in the `Plot`. +* Default `ComboBox` is now controlled with `Spacing::combo_width` ([#2621](https://github.com/emilk/egui/pull/2621)). ### Fixed 🐛 * Expose `TextEdit`'s multiline flag to AccessKit ([#2448](https://github.com/emilk/egui/pull/2448)). From 824e687766e03f210b6ab34f2ca4e893b9bb220f Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 19:35:37 +0100 Subject: [PATCH 10/13] Menu fix: use the `open` widget style for open menus --- crates/egui/src/menu.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/egui/src/menu.rs b/crates/egui/src/menu.rs index db04898b3c8..780790480b6 100644 --- a/crates/egui/src/menu.rs +++ b/crates/egui/src/menu.rs @@ -443,7 +443,7 @@ impl SubMenuButton { sub_id: Id, ) -> &'a WidgetVisuals { if menu_state.is_open(sub_id) { - &ui.style().visuals.widgets.hovered + &ui.style().visuals.widgets.open } else { ui.style().interact(response) } From c4b85319c5ad919d7ba01a912c1098f9a844ccc0 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Mon, 23 Jan 2023 20:16:28 +0100 Subject: [PATCH 11/13] Adjust sizes on menu buttons and regular buttons to make sure they match --- crates/egui/src/menu.rs | 3 ++- crates/egui/src/widgets/button.rs | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/crates/egui/src/menu.rs b/crates/egui/src/menu.rs index 780790480b6..83f33f1c04a 100644 --- a/crates/egui/src/menu.rs +++ b/crates/egui/src/menu.rs @@ -472,7 +472,8 @@ impl SubMenuButton { text_galley.size().x + icon_galley.size().x, text_galley.size().y.max(icon_galley.size().y), ); - let desired_size = text_and_icon_size + 2.0 * button_padding; + let mut desired_size = text_and_icon_size + 2.0 * button_padding; + desired_size.y = desired_size.y.at_least(ui.spacing().interact_size.y); let (rect, response) = ui.allocate_at_least(desired_size, sense); response.widget_info(|| { diff --git a/crates/egui/src/widgets/button.rs b/crates/egui/src/widgets/button.rs index 46f5dd57e88..7a815e9581b 100644 --- a/crates/egui/src/widgets/button.rs +++ b/crates/egui/src/widgets/button.rs @@ -180,10 +180,10 @@ impl Widget for Button { desired_size.x += ui.spacing().item_spacing.x + shortcut_text.size().x; desired_size.y = desired_size.y.max(shortcut_text.size().y); } + desired_size += 2.0 * button_padding; if !small { desired_size.y = desired_size.y.at_least(ui.spacing().interact_size.y); } - desired_size += 2.0 * button_padding; desired_size = desired_size.at_least(min_size); let (rect, response) = ui.allocate_at_least(desired_size, sense); From 221b7c7db7b5140ddbb20b30e13064ea5e6c8f0c Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Tue, 24 Jan 2023 09:50:15 +0100 Subject: [PATCH 12/13] Update comment Co-authored-by: Andreas Reich --- crates/egui/src/containers/combo_box.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/egui/src/containers/combo_box.rs b/crates/egui/src/containers/combo_box.rs index 04e7c5bf08e..6e17b591522 100644 --- a/crates/egui/src/containers/combo_box.rs +++ b/crates/egui/src/containers/combo_box.rs @@ -268,7 +268,7 @@ fn combo_box_dyn<'c, R>( // Currently selected value's text will be wrapped if needed, so occupy the available width. ui.available_width() } else { - // Occupy at least the minimum width assigned to Slider and ComboBox. + // Occupy at least the minimum width assigned to ComboBox. let width = width.unwrap_or_else(|| ui.spacing().combo_width); width - 2.0 * margin.x }; From ce67d7345e8c2177068e75875e1ddaecdbbefdfa Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Tue, 24 Jan 2023 09:52:00 +0100 Subject: [PATCH 13/13] optional_bg_fill -> weak_bg_fill --- .../egui/src/containers/collapsing_header.rs | 2 +- crates/egui/src/containers/combo_box.rs | 2 +- crates/egui/src/menu.rs | 6 +-- crates/egui/src/style.rs | 43 +++++++++---------- crates/egui/src/widgets/button.rs | 4 +- crates/egui/src/widgets/selected_label.rs | 2 +- crates/egui_extras/src/datepicker/button.rs | 4 +- 7 files changed, 30 insertions(+), 33 deletions(-) diff --git a/crates/egui/src/containers/collapsing_header.rs b/crates/egui/src/containers/collapsing_header.rs index d8315ed9220..ea7d52dedeb 100644 --- a/crates/egui/src/containers/collapsing_header.rs +++ b/crates/egui/src/containers/collapsing_header.rs @@ -555,7 +555,7 @@ impl CollapsingHeader { ui.painter().add(epaint::RectShape { rect: header_response.rect.expand(visuals.expansion), rounding: visuals.rounding, - fill: visuals.optional_bg_fill, + fill: visuals.weak_bg_fill, stroke: visuals.bg_stroke, // stroke: Default::default(), }); diff --git a/crates/egui/src/containers/combo_box.rs b/crates/egui/src/containers/combo_box.rs index 6e17b591522..911f9424279 100644 --- a/crates/egui/src/containers/combo_box.rs +++ b/crates/egui/src/containers/combo_box.rs @@ -391,7 +391,7 @@ fn button_frame( epaint::RectShape { rect: outer_rect.expand(visuals.expansion), rounding: visuals.rounding, - fill: visuals.optional_bg_fill, + fill: visuals.weak_bg_fill, stroke: visuals.bg_stroke, }, ); diff --git a/crates/egui/src/menu.rs b/crates/egui/src/menu.rs index 83f33f1c04a..46236d6d3f5 100644 --- a/crates/egui/src/menu.rs +++ b/crates/egui/src/menu.rs @@ -68,7 +68,7 @@ fn set_menu_style(style: &mut Style) { style.spacing.button_padding = vec2(2.0, 0.0); style.visuals.widgets.active.bg_stroke = Stroke::NONE; style.visuals.widgets.hovered.bg_stroke = Stroke::NONE; - style.visuals.widgets.inactive.optional_bg_fill = Color32::TRANSPARENT; + style.visuals.widgets.inactive.weak_bg_fill = Color32::TRANSPARENT; style.visuals.widgets.inactive.bg_stroke = Stroke::NONE; } @@ -180,7 +180,7 @@ fn stationary_menu_impl<'c, R>( let mut button = Button::new(title); if bar_state.open_menu.is_menu_open(menu_id) { - button = button.fill(ui.visuals().widgets.open.optional_bg_fill); + button = button.fill(ui.visuals().widgets.open.weak_bg_fill); button = button.stroke(ui.visuals().widgets.open.bg_stroke); } @@ -493,7 +493,7 @@ impl SubMenuButton { ui.painter().rect_filled( rect.expand(visuals.expansion), visuals.rounding, - visuals.optional_bg_fill, + visuals.weak_bg_fill, ); } diff --git a/crates/egui/src/style.rs b/crates/egui/src/style.rs index f760683dd05..3078595d5c5 100644 --- a/crates/egui/src/style.rs +++ b/crates/egui/src/style.rs @@ -216,7 +216,7 @@ impl Style { pub fn interact_selectable(&self, response: &Response, selected: bool) -> WidgetVisuals { let mut visuals = *self.visuals.widgets.style(response); if selected { - visuals.optional_bg_fill = self.visuals.selection.bg_fill; + visuals.weak_bg_fill = self.visuals.selection.bg_fill; visuals.bg_fill = self.visuals.selection.bg_fill; // visuals.bg_stroke = self.visuals.selection.stroke; visuals.fg_stroke = self.visuals.selection.stroke; @@ -537,7 +537,7 @@ impl Visuals { // TODO(emilk): replace with an alpha #[inline(always)] pub fn fade_out_to_color(&self) -> Color32 { - self.widgets.noninteractive.optional_bg_fill + self.widgets.noninteractive.weak_bg_fill } /// Returned a "grayed out" version of the given color. @@ -598,17 +598,16 @@ impl Widgets { #[derive(Clone, Copy, Debug, PartialEq)] #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))] pub struct WidgetVisuals { - /// Background color of widget that must have a background fill, - /// such as the slider background or a checkbox background. + /// Background color of widgets that must have a background fill, + /// such as the slider background, a checkbox background, or a radio button background. /// /// Must never be [`Color32::TRANSPARENT`]. pub bg_fill: Color32, - /// Background color of widget that can _optionally_ have a background fill, - /// such as buttons. + /// Background color of widgets that can _optionally_ have a background fill, such as buttons. /// /// May be [`Color32::TRANSPARENT`]. - pub optional_bg_fill: Color32, + pub weak_bg_fill: Color32, /// For surrounding rectangle of things that need it, /// like buttons, the box of the checkbox, etc. @@ -815,7 +814,7 @@ impl Widgets { pub fn dark() -> Self { Self { noninteractive: WidgetVisuals { - optional_bg_fill: Color32::from_gray(27), + weak_bg_fill: Color32::from_gray(27), bg_fill: Color32::from_gray(27), bg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // separators, indentation lines fg_stroke: Stroke::new(1.0, Color32::from_gray(140)), // normal text color @@ -823,15 +822,15 @@ impl Widgets { expansion: 0.0, }, inactive: WidgetVisuals { - optional_bg_fill: Color32::from_gray(60), // button background - bg_fill: Color32::from_gray(60), // checkbox background + weak_bg_fill: Color32::from_gray(60), // button background + bg_fill: Color32::from_gray(60), // checkbox background bg_stroke: Default::default(), fg_stroke: Stroke::new(1.0, Color32::from_gray(180)), // button text rounding: Rounding::same(2.0), expansion: 0.0, }, hovered: WidgetVisuals { - optional_bg_fill: Color32::from_gray(70), + weak_bg_fill: Color32::from_gray(70), 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)), @@ -839,7 +838,7 @@ impl Widgets { expansion: 1.0, }, active: WidgetVisuals { - optional_bg_fill: Color32::from_gray(55), + weak_bg_fill: Color32::from_gray(55), bg_fill: Color32::from_gray(55), bg_stroke: Stroke::new(1.0, Color32::WHITE), fg_stroke: Stroke::new(2.0, Color32::WHITE), @@ -847,7 +846,7 @@ impl Widgets { expansion: 1.0, }, open: WidgetVisuals { - optional_bg_fill: Color32::from_gray(27), + weak_bg_fill: Color32::from_gray(27), 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)), @@ -860,7 +859,7 @@ impl Widgets { pub fn light() -> Self { Self { noninteractive: WidgetVisuals { - optional_bg_fill: Color32::from_gray(248), + weak_bg_fill: Color32::from_gray(248), bg_fill: Color32::from_gray(248), bg_stroke: Stroke::new(1.0, Color32::from_gray(190)), // separators, indentation lines fg_stroke: Stroke::new(1.0, Color32::from_gray(80)), // normal text color @@ -868,15 +867,15 @@ impl Widgets { expansion: 0.0, }, inactive: WidgetVisuals { - optional_bg_fill: Color32::from_gray(230), // button background - bg_fill: Color32::from_gray(230), // checkbox background + weak_bg_fill: Color32::from_gray(230), // button background + bg_fill: Color32::from_gray(230), // checkbox background bg_stroke: Default::default(), fg_stroke: Stroke::new(1.0, Color32::from_gray(60)), // button text rounding: Rounding::same(2.0), expansion: 0.0, }, hovered: WidgetVisuals { - optional_bg_fill: Color32::from_gray(220), + weak_bg_fill: Color32::from_gray(220), bg_fill: Color32::from_gray(220), bg_stroke: Stroke::new(1.0, Color32::from_gray(105)), // e.g. hover over window edge or button fg_stroke: Stroke::new(1.5, Color32::BLACK), @@ -884,7 +883,7 @@ impl Widgets { expansion: 1.0, }, active: WidgetVisuals { - optional_bg_fill: Color32::from_gray(165), + weak_bg_fill: Color32::from_gray(165), bg_fill: Color32::from_gray(165), bg_stroke: Stroke::new(1.0, Color32::BLACK), fg_stroke: Stroke::new(2.0, Color32::BLACK), @@ -892,7 +891,7 @@ impl Widgets { expansion: 1.0, }, open: WidgetVisuals { - optional_bg_fill: Color32::from_gray(220), + weak_bg_fill: Color32::from_gray(220), bg_fill: Color32::from_gray(220), bg_stroke: Stroke::new(1.0, Color32::from_gray(160)), fg_stroke: Stroke::new(1.0, Color32::BLACK), @@ -1214,14 +1213,14 @@ impl Selection { impl WidgetVisuals { pub fn ui(&mut self, ui: &mut crate::Ui) { let Self { - optional_bg_fill, + weak_bg_fill, bg_fill: mandatory_bg_fill, bg_stroke, rounding, fg_stroke, expansion, } = self; - ui_color(ui, optional_bg_fill, "optional background fill") + ui_color(ui, weak_bg_fill, "optional background fill") .on_hover_text("For buttons, combo-boxes, etc"); ui_color(ui, mandatory_bg_fill, "mandatory background fill") .on_hover_text("For checkboxes, sliders, etc"); @@ -1303,7 +1302,7 @@ impl Visuals { } = self; ui.collapsing("Background Colors", |ui| { - ui_color(ui, &mut widgets.inactive.optional_bg_fill, "Buttons"); + ui_color(ui, &mut widgets.inactive.weak_bg_fill, "Buttons"); ui_color(ui, window_fill, "Windows"); ui_color(ui, panel_fill, "Panels"); ui_color(ui, faint_bg_color, "Faint accent").on_hover_text( diff --git a/crates/egui/src/widgets/button.rs b/crates/egui/src/widgets/button.rs index 7a815e9581b..8f4ad6bbe93 100644 --- a/crates/egui/src/widgets/button.rs +++ b/crates/egui/src/widgets/button.rs @@ -193,7 +193,7 @@ impl Widget for Button { let visuals = ui.style().interact(&response); if frame { - let fill = fill.unwrap_or(visuals.optional_bg_fill); + let fill = fill.unwrap_or(visuals.weak_bg_fill); let stroke = stroke.unwrap_or(visuals.bg_stroke); let rounding = rounding.unwrap_or(visuals.rounding); ui.painter() @@ -540,7 +540,7 @@ impl Widget for ImageButton { ( expansion, visuals.rounding, - visuals.optional_bg_fill, + visuals.weak_bg_fill, visuals.bg_stroke, ) } else { diff --git a/crates/egui/src/widgets/selected_label.rs b/crates/egui/src/widgets/selected_label.rs index 8ec1b07f247..86024ae3538 100644 --- a/crates/egui/src/widgets/selected_label.rs +++ b/crates/egui/src/widgets/selected_label.rs @@ -67,7 +67,7 @@ impl Widget for SelectableLabel { ui.painter().rect( rect, visuals.rounding, - visuals.optional_bg_fill, + visuals.weak_bg_fill, visuals.bg_stroke, ); } diff --git a/crates/egui_extras/src/datepicker/button.rs b/crates/egui_extras/src/datepicker/button.rs index f678094973c..2a07ba9c784 100644 --- a/crates/egui_extras/src/datepicker/button.rs +++ b/crates/egui_extras/src/datepicker/button.rs @@ -76,9 +76,7 @@ impl<'a> Widget for DatePickerButton<'a> { } let mut button = Button::new(text); if button_state.picker_visible { - button = button - .fill(visuals.optional_bg_fill) - .stroke(visuals.bg_stroke); + button = button.fill(visuals.weak_bg_fill).stroke(visuals.bg_stroke); } let mut button_response = ui.add(button); if button_response.clicked() {