21448: divider in place for toolbar menu Arvados-DCO-1.1-Signed-off-by: Lisa Knox...

[arvados.git] / services / workbench2 / src / views-components / context-menu / actions / context-menu-divider.tsx

diff --git a/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx b/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx
index 439f594779430c408a808091a6d4ae61b6cf1874..e5c2b353927dd9792b68a11a69544345b8dcf4f8 100644 (file)
--- a/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx
+++ b/services/workbench2/src/views-components/context-menu/actions/context-menu-divider.tsx
@@ -6,25 +6,39 @@ import React from 'react';
 import { ContextMenuAction } from '../context-menu-action-set';
 import { Divider as DividerComponent, StyleRulesCallback, withStyles } from '@material-ui/core';
 import { WithStyles } from '@material-ui/core/styles';
+import { VerticalLineDivider } from 'components/icon/icon';
 
-type CssRules = 'root';
+type CssRules = 'horizontal' | 'vertical';
 
 const styles:StyleRulesCallback<CssRules> = () => ({
-  root: {
+  horizontal: {
       backgroundColor: 'black',
   },
+  vertical: {
+      backgroundColor: 'black',
+      transform: 'rotate(90deg)',
+  },
 });
 
-type DividerProps = {
-  orthogonality: 'vertical' | 'horizontal';
-};
+export const VerticalLine = withStyles(styles)((props: WithStyles<CssRules>) => {
+  return  <DividerComponent variant='middle' className={props.classes.vertical}/>;
+});
 
-export const Divider = withStyles(styles)((props: DividerProps & WithStyles<CssRules>) => {
-  return  <DividerComponent variant='middle' className={props.classes.root} />;
+export const HorizontalLine = withStyles(styles)((props: WithStyles<CssRules>) => {
+  return  <DividerComponent variant='middle' className={props.classes.horizontal} />;
 });
 
-export const menuDivider: ContextMenuAction = {
+//msToolbar only renders icon and not component
+export const horizontalMenuDivider: ContextMenuAction = {
+  name: 'divider',
+  icon: VerticalLineDivider,
+  component: VerticalLine,
+  execute: () => null,
+};
+
+export const verticalMenuDivider: ContextMenuAction = {
   name: 'divider',
-  component: Divider,
+  icon: () => null,
+  component: HorizontalLine,
   execute: () => null,
 };
\ No newline at end of file