Import screen UI fixups (#584)

* Import screen UI fixups

- even out the spacing a bit
- use underline style for "Alternate Instructions" web link
- left/right switch is more intuitive than right/left
- disambiguate label from toggle id
This commit is contained in:
Michael Kirk 2021-03-23 15:11:14 -07:00 committed by GitHub
parent 162f09a887
commit e672256828
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 51 deletions

View File

@ -158,25 +158,7 @@ impl<A: AppLike + 'static> CityPicker<A> {
batch.into_widget(ctx).named("picker"),
Widget::col(this_city).centered_vert(),
]),
Widget::custom_row(vec![
"Don't see the place you want?"
.text_widget(ctx)
.centered_vert(),
ctx.style()
.btn_plain
.btn()
// TODO On web, this is a link, so it's styled appropriately. Use a
// different style on native?
.label_styled_text(
Text::from(
Line("Import a new city into A/B Street")
.fg(Color::hex("#4CA4E5"))
.underlined(),
),
ControlState::Default,
)
.build_widget(ctx, "import new city"),
]),
"Don't see the place you want?".text_widget(ctx),
if cfg!(not(target_arch = "wasm32")) {
ctx.style()
.btn_outline
@ -185,6 +167,21 @@ impl<A: AppLike + 'static> CityPicker<A> {
} else {
Widget::nothing()
},
if cfg!(target_arch = "wasm32") {
// On web, this is a link, so it's styled appropriately.
ctx.style()
.btn_plain
.btn()
.label_underlined_text("Import a new city into A/B Street")
.build_widget(ctx, "import new city")
} else {
// On native this shows the "import" instructions modal within
// the app
ctx.style()
.btn_outline
.text("Import a new city into A/B Street")
.build_widget(ctx, "import new city")
},
]))
.build(ctx),
}))

View File

@ -28,37 +28,53 @@ impl<A: AppLike + 'static> ImportCity<A> {
Line("Import a new city").small_heading().into_widget(ctx),
ctx.style().btn_close_widget(ctx),
]),
Widget::row(vec![
"Step 1)".text_widget(ctx),
Widget::col(vec![
Widget::row(vec![
"Step 1)".text_widget(ctx).centered_vert(),
ctx.style()
.btn_plain
.btn()
.label_underlined_text("Go to geojson.io")
.build_def(ctx),
]),
Widget::row(vec![
"Step 2)".text_widget(ctx).margin_right(16),
"Draw a polygon boundary where you want to import"
.text_widget(ctx)
.margin_below(16),
])
.margin_below(16),
Widget::row(vec![
"Step 3)".text_widget(ctx).margin_right(16),
"Copy the JSON text on the right into your clipboard".text_widget(ctx),
])
.margin_below(16),
Widget::row(vec![
"Step 4)".text_widget(ctx).centered_vert(),
Toggle::choice(
ctx,
"left handed driving",
"drive on the left",
"right",
None,
false,
),
]),
Widget::row(vec![
"Step 5)".text_widget(ctx).centered_vert(),
ctx.style()
.btn_solid_primary
.text("Import the area from your clipboard")
.build_def(ctx),
])
.margin_below(32),
ctx.style()
.btn_solid_primary
.text("Go to geojson.io")
.btn_plain
.btn()
.label_underlined_text("Alternate instructions")
.build_def(ctx),
]),
"Step 2) Draw a polygon boundary where you want to import".text_widget(ctx),
"Step 3) Copy the JSON text on the right into your clipboard".text_widget(ctx),
Widget::row(vec![
"Step 4)".text_widget(ctx),
Toggle::choice(
ctx,
"driving side",
"drive on the right",
"left",
None,
true,
),
]),
Widget::row(vec![
"Step 5)".text_widget(ctx),
ctx.style()
.btn_solid_primary
.text("Import the area from your clipboard")
.build_def(ctx),
]),
ctx.style()
.btn_outline
.text("Alternate instructions")
.build_def(ctx),
])
.section(ctx),
]))
.build(ctx);
Box::new(ImportCity {
@ -96,7 +112,7 @@ impl<A: AppLike + 'static> State<A> for ImportCity<A> {
format!("{}/one_step_import", bin_dir),
"boundary.geojson".to_string(),
];
if !self.panel.is_checked("driving side") {
if self.panel.is_checked("left handed driving") {
args.push("--drive_on_left".to_string());
}
match grab_geojson_from_clipboard() {

View File

@ -185,7 +185,7 @@ impl Toggle {
// TODO These should actually be radio buttons
pub fn choice<MK: Into<Option<MultiKey>>>(
ctx: &EventCtx,
label: &str,
action: &str,
left_label: &str,
right_label: &str,
hotkey: MK,
@ -252,7 +252,7 @@ impl Toggle {
toggle_right_button.build(ctx, right_label),
toggle_left_button.build(ctx, left_label),
)
.named(label)
.named(action)
.centered_vert(),
right_text_button.build_def(ctx).centered_vert(),
])