[refactor] use "fg_" prefix in WidgetStyle

This commit is contained in:
Emil Ernerfeldt 2020-09-05 13:30:04 +02:00
parent 8b93135fe4
commit 6ca11aff8c
10 changed files with 48 additions and 42 deletions

View file

@ -105,7 +105,7 @@ impl State {
/// Paint the arrow icon that indicated if the region is open or not /// Paint the arrow icon that indicated if the region is open or not
pub fn paint_icon(ui: &mut Ui, openness: f32, response: &Response) { pub fn paint_icon(ui: &mut Ui, openness: f32, response: &Response) {
let stroke = ui.style().interact(response).stroke; let stroke = ui.style().interact(response).fg_stroke;
let rect = response.rect; let rect = response.rect;
@ -224,7 +224,7 @@ impl CollapsingHeader {
text_pos, text_pos,
galley, galley,
label.text_style_or_default(ui.style()), label.text_style_or_default(ui.style()),
ui.style().interact(&response).stroke.color, ui.style().interact(&response).text_color(),
); );
painter.set( painter.set(

View file

@ -270,7 +270,7 @@ impl Resize {
use crate::paint::Stroke; use crate::paint::Stroke;
pub fn paint_resize_corner(ui: &mut Ui, response: &Response) { pub fn paint_resize_corner(ui: &mut Ui, response: &Response) {
let stroke = ui.style().interact(response).stroke; let stroke = ui.style().interact(response).fg_stroke;
paint_resize_corner_with_style(ui, &response.rect, stroke); paint_resize_corner_with_style(ui, &response.rect, stroke);
} }

View file

@ -237,7 +237,7 @@ impl Prepared {
} }
let style = ui.style(); let style = ui.style();
let handle_fill = style.interact(&response).main_fill; let handle_fill = style.interact(&response).fg_fill;
let handle_stroke = style.interact(&response).bg_stroke; let handle_stroke = style.interact(&response).bg_stroke;
ui.painter().add(paint::PaintCmd::Rect { ui.painter().add(paint::PaintCmd::Rect {

View file

@ -711,7 +711,7 @@ fn close_button(ui: &mut Ui, rect: Rect) -> Response {
let response = ui.interact(rect, close_id, Sense::click()); let response = ui.interact(rect, close_id, Sense::click());
ui.expand_to_include_child(response.rect); ui.expand_to_include_child(response.rect);
let stroke = ui.style().interact(&response).stroke; let stroke = ui.style().interact(&response).fg_stroke;
ui.painter() ui.painter()
.line_segment([rect.left_top(), rect.right_bottom()], stroke); .line_segment([rect.left_top(), rect.right_bottom()], stroke);
ui.painter() ui.painter()

View file

@ -27,7 +27,7 @@ pub fn toggle(ui: &mut Ui, on: &mut bool) -> Response {
// We can follow the standard style theme by asking // We can follow the standard style theme by asking
// "how should something that is being interacted with be painted?". // "how should something that is being interacted with be painted?".
// This gives us visual style change when the user hovers and clicks on the widget. // This gives us visual style change when the user hovers and clicks on the widget.
let style = ui.style().interact(&response); let visuals = ui.style().interact(&response);
let off_color = Rgba::new(0.0, 0.0, 0.0, 0.0); let off_color = Rgba::new(0.0, 0.0, 0.0, 0.0);
let on_color = Rgba::new(0.0, 0.5, 0.0, 0.5); let on_color = Rgba::new(0.0, 0.5, 0.0, 0.5);
// All coordinates are in screen coordinates (not relative) // All coordinates are in screen coordinates (not relative)
@ -37,15 +37,15 @@ pub fn toggle(ui: &mut Ui, on: &mut bool) -> Response {
rect, rect,
corner_radius: radius, corner_radius: radius,
fill: lerp(off_color..=on_color, how_on).into(), fill: lerp(off_color..=on_color, how_on).into(),
stroke: style.bg_stroke, stroke: visuals.bg_stroke,
}); });
// Animate the circle from left to right: // Animate the circle from left to right:
let circle_x = lerp((rect.left() + radius)..=(rect.right() - radius), how_on); let circle_x = lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
ui.painter().add(PaintCmd::Circle { ui.painter().add(PaintCmd::Circle {
center: pos2(circle_x, rect.center().y), center: pos2(circle_x, rect.center().y),
radius: 0.75 * radius, radius: 0.75 * radius,
fill: style.main_fill, fill: visuals.fg_fill,
stroke: style.stroke, stroke: visuals.fg_stroke,
}); });
// All done! Return the response so the user can check what happened // All done! Return the response so the user can check what happened

View file

@ -108,7 +108,7 @@ fn menu_impl<'c>(
let mut button = Button::new(title); let mut button = Button::new(title);
if bar_state.open_menu == Some(menu_id) { if bar_state.open_menu == Some(menu_id) {
button = button.fill(Some(ui.style().visuals.interacted.active.main_fill)); button = button.fill(Some(ui.style().visuals.interacted.active.fg_fill));
} }
let button_response = ui.add(button); let button_response = ui.add(button);

View file

@ -148,6 +148,7 @@ impl Interacted {
} }
} }
/// bg = background, fg = foreground.
#[derive(Clone, Copy, Debug)] #[derive(Clone, Copy, Debug)]
#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))] #[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
pub struct WidgetVisuals { pub struct WidgetVisuals {
@ -163,10 +164,16 @@ pub struct WidgetVisuals {
/// Fill color of the interactive part of a component (slider grab, checkbox, ...) /// Fill color of the interactive part of a component (slider grab, checkbox, ...)
/// When you need a fill. /// When you need a fill.
pub main_fill: Srgba, // TODO: just fill? pub fg_fill: Srgba,
/// Stroke and text color of the interactive part of a component (button text, slider grab, check-mark, ...) /// Stroke and text color of the interactive part of a component (button text, slider grab, check-mark, ...)
pub stroke: Stroke, pub fg_stroke: Stroke,
}
impl WidgetVisuals {
pub fn text_color(&self) -> Srgba {
self.fg_stroke.color
}
} }
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@ -235,29 +242,29 @@ impl Default for Interacted {
bg_fill: Srgba::black_alpha(128), bg_fill: Srgba::black_alpha(128),
bg_stroke: Stroke::new(2.0, WHITE), bg_stroke: Stroke::new(2.0, WHITE),
corner_radius: 4.0, corner_radius: 4.0,
main_fill: srgba(120, 120, 200, 255), fg_fill: srgba(120, 120, 200, 255),
stroke: Stroke::new(2.0, WHITE), fg_stroke: Stroke::new(2.0, WHITE),
}, },
hovered: WidgetVisuals { hovered: WidgetVisuals {
bg_fill: Rgba::luminance_alpha(0.06, 0.5).into(), bg_fill: Rgba::luminance_alpha(0.06, 0.5).into(),
bg_stroke: Stroke::new(1.0, Rgba::white_alpha(0.5)), bg_stroke: Stroke::new(1.0, Rgba::white_alpha(0.5)),
corner_radius: 4.0, corner_radius: 4.0,
main_fill: srgba(100, 100, 150, 255), fg_fill: srgba(100, 100, 150, 255),
stroke: Stroke::new(1.5, Srgba::gray(240)), fg_stroke: Stroke::new(1.5, Srgba::gray(240)),
}, },
inactive: WidgetVisuals { inactive: WidgetVisuals {
bg_fill: Rgba::luminance_alpha(0.04, 0.5).into(), bg_fill: Rgba::luminance_alpha(0.04, 0.5).into(),
bg_stroke: Stroke::new(1.0, Rgba::white_alpha(0.04)), bg_stroke: Stroke::new(1.0, Rgba::white_alpha(0.04)),
corner_radius: 4.0, corner_radius: 4.0,
main_fill: srgba(60, 60, 80, 255), fg_fill: srgba(60, 60, 80, 255),
stroke: Stroke::new(0.5, Srgba::gray(200)), // Should NOT look grayed out! fg_stroke: Stroke::new(0.5, Srgba::gray(200)), // Should NOT look grayed out!
}, },
disabled: WidgetVisuals { disabled: WidgetVisuals {
bg_fill: TRANSPARENT, bg_fill: TRANSPARENT,
bg_stroke: Stroke::new(0.5, Srgba::gray(70)), bg_stroke: Stroke::new(0.5, Srgba::gray(70)),
corner_radius: 4.0, corner_radius: 4.0,
main_fill: srgba(50, 50, 50, 255), fg_fill: srgba(50, 50, 50, 255),
stroke: Stroke::new(0.5, Srgba::gray(128)), // Should look grayed out fg_stroke: Stroke::new(0.5, Srgba::gray(128)), // Should look grayed out
}, },
} }
} }
@ -367,15 +374,15 @@ impl WidgetVisuals {
bg_fill, bg_fill,
bg_stroke, bg_stroke,
corner_radius, corner_radius,
main_fill, fg_fill,
stroke, fg_stroke,
} = self; } = self;
ui_color(ui, bg_fill, "bg_fill"); ui_color(ui, bg_fill, "bg_fill");
bg_stroke.ui(ui, "bg_stroke"); bg_stroke.ui(ui, "bg_stroke");
ui.add(Slider::f32(corner_radius, 0.0..=10.0).text("corner_radius")); ui.add(Slider::f32(corner_radius, 0.0..=10.0).text("corner_radius"));
ui_color(ui, main_fill, "main_fill"); ui_color(ui, fg_fill, "fg_fill");
stroke.ui(ui, "stroke"); fg_stroke.ui(ui, "fg_stroke");
} }
} }

