[1155] Use vertically aligned buttons to select the view to display

Bug: #1155 Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
eclipse-sirius · Apr 14, 2022 · ba9fc5e · ba9fc5e
1 parent 4b6de23
commit ba9fc5e
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 107 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -12,7 +12,9 @@
 
 === Breaking changes
 
-- https://github.com/eclipse-sirius/sirius-components/issues/1088[#1088] [core] Change the type of `IRepresentationDescription#id` from UUID to String. This will allow us, when we will receive an operation to perform with a given representation description identifier, to determine if this operation should be handled by the Sirius Desktop compatibility layer, the View support or by a programmatic API
+- https://github.com/eclipse-sirius/sirius-components/issues/1088[#1088] [core] Change the type of `IRepresentationDescription#id` from UUID to String.
+This will allow us, when we will receive an operation to perform with a given representation description identifier, to determine if this operation should be handled by the Sirius Desktop compatibility layer, the View support or by a programmatic API
+- https://github.com/eclipse-sirius/sirius-components/issues/1155[#1155] [workbench] `WorkbenchViewContribution` now require an `icon` prop.
 
 === Dependency update
 
@@ -24,6 +26,8 @@
 
 === Improvements
 
+- https://github.com/eclipse-sirius/sirius-components/issues/1155[#1155] [workbench] The left and right panels now use a vertical bar of icons (instead of accordions) to select which view to display.
+
 === New features
 
 - https://github.com/eclipse-sirius/sirius-components/issues/1149[#1149] [form] Add support for form descriptions in the View DSL

