#13704: init navigation details panel

Feature #13704

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index ac2073019d6cce5e7950dc6f92580c38fb1310e5..cc191e808df6bd4770f9f60df1888cb0e7ad1671 100644 (file)
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -92,7 +92,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         overflowY: 'auto',
         minWidth: '240px',
         whiteSpace: 'nowrap',
         overflowY: 'auto',
         minWidth: '240px',
         whiteSpace: 'nowrap',

-        marginTop: '38px',
+        marginTop: '52px',

         display: 'flex',
         flexGrow: 1,
     },
         display: 'flex',
         flexGrow: 1,
     },

diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
new file mode 100644 (file)
index 0000000..16c1f92
--- /dev/null
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -0,0 +1,109 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import Drawer from '@material-ui/core/Drawer';
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from '@material-ui/icons/Close';
+import { StyleRulesCallback, WithStyles, withStyles, Theme } from "@material-ui/core/styles";
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+
+function TabContainer(props: any) {
+       return (
+               <Typography component="div" style={{ padding: 8 * 3 }}>
+                       {props.children}
+               </Typography>
+       );
+}
+
+export interface DetailsPanelProps {
+    toggleDrawer: (isOpened: boolean) => void;
+    isOpened: boolean;
+}
+
+class DetailsPanel extends React.Component<DetailsPanelProps & WithStyles<CssRules>, {}> {
+       state = {
+               value: 0,
+       };
+
+       handleChange = (event: any, value: boolean) => {
+               this.setState({ value });
+       }
+       
+       render() {
+               const { classes, toggleDrawer, isOpened } = this.props;
+               const { value } = this.state;
+        return (
+            <div className={classes.container}>
+                               <Drawer variant="persistent" anchor="right" open={isOpened} onClose={() => toggleDrawer(false)}
+                    classes={{
+                        paper: classes.drawerPaper
+                    }}>
+                                       <h2 className={classes.title}>Tutorial pipeline</h2>
+                                       <IconButton color="inherit" onClick={() => toggleDrawer(false)}>
+                                               <CloseIcon />
+                                       </IconButton>
+                                       <Tabs value={value} onChange={this.handleChange}
+                                               classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}>
+                                               <Tab
+                                                       disableRipple
+                                                       classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+                                                       label="Details" />
+                                               <Tab
+                                                       disableRipple
+                                                       classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
+                                                       label="Activity" />
+                                       </Tabs>
+                                       {value === 0 && <TabContainer>
+                                               Item One
+                                       </TabContainer>}
+                                       {value === 1 && <TabContainer>
+                                               Item Two
+                                       </TabContainer>}
+                </Drawer>
+            </div>
+        );
+    }
+
+}
+
+type CssRules = 'drawerPaper' | 'container' | 'title' | 'tabsRoot' | 'tabsIndicator' | 'tabRoot' | 'tabSelected';
+
+const drawerWidth = 320;
+const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+       container: {
+               position: 'relative',
+               height: 'auto'
+       },
+    drawerPaper: {
+        position: 'relative',
+        width: drawerWidth
+       },
+       title: {
+               padding: '10px 0px',
+               fontSize: '20px',
+               fontWeight: 400,
+               fontStyle: 'normal'
+       },
+       tabsRoot: {
+               borderBottom: '1px solid transparent',
+       },
+       tabsIndicator: {
+               backgroundColor: 'rgb(106, 27, 154)',
+       },
+       tabRoot: {
+               fontSize: '13px',
+               fontWeight: 400,
+               color: '#333333',
+               '&$tabSelected': {
+                       fontWeight: 700,
+                       color: 'rgb(106, 27, 154)'
+               },
+       },
+       tabSelected: {}
+});
+
+export default withStyles(styles)(DetailsPanel);
\ No newline at end of file

diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index c0525a566843e9a10f75b0a38fb84babef482c38..b03dccd9184dde1043f1bec637a712665cf5e69a 100644 (file)
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -7,6 +7,7 @@ import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, StyleRulesCallbac
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import PersonIcon from "@material-ui/icons/Person";
 import HelpIcon from "@material-ui/icons/Help";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import PersonIcon from "@material-ui/icons/Person";
 import HelpIcon from "@material-ui/icons/Help";

