feat: Toggle view panels via new menu buttons (#401)

* add toggle view panel icons
NASA-AMMOS · Feb 18, 2023 · a5f2b06 · a5f2b06
1 parent 7ce7163
commit a5f2b06
Show file tree

Hide file tree

Showing 11 changed files with 381 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^4.5.11",
-    "@nasa-jpl/stellar": "^1.0.24",
+    "@nasa-jpl/stellar": "^1.0.25",
     "@sveltejs/adapter-node": "^1.1.3",
     "@sveltejs/kit": "^1.1.1",
     "ag-grid-community": "^29.0.0",

diff --git a/src/components/menus/ViewMenu.svelte b/src/components/menus/ViewMenu.svelte
@@ -1,31 +1,61 @@
 <svelte:options accessors={true} immutable={true} />
 
 <script lang="ts">
+  import ViewGridBottomPanelEmpty from '@nasa-jpl/stellar/icons/view_grid_bottom_panel_empty.svg?component';
+  import ViewGridBottomPanelFilled from '@nasa-jpl/stellar/icons/view_grid_bottom_panel_filled.svg?component';
   import ViewGridIcon from '@nasa-jpl/stellar/icons/view_grid_filled.svg?component';
+  import ViewGridLeftPanelEmpty from '@nasa-jpl/stellar/icons/view_grid_left_panel_empty.svg?component';
+  import ViewGridLeftPanelFilled from '@nasa-jpl/stellar/icons/view_grid_left_panel_filled.svg?component';
+  import ViewGridLeftPanelSplitEmpty from '@nasa-jpl/stellar/icons/view_grid_left_panel_split_empty.svg?component';
+  import ViewGridLeftPanelSplitFilled from '@nasa-jpl/stellar/icons/view_grid_left_panel_split_filled.svg?component';
+  import ViewGridRightPanelEmpty from '@nasa-jpl/stellar/icons/view_grid_right_panel_empty.svg?component';
+  import ViewGridRightPanelFilled from '@nasa-jpl/stellar/icons/view_grid_right_panel_filled.svg?component';
+  import ViewGridRightPanelSplitEmpty from '@nasa-jpl/stellar/icons/view_grid_right_panel_split_empty.svg?component';
+  import ViewGridRightPanelSplitFilled from '@nasa-jpl/stellar/icons/view_grid_right_panel_split_filled.svg?component';
   import { createEventDispatcher } from 'svelte';
   import { user as userStore } from '../../stores/app';
   import { view, viewIsModified } from '../../stores/views';
+  import type { ViewToggleType } from '../../types/view';
   import { showSavedViewsModal } from '../../utilities/modal';
   import { Status } from '../../utilities/status';
   import PlanNavButton from '../plan/PlanNavButton.svelte';
+  import ToggleableIcon from '../ui/ToggleableIcon.svelte';
   import MenuItem from './MenuItem.svelte';
 
   const defaultViewName = 'Default View';
   const dispatch = createEventDispatcher();
 
+  let leftPanelIsOn: boolean = false;
+  let leftSplitPanelIsOn: boolean = false;
+  let bottomPanelIsOn: boolean = false;
+  let rightPanelIsOn: boolean = false;
+  let rightSplitPanelIsOn: boolean = false;
   let saveViewDisabled: boolean = true;
 
   $: saveViewDisabled = $view?.name === '' || $view?.owner !== $userStore?.id || !$viewIsModified;
+  $: if ($view.definition.plan.grid) {
+    leftPanelIsOn = !$view.definition.plan.grid.leftHidden && !$view.definition.plan.grid.leftSplit;
+    leftSplitPanelIsOn = !$view.definition.plan.grid.leftHidden && $view.definition.plan.grid.leftSplit;
+    bottomPanelIsOn = $view.definition.plan.grid.middleSplit;
+    rightPanelIsOn = !$view.definition.plan.grid.rightHidden && !$view.definition.plan.grid.rightSplit;
+    rightSplitPanelIsOn = !$view.definition.plan.grid.rightHidden && $view.definition.plan.grid.rightSplit;
+  }
+
+  function editView() {
+    if ($view) {
+      dispatch('editView', { definition: $view.definition, owner: $userStore?.id });
+    }
+  }
 
   function saveAsView() {
     if ($view) {
       dispatch('createView', { definition: $view.definition, owner: $userStore?.id });
     }
   }
 
-  function editView() {
+  function resetView() {
     if ($view) {
-      dispatch('editView', { definition: $view.definition, owner: $userStore?.id });
+      dispatch('resetView');
     }
   }
 
@@ -35,18 +65,50 @@
     }
   }
 
