X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e9856c5b1fc9162ce1f105fee49e2a80d69dd397..79d2927c497c924e9b15545d44b860627e8f8a7c:/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 439f594779..e5c2b35392 100644
--- 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