add all modals to menu

images/goto.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" xml:space="preserve"><g fill="#FFF"><path d="M128 10a118 118 0 1 0 118 118c0-65-53-118-118-118zm0 212a94 94 0 1 1 0-188 94 94 0 0 1 0 188z"/><path d="M130 60c-4-5-11-5-16 0-5 4-5 11 0 16l40 40H90c-7 0-12 5-12 12s5 12 12 12h62l-41 40c-4 5-4 12 1 16 2 3 5 4 8 4 2 0 6-1 8-4l70-69-68-67z"/></g></svg>

images/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" xml:space="preserve"><g style="stroke:none;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:none;fill-rule:nonzero;opacity:1"><path d="M88 77 68 58c10-15 8-34-5-47a37 37 0 1 0-5 57l19 20a7 7 0 0 0 11 0c3-3 3-8 0-11zM21 53a22 22 0 1 1 32 0c-9 8-23 8-32 0z" style="stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:#fff;fill-rule:nonzero;opacity:1" transform="matrix(2.81 0 0 2.81 1 1)"/></g></svg>

script/viewer/Analyse/AnalyseMenu.tsx

@@ -1,12 +1,15 @@
+import {ModalState} from "./Analyser";
+import {Show} from "solid-js";
+
 export interface AnalyseMenuProps {
     sessionName: string;
     onShare: Function;
     canShare: boolean;
     isShared: boolean;
-    clients: number,
+    clients: number;
-    inShared: boolean,
+    inShared: boolean;
-    open: boolean,
+    open: boolean;
-    openHelp: Function;
+    openModal: (ModalState) => void;
 }
 
 export function AnalyseMenu(props: AnalyseMenuProps) {
@@ -23,7 +26,7 @@ export function AnalyseMenu(props: AnalyseMenuProps) {
                 <summary title="Menu">☰</summary>
                 <ul class="menu">
                     <li>
-                        <button class="share-session" title="Start a shared session" disabled={props.isShared}
+                        <button className="share-session" title="Start a shared session" disabled={props.isShared}
                                 onClick={() => {
                                     props.onShare()
                                 }}>
@@ -41,10 +44,21 @@ export function AnalyseMenu(props: AnalyseMenuProps) {
                         </button>
                     </li>
                     <li>
-                        <button class="help" title="Help" onClick={() => props.openHelp()}>
+                        <button className="help" title="Help" onClick={() => props.openModal(ModalState.Help)}>
                             Help
                         </button>
                     </li>
+                    <li>
+                        <button className="goto" title="Goto Tick" onClick={() => props.openModal(ModalState.Goto)}>
+                            Goto Tick
+                        </button>
+                    </li>
+                    <li>
+                        <button className="search" title="Search Events"
+                                onClick={() => props.openModal(ModalState.Search)}>
+                            Search Events
+                        </button>
+                    </li>
                 </ul>
             </details>
         </Show>

script/viewer/Analyse/Analyser.tsx

@@ -18,7 +18,7 @@ import {DemoHead} from "../../header";
 import {EventSearch} from "./EventSearch";
 import {Event} from "./Data/Parser";
 
-enum ModalState {
+export enum ModalState {
     Closed,
     Help,
     Goto,
@@ -254,7 +254,7 @@ export const Analyser = (props: AnalyseProps) => {
                                  }, onUpdate);
                                  setSessionName(session.sessionName);
                              }}
-                             openHelp={() => setHelpOpen(true)}
+                             openModal={setModalState}
                              canShare={props.isStored && !inShared}
                              isShared={isShared()}
                              clients={clients()}

style/pages/viewer/AnalyseMenu.css

@@ -30,6 +30,14 @@
         background-image: url("inline://images//help.svg");
     }
 
+    & button.goto {
+        background-image: url("inline://images//goto.svg");
+    }
+
+    & button.search {
+        background-image: url("inline://images//search.svg");
+    }
+
     & input.share-text {
         color: var(--primary-color);
         background-color: var(--text-secondary);