add all modals to menu

Author: icewind1991

images/goto.svg

@@ -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,
-    inShared: boolean,
-    open: boolean,
-    openHelp: Function;
+    clients: number;
+    inShared: boolean;
+    open: boolean;
+    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>

images/search.svg

@@ -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()}

script/viewer/Analyse/AnalyseMenu.tsx

@@ -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);