diff --git a/frontend/src/workbench/Site.tsx b/frontend/src/workbench/Site.tsx
@@ -11,128 +11,119 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 
-import MuiAccordion from '@material-ui/core/Accordion';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
-import MuiCollapse, { CollapseProps } from '@material-ui/core/Collapse';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import IconButton from '@material-ui/core/IconButton';
+import { makeStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
 import React, { useState } from 'react';
 import { SiteProps } from './Site.types';
 
 const useSiteStyles = makeStyles((theme) => ({
-  site: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  expanded: {
-    flexGrow: 1,
-    overflow: 'auto',
-  },
-  accordionDetailsRoot: {
-    display: 'block',
-    padding: '0px',
+  leftSite: {
+    display: 'grid',
+    gridTemplateColumns: '32px 1fr',
+    justifyItems: 'stretch',
+    alignItems: 'stretch',
   },
-}));
-
-const Accordion = withStyles({
-  root: {
+  rightSite: {
     display: 'grid',
-    gridTemplateColumns: 'minmax(0,1fr)',
-    gridTemplateRows: 'min-content minmax(0,1fr)',
-    border: '1px solid rgba(0, 0, 0, .125)',
-    boxShadow: 'none',
-    '&:not(:last-child)': {
-      borderBottom: '0px',
-    },
-    '&:before': {
-      display: 'none',
-    },
-    '&$expanded': {
-      margin: '0px',
-    },
+    gridTemplateColumns: '1fr 32px',
+    justifyItems: 'stretch',
+    alignItems: 'stretch',
   },
-  expanded: {},
-})(MuiAccordion);
-
-const AccordionSummary = withStyles({
-  root: {
-    borderBottom: '1px solid rgba(0, 0, 0, .125)',
-    marginBottom: -1,
-    '&$expanded': {
-      minHeight: 48,
-    },
+  viewSelector: {
+    display: 'flex',
+    flexDirection: 'column',
+    background: 'var(--blue-lagoon-lighten-60)',
   },
-  content: {
-    '&$expanded': {
-      margin: '0px',
-    },
+  viewIcon: {
+    padding: theme.spacing(1),
   },
-  expanded: {},
-})(MuiAccordionSummary);
-
-const StyledCollapse = withStyles({
-  entered: {
+  view: {
+    display: 'grid',
+    gridTemplateRows: 'min-content 1fr',
+    justifyItems: 'stretch',
+    alignItems: 'stretch',
     overflow: 'auto',
   },
-})(MuiCollapse);
-
-const CustomCollapse = (props: CollapseProps) => {
-  const { children, ...collapseProps } = props;
-
-  const handleEntering = (node: HTMLElement, isAppearing: boolean) => {
-    node.style.height = 'auto';
-  };
-
-  const handleExit = (node: HTMLElement) => {
-    node.style.height = 'auto';
-  };
-
-  return (
-    <StyledCollapse {...collapseProps} onEntering={handleEntering} onExit={handleExit} timeout={0}>
-      {children}
-    </StyledCollapse>
-  );
-};
+  viewHeader: {
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(1),
+    columnGap: theme.spacing(1),
+    borderBottomColor: theme.palette.divider,
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+  },
+  viewContent: {},
+}));
 
-export const Site = ({ editingContextId, selection, setSelection, readOnly, contributions }: SiteProps) => {
+export const Site = ({ editingContextId, selection, setSelection, readOnly, side, contributions }: SiteProps) => {
   const classes = useSiteStyles();
-  const [expanded, setExpanded] = useState<number>(0);
+  const [selectedViewIndex, setSelectedViewIndex] = useState<number | null>(0);
 
-  let classSite = classes.site;
-
-  return (
-    <div className={classSite}>
+  const viewSelector = (
+    <div className={classes.viewSelector}>
       {contributions.map((contribution, index) => {
         const title = contribution.props.title;
-        const Component = contribution.props.component;
+        const icon = contribution.props.icon;
         return (
-          <Accordion
-            key={index}
-            square
-            expanded={expanded === index}
-            className={expanded === index ? classes.expanded : ''}
-            onChange={(event, expanded) => {
-              if (expanded) {
-                setExpanded(index);
-              }
-            }}
-            TransitionComponent={CustomCollapse}
-          >
-            <AccordionSummary expandIcon={<ExpandMoreIcon />} IconButtonProps={{ size: 'small' }}>
-              {title}
-            </AccordionSummary>
-            <AccordionDetails className={classes.accordionDetailsRoot} data-testid={`${title} AccordionDetails`}>
-              <Component
-                editingContextId={editingContextId}
-                selection={selection}
-                setSelection={setSelection}
-                readOnly={readOnly}
-              />
-            </AccordionDetails>
-          </Accordion>
+          <Tooltip enterDelay={250} title={title} key={index} className={classes.viewIcon}>
+            <IconButton
+              color={index === selectedViewIndex ? 'primary' : 'secondary'}
+              aria-label={title}
+              data-testid={`viewselector-${title}`}
+              onClick={() => setSelectedViewIndex(index)}
+            >
+              {icon}
+            </IconButton>
+          </Tooltip>
         );
       })}
     </div>
   );
+
+  let selectedView = undefined;
+  if (selectedViewIndex !== null && selectedViewIndex < contributions.length) {
+    const { title, icon, component: Component } = contributions[selectedViewIndex].props;
+    selectedView = (
+      <div className={classes.view}>
+        <div className={classes.viewHeader}>
+          {icon}
+          <Typography>{title}</Typography>
+        </div>
+        <div className={classes.viewContent} data-testid={`view-${title}`}>
+          <Component
+            editingContextId={editingContextId}
+            selection={selection}
+            setSelection={setSelection}
+            readOnly={readOnly}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  let content = undefined;
+  if (side === 'left') {
+    content = (
+      <>
+        {viewSelector}
+        {selectedView}
+      </>
+    );
+  } else {
+    content = (
+      <>
+        {selectedView}
+        {viewSelector}
+      </>
+    );
+  }
+  let classSite = side === 'left' ? classes.leftSite : classes.rightSite;
+  return (
+    <div className={classSite} data-testid={`site-${side}`}>
+      {content}
+    </div>
+  );
 };
diff --git a/frontend/src/workbench/Site.types.ts b/frontend/src/workbench/Site.types.ts
@@ -11,12 +11,13 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import React from 'react';
-import { Selection } from 'workbench/Workbench.types';
+import { Selection, WorkbenchViewSide } from 'workbench/Workbench.types';
 
 export interface SiteProps {
   editingContextId: string;
   selection: Selection;
   setSelection: (selection: Selection) => void;
   readOnly: boolean;
+  side: WorkbenchViewSide;
   contributions: Array<React.ReactElement>;
 }
diff --git a/frontend/src/workbench/Workbench.tsx b/frontend/src/workbench/Workbench.tsx
@@ -180,6 +180,7 @@ export const Workbench = ({
         selection={selection}
         setSelection={setSelection}
         readOnly={readOnly}
+        side="left"
         contributions={workbenchViewLeftSideContributions}
       />
     </TreeItemContextMenuContext.Provider>
@@ -191,6 +192,7 @@ export const Workbench = ({
       selection={selection}
       setSelection={setSelection}
       readOnly={readOnly}
+      side="right"
       contributions={workbenchViewRightSideContributions}
     />
   );

diff --git a/frontend/src/workbench/Workbench.types.ts b/frontend/src/workbench/Workbench.types.ts
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021 Obeo and others.
+ * Copyright (c) 2021, 2022 Obeo and others.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -47,6 +47,7 @@ export type WorkbenchViewSide = 'left' | 'right';
 export interface WorkbenchViewContributionProps {
   side: WorkbenchViewSide;
   title: string;
+  icon: React.ReactElement;
   component: (props: WorkbenchViewComponentProps) => JSX.Element;
 }
 

diff --git a/frontend/src/workbench/WorkbenchViewContribution.ts b/frontend/src/workbench/WorkbenchViewContribution.ts
@@ -13,6 +13,6 @@
 
 import { WorkbenchViewContributionProps } from './Workbench.types';
 
-export const WorkbenchViewContribution = ({ side, title, component }: WorkbenchViewContributionProps) => {
+export const WorkbenchViewContribution = ({ side, title, icon, component }: WorkbenchViewContributionProps) => {
   return null;
 };