View file

@ -305,8 +305,7 @@ impl Widget for Button {
fill, fill,
stroke: ui.style().interact(&response).bg_stroke, stroke: ui.style().interact(&response).bg_stroke,
}); });
let stroke_color = ui.style().interact(&response).stroke.color; let text_color = text_color.unwrap_or_else(|| ui.style().interact(&response).text_color());
let text_color = text_color.unwrap_or(stroke_color);
ui.painter() ui.painter()
.galley(text_cursor, galley, text_style, text_color); .galley(text_cursor, galley, text_style, text_color);
response response
@ -364,6 +363,7 @@ impl<'a> Widget for Checkbox<'a> {
*checked = !*checked; *checked = !*checked;
} }
let visuals = ui.style().interact(&response);
let text_cursor = pos2( let text_cursor = pos2(
response.rect.min.x + button_padding.x + icon_width, response.rect.min.x + button_padding.x + icon_width,
response.rect.center().y - 0.5 * galley.size.y, response.rect.center().y - 0.5 * galley.size.y,
@ -371,13 +371,11 @@ impl<'a> Widget for Checkbox<'a> {
let (small_icon_rect, big_icon_rect) = ui.style().spacing.icon_rectangles(response.rect); let (small_icon_rect, big_icon_rect) = ui.style().spacing.icon_rectangles(response.rect);
ui.painter().add(PaintCmd::Rect { ui.painter().add(PaintCmd::Rect {
rect: big_icon_rect, rect: big_icon_rect,
corner_radius: ui.style().interact(&response).corner_radius, corner_radius: visuals.corner_radius,
fill: ui.style().interact(&response).bg_fill, fill: visuals.bg_fill,
stroke: ui.style().interact(&response).bg_stroke, stroke: visuals.bg_stroke,
}); });
let stroke = ui.style().interact(&response).stroke;
if *checked { if *checked {
ui.painter().add(PaintCmd::Path { ui.painter().add(PaintCmd::Path {
points: vec![ points: vec![
@ -386,12 +384,12 @@ impl<'a> Widget for Checkbox<'a> {
pos2(small_icon_rect.right(), small_icon_rect.top()), pos2(small_icon_rect.right(), small_icon_rect.top()),
], ],
closed: false, closed: false,
stroke,
fill: Default::default(), fill: Default::default(),
stroke: visuals.fg_stroke,
}); });
} }
let text_color = text_color.unwrap_or(stroke.color); let text_color = text_color.unwrap_or(visuals.text_color());
ui.painter() ui.painter()
.galley(text_cursor, galley, text_style, text_color); .galley(text_cursor, galley, text_style, text_color);
response response
@ -449,8 +447,7 @@ impl Widget for RadioButton {
response.rect.center().y - 0.5 * galley.size.y, response.rect.center().y - 0.5 * galley.size.y,
); );
let bg_fill = ui.style().interact(&response).bg_fill; let visuals = ui.style().interact(&response);
let stroke_color = ui.style().interact(&response).stroke.color;
let (small_icon_rect, big_icon_rect) = ui.style().spacing.icon_rectangles(response.rect); let (small_icon_rect, big_icon_rect) = ui.style().spacing.icon_rectangles(response.rect);
@ -459,20 +456,22 @@ impl Widget for RadioButton {
painter.add(PaintCmd::Circle { painter.add(PaintCmd::Circle {
center: big_icon_rect.center(), center: big_icon_rect.center(),
radius: big_icon_rect.width() / 2.0, radius: big_icon_rect.width() / 2.0,
fill: bg_fill, fill: visuals.bg_fill,
stroke: ui.style().interact(&response).bg_stroke, stroke: visuals.bg_stroke,
}); });
if checked { if checked {
painter.add(PaintCmd::Circle { painter.add(PaintCmd::Circle {
center: small_icon_rect.center(), center: small_icon_rect.center(),
radius: small_icon_rect.width() / 3.0, radius: small_icon_rect.width() / 3.0,
fill: stroke_color, fill: visuals.fg_stroke.color, // Intentional to use stroke and not fill
stroke: Default::default(), stroke: Default::default(),
// fill: visuals.fg_fill,
// stroke: visuals.fg_stroke,
}); });
} }
let text_color = text_color.unwrap_or(stroke_color); let text_color = text_color.unwrap_or_else(|| visuals.text_color());
painter.galley(text_cursor, galley, text_style, text_color); painter.galley(text_cursor, galley, text_style, text_color);
response response
} }

View file

@ -185,8 +185,8 @@ impl<'a> Slider<'a> {
ui.painter().add(PaintCmd::Circle { ui.painter().add(PaintCmd::Circle {
center: pos2(marker_center_x, rail_rect.center().y), center: pos2(marker_center_x, rail_rect.center().y),
radius: handle_radius(rect), radius: handle_radius(rect),
fill: ui.style().interact(response).main_fill, fill: ui.style().interact(response).fg_fill,
stroke: ui.style().interact(response).stroke, stroke: ui.style().interact(response).fg_stroke,
}); });
} }
} }

View file

@ -209,7 +209,7 @@ impl<'t> Widget for TextEdit<'t> {
} }
} }
let text_color = text_color.unwrap_or_else(|| ui.style().interact(&response).stroke.color); let text_color = text_color.unwrap_or_else(|| ui.style().interact(&response).text_color());
painter.galley(response.rect.min, galley, text_style, text_color); painter.galley(response.rect.min, galley, text_style, text_color);
ui.memory().text_edit.insert(id, state); ui.memory().text_edit.insert(id, state);
response response