Theme section bg

`Widget::outline` takes OutlineStyle
This commit is contained in:
Michael Kirk 2021-02-27 10:46:24 -08:00 committed by Dustin Carlino
parent 73280bc114
commit 1e75352ce0
24 changed files with 74 additions and 78 deletions

View File

@ -246,7 +246,7 @@ fn make_panel(
.fill_height()
.padding(42)
.bg(Color::WHITE)
.outline(2.0, CutsceneBuilder::fg_color()),
.outline(ctx.style().btn_solid.outline),
];
Panel::new(Widget::custom_col(col))

View File

@ -3,7 +3,7 @@ use std::collections::BTreeMap;
use geom::{Duration, Percent};
use sim::OrigPersonID;
use widgetry::{
Color, DrawBaselayer, EventCtx, GfxCtx, Key, Line, Outcome, Panel, State, StyledButtons, Text,
DrawBaselayer, EventCtx, GfxCtx, Key, Line, Outcome, Panel, State, StyledButtons, Text,
TextExt, Widget,
};
@ -149,7 +149,7 @@ impl ChallengesPicker {
.centered_horiz()
.bg(app.cs.panel_bg)
.padding(16)
.outline(2.0, Color::BLACK),
.outline(ctx.style().btn_solid.outline),
];
// First list challenges
@ -173,7 +173,7 @@ impl ChallengesPicker {
.flex_wrap(ctx, Percent::int(80))
.bg(app.cs.panel_bg)
.padding(16)
.outline(2.0, Color::BLACK),
.outline(ctx.style().btn_solid.outline),
);
let mut main_row = Vec::new();
@ -199,7 +199,7 @@ impl ChallengesPicker {
Widget::col(col)
.bg(app.cs.panel_bg)
.padding(16)
.outline(2.0, Color::BLACK),
.outline(ctx.style().btn_solid.outline),
);
}
@ -240,7 +240,7 @@ impl ChallengesPicker {
Widget::col(inner_col)
.bg(app.cs.panel_bg)
.padding(16)
.outline(2.0, Color::BLACK),
.outline(ctx.style().btn_solid.outline),
);
current_challenge = Some(challenge);
}

View File

@ -823,7 +823,7 @@ fn make_changelist(ctx: &mut EventCtx, app: &App) -> Panel {
.build_widget(ctx, "undo"),
])
.padding(16)
.outline(2.0, Color::WHITE),
.outline(ctx.style().btn_outline.outline),
);
} else {
col.push(btn);

View File

@ -686,7 +686,7 @@ fn make_side_panel(
.bg(app.cs.inner_panel_bg);
if idx == selected {
col.push(stage_controls.outline(2.0, ctx.style().outline_color));
col.push(stage_controls.outline(ctx.style().btn_outline.outline));
} else {
col.push(stage_controls);
}

View File

@ -212,7 +212,7 @@ pub fn current_demand(
])
.padding(10)
.bg(app.cs.inner_panel_bg)
.outline(2.0, Color::WHITE),
.outline(ctx.style().section_outline),
);
rows.push(
ctx.style()
@ -383,7 +383,7 @@ fn delay_plot(
])
.padding(10)
.bg(app.cs.inner_panel_bg)
.outline(2.0, Color::WHITE)
.outline(ctx.style().section_outline)
}
fn header(

View File

@ -3,7 +3,7 @@ use std::collections::HashSet;
use abstutil::prettyprint_usize;
use map_model::{LaneID, PathConstraints};
use widgetry::{
Color, EventCtx, Line, LinePlot, PlotOptions, Series, StyledButtons, Text, TextExt, Widget,
EventCtx, Line, LinePlot, PlotOptions, Series, StyledButtons, Text, TextExt, Widget,
};
use crate::app::App;
@ -96,7 +96,7 @@ pub fn info(ctx: &EventCtx, app: &App, details: &mut Details, id: LaneID) -> Vec
])
.padding(10)
.bg(app.cs.inner_panel_bg)
.outline(2.0, Color::WHITE);
.outline(ctx.style().section_outline);
rows.push(section);
}

