From: Artur Janicki Date: Tue, 3 Jul 2018 12:40:16 +0000 (+0200) Subject: #13704: init navigation details panel X-Git-Tag: 1.2.0~60^2~8 X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/3127f7c6b7c0a68981598ffb83efa7ae0b41ae7c #13704: init navigation details panel Feature #13704 Arvados-DCO-1.1-Signed-off-by: Janicki Artur --- diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx index ac207301..cc191e80 100644 --- a/src/components/side-panel/side-panel.tsx +++ b/src/components/side-panel/side-panel.tsx @@ -92,7 +92,7 @@ const styles: StyleRulesCallback = (theme: Theme) => ({ overflowY: 'auto', minWidth: '240px', whiteSpace: 'nowrap', - marginTop: '38px', + marginTop: '52px', 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 index 00000000..16c1f92f --- /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 ( + + {props.children} + + ); +} + +export interface DetailsPanelProps { + toggleDrawer: (isOpened: boolean) => void; + isOpened: boolean; +} + +class DetailsPanel extends React.Component, {}> { + state = { + value: 0, + }; + + handleChange = (event: any, value: boolean) => { + this.setState({ value }); + } + + render() { + const { classes, toggleDrawer, isOpened } = this.props; + const { value } = this.state; + return ( +
+ toggleDrawer(false)} + classes={{ + paper: classes.drawerPaper + }}> +

Tutorial pipeline

+ toggleDrawer(false)}> + + + + + + + {value === 0 && + Item One + } + {value === 1 && + Item Two + } + +
+ ); + } + +} + +type CssRules = 'drawerPaper' | 'container' | 'title' | 'tabsRoot' | 'tabsIndicator' | 'tabRoot' | 'tabSelected'; + +const drawerWidth = 320; +const styles: StyleRulesCallback = (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 c0525a56..b03dccd9 100644 --- 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 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"; @@ -34,6 +35,7 @@ export interface MainAppBarActionProps { onSearch: (searchText: string) => void; onBreadcrumbClick: (breadcrumb: Breadcrumb) => void; onMenuItemClick: (menuItem: MainAppBarMenuItem) => void; + onDetailsPanelClick: (isOpened: boolean) => void; } type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles; @@ -69,11 +71,14 @@ export const MainAppBar: React.SFC = (props) => { - { - props.user && - - - } + + { + props.user && + } + props.onDetailsPanelClick(true)}> + + + ; }; diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx index b8baeadc..d8c24abe 100644 --- 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 DetailsPanel from '../../views-components/details-panel/details-panel'; const drawerWidth = 240; -const appBarHeight = 102; +const appBarHeight = 116; type CssRules = 'root' | 'appBar' | 'drawerPaper' | 'content' | 'contentWrapper' | 'toolbar'; @@ -99,6 +100,7 @@ interface WorkbenchState { helpMenu: NavMenuItem[], anonymousMenu: NavMenuItem[] }; + isDetailsPanelOpened: boolean; } class Workbench extends React.Component { @@ -129,7 +131,8 @@ class Workbench extends React.Component { action: () => this.props.dispatch(authActions.LOGIN()) } ] - } + }, + isDetailsPanelOpened: false }; mainAppBarActions: MainAppBarActionProps = { @@ -140,7 +143,10 @@ class Workbench extends React.Component { 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) => { @@ -196,6 +202,9 @@ class Workbench extends React.Component { + );