Rich text for all widgets (#855)

Introduce `RichText` and `WidgetText`

CHANGELOG.md

@@ -10,9 +10,11 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 ### Added ⭐
 * Add context menus: See `Ui::menu_button` and `Response::context_menu` ([#543](https://github.com/emilk/egui/pull/543)).
 * You can now read and write the cursor of a `TextEdit` ([#848](https://github.com/emilk/egui/pull/848)).
+* Most widgets containing text (`Label`, `Button` etc) now supports rich text ([#855](https://github.com/emilk/egui/pull/855)).
 
 ### Changed 🔧
 * Unifiy the four `Memory` data buckets (`data`, `data_temp`, `id_data` and `id_data_temp`) into a single `Memory::data`, with a new interface ([#836](https://github.com/emilk/egui/pull/836)).
+* `ui.add(Button::new("…").text_color(…))` is now `ui.button(RichText::new("…").color(…))` (same for `Label` )([#855](https://github.com/emilk/egui/pull/855)).
 
 ### Contributors 🙏
 * [mankinskin](https://github.com/mankinskin) ([#543](https://github.com/emilk/egui/pull/543))

egui/src/containers/collapsing_header.rs

@@ -1,6 +1,6 @@
 use std::hash::Hash;
 
-use crate::{widgets::Label, *};
+use crate::*;
 use epaint::{Shape, TextStyle};
 
 #[derive(Clone, Copy, Debug)]
@@ -141,7 +141,7 @@ pub(crate) fn paint_icon(ui: &mut Ui, openness: f32, response: &Response) {
 /// ```
 #[must_use = "You should call .show()"]
 pub struct CollapsingHeader {
- label: Label,
+ text: WidgetText,
  default_open: bool,
  id_source: Id,
  enabled: bool,
@@ -157,11 +157,11 @@ impl CollapsingHeader {
  /// If the label is unique and static this is fine,
  /// but if it changes or there are several `CollapsingHeader` with the same title
  /// you need to provide a unique id source with [`Self::id_source`].
- pub fn new(label: impl ToString) -> Self {
- let label = Label::new(label).wrap(false);
- let id_source = Id::new(label.text());
+ pub fn new(text: impl Into<WidgetText>) -> Self {
+ let text = text.into();
+ let id_source = Id::new(text.text());
  Self {
- label,
+ text,
  default_open: false,
  id_source,
  enabled: true,
@@ -185,10 +185,9 @@ impl CollapsingHeader {
  self
  }
 
- /// By default, the `CollapsingHeader` text style is `TextStyle::Button`.
- /// Call `.text_style(style)` to change this.
+ #[deprecated = "Replaced by: CollapsingHeader::new(RichText::new(text).text_style(…))"]
  pub fn text_style(mut self, text_style: TextStyle) -> Self {
- self.label = self.label.text_style(text_style);
+ self.text = self.text.text_style(text_style);
  self
  }
 
@@ -252,7 +251,7 @@ impl CollapsingHeader {
  "Horizontal collapsing is unimplemented"
  );
  let Self {
- mut label,
+ text,
  default_open,
  id_source,
  enabled: _,
@@ -261,35 +260,31 @@ impl CollapsingHeader {
  show_background: _,
  } = self;
 
- label.text_style = label
- .text_style
- .or(ui.style().override_text_style)
- .or(Some(TextStyle::Button));
-
  // TODO: horizontal layout, with icon and text as labels. Insert background behind using Frame.
 
  let id = ui.make_persistent_id(id_source);
  let button_padding = ui.spacing().button_padding;
 
  let available = ui.available_rect_before_wrap();
  let text_pos = available.min + vec2(ui.spacing().indent, 0.0);
- let galley =
- label.layout_width(ui, available.right() - text_pos.x, Color32::TEMPORARY_COLOR);
- let text_max_x = text_pos.x + galley.size().x;
+ let wrap_width = available.right() - text_pos.x;
+ let wrap = Some(false);
+ let text = text.into_galley(ui, wrap, wrap_width, TextStyle::Button);
+ let text_max_x = text_pos.x + text.size().x;
 
  let mut desired_width = text_max_x + button_padding.x - available.left();
  if ui.visuals().collapsing_header_frame {
  desired_width = desired_width.max(available.width()); // fill full width
  }
 
- let mut desired_size = vec2(desired_width, galley.size().y + 2.0 * button_padding.y);
+ let mut desired_size = vec2(desired_width, text.size().y + 2.0 * button_padding.y);
  desired_size = desired_size.at_least(ui.spacing().interact_size);
  let (_, rect) = ui.allocate_space(desired_size);
 
  let mut header_response = ui.interact(rect, id, Sense::click());
  let text_pos = pos2(
  text_pos.x,
- header_response.rect.center().y - galley.size().y / 2.0,
+ header_response.rect.center().y - text.size().y / 2.0,
  );
 
  let mut state = State::from_memory_with_default_open(ui.ctx(), id, default_open);
@@ -298,16 +293,11 @@ impl CollapsingHeader {
  header_response.mark_changed();
  }
  header_response
- .widget_info(|| WidgetInfo::labeled(WidgetType::CollapsingHeader, galley.text()));
+ .widget_info(|| WidgetInfo::labeled(WidgetType::CollapsingHeader, text.text()));
 
  let visuals = ui
  .style()
  .interact_selectable(&header_response, self.selected);
- let text_color = ui
- .style()
- .visuals
- .override_text_color
- .unwrap_or_else(|| visuals.text_color());
 
  if ui.visuals().collapsing_header_frame || self.show_background {
  ui.painter().add(epaint::RectShape {
@@ -343,7 +333,7 @@ impl CollapsingHeader {
  paint_icon(ui, openness, &icon_response);
  }
 
- ui.painter().galley_with_color(text_pos, galley, text_color);
+ text.paint_with_visuals(ui.painter(), text_pos, &visuals);
 
  Prepared {
  id,

egui/src/containers/combo_box.rs

@@ -1,16 +1,14 @@
 use crate::{style::WidgetVisuals, *};
 use epaint::Shape;
 
-// TODO: this should be builder struct so we can set options like width.
-
 /// A drop-down selection menu with a descriptive label.
 ///
 /// ```
 /// # #[derive(Debug, PartialEq)]
 /// # enum Enum { First, Second, Third }
 /// # let mut selected = Enum::First;
 /// # let mut ui = &mut egui::Ui::__test();
-/// egui::ComboBox::from_label( "Select one!")
+/// egui::ComboBox::from_label("Select one!")
 /// .selected_text(format!("{:?}", selected))
 /// .show_ui(ui, |ui| {
 /// ui.selectable_value(&mut selected, Enum::First, "First");
@@ -22,14 +20,14 @@ use epaint::Shape;
 #[must_use = "You should call .show*"]
 pub struct ComboBox {
  id_source: Id,
- label: Option<Label>,
- selected_text: String,
+ label: Option<WidgetText>,
+ selected_text: WidgetText,
  width: Option<f32>,
 }
 
 impl ComboBox {
  /// Label shown next to the combo box
- pub fn from_label(label: impl Into<Label>) -> Self {
+ pub fn from_label(label: impl Into<WidgetText>) -> Self {
  let label = label.into();
  Self {
  id_source: Id::new(label.text()),
@@ -56,9 +54,8 @@ impl ComboBox {
  }
 
  /// What we show as the currently selected value
- #[allow(clippy::needless_pass_by_value)]
- pub fn selected_text(mut self, selected_text: impl ToString) -> Self {
- self.selected_text = selected_text.to_string();
+ pub fn selected_text(mut self, selected_text: impl Into<WidgetText>) -> Self {
+ self.selected_text = selected_text.into();
  self
  }
 
@@ -95,7 +92,7 @@ impl ComboBox {
  if let Some(label) = label {
  ir.response
  .widget_info(|| WidgetInfo::labeled(WidgetType::ComboBox, label.text()));
- ir.response |= ui.add(label);
+ ir.response |= ui.label(label);
  } else {
  ir.response
  .widget_info(|| WidgetInfo::labeled(WidgetType::ComboBox, ""));
@@ -115,7 +112,7 @@ impl ComboBox {
  /// # let mut ui = &mut egui::Ui::__test();
  /// let alternatives = ["a", "b", "c", "d"];
  /// let mut selected = 2;
- /// egui::ComboBox::from_label( "Select one!").show_index(
+ /// egui::ComboBox::from_label("Select one!").show_index(
  /// ui,
  /// &mut selected,
  /// alternatives.len(),
@@ -151,11 +148,10 @@ impl ComboBox {
  }
 }
 
-#[allow(clippy::needless_pass_by_value)]
 fn combo_box_dyn<'c, R>(
  ui: &mut Ui,
  button_id: Id,
- selected: impl ToString,
+ selected_text: WidgetText,
  menu_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
 ) -> InnerResponse<Option<R>> {
  let popup_id = button_id.with("popup");
@@ -166,9 +162,7 @@ fn combo_box_dyn<'c, R>(
  let full_minimum_width = ui.spacing().slider_width;
  let icon_size = Vec2::splat(ui.spacing().icon_width);
 
- let galley =
- ui.fonts()
- .layout_delayed_color(selected.to_string(), TextStyle::Button, f32::INFINITY);
+ let galley = selected_text.into_galley(ui, Some(false), f32::INFINITY, TextStyle::Button);
 
  let width = galley.size().x + ui.spacing().item_spacing.x + icon_size.x;
  let width = width.at_least(full_minimum_width);
@@ -188,8 +182,7 @@ fn combo_box_dyn<'c, R>(
  paint_icon(ui.painter(), icon_rect.expand(visuals.expansion), visuals);
 
  let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size(), rect);
- ui.painter()
- .galley_with_color(text_rect.min, galley, visuals.text_color());
+ galley.paint_with_visuals(ui.painter(), text_rect.min, visuals);
  });
 
  if button_response.clicked() {

egui/src/containers/popup.rs

@@ -226,9 +226,9 @@ fn show_tooltip_at_avoid_dyn<'c, R>(
 /// egui::show_tooltip_text(ui.ctx(), egui::Id::new("my_tooltip"), "Helpful text");
 /// }
 /// ```
-pub fn show_tooltip_text(ctx: &CtxRef, id: Id, text: impl ToString) -> Option<()> {
+pub fn show_tooltip_text(ctx: &CtxRef, id: Id, text: impl Into<WidgetText>) -> Option<()> {
  show_tooltip(ctx, id, |ui| {
- ui.add(crate::widgets::Label::new(text));
+ crate::widgets::Label::new(text).ui(ui);
  })
 }
 

egui/src/containers/window.rs

@@ -1,6 +1,6 @@
 // WARNING: the code in here is horrible. It is a behemoth that needs breaking up into simpler parts.
 
-use crate::{widgets::*, *};
+use crate::{widget_text::WidgetTextGalley, *};
 use epaint::*;
 
 use super::*;
@@ -23,7 +23,7 @@ use super::*;
 /// });
 #[must_use = "You should call .show()"]
 pub struct Window<'open> {
- title_label: Label,
+ title: WidgetText,
  open: Option<&'open mut bool>,
  area: Area,
  frame: Option<Frame>,
@@ -37,13 +37,11 @@ impl<'open> Window<'open> {
  /// The window title is used as a unique [`Id`] and must be unique, and should not change.
  /// This is true even if you disable the title bar with `.title_bar(false)`.
  /// If you need a changing title, you must call `window.id(…)` with a fixed id.
- #[allow(clippy::needless_pass_by_value)]
- pub fn new(title: impl ToString) -> Self {
- let title = title.to_string();
- let area = Area::new(&title);
- let title_label = Label::new(title).text_style(TextStyle::Heading).wrap(false);
+ pub fn new(title: impl Into<WidgetText>) -> Self {
+ let title = title.into().fallback_text_style(TextStyle::Heading);
+ let area = Area::new(title.text());
  Self {
- title_label,
+ title,
  open: None,
  area,
  frame: None,
@@ -250,7 +248,7 @@ impl<'open> Window<'open> {
  add_contents: Box<dyn FnOnce(&mut Ui) -> R + 'c>,
  ) -> Option<InnerResponse<Option<R>>> {
  let Window {
- title_label,
+ title,
  open,
  area,
  frame,
@@ -299,7 +297,7 @@ impl<'open> Window<'open> {
  .and_then(|window_interaction| {
  // Calculate roughly how much larger the window size is compared to the inner rect
  let title_bar_height = if with_title_bar {
- title_label.font_height(ctx.fonts(), &ctx.style()) + title_content_spacing
+ title.font_height(ctx.fonts(), &ctx.style()) + title_content_spacing
  } else {
  0.0
  };
@@ -336,7 +334,7 @@ impl<'open> Window<'open> {
  let title_bar = if with_title_bar {
  let title_bar = show_title_bar(
  &mut frame.content_ui,
- title_label,
+ title,
  show_close_button,
  collapsing_id,
  &mut collapsing,
@@ -745,22 +743,21 @@ fn paint_frame_interaction(
 
 struct TitleBar {
  id: Id,
- title_label: Label,
- title_galley: std::sync::Arc<Galley>,
+ title_galley: WidgetTextGalley,
  min_rect: Rect,
  rect: Rect,
 }
 
 fn show_title_bar(
  ui: &mut Ui,
- title_label: Label,
+ title: WidgetText,
  show_close_button: bool,
  collapsing_id: Id,
  collapsing: &mut collapsing_header::State,
  collapsible: bool,
 ) -> TitleBar {
  let inner_response = ui.horizontal(|ui| {
- let height = title_label
+ let height = title
  .font_height(ui.fonts(), ui.style())
  .max(ui.spacing().interact_size.y);
  ui.set_min_height(height);
@@ -782,7 +779,7 @@ fn show_title_bar(
  collapsing_header::paint_icon(ui, openness, &collapse_button_response);
  }
 
- let title_galley = title_label.layout(ui);
+ let title_galley = title.into_galley(ui, Some(false), f32::INFINITY, TextStyle::Heading);
 
  let minimum_width = if collapsible || show_close_button {
  // If at least one button is shown we make room for both buttons (since title is centered):
@@ -795,7 +792,6 @@ fn show_title_bar(
 
  TitleBar {
  id,
- title_label,
  title_galley,
  min_rect,
  rect: Rect::NAN, // Will be filled in later
@@ -830,20 +826,16 @@ impl TitleBar {
  }
  }
 
- // Always have inactive style for the window.
- // It is VERY annoying to e.g. change it when moving the window.
- let style = ui.visuals().widgets.inactive;
-
- self.title_label = self.title_label.text_color(style.fg_stroke.color);
-
  let full_top_rect = Rect::from_x_y_ranges(self.rect.x_range(), self.min_rect.y_range());
  let text_pos =
  emath::align::center_size_in_rect(self.title_galley.size(), full_top_rect).left_top();
- let text_pos = text_pos - self.title_galley.rect.min.to_vec2();
+ let text_pos = text_pos - self.title_galley.galley().rect.min.to_vec2();
  let text_pos = text_pos - 1.5 * Vec2::Y; // HACK: center on x-height of text (looks better)
- let text_color = ui.visuals().text_color();
- self.title_label
- .paint_galley(ui, text_pos, self.title_galley, false, text_color);
+ self.title_galley.paint_with_fallback_color(
+ ui.painter(),
+ text_pos,
+ ui.visuals().text_color(),
+ );
 
  if let Some(content_response) = &content_response {
  // paint separator between title and content:

egui/src/context.rs

@@ -915,7 +915,7 @@ impl Context {
  let text = format!("{} - {:?}", layer_id.short_debug_format(), area.rect(),);
  // TODO: `Sense::hover_highlight()`
  if ui
- .add(Label::new(text).monospace().sense(Sense::click()))
+ .add(Label::new(RichText::new(text).monospace()).sense(Sense::click()))
  .hovered
  && is_visible
  {