Use the top bar for more things. #15

Author: dabreegster

web/assets/README.md

@@ -0,0 +1 @@
+Material Design icons from <https://material.io/resources/icons>, Apache license

web/assets/settings.svg

@@ -6,12 +6,13 @@
   import initRouteSnapper from "route-snapper";
   import { onMount } from "svelte";
   import { FillLayer, GeoJSON, MapLibre } from "svelte-maplibre";
-  import { Geocoder, Layout, layerId, BasemapPicker } from "./common";
+  import { Geocoder, Layout, layerId } from "./common";
   import DebugMode from "./DebugMode.svelte";
   import DebugGJ from "./DebugGJ.svelte";
   import NeighbourhoodMode from "./edit/NeighbourhoodMode.svelte";
   import NetworkMode from "./NetworkMode.svelte";
   import RouteMode from "./RouteMode.svelte";
+  import Settings from "./Settings.svelte";
   import SetBoundaryMode from "./SetBoundaryMode.svelte";
   import {
     app,
@@ -44,7 +45,7 @@
     );
   }
 
-  let topDiv: HTMLDivElement;
+  let topDiv: HTMLSpanElement;
   let sidebarDiv: HTMLDivElement;
   let mapDiv: HTMLDivElement;
   $: if (topDiv && $topContents) {
@@ -68,7 +69,8 @@
       style="height: 8vh; margin-right: 20px;"
       alt="A/B Street logo"
     />
-    <span bind:this={topDiv} />
+    <Settings />
+    <span bind:this={topDiv} style="width: 100%" />
   </div>
   <div slot="left">
     <div bind:this={sidebarDiv} />
@@ -80,7 +82,6 @@
         >Zoom to fit study area</button
       >
     {/if}
-    <BasemapPicker />
   </div>
   <div slot="main" style="position: relative; width: 100%; height: 100%;">
     <MapLibre

web/src/App.svelte

@@ -35,7 +35,7 @@
 </script>
 
 <SplitComponent>
-  <div slot="top">
+  <div slot="top" style="display: flex; justify-content: space-between;">
     <nav aria-label="breadcrumb">
       <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
@@ -47,27 +47,19 @@
         <li>Define neighbourhood boundaries</li>
       </ul>
     </nav>
+    <span style="display: flex">
+      <button
+        class="outline"
+        style="margin-right: 8px"
+        on:click={() => ($mode = { mode: "route", prevMode: "network" })}
+        >Route</button
+      >
+      <button class="outline" on:click={() => ($mode = { mode: "debug-gj" })}
+        >Debug route snapper</button
+      >
+    </span>
   </div>
   <div slot="sidebar">
-    <nav>
-      <ul>
-        <li>
-          <button
-            class="outline"
-            on:click={() => ($mode = { mode: "route", prevMode: "network" })}
-            >Route</button
-          >
-        </li>
-        <li>
-          <button
-            class="outline"
-            on:click={() => ($mode = { mode: "debug-gj" })}
-            >Debug route snapper</button
-          >
-        </li>
-      </ul>
-    </nav>
-
     <p>
       Inside the neighbourhood you define, the goal is to eliminate (or
       deliberately permit) through-traffic. An appropriate neighbourhood

web/src/NetworkMode.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { BasemapPicker, Modal } from "./common";
+  import settings from "../assets/settings.svg?url";
+
+  let show = false;
+</script>
+
+<button class="outline" on:click={() => (show = true)}
+  ><img src={settings} alt="Settings" /></button
+>
+
+{#if show}
+  <Modal on:close={() => (show = false)}>
+    <h1>Settings</h1>
+    <BasemapPicker />
+    <center><button on:click={() => (show = false)}>Confirm</button></center>
+  </Modal>
+{/if}

web/src/Settings.svelte

@@ -101,7 +101,7 @@
 <svelte:window on:keydown={onKeyDown} />
 
 <SplitComponent>
-  <div slot="top">
+  <div slot="top" style="display: flex; justify-content: space-between;">
     <nav aria-label="breadcrumb">
       <!-- svelte-ignore a11y-invalid-attribute -->
       <ul>
@@ -122,32 +122,25 @@
         </li>
       </ul>
     </nav>
+    <span style="display: flex">
+      <button
+        class="outline"
+        style="margin-right: 8px"
+        on:click={() => ($mode = { mode: "view-shortcuts" })}
+        >View shortcuts</button
+      >
+      <button
+        class="outline"
+        style="margin-right: 8px"
+        on:click={() => ($mode = { mode: "route", prevMode: "neighbourhood" })}
+        >Route</button
+      >
+      <button class="outline" on:click={() => ($mode = { mode: "debug" })}
+        >Debug</button
+      >
+    </span>
   </div>
   <div slot="sidebar">
-    <nav>
-      <ul>
-        <li>
-          <button
-            class="outline"
-            on:click={() => ($mode = { mode: "view-shortcuts" })}
-            >View shortcuts</button
-          >
-        </li>
-        <li>
-          <button
-            class="outline"
-            on:click={() =>
-              ($mode = { mode: "route", prevMode: "neighbourhood" })}
-            >Route</button
-          >
-        </li>
-        <li>
-          <button class="outline" on:click={() => ($mode = { mode: "debug" })}
-            >Debug</button
-          >
-        </li>
-      </ul>
-    </nav>
     <button
       class="outline"
       on:click={() =>