From 6fe70e685b9f5960e3b84339b2fb89adb9e30644 Mon Sep 17 00:00:00 2001 From: Emil Ernerfeldt Date: Sat, 20 Feb 2021 11:28:00 +0100 Subject: [PATCH] Simplify and unify colors of selectable widgets --- egui/src/style.rs | 21 +++++++++++------ egui/src/widgets/button.rs | 3 ++- egui/src/widgets/selected_label.rs | 17 +++----------- egui_demo_lib/src/apps/demo/toggle_switch.rs | 24 ++++++++------------ 4 files changed, 29 insertions(+), 36 deletions(-) diff --git a/egui/src/style.rs b/egui/src/style.rs index 7ce8add0..c9ca5785 100644 --- a/egui/src/style.rs +++ b/egui/src/style.rs @@ -39,6 +39,16 @@ impl Style { self.visuals.widgets.style(response) } + 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.bg_stroke = self.visuals.selection.stroke; + visuals.fg_stroke = self.visuals.selection.stroke; + } + visuals + } + /// Style to use for non-interactive widgets. pub fn noninteractive(&self) -> &WidgetVisuals { &self.visuals.widgets.noninteractive @@ -357,17 +367,14 @@ impl Default for Visuals { impl Selection { fn dark() -> Self { Self { - bg_fill: Rgba::from_rgb(0.0, 0.5, 1.0) - .additive() - .multiply(0.10) - .into(), - stroke: Stroke::new(1.0, Rgba::from_rgb(0.3, 0.6, 1.0)), + bg_fill: Color32::from_rgb(0, 92, 128), + stroke: Stroke::new(1.0, Color32::from_rgb(192, 222, 255)), } } fn light() -> Self { Self { - bg_fill: Rgba::from_rgb(0.0, 0.5, 1.0).multiply(0.5).into(), - stroke: Stroke::new(1.0, Rgba::from_rgb(0.3, 0.6, 1.0)), + bg_fill: Color32::from_rgb(144, 209, 255), + stroke: Stroke::new(1.0, Color32::from_rgb(0, 83, 125)), } } } diff --git a/egui/src/widgets/button.rs b/egui/src/widgets/button.rs index a581b38d..177a6ee7 100644 --- a/egui/src/widgets/button.rs +++ b/egui/src/widgets/button.rs @@ -212,6 +212,7 @@ impl<'a> Widget for Checkbox<'a> { *checked = !*checked; } + // let visuals = ui.style().interact_selectable(&response, *checked); // too colorful let visuals = ui.style().interact(&response); let text_cursor = pos2( rect.min.x + button_padding.x + icon_width + icon_spacing, @@ -234,7 +235,6 @@ impl<'a> Widget for Checkbox<'a> { pos2(small_icon_rect.right(), small_icon_rect.top()), ], visuals.fg_stroke, - // ui.visuals().selection.stroke, // too much color )); } @@ -305,6 +305,7 @@ impl Widget for RadioButton { rect.center().y - 0.5 * galley.size.y, ); + // let visuals = ui.style().interact_selectable(&response, checked); // too colorful let visuals = ui.style().interact(&response); let (small_icon_rect, big_icon_rect) = ui.spacing().icon_rectangles(rect); diff --git a/egui/src/widgets/selected_label.rs b/egui/src/widgets/selected_label.rs index fcc0e2fd..eca26a2f 100644 --- a/egui/src/widgets/selected_label.rs +++ b/egui/src/widgets/selected_label.rs @@ -44,25 +44,14 @@ impl Widget for SelectableLabel { .align_size_within_rect(galley.size, rect.shrink2(button_padding)) .min; - let visuals = ui.style().interact(&response); + let visuals = ui.style().interact_selectable(&response, selected); if selected || response.hovered() { let rect = rect.expand(visuals.expansion); - let fill = if selected { - ui.visuals().selection.bg_fill - } else { - Default::default() - }; - - let stroke = if selected { - ui.visuals().selection.stroke - } else { - visuals.bg_stroke - }; - let corner_radius = 2.0; - ui.painter().rect(rect, corner_radius, fill, stroke); + ui.painter() + .rect(rect, corner_radius, visuals.bg_fill, visuals.bg_stroke); } let text_color = ui diff --git a/egui_demo_lib/src/apps/demo/toggle_switch.rs b/egui_demo_lib/src/apps/demo/toggle_switch.rs index aae23f0b..920f29ee 100644 --- a/egui_demo_lib/src/apps/demo/toggle_switch.rs +++ b/egui_demo_lib/src/apps/demo/toggle_switch.rs @@ -18,8 +18,8 @@ pub fn toggle(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { // 1. Deciding widget size: // You can query the `ui` how much space is available, - // but in this example we have a fixed size widget of the default size for a button: - let desired_size = ui.spacing().interact_size; + // but in this example we have a fixed size widget based on the height of a standard button: + let desired_size = ui.spacing().interact_size.y * egui::vec2(2.0, 1.0); // 2. Allocating space: // This is where we get a region of the screen assigned. @@ -39,14 +39,12 @@ pub fn toggle(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { // We will follow the current style by asking // "how should something that is being interacted with be painted?". // This will, for instance, give us different colors when the widget is hovered or clicked. - let visuals = ui.style().interact(&response); - let off_bg_fill = egui::Rgba::from(visuals.bg_fill); - let on_bg_fill = egui::Rgba::from_rgb(0.0, 0.5, 0.0); - let bg_fill = egui::lerp(off_bg_fill..=on_bg_fill, how_on); + let visuals = ui.style().interact_selectable(&response, *on); // All coordinates are in absolute screen coordinates so we use `rect` to place the elements. let rect = rect.expand(visuals.expansion); let radius = 0.5 * rect.height(); - ui.painter().rect(rect, radius, bg_fill, visuals.bg_stroke); + ui.painter() + .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); @@ -61,18 +59,16 @@ pub fn toggle(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { /// Here is the same code again, but a bit more compact: #[allow(dead_code)] fn toggle_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response { - let desired_size = ui.spacing().interact_size; + let desired_size = ui.spacing().interact_size.y * egui::vec2(2.0, 1.0); let (rect, response) = ui.allocate_exact_size(desired_size, egui::Sense::click()); *on ^= response.clicked(); // toggle if clicked let how_on = ui.ctx().animate_bool(response.id, *on); - let visuals = ui.style().interact(&response); - let off_bg_fill = egui::Rgba::from(visuals.bg_fill); - let on_bg_fill = egui::Rgba::from_rgb(0.0, 0.5, 0.0); - let bg_fill = egui::lerp(off_bg_fill..=on_bg_fill, how_on); + let visuals = ui.style().interact_selectable(&response, *on); let rect = rect.expand(visuals.expansion); let radius = 0.5 * rect.height(); - ui.painter().rect(rect, radius, bg_fill, visuals.bg_stroke); + ui.painter() + .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() @@ -89,6 +85,6 @@ pub fn demo(ui: &mut egui::Ui, on: &mut bool) { .response .on_hover_text( "It's easy to create your own widgets!\n\ - This toggle switch is just one function and 20 lines of code.", + This toggle switch is just one function and 15 lines of code.", ); }