Use accordions and tooltips in a few places

a-b-street · Mar 2, 2024 · f20e935 · f20e935
1 parent 7b28f7b
commit f20e935
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte
@@ -88,16 +88,19 @@
     </nav>
   </div>
   <div slot="sidebar">
-    <p>
-      Inside the neighbourhood you define, the goal is to eliminate (or
-      deliberately permit) through-traffic. An appropriate neighbourhood
-      boundary depends on many factors. The simplest approach is to find the
-      area bounded on all sides by "main" roads, which are designed for higher
-      traffic volumes. There are many other considerations, though -- maybe
-      severances like rivers or rail should be part of a boundary. Bridges and
-      tunnels near a boundary may be confusing as well. And note that your
-      boundary may not match the conventional definition of "neighbourhood."
-    </p>
+    <details>
+      <summary>Help</summary>
+      <p>
+        Inside the neighbourhood you define, the goal is to eliminate (or
+        deliberately permit) through-traffic. An appropriate neighbourhood
+        boundary depends on many factors. The simplest approach is to find the
+        area bounded on all sides by "main" roads, which are designed for higher
+        traffic volumes. There are many other considerations, though -- maybe
+        severances like rivers or rail should be part of a boundary. Bridges and
+        tunnels near a boundary may be confusing as well. And note that your
+        boundary may not match the conventional definition of "neighbourhood."
+      </p>
+    </details>
 
     <Link on:click={newBoundary}>Draw a new boundary</Link>
     <ul>

diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
@@ -117,13 +117,18 @@
         Pick a different road
       </button>
       <div style="display: flex; justify-content: space-between;">
-        <button disabled={state.shortcutIndex == 0} on:click={prev}>
+        <button
+          disabled={state.shortcutIndex == 0}
+          on:click={prev}
+          data-tooltip="Left"
+        >
           Previous
         </button>
         {state.shortcutIndex + 1} / {state.gj.features.length}
         <button
           disabled={state.shortcutIndex == state.gj.features.length - 1}
           on:click={next}
+          data-tooltip="Right"
         >
           Next
         </button>

diff --git a/web/src/common/snapper/SnapPolygonControls.svelte b/web/src/common/snapper/SnapPolygonControls.svelte
@@ -5,7 +5,11 @@
   export let route_tool: RouteTool;
 </script>
 
-<button disabled={$undoLength == 0} on:click={() => route_tool.undo()}>
+<button
+  disabled={$undoLength == 0}
+  on:click={() => route_tool.undo()}
+  data-tooltip="Ctrl+Z"
+>
   {#if $undoLength == 0}
     Undo
   {:else}

diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
@@ -180,19 +180,22 @@
       Editing neighbourhood <u>{notNull(notNull(boundary).properties).name}</u>
     </p>
 
-    <p>
-      Now that you've defined a neighbourhood boundary, you can see the possible
-      shortcuts that vehicles are currently able to take through it. You can add
-      a new modal filter to try and solve this. The colored "cell" areas show
-      what's reachable for drivers without leaving the boundary you've drawn.
-    </p>
-
-    <hr />
+    <details>
+      <summary>Help</summary>
+      <p>
+        Now that you've defined a neighbourhood boundary, you can see the
+        possible shortcuts that vehicles are currently able to take through it.
+        You can add a new modal filter to try and solve this. The colored "cell"
+        areas show what's reachable for drivers without leaving the boundary
+        you've drawn.
+      </p>
+    </details>
 
     <div style="display: flex; justify-content: space-between;">
       <button
         on:click={() => (action = "filter")}
         disabled={action == "filter"}
+        data-tooltip="hotkey 1"
       >
         <img
           src={`${import.meta.env.BASE_URL}/filters/${$filterType}_icon.gif`}
@@ -204,12 +207,14 @@
       <button
         on:click={() => (action = "freehand-filters")}
         disabled={action == "freehand-filters"}
+        data-tooltip="hotkey 2"
       >
         Add many modal filters along line
       </button>
       <button
         on:click={() => (action = "oneway")}
         disabled={action == "oneway"}
+        data-tooltip="hotkey 3"
       >
         Reverse directions
       </button>
@@ -220,14 +225,14 @@
     </button>
 
     <div style="display: flex; justify-content: space-between;">
-      <button disabled={undoLength == 0} on:click={undo}>
+      <button disabled={undoLength == 0} on:click={undo} data-tooltip="Ctrl+Z">
         {#if undoLength == 0}
           Undo
         {:else}
           Undo ({undoLength})
         {/if}
       </button>
-      <button disabled={redoLength == 0} on:click={redo}>
+      <button disabled={redoLength == 0} on:click={redo} data-tooltip="Ctrl+Y">
         {#if redoLength == 0}
           Redo
         {:else}