-  function resetView() {
-    if ($view) {
-      dispatch('resetView');
-    }
+  function toggleView(type: ViewToggleType, state: boolean) {
+    dispatch('toggleView', { state, type });
   }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="view-menu">
+<div class="view-menu st-typography-medium">
   <PlanNavButton status={$viewIsModified ? Status.Modified : null} title={$view?.name ?? defaultViewName} menuTitle="">
     <ViewGridIcon />
     <div class="view-menu st-typography-medium" slot="menu">
+      <div class="toggles">
+        <MenuItem on:click={() => toggleView('left', !leftPanelIsOn)}>
+          <ToggleableIcon isOn={leftPanelIsOn}>
+            <ViewGridLeftPanelFilled />
+            <ViewGridLeftPanelEmpty slot="offIcon" />
+          </ToggleableIcon>
+        </MenuItem>
+        <MenuItem on:click={() => toggleView('left-split', !leftSplitPanelIsOn)}>
+          <ToggleableIcon isOn={leftSplitPanelIsOn}>
+            <ViewGridLeftPanelSplitFilled />
+            <ViewGridLeftPanelSplitEmpty slot="offIcon" />
+          </ToggleableIcon>
+        </MenuItem>
+        <div class="toggle-divider">|</div>
+        <MenuItem on:click={() => toggleView('bottom', !bottomPanelIsOn)}>
+          <ToggleableIcon isOn={bottomPanelIsOn}>
+            <ViewGridBottomPanelFilled />
+            <ViewGridBottomPanelEmpty slot="offIcon" />
+          </ToggleableIcon>
+        </MenuItem>
+        <div class="toggle-divider">|</div>
+        <MenuItem on:click={() => toggleView('right-split', !rightSplitPanelIsOn)}>
+          <ToggleableIcon isOn={rightSplitPanelIsOn}>
+            <ViewGridRightPanelSplitFilled />
+            <ViewGridRightPanelSplitEmpty slot="offIcon" />
+          </ToggleableIcon>
+        </MenuItem>
+        <MenuItem on:click={() => toggleView('right', !rightPanelIsOn)}>
+          <ToggleableIcon isOn={rightPanelIsOn}>
+            <ViewGridRightPanelFilled />
+            <ViewGridRightPanelEmpty slot="offIcon" />
+          </ToggleableIcon>
+        </MenuItem>
+      </div>
       <MenuItem disabled={saveViewDisabled} on:click={saveView}>Save</MenuItem>
       <MenuItem on:click={saveAsView}>Save as</MenuItem>
       <MenuItem disabled={!$viewIsModified} on:click={resetView}>Reset to default</MenuItem>
@@ -70,6 +132,19 @@
     position: relative;
   }
 