View File

@ -683,7 +683,7 @@ fn throughput<F: Fn(&Analytics) -> Vec<(AgentType, Vec<(Time, usize)>)>>(
])
.padding(10)
.bg(app.cs.inner_panel_bg)
.outline(2.0, Color::WHITE)
.outline(ctx.style().section_outline)
}
fn make_tabs(

View File

@ -2,9 +2,7 @@ use std::collections::HashSet;
use abstutil::prettyprint_usize;
use map_model::ParkingLotID;
use widgetry::{
Color, EventCtx, Line, LinePlot, PlotOptions, Series, StyledButtons, TextExt, Widget,
};
use widgetry::{EventCtx, Line, LinePlot, PlotOptions, Series, StyledButtons, TextExt, Widget};
use crate::app::App;
use crate::info::{header_btns, make_tabs, Details, Tab};
@ -59,7 +57,7 @@ pub fn info(ctx: &mut EventCtx, app: &App, details: &mut Details, id: ParkingLot
])
.padding(10)
.bg(app.cs.inner_panel_bg)
.outline(2.0, Color::WHITE);
.outline(ctx.style().section_outline);
rows.push(section);
if app.opts.dev {

View File

@ -155,7 +155,7 @@ pub fn trips(
])
.centered()
.corner_rounding(CornerRounding::FullyRounded)
.outline(1.0, color)
.outline((1.0, color))
.bg(color.alpha(0.2))
.padding(EdgeInsets {
top: 5.0,
@ -206,7 +206,7 @@ pub fn trips(
},
])
.centered()
.outline(2.0, Color::WHITE)
.outline(ctx.style().section_outline)
.padding(16)
.bg(app.cs.inner_panel_bg)
.to_geom(ctx, Some(0.3));
@ -238,7 +238,7 @@ pub fn trips(
if let Some(info) = maybe_info {
rows.push(
info.outline(2.0, Color::WHITE)
info.outline(ctx.style().section_outline)
.bg(app.cs.inner_panel_bg)
.padding(16),
);

View File

@ -52,7 +52,7 @@ impl TitleScreen {
])
.bg(app.cs.dialog_bg)
.padding(16)
.outline(3.0, Color::BLACK)
.outline((3.0, Color::BLACK))
.centered(),
)
.build_custom(ctx),

View File

