theme dropdowns and menus

This commit is contained in:
Michael Kirk 2021-02-24 15:40:54 -08:00 committed by Dustin Carlino
parent c6d361c4b0
commit ac30774b06
6 changed files with 45 additions and 21 deletions

View File

@ -195,7 +195,7 @@ impl State<App> for EditMode {
Choice::string("create a blank proposal"),
Choice::string("save this proposal as..."),
Choice::string("delete this proposal and remove all edits")
.fg(Color::hex("#EB3223")),
.fg(ctx.style().text_destructive_color),
],
Box::new(move |choice, ctx, app| match choice.as_ref() {
"rename current proposal" => {

View File

@ -391,13 +391,16 @@ impl ColorScheme {
let mut cs = ColorScheme::day_mode();
use widgetry::ButtonStyle;
cs.gui_style.panel_bg = hex("#003046").alpha(0.9);
cs.gui_style.btn_outline = ButtonStyle::btn_outline();
cs.gui_style.btn_solid = ButtonStyle::btn_solid();
cs.gui_style.btn_solid_floating = ButtonStyle::btn_solid_floating();
cs.gui_style.text_fg_color = Color::WHITE;
cs.gui_style.text_hotkey_color = Color::GREEN;
cs.gui_style.text_destructive_color = hex("#FF5E5E");
cs.inner_panel_bg = cs.gui_style.panel_bg.alpha(1.0);
cs.gui_style.dropdown_border = Color::WHITE;
cs.gui_style.dropdown_bg = cs.gui_style.panel_bg;
cs.void_background = hex("#200A24");
cs.map_background = Color::BLACK.into();
@ -423,8 +426,7 @@ impl ColorScheme {
cs.pedestrian_plaza = hex("#94949C").into();
cs.study_area = hex("#D9B002").into();
cs.panel_bg = hex("#003046").alpha(0.9);
cs.gui_style.panel_bg = cs.panel_bg;
cs.panel_bg = cs.gui_style.panel_bg;
cs.inner_panel_bg = cs.panel_bg.alpha(1.0);
cs.minimap_cursor_border = Color::WHITE;
cs.minimap_cursor_bg = Some(Color::rgba(238, 112, 46, 0.2));

View File

@ -7,9 +7,12 @@ pub struct Style {
pub outline_thickness: f64,
pub outline_color: Color,
pub panel_bg: Color,
pub dropdown_bg: Color,
pub dropdown_border: Color,
pub text_fg_color: Color,
pub text_hotkey_color: Color,
pub text_tooltip_color: Color,
pub text_hotkey_color: Color,
pub text_destructive_color: Color,
pub loading_tips: Text,
pub btn_solid: ButtonStyle,
pub btn_outline: ButtonStyle,
@ -83,7 +86,16 @@ impl Style {
} else {
Color::WHITE.alpha(0.8)
},
dropdown_bg: if use_legacy_day_theme {
Color::grey(0.3)
} else {
hex("#F2F2F2")
},
dropdown_border: if use_legacy_day_theme {
Color::WHITE
} else {
hex("#4C4C4C")
},
outline_thickness: 2.0,
outline_color: Color::WHITE,
loading_tips: Text::new(),
@ -100,6 +112,11 @@ impl Style {
hex("#EE702E")
},
text_tooltip_color: Color::WHITE,
text_destructive_color: if use_legacy_day_theme {
hex("#EB3223")
} else {
hex("#FF5E5E")
},
// Buttons
btn_outline: if use_legacy_day_theme {

View File

@ -15,7 +15,6 @@ pub const DEFAULT_FONT_SIZE: usize = 21;
pub const BG_COLOR: Color = Color::grey(0.3);
pub const SELECTED_COLOR: Color = Color::grey(0.5);
pub const INACTIVE_CHOICE_COLOR: Color = Color::grey(0.8);
pub const SCALE_LINE_HEIGHT: f64 = 1.2;
// TODO Almost gone!

View File

@ -136,10 +136,10 @@ impl<T: 'static + Clone> WidgetImpl for Dropdown<T> {
let height = m.get_dims().height + 2.0 * pad;
let rect = Polygon::rounded_rectangle(width, height, 5.0);
let draw_bg = g.upload(GeomBatch::from(vec![
(Color::grey(0.3), rect.clone()),
(g.style().dropdown_bg, rect.clone()),
(
Color::WHITE,
rect.to_outline(Distance::meters(3.0)).unwrap(),
g.style().dropdown_border,
rect.to_outline(Distance::meters(1.0)).unwrap(),
),
]));
g.fork(

View File

@ -1,8 +1,8 @@
use geom::Pt2D;
use crate::{
text, Choice, EventCtx, GfxCtx, Key, Line, Outcome, ScreenDims, ScreenPt, ScreenRectangle,
Style, Text, Widget, WidgetImpl, WidgetOutput,
Choice, EventCtx, GfxCtx, Key, Line, Outcome, ScreenDims, ScreenPt, ScreenRectangle, Style,
Text, Widget, WidgetImpl, WidgetOutput,
};
pub struct Menu<T> {
@ -39,33 +39,39 @@ impl<T: 'static> Menu<T> {
let mut txt = Text::new();
for (idx, choice) in self.choices.iter().enumerate() {
let is_hovered = idx == self.current_idx;
let mut text_color = if is_hovered {
choice.fg.unwrap_or(style.btn_solid.fg)
} else {
choice.fg.unwrap_or(style.text_fg_color)
};
if choice.active {
if let Some(ref key) = choice.hotkey {
txt.add_appended(vec![
Line(key.describe()).fg(style.text_hotkey_color),
Line(format!(" - {}", choice.label)).maybe_fg(choice.fg),
Line(format!(" - {}", choice.label)).fg(text_color),
]);
} else {
txt.add(Line(&choice.label).maybe_fg(choice.fg));
txt.add(Line(&choice.label).fg(text_color))
}
} else {
text_color = text_color.alpha(0.8);
if let Some(ref key) = choice.hotkey {
txt.add(
Line(format!("{} - {}", key.describe(), choice.label))
.fg(text::INACTIVE_CHOICE_COLOR),
);
txt.add(Line(format!("{} - {}", key.describe(), choice.label)).fg(text_color));
} else {
txt.add(Line(&choice.label).fg(text::INACTIVE_CHOICE_COLOR));
txt.add(Line(&choice.label).fg(text_color));
}
}
if choice.tooltip.is_some() {
// TODO Ideally unicode info symbol, but the fonts don't seem to have it
txt.append(Line(" (!)"));
}
// TODO BG color should be on the TextSpan, so this isn't so terrible?
if idx == self.current_idx {
txt.highlight_last_line(text::SELECTED_COLOR);
if is_hovered {
txt.highlight_last_line(style.btn_solid.bg);
}
}
txt