+import InfoIcon from '@material-ui/icons/Info';

 import SearchBar from "../../components/search-bar/search-bar";
 import Breadcrumbs, { Breadcrumb } from "../../components/breadcrumbs/breadcrumbs";
 import DropdownMenu from "../../components/dropdown-menu/dropdown-menu";
 import SearchBar from "../../components/search-bar/search-bar";
 import Breadcrumbs, { Breadcrumb } from "../../components/breadcrumbs/breadcrumbs";
 import DropdownMenu from "../../components/dropdown-menu/dropdown-menu";


@@ -34,6 +35,7 @@ export interface MainAppBarActionProps {
     onSearch: (searchText: string) => void;
     onBreadcrumbClick: (breadcrumb: Breadcrumb) => void;
     onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;
     onSearch: (searchText: string) => void;
     onBreadcrumbClick: (breadcrumb: Breadcrumb) => void;
     onMenuItemClick: (menuItem: MainAppBarMenuItem) => void;

+    onDetailsPanelClick: (isOpened: boolean) => void;

 }
 
 type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
 }
 
 type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;


@@ -69,11 +71,14 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
                 </Grid>
             </Grid>
         </Toolbar>
                 </Grid>
             </Grid>
         </Toolbar>

-        {
-            props.user && <Toolbar className={props.classes.toolbar}>
-                <Breadcrumbs items={props.breadcrumbs} onClick={props.onBreadcrumbClick} />
-            </Toolbar>
-        }
+        <Toolbar >
+            {
+                props.user && <Breadcrumbs items={props.breadcrumbs} onClick={props.onBreadcrumbClick} />
+            }
+            <IconButton color="inherit" onClick={() => props.onDetailsPanelClick(true)}>
+                <InfoIcon />
+            </IconButton>
+        </Toolbar>

     </AppBar>;
 };
 
     </AppBar>;
 };
 

diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index b8baeadc630988f70a8c6234eefb9df2a5ca4cb0..d8c24abe2c4c0411c303b984b6a10df94bc93070 100644 (file)
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -28,9 +28,10 @@ import { ItemMode, setProjectItem } from "../../store/navigation/navigation-acti
 import projectActions from "../../store/project/project-action";
 import ProjectPanel from "../project-panel/project-panel";
 import { sidePanelData } from '../../store/side-panel/side-panel-reducer';
 import projectActions from "../../store/project/project-action";
 import ProjectPanel from "../project-panel/project-panel";
 import { sidePanelData } from '../../store/side-panel/side-panel-reducer';

+import DetailsPanel from '../../views-components/details-panel/details-panel';

 
 const drawerWidth = 240;
 
 const drawerWidth = 240;

-const appBarHeight = 102;
+const appBarHeight = 116;

 
 type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar';
 
 
 type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar';
 


@@ -99,6 +100,7 @@ interface WorkbenchState {
         helpMenu: NavMenuItem[],
         anonymousMenu: NavMenuItem[]
     };
         helpMenu: NavMenuItem[],
         anonymousMenu: NavMenuItem[]
     };

+    isDetailsPanelOpened: boolean;

 }
 
 class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
 }
 
 class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {


@@ -129,7 +131,8 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                     action: () => this.props.dispatch(authActions.LOGIN())
                 }
             ]
                     action: () => this.props.dispatch(authActions.LOGIN())
                 }
             ]

-        }
+        },
+        isDetailsPanelOpened: false

     };
 
     mainAppBarActions: MainAppBarActionProps = {
     };
 
     mainAppBarActions: MainAppBarActionProps = {


@@ -140,7 +143,10 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
             this.setState({ searchText });
             this.props.dispatch(push(`/search?q=${searchText}`));
         },
             this.setState({ searchText });
             this.props.dispatch(push(`/search?q=${searchText}`));
         },

-        onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
+        onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action(),
+        onDetailsPanelClick: (isOpened: boolean) => {
+            this.setState({ isDetailsPanelOpened: isOpened });
+        }

     };
 
     toggleSidePanelOpen = (itemId: string) => {
     };
 
     toggleSidePanelOpen = (itemId: string) => {


@@ -196,6 +202,9 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
                             <Route path="/projects/:id" render={this.renderProjectPanel} />
                         </Switch>
                     </div>
                             <Route path="/projects/:id" render={this.renderProjectPanel} />
                         </Switch>
                     </div>

+                    <DetailsPanel 
+                        isOpened={this.state.isDetailsPanelOpened} 
+                        toggleDrawer={this.mainAppBarActions.onDetailsPanelClick} />

                 </main>
             </div>
         );
                 </main>
             </div>
         );