try vertical tabs

RENCI · May 10, 2024 · 085b726 · 085b726
1 parent 3028aac
commit 085b726
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 13 deletions.
diff --git a/src/components/trays/layers/layer-card.js b/src/components/trays/layers/layer-card.js
@@ -4,7 +4,6 @@ import {
   Accordion,
   AccordionDetails,
   Avatar,
-  Box,
   ButtonGroup,
   Stack,
   Switch,
@@ -18,7 +17,7 @@ import {
 } from '@mui/icons-material';
 import { useLayers } from '@context';
 import { useToggleState } from '@hooks';
-import { LayerActions } from './layer-card-actions';
+import { LayerTabs } from './layer-tabs';
 import { ActionButton } from '@components/buttons';
 
 export const LayerCard = ({ index, layer }) => {
@@ -68,7 +67,7 @@ export const LayerCard = ({ index, layer }) => {
               <LayerIcon size="lg" color="primary" />
             </Avatar>
             <Typography level="title-md">
-              {layerTypes[layer.properties.product_type].name}
+              { layerTypes[layer.properties.product_type].name }
             </Typography>
             <Switch
               size="sm"
@@ -129,21 +128,19 @@ export const LayerCard = ({ index, layer }) => {
         position: 'relative',
         // remove default margin that doesn't work well in our situation.
         marginInline: 0,
+        borderLeft: '6px solid',
+        // borderLeftColor: isVisible
+        //   ? `rgba(${ theme.palette.primary.mainChannel }) / 1.0`
+        //   : `rgba(${ theme.palette.primary.mainChannel }) / 0.2`,
+        borderLeftColor: isVisible
+          ? `primary.plainColor`
+          : `primary.plainDisabledColor`,
         '.MuiAccordionDetails-content': {
           paddingInline: 0,
           paddingBlock: 0,
         },
       }}>
-        <LayerActions layerId={ layer.id } />
-        <Box component="pre" sx={{
-          fontSize: '75%',
-          color: 'text.primary',
-          backgroundColor: 'transparent',
-          overflowX: 'auto',
-          p: 1,
-        }}>
-          { JSON.stringify(layer.properties, null, 2) }
-        </Box>
+        <LayerTabs layer={ layer } />
       </AccordionDetails>
     </Accordion>
 

diff --git a/src/components/trays/layers/layer-tabs.js b/src/components/trays/layers/layer-tabs.js
@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Tab, TabList, TabPanel, Tabs } from '@mui/joy';
+import {
+  Palette as ColorIcon,
+  DataObject as DetailsIcon,
+  DeleteForever as RemoveIcon,
+} from '@mui/icons-material';
+
+export const LayerTabs = ({ layer = {} }) => {
+  const DetailsPanel = useCallback(() => (
+    <TabPanel value={ 0 } component="pre" sx={{
+        fontSize: '75%',
+        color: 'text.primary',
+        fontFamily: 'monospace',
+        backgroundColor: 'transparent',
+        overflowX: 'auto',
+        m: 0,
+      }}>
+        { JSON.stringify(layer.properties, null, 2) }
+    </TabPanel>
+  ), []);
+
+  const ColorControlPanel = useCallback(() => (
+    <TabPanel value={ 1 }>
+      ColorRamp & Opacity
+    </TabPanel>
+  ), []);
+
+  const RemoveLayerPanel = useCallback(() => (
+    <TabPanel value={ 2 }>
+      REMOVE LAYER: Are you sure?
+      <br />
+      <br />
+      <br />
+      [CONFIRM BUTTON]
+    </TabPanel>
+  ), []);
+
+  return (
+    <Tabs size="sm" aria-label="Layer tabs" defaultValue={ 0 } orientation="vertical" sx={{
+        height: '200px',
+        overflow: 'auto',
+      }}>
+      <TabList>
+        <Tab><DetailsIcon fontSize="small" /></Tab>
+        <Tab><ColorIcon fontSize="small" /></Tab>
+        <Tab><RemoveIcon fontSize="small" /></Tab>
+      </TabList>
+      <DetailsPanel />
+      <ColorControlPanel />
+      <RemoveLayerPanel />
+    </Tabs>
+  );
+};
+
+LayerTabs.propTypes = {
+  layer: PropTypes.object.isRequired,
+};