17426: Pass through menu styling. Make example a card.

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

diff --git a/src/common/plugintypes.ts b/src/common/plugintypes.ts
index bda92b67afe434b9d152eb0f2811d18a6f914088..00cc1e3643572a3c040dd08814dbc1ca1d6dd720 100644 (file)
--- a/src/common/plugintypes.ts
+++ b/src/common/plugintypes.ts
@@ -8,7 +8,7 @@ import { RootStore, RootState } from '~/store/store';
 import { ResourcesState } from '~/store/resources/resources';
 import { Location } from 'history';
 
-export type ElementListReducer = (startingList: React.ReactElement[]) => React.ReactElement[];
+export type ElementListReducer = (startingList: React.ReactElement[], itemClass?: string) => React.ReactElement[];
 export type CategoriesListReducer = (startingList: string[]) => string[];
 export type NavigateMatcher = (dispatch: Dispatch, getState: () => RootState, uuid: string) => boolean;
 export type LocationChangeMatcher = (store: RootStore, pathname: string) => boolean;

diff --git a/src/plugins.tsx b/src/plugins.tsx
index 3a58a8c2c9d4439b6ccfd387c80b41517a3859a2..a7d033dd98bc718c32194c8c312d54cf67b627c4 100644 (file)
--- a/src/plugins.tsx
+++ b/src/plugins.tsx
@@ -20,10 +20,10 @@ export const pluginConfig: PluginConfig = {
 
 // Starting here, import and register your Workbench 2 plugins. //
 
-import { register as blankUIPluginRegister } from '~/plugins/blank/index';
+// import { register as blankUIPluginRegister } from '~/plugins/blank/index';
 import { register as examplePluginRegister, routePath as exampleRoutePath } from '~/plugins/example/index';
 import { register as rootRedirectRegister } from '~/plugins/root-redirect/index';
 
-blankUIPluginRegister(pluginConfig);
+// blankUIPluginRegister(pluginConfig);
 examplePluginRegister(pluginConfig);
 rootRedirectRegister(pluginConfig, exampleRoutePath);

diff --git a/src/plugins/example/index.tsx b/src/plugins/example/index.tsx
index 6e2b1deedb2e6a36f205b3194d47d4947129afce..36647fac3d274a9951370306bfa6779a8d247e52 100644 (file)
--- a/src/plugins/example/index.tsx
+++ b/src/plugins/example/index.tsx
@@ -9,7 +9,7 @@ import * as React from 'react';
 import { Dispatch } from 'redux';
 import { RootState } from '~/store/store';
 import { push } from "react-router-redux";
-import { Typography } from "@material-ui/core";
+import { Card, CardContent, Typography } from "@material-ui/core";
 import { Route, matchPath } from "react-router";
 import { RootStore } from '~/store/store';
 import { activateSidePanelTreeItem } from '~/store/side-panel-tree/side-panel-tree-actions';
@@ -26,6 +26,7 @@ const propertyKey = "Example_menu_item_pressed_count";
 
 interface ExampleProps {
     pressedCount: number;
+    className?: string;
 }
 
 const exampleMapStateToProps = (state: RootState) => ({ pressedCount: state.properties[propertyKey] || 0 });
@@ -35,15 +36,19 @@ const incrementPressedCount = (dispatch: Dispatch, pressedCount: number) => {
 };
 
 const ExampleMenuComponent = connect(exampleMapStateToProps)(
-    ({ pressedCount, dispatch }: ExampleProps & DispatchProp<any>) =>
-        <MenuItem onClick={() => incrementPressedCount(dispatch, pressedCount)}>Example menu item</MenuItem >
+    ({ pressedCount, dispatch, className }: ExampleProps & DispatchProp<any>) =>
+        <MenuItem className={className} onClick={() => incrementPressedCount(dispatch, pressedCount)}>Example menu item</MenuItem >
 );
 
 const ExamplePluginMainPanel = connect(exampleMapStateToProps)(
     ({ pressedCount }: ExampleProps) =>
-        <Typography>
-            This is a example main panel plugin.  The example menu item has been pressed {pressedCount} times.
-       </Typography>);
+        <Card>
+            <CardContent>
+                <Typography>
+                    This is a example main panel plugin.  The example menu item has been pressed {pressedCount} times.
+               </Typography>
+            </CardContent>
+        </Card>);
 
 export const register = (pluginConfig: PluginConfig) => {
 
@@ -52,13 +57,13 @@ export const register = (pluginConfig: PluginConfig) => {
         return elms;
     });
 
-    pluginConfig.accountMenuList.push((elms) => {
-        elms.push(<ExampleMenuComponent />);
+    pluginConfig.accountMenuList.push((elms, menuItemClass) => {
+        elms.push(<ExampleMenuComponent className={menuItemClass} />);
         return elms;
     });
 
-    pluginConfig.newButtonMenuList.push((elms) => {
-        elms.push(<ExampleMenuComponent />);
+    pluginConfig.newButtonMenuList.push((elms, menuItemClass) => {
+        elms.push(<ExampleMenuComponent className={menuItemClass} />);
         return elms;
     });
 

diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index 01c3dd22a06b76c33ad335173a3d530e3922b885..fb5ea11f5f0710afd51fd766c40b82691487ffc4 100644 (file)
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -114,8 +114,8 @@ export const SidePanelButton = withStyles(styles)(
                     </MenuItem>
                 </>;
 
-                const reduceItemsFn: (a: React.ReactElement[],
-                    b: ElementListReducer) => React.ReactElement[] = (a, b) => b(a);
+                const reduceItemsFn: (a: React.ReactElement[], b: ElementListReducer) => React.ReactElement[] =
+                    (a, b) => b(a, classes.menuItem);
 
                 menuItems = React.createElement(React.Fragment, null,
                     pluginConfig.newButtonMenuList.reduce(reduceItemsFn, React.Children.toArray(menuItems.props.children)));