import { ResourcesState } from 'store/resources/resources';
import classNames from 'classnames';
import { ArvadosTheme } from 'common/custom-theme';
-import { extractUuidKind, ResourceKind } from 'models/resource';
-import { ClassNameMap } from '@material-ui/core/styles/withStyles';
export interface Breadcrumb {
label: string;
uuid: string;
}
-type CssRules = "item" | "defaultItem" | "processItem" | "collectionItem" | "parentItem" | "currentItem" | "label" | "icon" | "frozenIcon";
+type CssRules = "item" | "chevron" | "label" | "buttonLabel" | "icon" | "frozenIcon";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
item: {
borderRadius: '16px',
+ height: '32px',
+ minWidth: '36px',
+ color: theme.customs.colors.grey700,
+ '&.parentItem': {
+ color: `${theme.palette.primary.main}`,
+ },
},
- defaultItem: {
- backgroundColor: theme.customs.colors.grey300,
- '&:hover': {
- backgroundColor: theme.customs.colors.grey400,
- }
- },
- processItem: {
- backgroundColor: theme.customs.colors.lightGreen300,
- '&:hover': {
- backgroundColor: theme.customs.colors.lightGreen400,
- }
- },
- collectionItem: {
- backgroundColor: theme.customs.colors.cyan100,
- '&:hover': {
- backgroundColor: theme.customs.colors.cyan200,
- }
- },
- parentItem: {
- opacity: 0.75
- },
- currentItem: {
- opacity: 1
+ chevron: {
+ color: grey["600"],
},
label: {
textTransform: "none",
paddingRight: '3px',
paddingLeft: '3px',
+ lineHeight: '1.4',
+ },
+ buttonLabel: {
+ overflow: 'hidden',
+ justifyContent: 'flex-start',
},
icon: {
fontSize: 20,
onContextMenu: (event: React.MouseEvent<HTMLElement>, breadcrumb: Breadcrumb) => void;
}
-const getBreadcrumbClass = (item: Breadcrumb, classes: ClassNameMap<CssRules>): string => {
- switch (extractUuidKind(item.uuid)) {
- case ResourceKind.PROCESS:
- return classes.processItem;
- case ResourceKind.COLLECTION:
- return classes.collectionItem;
- default:
- return classes.defaultItem;
- }
-};
-
export const Breadcrumbs = withStyles(styles)(
({ classes, onClick, onContextMenu, items, resources }: BreadcrumbsProps & WithStyles<CssRules>) =>
<Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
? 'breadcrumb-last'
: false}
className={classNames(
- isLastItem ? classes.currentItem : classes.parentItem,
- classes.item,
- getBreadcrumbClass(item, classes)
+ isLastItem ? null : 'parentItem',
+ classes.item
)}
+ classes={{
+ label: classes.buttonLabel
+ }}
+ color="inherit"
onClick={() => onClick(item)}
onContextMenu={event => onContextMenu(event, item)}>
<Icon className={classes.icon} />
}
</Button>
</Tooltip>
- {!isLastItem && <ChevronRightIcon color="inherit" className={classes.parentItem} />}
+ {!isLastItem && <ChevronRightIcon color="inherit" className={classNames('parentItem', classes.chevron)} />}
</React.Fragment>
);
})