+  .toggles {
+    --aerie-menu-item-padding: 0px;
+    align-items: center;
+    display: grid;
+    grid-template-columns: repeat(7, min-content);
+    justify-content: space-between;
+    margin: 8px 8px 0;
+  }
+
+  .toggle-divider {
+    opacity: 0.6;
+  }
+
   .view-menu hr {
     background-color: var(--st-gray-20);
     border: 0;

diff --git a/src/components/ui/CssGrid.svelte b/src/components/ui/CssGrid.svelte
@@ -2,18 +2,24 @@
 
 <script lang="ts">
   import Split, { type SplitInstance } from 'split-grid';
-  import { onMount, tick } from 'svelte';
+  import { createEventDispatcher, onMount, tick } from 'svelte';
 
   export { className as class };
   export let padding: string = '0';
   export let columns: string = 'none';
   export let gap: string = '0';
   export let rows: string = 'none';
 
+  const dispatch = createEventDispatcher();
+
   let className: string = '';
   let div: HTMLDivElement;
   let split: SplitInstance;
 
+  $: if (columns || rows) {
+    setSplit();
+  }
+
   onMount(() => {
     if (div) {
       setSplit();
@@ -24,10 +30,12 @@
     if (div) {
       if (columns !== 'none') {
         const newSizes: string = div.style['grid-template-columns'];
+        dispatch('changeColumnSizes', newSizes);
         columns = newSizes;
       } else if (rows !== 'none') {
         const newSizes: string = div.style['grid-template-rows'];
         rows = newSizes;
+        dispatch('changeRowSizes', newSizes);
       }
     }
   }

diff --git a/src/components/ui/PlanGrid.svelte b/src/components/ui/PlanGrid.svelte
@@ -1,6 +1,7 @@
 <svelte:options immutable={true} />
 
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import type { ViewGridComponent } from '../../types/view';
   import ActivityFormPanel from '../activity/ActivityFormPanel.svelte';
   import ActivityTablePanel from '../activity/ActivityTablePanel.svelte';
@@ -33,6 +34,8 @@
   export let rightRowSizes: string = '1fr 3px 1fr';
   export let rightSplit: boolean = false;
 
+  const dispatch = createEventDispatcher();
+
   const gridComponentsByName: Record<ViewGridComponent, any> = {
     ActivityFormPanel,
     ActivityTablePanel,
@@ -48,19 +51,27 @@
     ViewEditorPanel,
   };
 
-  $: if (leftHidden && rightHidden) {
-    columnSizes = '1fr';
-  } else if (leftHidden) {
-    columnSizes = '3fr 3px 1fr';
-  } else if (rightHidden) {
-    columnSizes = '1fr 3px 3fr';
+  function onChangeColumnSizes(event: CustomEvent<string>) {
+    dispatch('changeColumnSizes', event.detail);
+  }
+
+  function onChangeLeftRowSizes(event: CustomEvent<string>) {
+    dispatch('changeLeftRowSizes', event.detail);
+  }
+
+  function onChangeMiddleRowSizes(event: CustomEvent<string>) {
+    dispatch('changeMiddleRowSizes', event.detail);
+  }
+
+  function onChangeRightRowSizes(event: CustomEvent<string>) {
+    dispatch('changeRightRowSizes', event.detail);
   }
 </script>
 
-<CssGrid class="plan-grid" columns={columnSizes}>
+<CssGrid class="plan-grid" columns={columnSizes} on:changeColumnSizes={onChangeColumnSizes}>
   {#if !leftHidden}
     {#if leftSplit}
-      <CssGrid class="plan-grid" rows={leftRowSizes}>
+      <CssGrid class="plan-grid" rows={leftRowSizes} on:changeRowSizes={onChangeLeftRowSizes}>
         <div class="plan-grid-component" data-component-name={leftComponentTop}>
           <svelte:component this={gridComponentsByName[leftComponentTop]} gridSection="LeftTop" />
         </div>
@@ -79,7 +90,7 @@
   {/if}
 
   {#if middleSplit}
-    <CssGrid class="plan-grid" rows={middleRowSizes}>
+    <CssGrid class="plan-grid" rows={middleRowSizes} on:changeRowSizes={onChangeMiddleRowSizes}>
       <div class="plan-grid-component" data-component-name="TimelinePanel">
         <TimelinePanel />
       </div>
@@ -95,10 +106,10 @@
   {/if}
 
   {#if !rightHidden}
-    <CssGridGutter track={3} type="column" />
+    <CssGridGutter track={leftHidden ? 1 : 3} type="column" />
 
     {#if rightSplit}
-      <CssGrid class="plan-grid" rows={rightRowSizes}>
+      <CssGrid class="plan-grid" rows={rightRowSizes} on:changeRowSizes={onChangeRightRowSizes}>
         <div class="plan-grid-component" data-component-name={rightComponentTop}>
           <svelte:component this={gridComponentsByName[rightComponentTop]} gridSection="RightTop" />
         </div>

diff --git a/src/components/ui/ToggleableIcon.svelte b/src/components/ui/ToggleableIcon.svelte
@@ -0,0 +1,11 @@
+<svelte:options accessors={true} immutable={true} />
+
+<script lang="ts">
+  export let isOn: boolean = true;
+</script>
+
+{#if isOn}
+  <slot />
+{:else}
+  <slot name="offIcon" />
+{/if}
diff --git a/src/routes/plans/[id]/+page.svelte b/src/routes/plans/[id]/+page.svelte
@@ -59,8 +59,15 @@
     simulationStatus,
     spans,
   } from '../../../stores/simulation';
-  import { initializeView, resetOriginalView, resetView, view } from '../../../stores/views';
-  import type { ViewSaveEvent } from '../../../types/view';
+  import {
+    initializeView,
+    resetOriginalView,
+    resetView,
+    view,
+    viewTogglePanel,
+    viewUpdateGrid,
+  } from '../../../stores/views';
+  import type { ViewSaveEvent, ViewToggleEvent } from '../../../types/view';
   import { createActivitiesMap } from '../../../utilities/activities';
   import effects from '../../../utilities/effects';
   import { isSaveEvent } from '../../../utilities/keyboardEvents';
@@ -184,9 +191,30 @@
     }
   }
 
+  function onToggleView(event: CustomEvent<ViewToggleEvent>) {
+    const { detail } = event;
+    viewTogglePanel(detail);
+  }
+
   function onResetView() {
     resetView();
   }
+
+  function onChangeColumnSizes(event: CustomEvent<string>) {
+    viewUpdateGrid({ columnSizes: event.detail });
+  }
+
+  function onChangeLeftRowSizes(event: CustomEvent<string>) {
+    viewUpdateGrid({ leftRowSizes: event.detail });
+  }
+
+  function onChangeMiddleRowSizes(event: CustomEvent<string>) {
+    viewUpdateGrid({ middleRowSizes: event.detail });
+  }
+
+  function onChangeRightRowSizes(event: CustomEvent<string>) {
+    viewUpdateGrid({ rightRowSizes: event.detail });
+  }
 </script>
 
 <svelte:window on:keydown={onKeydown} bind:innerWidth={windowWidth} />
@@ -262,12 +290,19 @@
         on:createView={onCreateView}
         on:editView={onEditView}
         on:saveView={onSaveView}
+        on:toggleView={onToggleView}
         on:resetView={onResetView}
       />
     </svelte:fragment>
   </Nav>
 
-  <PlanGrid {...$view?.definition.plan.grid} />
+  <PlanGrid
+    {...$view?.definition.plan.grid}
+    on:changeColumnSizes={onChangeColumnSizes}
+    on:changeLeftRowSizes={onChangeLeftRowSizes}
+    on:changeMiddleRowSizes={onChangeMiddleRowSizes}
+    on:changeRightRowSizes={onChangeRightRowSizes}
+  />
 
   <Console>
     <svelte:fragment slot="console-tabs">