Space tab header/content more cohesively

This commit is contained in:
Michael Kirk 2021-10-12 10:25:12 -07:00 committed by Dustin Carlino
parent 871cbf7ecf
commit 41060572c0

View File

@ -7,10 +7,11 @@ mod predict;
mod quick_sketch; mod quick_sketch;
mod trip; mod trip;
use geom::CornerRadii;
use map_gui::tools::{grey_out_map, open_browser, CityPicker}; use map_gui::tools::{grey_out_map, open_browser, CityPicker};
use widgetry::{ use widgetry::{
EventCtx, GfxCtx, HorizontalAlignment, Key, Line, Panel, ScreenDims, SimpleState, State, Text, EventCtx, GfxCtx, HorizontalAlignment, Key, Line, Panel, ScreenDims, SimpleState, State, Text,
VerticalAlignment, Widget, VerticalAlignment, Widget, DEFAULT_CORNER_RADIUS,
}; };
pub use self::explore::ExploreMap; pub use self::explore::ExploreMap;
@ -39,7 +40,7 @@ impl Tab {
let mut contents = Some(contents.section(ctx)); let mut contents = Some(contents.section(ctx));
let mut col = vec![Widget::row(vec![ let header = Widget::row(vec![
ctx.style() ctx.style()
.btn_plain .btn_plain
.btn() .btn()
@ -53,57 +54,73 @@ impl Tab {
map_gui::tools::change_map_btn(ctx, app) map_gui::tools::change_map_btn(ctx, app)
.centered_vert() .centered_vert()
.align_right(), .align_right(),
])]; ]);
col.push( let mut build_tab = |(tab, image_path, tab_title, hotkey): (Tab, &str, &str, Key)| {
ctx.style() let mut btn = ctx
.style()
.btn_tab .btn_tab
.icon_text("system/assets/tools/pan.svg", "Explore") .icon_text(image_path, tab_title)
.hotkey(Key::Num1) .hotkey(hotkey);
.disabled(self == Tab::Explore)
.build_def(ctx),
);
if self == Tab::Explore {
col.push(contents.take().unwrap());
}
col.push( if self == tab {
ctx.style() btn = btn
.btn_tab .corner_rounding(CornerRadii {
.icon_text("system/assets/tools/pin.svg", "Your Trip") top_left: DEFAULT_CORNER_RADIUS,
.hotkey(Key::Num2) top_right: DEFAULT_CORNER_RADIUS,
.disabled(self == Tab::Trip) bottom_left: 0.0,
.build_def(ctx), bottom_right: 0.0,
); })
if self == Tab::Trip { .disabled(true);
col.push(contents.take().unwrap()); }
}
col.push( // Add a little margin to compensate for the border on the tab content
ctx.style() // otherwise things look ever-so-slightly out of alignment.
.btn_tab let btn_widget = btn.build_def(ctx).margin_left(1);
.icon_text("system/assets/tools/pencil.svg", "Add bike lanes") let mut tab_elements = vec![btn_widget];
.hotkey(Key::Num3)
.disabled(self == Tab::AddLanes)
.build_def(ctx),
);
if self == Tab::AddLanes {
col.push(contents.take().unwrap());
}
col.push( if self == tab {
ctx.style() let mut contents = contents.take().unwrap();
.btn_tab contents = contents.corner_rounding(CornerRadii {
.icon_text("system/assets/meters/trip_histogram.svg", "Predict impact") top_left: 0.0,
.hotkey(Key::Num4) top_right: DEFAULT_CORNER_RADIUS,
.disabled(self == Tab::PredictImpact) bottom_left: DEFAULT_CORNER_RADIUS,
.build_def(ctx), bottom_right: DEFAULT_CORNER_RADIUS,
); });
if self == Tab::PredictImpact { tab_elements.push(contents);
col.push(contents.take().unwrap()); }
}
let mut panel = Panel::new_builder(Widget::col(col)) Widget::custom_col(tab_elements)
};
let tabs = Widget::col(vec![
build_tab((
Tab::Explore,
"system/assets/tools/pan.svg",
"Explore",
Key::Num1,
)),
build_tab((
Tab::Trip,
"system/assets/tools/pin.svg",
"Your Trip",
Key::Num2,
)),
build_tab((
Tab::AddLanes,
"system/assets/tools/pencil.svg",
"Add bike lanes",
Key::Num3,
)),
build_tab((
Tab::PredictImpact,
"system/assets/meters/trip_histogram.svg",
"Predict impact",
Key::Num4,
)),
]);
let mut panel = Panel::new_builder(Widget::col(vec![header, tabs]))
// The different tabs have different widths. To avoid the UI bouncing around as the user // The different tabs have different widths. To avoid the UI bouncing around as the user
// navigates, this is hardcoded to be a bit wider than the widest tab. // navigates, this is hardcoded to be a bit wider than the widest tab.
.exact_size(ScreenDims { .exact_size(ScreenDims {