[wip] Move animation options to a collapsible section

Previously, the animation controls and options were very far away from each other. Move the options to where the controls are and make it a collapsible section. Default to the section being hidden under the assumption that this is not a commonly used feature. This allows the the default view to take up ~the same amount of vertical space as the previous layout.
nextstrain · Oct 9, 2023 · 18435a6 · 18435a6
1 parent 80063fa
commit 18435a6
Showing 1 changed file with 25 additions and 6 deletions.
diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx
@@ -16,6 +16,7 @@ import GeoResolution from "./geo-resolution";
 import TransmissionLines from './transmission-lines';
 import NormalizeFrequencies from "./frequency-normalization";
 import AnimationOptions from "./animation-options";
+import Toggle from "./toggle";
 import PanelToggle from "./panel-toggle";
 import ToggleTangle from "./toggle-tangle";
 import Language from "./language";
@@ -59,6 +60,8 @@ type Props = {
 function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) {
   const { t } = useTranslation();
 
+  const [showAnimationOptions, setShowAnimationOptions] = React.useState(false);
+
   const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable);
   const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo);
   const canTogglePanelLayout = useSelector((state: RootState) => state.controls.canTogglePanelLayout);
@@ -69,7 +72,28 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay
 
       <AnnotatedHeader title={t("sidebar:Date Range")} tooltip={DateRangeInfo} mobile={mobileDisplay}/>
       <DateRangeInputs />
-      <AnimationControls />
+
+      {/* FIXME: update translations */}
+      {/* FIXME: combine this custom Toggle and PanelToggle? */}
+      <AnnotatedHeader
+        toggle={<Toggle
+          display={true}
+          on={showAnimationOptions}
+          callback={() => setShowAnimationOptions(!showAnimationOptions)}
+          label={""}
+          style={{ display: "inline" }}
+        />}
+        title={t("sidebar:Animate")}
+        tooltip={AnimationOptionsInfo}
+        mobile={mobileDisplay}
+      />
+      {showAnimationOptions &&
+        <>
+          {/* FIXME: combine the two components below? */}
+          <AnimationOptions />
+          <AnimationControls />
+        </>
+      }
 
       <AnnotatedHeader title={t("sidebar:Color By")} tooltip={ColorByInfo} mobile={mobileDisplay}/>
       <ColorBy />
@@ -152,11 +176,6 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay
         </span>
       }
 
-      <span style={{ marginTop: "10px" }}>
-        <AnnotatedHeader title={t("sidebar:Animation Options")} tooltip={AnimationOptionsInfo} mobile={mobileDisplay}/>
-        <AnimationOptions />
-      </span>
-
       <Language />
     </ControlsContainer>
   );