@ -54,7 +54,9 @@ impl TripSummaries {
panel: Panel::new(Widget::col(vec![
DashTab::TripSummaries.picker(ctx, app),
Widget::row(vec![
Widget::col(filters).padding(16).outline(2.0, Color::WHITE),
Widget::col(filters)
.padding(16)
.outline(ctx.style().section_outline),
Widget::col(vec![
summary_boxes(ctx, app, &filter),
Widget::row(vec![
@ -180,7 +182,7 @@ fn summary_boxes(ctx: &mut EventCtx, app: &App, filter: &Filter) -> Widget {
.container()
.padding(20)
.bg(Color::hex("#72CE36").alpha(0.5))
.outline(2.0, Color::WHITE),
.outline(ctx.style().section_outline),
Text::from_multiline(vec![
Line(format!("Slower Trips: {}", prettyprint_usize(num_slower))).big_heading_plain(),
Line(format!(
@ -203,7 +205,7 @@ fn summary_boxes(ctx: &mut EventCtx, app: &App, filter: &Filter) -> Widget {
.container()
.padding(20)
.bg(Color::hex("#EB3223").alpha(0.5))
.outline(2.0, Color::WHITE),
.outline(ctx.style().section_outline),
Text::from_multiline(vec![
Line(format!("Unchanged: {}", prettyprint_usize(num_same))).big_heading_plain(),
Line(format!(
@ -216,7 +218,7 @@ fn summary_boxes(ctx: &mut EventCtx, app: &App, filter: &Filter) -> Widget {
.container()
.padding(20)
.bg(Color::hex("#F4DA22").alpha(0.5))
.outline(2.0, Color::WHITE),
.outline(ctx.style().section_outline),
])
.evenly_spaced()
}
@ -247,7 +249,7 @@ fn scatter_plot(ctx: &mut EventCtx, app: &App, filter: &Filter) -> Widget {
),
])
.padding(16)
.outline(2.0, Color::WHITE)
.outline(ctx.style().section_outline)
}
fn contingency_table(ctx: &mut EventCtx, app: &App, filter: &Filter) -> Widget {
@ -396,7 +398,7 @@ fn contingency_table(ctx: &mut EventCtx, app: &App, filter: &Filter) -> Widget {
Line("number of trips (slower)").secondary().draw(ctx),
])
.padding(16)
.outline(2.0, Color::WHITE)
.outline(ctx.style().section_outline)
}
pub struct Filter {

View File

@ -270,7 +270,7 @@ impl FinalScore {
.autocrop(),
)
.container()
.outline(10.0, Color::BLACK)
.outline((10.0, Color::BLACK))
.padding(10),
Widget::col(vec![
msg.draw_text(ctx),
@ -290,7 +290,7 @@ impl FinalScore {
.btn_outline_text("Back to challenges")
.build_def(ctx),
])
.outline(10.0, Color::BLACK)
.outline((10.0, Color::BLACK))
.padding(10),
])
.bg(app.cs.panel_bg),

View File

@ -5,7 +5,7 @@ use maplit::btreeset;
use map_gui::tools::{grey_out_map, nice_map_name, ChooseSomething, CityPicker, PopupMsg};
use sim::{ScenarioModifier, TripMode};
use widgetry::{
lctrl, Choice, Color, EventCtx, GfxCtx, HorizontalAlignment, Key, Line, Outcome, Panel, Slider,
lctrl, Choice, EventCtx, GfxCtx, HorizontalAlignment, Key, Line, Outcome, Panel, Slider,
Spinner, State, StyledButtons, Text, TextExt, VerticalAlignment, Widget,
};
@ -204,7 +204,7 @@ impl EditScenarioModifiers {
.align_right(),
])
.padding(10)
.outline(2.0, Color::WHITE),
.outline(ctx.style().section_outline),
);
}
rows.push(

View File

@ -852,7 +852,7 @@ impl TutorialState {
col.push(Widget::col(controls).align_bottom());
Some(
Panel::new(Widget::col(col).outline(5.0, Color::WHITE))
Panel::new(Widget::col(col).outline((5.0, Color::WHITE)))
.exact_size_percent(40, 40)
.aligned(*horiz_align, VerticalAlignment::Center)
.build(ctx),

View File

@ -193,7 +193,7 @@ impl ColorScheme {
// UI
panel_bg: gui_style.panel_bg,
inner_panel_bg: gui_style.panel_bg.alpha(1.0),
inner_panel_bg: gui_style.section_bg,
day_time_slider: hex("#F4DA22"),
night_time_slider: hex("#12409D"),
selected: Color::RED.alpha(0.7),

View File

@ -257,7 +257,7 @@ fn make_vehicle_panel(ctx: &mut EventCtx, app: &App) -> Panel {
Widget::draw_batch(ctx, batch)
.container()
.padding(5)
.outline(2.0, Color::WHITE)
.outline((2.0, Color::WHITE))
} else {
let normal = batch.clone().color(RewriteColor::MakeGrayscale);
let hovered = batch;

View File

@ -157,7 +157,7 @@ impl<'a> EventCtx<'a> {
.container()
.bg(Color::BLACK)
.padding(15)
.outline(5.0, border)
.outline((5.0, border))
.centered_horiz()
.margin_below(5),
Widget::draw_batch(
@ -174,7 +174,7 @@ impl<'a> EventCtx<'a> {
.container()
.bg(Color::BLACK)
.padding(15)
.outline(5.0, Color::YELLOW)
.outline((5.0, Color::YELLOW))
.force_width_pct(self, Percent::int(30))
.margin_below(5),
Widget::draw_batch(

View File

@ -184,49 +184,49 @@ pub trait StyledButtons<'a> {
impl<'a> StyledButtons<'a> for Style {
fn btn_solid(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_solid, Some(self.outline_thickness))
basic_button(&self.btn_solid, true)
}
fn btn_outline(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_outline, Some(self.outline_thickness))
basic_button(&self.btn_outline, true)
}
fn btn_solid_floating(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_solid_floating, Some(self.outline_thickness))
basic_button(&self.btn_solid_floating, true)
}
fn btn_plain(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_outline, None)
basic_button(&self.btn_outline, false)
}
fn btn_plain_destructive(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_outline_destructive, None)
basic_button(&self.btn_outline_destructive, false)
}
fn btn_solid_destructive(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_solid_destructive, Some(self.outline_thickness))
basic_button(&self.btn_solid_destructive, true)
}
fn btn_outline_destructive(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_solid_destructive, Some(self.outline_thickness))
basic_button(&self.btn_solid_destructive, true)
}
fn btn_plain_primary(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_outline_primary, None)
basic_button(&self.btn_outline_primary, false)
}
fn btn_solid_primary(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_solid_primary, Some(self.outline_thickness))
basic_button(&self.btn_solid_primary, true)
}
fn btn_outline_primary(&self) -> ButtonBuilder<'a> {
basic_button(&self.btn_solid_primary, Some(self.outline_thickness))
basic_button(&self.btn_solid_primary, true)
}
}
impl<'a> ButtonStyle {
pub fn plain(&self) -> ButtonBuilder<'a> {
basic_button(self, None)
basic_button(self, false)
}
pub fn outline(&self) -> ButtonBuilder<'a> {
@ -279,7 +279,7 @@ impl<'a> Style {
// The text is styled like an "outline" button, while the image is styled like a "solid"
// button.
basic_button(outline_style, Some(self.outline_thickness))
basic_button(outline_style, true)
.label_text(text)
.image_path(icon_path)
.image_dims(25.0)
@ -326,10 +326,7 @@ fn dropdown_button<'a>(builder: ButtonBuilder<'a>) -> ButtonBuilder<'a> {
.label_first()
}
fn basic_button<'a>(
button_style: &ButtonStyle,
outline_thickness: Option<f64>,
) -> ButtonBuilder<'a> {
fn basic_button<'a>(button_style: &ButtonStyle, outline: bool) -> ButtonBuilder<'a> {
let builder = ButtonBuilder::new()
.label_color(button_style.fg, ControlState::Default)
.label_color(button_style.fg_disabled, ControlState::Disabled)
@ -339,11 +336,8 @@ fn basic_button<'a>(
.bg_color(button_style.bg_hover, ControlState::Hovered)
.bg_color(button_style.bg_disabled, ControlState::Disabled);
if let Some(outline_thickness) = outline_thickness {
builder.outline(
(outline_thickness, button_style.outline.1),
ControlState::Default,
)
if outline {
builder.outline(button_style.outline, ControlState::Default)
} else {
builder
}

View File

@ -4,8 +4,6 @@ pub mod buttons;
#[derive(Clone)]
pub struct Style {
pub outline_thickness: f64,
pub outline_color: Color,
pub panel_bg: Color,
pub field_bg: Color,
pub dropdown_border: Color,
@ -15,6 +13,8 @@ pub struct Style {
pub text_hotkey_color: Color,
pub text_destructive_color: Color,
pub loading_tips: Text,
pub section_bg: Color,
pub section_outline: OutlineStyle,
pub btn_solid: ButtonStyle,
pub btn_outline: ButtonStyle,
pub btn_solid_floating: ButtonStyle,
@ -90,8 +90,9 @@ impl Style {
panel_bg: Color::WHITE.alpha(0.8),
field_bg: hex("#F2F2F2"),
dropdown_border: hex("#4C4C4C"),
outline_thickness: 2.0,
outline_color: hex("#4C4C4C"),
// TODO: replace inner_panel_bg with this
section_bg: Color::WHITE,
section_outline: (2.0, Color::WHITE.shade(0.1)),
loading_tips: Text::new(),
icon_fg: hex("#4C4C4C"),
text_fg_color: hex("#4C4C4C"),
@ -148,8 +149,8 @@ impl Style {
panel_bg: Color::grey(0.4),
field_bg: Color::grey(0.3),
dropdown_border: Color::WHITE,
outline_thickness: 2.0,
outline_color: Color::WHITE,
section_bg: Color::grey(0.5),
section_outline: (2.0, Color::WHITE),
loading_tips: Text::new(),
icon_fg: Color::WHITE,
text_fg_color: Color::WHITE,
@ -195,10 +196,12 @@ impl Style {
}
pub fn dark_bg() -> Style {
let navy = hex("#003046");
let mut style = Self::light_bg();
style.outline_color = Color::WHITE;
style.panel_bg = hex("#003046").alpha(0.9);
style.field_bg = style.panel_bg.shade(0.2);
style.panel_bg = navy.alpha(0.9);
style.section_outline.1 = navy.shade(0.2);
style.section_bg = navy;
style.field_bg = navy.shade(0.2);
style.btn_outline = ButtonStyle::outline_light_fg();
style.btn_solid = ButtonStyle::solid_dark_fg();
style.btn_solid_floating = ButtonStyle::solid_light_fg();

View File

@ -681,7 +681,7 @@ impl<'b, 'a: 'b> ButtonBuilder<'a> {
let color = label
.color
.or(default.and_then(|d| d.color))
.unwrap_or(ctx.style().outline_color);
.unwrap_or(ctx.style().text_fg_color);
let mut line = Line(text).fg(color);
if let Some(font_size) = label.font_size.or(default.and_then(|d| d.font_size)) {
@ -735,8 +735,8 @@ impl<'b, 'a: 'b> ButtonBuilder<'a> {
// uniformly sized buttons.
.unwrap_or(Color::CLEAR));
if let Some((thickness, color)) = state_style.outline.or(default_style.outline) {
button_widget = button_widget.outline(thickness, color);
if let Some(outline) = state_style.outline.or(default_style.outline) {
button_widget = button_widget.outline(outline);
}
if let Some(corner_rounding) = self.corner_rounding {

View File

@ -13,7 +13,7 @@ use crate::widgets::containers::{Container, Nothing};
pub use crate::widgets::panel::Panel;
use crate::{
Button, Choice, Color, DeferDraw, Drawable, Dropdown, EventCtx, GeomBatch, GfxCtx, JustDraw,
ScreenDims, ScreenPt, ScreenRectangle, TextBox, Toggle,
OutlineStyle, ScreenDims, ScreenPt, ScreenRectangle, TextBox, Toggle,
};
pub mod autocomplete;
@ -206,9 +206,8 @@ impl Widget {
}
// Callers have to adjust padding too, probably
#[deprecated(note = "combine params into OutlineStyle")]
pub fn outline(mut self, thickness: f64, color: Color) -> Widget {
self.layout.outline = Some((thickness, color));
pub fn outline(mut self, style: OutlineStyle) -> Widget {
self.layout.outline = Some(style);
self
}

View File

@ -30,7 +30,7 @@ impl<T: 'static + PartialEq + Clone + std::fmt::Debug> PersistentSplit<T> {
hotkey,
choices,
)))
.outline(outline.0, outline.1)
.outline(outline)
.named(label)
}

View File

@ -69,7 +69,7 @@ impl Spinner {
top_left: ScreenPt::new(0.0, 0.0),
dims,
}))
.outline(outline.0, outline.1)
.outline(outline)
}
pub fn modify(&mut self, delta: isize) {

View File

@ -76,9 +76,9 @@ impl Demo {
.draw(ctx),
Widget::row(vec![
// Examples of styling widgets
Widget::col(col1).outline(3.0, Color::BLACK).padding(5),
Widget::col(col).outline(3.0, Color::BLACK).padding(5),
Widget::col(col3).outline(3.0, Color::BLACK).padding(5),
Widget::col(col1).outline((2.0, Color::BLACK)).padding(5),
Widget::col(col).outline((5.0, Color::BLACK)).padding(5),
Widget::col(col3).outline((5.0, Color::BLUE)).padding(5),
]),
LinePlot::new(
ctx,