import * as React from 'react';
import { Drawer, IconButton, Tabs, Tab, Typography, Grid } from '@material-ui/core';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
import * as classnames from "classnames";
import { connect } from 'react-redux';
-import { RootState } from '../../store/store';
-import { detailsPanelActions } from "../../store/details-panel/details-panel-action";
-import { CloseIcon } from '../../components/icon/icon';
-import { EmptyResource } from '../../models/empty';
+import { RootState } from '~/store/store';
+import { detailsPanelActions } from "~/store/details-panel/details-panel-action";
+import { CloseIcon } from '~/components/icon/icon';
+import { EmptyResource } from '~/models/empty';
import { Dispatch } from "redux";
-import { ResourceKind } from "../../models/resource";
+import { ResourceKind } from "~/models/resource";
import { ProjectDetails } from "./project-details";
import { CollectionDetails } from "./collection-details";
import { ProcessDetails } from "./process-details";
import { EmptyDetails } from "./empty-details";
import { DetailsData } from "./details-data";
-import { DetailsResource } from "../../models/details";
+import { DetailsResource } from "~/models/details";
-type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'tabContainer';
+type CssRules = 'drawerPaper' | 'container' | 'opened' | 'headerContainer' | 'headerIcon' | 'headerTitle' | 'tabContainer';
const drawerWidth = 320;
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
textAlign: 'center'
},
headerIcon: {
- fontSize: "34px"
+ fontSize: '2.125rem'
+ },
+ headerTitle: {
+ overflowWrap: 'break-word',
+ wordWrap: 'break-word'
},
tabContainer: {
padding: theme.spacing.unit * 3
const getItem = (resource: DetailsResource): DetailsData => {
const res = resource || { kind: undefined, name: 'Projects' };
switch (res.kind) {
- case ResourceKind.Project:
+ case ResourceKind.PROJECT:
return new ProjectDetails(res);
- case ResourceKind.Collection:
+ case ResourceKind.COLLECTION:
return new CollectionDetails(res);
- case ResourceKind.Process:
+ case ResourceKind.PROCESS:
return new ProcessDetails(res);
default:
return new EmptyDetails(res as EmptyResource);
{item.getIcon(classes.headerIcon)}
</Grid>
<Grid item xs={8}>
- <Typography variant="title">
+ <Typography variant="title" className={classes.headerTitle}>
{item.getTitle()}
</Typography>
</Grid>