customs: any;
}
-const purple900 = purple["900"];
+const purple800 = purple["800"];
const grey600 = grey["600"];
const themeOptions: ArvadosThemeOptions = {
customs: {
overrides: {
MuiAppBar: {
colorPrimary: {
- backgroundColor: purple900
+ backgroundColor: purple800
}
},
MuiTabs: {
color: grey600
},
indicator: {
- backgroundColor: purple900
+ backgroundColor: purple800
}
},
MuiTab: {
selected: {
fontWeight: 700,
- color: purple900
+ color: purple800
}
}
},
textTransform: 'capitalize'
},
link: {
+ width: '60%',
color: theme.palette.primary.main,
- textDecoration: 'none'
+ textDecoration: 'none',
+ overflowWrap: 'break-word'
}
});
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { IconTypes } from '../../icon/icon';
import { DetailsPanelResource } from '../../../views-components/details-panel/details-panel';
+import { IconType } from '../../icon/icon';
export default abstract class AbstractItem<T extends DetailsPanelResource = DetailsPanelResource> {
return this.item.name;
}
- abstract getIcon(): IconTypes;
+ abstract getIcon(className?: string): React.ReactElement<any>;
abstract buildDetails(): React.ReactElement<any>;
buildActivity(): React.ReactElement<any> {
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { IconTypes } from '../../icon/icon';
+import { CollectionIcon } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { CollectionResource } from '../../../models/collection';
import { formatDate } from '../../../common/formatters';
+import { resourceLabel } from '../../../common/labels';
+import { ResourceKind } from '../../../models/resource';
export default class CollectionItem extends AbstractItem<CollectionResource> {
- getIcon(): IconTypes {
- return IconTypes.COLLECTION;
+ getIcon(className?: string) {
+ return <CollectionIcon className={className} />;
}
- buildDetails(): React.ReactElement<any> {
+ buildDetails() {
return <div>
- <Attribute label='Type' value='Data Collection' />
+ <Attribute label='Type' value={resourceLabel(ResourceKind.Collection)} />
<Attribute label='Size' value='---' />
<Attribute label='Owner' value={this.item.ownerUuid} />
<Attribute label='Last modified' value={formatDate(this.item.modifiedAt)} />
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { IconTypes } from '../../icon/icon';
+import { DefaultIcon, ProjectsIcon } from '../../icon/icon';
import AbstractItem from './abstract-item';
import EmptyState from '../../empty-state/empty-state';
import { EmptyResource } from '../../../models/empty';
export default class EmptyItem extends AbstractItem<EmptyResource> {
- getIcon(): IconTypes {
- return IconTypes.FOLDER;
+ getIcon(className?: string) {
+ return <ProjectsIcon className={className} />;
}
- buildDetails(): React.ReactElement<any> {
- return <EmptyState icon={IconTypes.ANNOUNCEMENT}
+ buildDetails() {
+ return <EmptyState icon={DefaultIcon}
message='Select a file or folder to view its details.' />;
}
}
\ No newline at end of file
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import IconBase, { IconTypes } from '../../icon/icon';
+import { ProcessIcon } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProcessResource } from '../../../models/process';
import { formatDate } from '../../../common/formatters';
+import { ResourceKind } from '../../../models/resource';
+import { resourceLabel } from '../../../common/labels';
export default class ProcessItem extends AbstractItem<ProcessResource> {
- getIcon(): IconTypes {
- return IconTypes.PROCESS;
+ getIcon(className?: string){
+ return <ProcessIcon className={className} />;
}
- buildDetails(): React.ReactElement<any> {
+ buildDetails() {
return <div>
- <Attribute label='Type' value='Process' />
+ <Attribute label='Type' value={resourceLabel(ResourceKind.Process)} />
<Attribute label='Size' value='---' />
<Attribute label='Owner' value={this.item.ownerUuid} />
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { IconTypes } from '../../icon/icon';
+import { ProjectIcon } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProjectResource } from '../../../models/project';
import { formatDate } from '../../../common/formatters';
+import { ResourceKind } from '../../../models/resource';
+import { resourceLabel } from '../../../common/labels';
export default class ProjectItem extends AbstractItem<ProjectResource> {
- getIcon(): IconTypes {
- return IconTypes.FOLDER;
+ getIcon(className?: string) {
+ return <ProjectIcon className={className} />;
}
- buildDetails(): React.ReactElement<any> {
+ buildDetails() {
return <div>
- <Attribute label='Type' value={this.item.groupClass} />
+ <Attribute label='Type' value={resourceLabel(ResourceKind.Project)} />
{/* Missing attr */}
<Attribute label='Size' value='---' />
<Attribute label='Owner' value={this.item.ownerUuid} />
import * as React from "react";
import { shallow, configure } from "enzyme";
import DropdownMenu from "./dropdown-menu";
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-
import * as Adapter from 'enzyme-adapter-react-16';
import { MenuItem, IconButton, Menu } from "@material-ui/core";
+import { PaginationRightArrowIcon } from "../icon/icon";
configure({ adapter: new Adapter() });
describe("<DropdownMenu />", () => {
it("renders menu icon", () => {
- const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={ChevronRightIcon} />);
- expect(dropdownMenu.find(ChevronRightIcon)).toHaveLength(1);
+ const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={<PaginationRightArrowIcon />} />);
+ expect(dropdownMenu.find(PaginationRightArrowIcon)).toHaveLength(1);
});
it("render menu items", () => {
const dropdownMenu = shallow(
- <DropdownMenu id="test-menu" icon={ChevronRightIcon}>
+ <DropdownMenu id="test-menu" icon={<PaginationRightArrowIcon />}>
<MenuItem>Item 1</MenuItem>
<MenuItem>Item 2</MenuItem>
</DropdownMenu>
});
it("opens on menu icon click", () => {
- const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={ChevronRightIcon} />);
+ const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={<PaginationRightArrowIcon />} />);
dropdownMenu.find(IconButton).simulate("click", {currentTarget: {}});
expect(dropdownMenu.state().anchorEl).toBeDefined();
});
it("closes on menu click", () => {
- const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={ChevronRightIcon} />);
+ const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={<PaginationRightArrowIcon />} />);
dropdownMenu.find(Menu).simulate("click", {currentTarget: {}});
expect(dropdownMenu.state().anchorEl).toBeUndefined();
});
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Menu, IconButton } from '@material-ui/core';
+import Menu from '@material-ui/core/Menu';
+import IconButton from '@material-ui/core/IconButton';
import { PopoverOrigin } from '@material-ui/core/Popover';
-
interface DropdownMenuProps {
id: string;
- icon: React.ComponentType;
+ icon: React.ReactElement<any>;
}
class DropdownMenu extends React.Component<DropdownMenuProps> {
};
render() {
- const { icon: Icon, id, children } = this.props;
+ const { icon, id, children } = this.props;
const { anchorEl } = this.state;
return (
<div>
aria-owns={anchorEl ? id : undefined}
aria-haspopup="true"
color="inherit"
- onClick={this.handleOpen}
-
- >
- <Icon />
+ onClick={this.handleOpen}>
+ {icon}
</IconButton>
<Menu
id={id}
onClose={this.handleClose}
onClick={this.handleClose}
anchorOrigin={this.transformOrigin}
- transformOrigin={this.transformOrigin}
- >
+ transformOrigin={this.transformOrigin}>
{children}
</Menu>
</div>
import * as React from 'react';
import Typography from '@material-ui/core/Typography';
import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles';
-import { ArvadosTheme } from '../../common/custom-theme';
-import IconBase, { IconTypes } from '../icon/icon';
+import { ArvadosTheme } from 'src/common/custom-theme';
+import { IconType } from '../icon/icon';
export interface EmptyStateDataProps {
message: string;
- icon: IconTypes;
+ icon: IconType;
details?: string;
}
class EmptyState extends React.Component<EmptyStateProps, {}> {
render() {
- const { classes, message, details, icon, children } = this.props;
+ const { classes, message, details, icon: Icon, children } = this.props;
return (
<Typography className={classes.container} component="div">
- <IconBase icon={icon} className={classes.icon} />
+ <Icon className={classes.icon} />
<Typography variant="body1" gutterBottom>{message}</Typography>
{ details && <Typography gutterBottom>{details}</Typography> }
{ children && <Typography gutterBottom>{children}</Typography> }
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import * as classnames from "classnames";
-import CloseAnnouncement from '@material-ui/icons/Announcement';
-import CloseIcon from '@material-ui/icons/Close';
-import FolderIcon from '@material-ui/icons/Folder';
+import AccessTime from '@material-ui/icons/AccessTime';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import BubbleChart from '@material-ui/icons/BubbleChart';
+import Cached from '@material-ui/icons/Cached';
+import Code from '@material-ui/icons/Code';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Close from '@material-ui/icons/Close';
+import ContentCopy from '@material-ui/icons/ContentCopy';
+import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
+import Delete from '@material-ui/icons/Delete';
+import Edit from '@material-ui/icons/Edit';
+import Folder from '@material-ui/icons/Folder';
+import GetApp from '@material-ui/icons/GetApp';
+import Help from '@material-ui/icons/Help';
+import Inbox from '@material-ui/icons/Inbox';
+import Info from '@material-ui/icons/Info';
+import Input from '@material-ui/icons/Input';
+import Menu from '@material-ui/icons/Menu';
+import MoreVert from '@material-ui/icons/MoreVert';
+import Notifications from '@material-ui/icons/Notifications';
+import People from '@material-ui/icons/People';
+import Person from '@material-ui/icons/Person';
+import PersonAdd from '@material-ui/icons/PersonAdd';
+import PlayArrow from '@material-ui/icons/PlayArrow';
+import RateReview from '@material-ui/icons/RateReview';
+import Search from '@material-ui/icons/Search';
+import Star from '@material-ui/icons/Star';
+import StarBorder from '@material-ui/icons/StarBorder';
-export enum IconTypes {
- ANNOUNCEMENT = 'announcement',
- FOLDER = 'folder',
- CLOSE = 'close',
- PROJECT = 'project',
- COLLECTION = 'collection',
- PROCESS = 'process'
-}
+export type IconType = React.SFC<{ className?: string }>;
-interface IconBaseDataProps {
- icon: IconTypes;
- className?: string;
-}
-
-type IconBaseProps = IconBaseDataProps;
-
-interface IconBaseState {
- icon: IconTypes;
-}
-
-const getSpecificIcon = (props: any) => ({
- announcement: <CloseAnnouncement className={props.className} />,
- folder: <FolderIcon className={props.className} />,
- close: <CloseIcon className={props.className} />,
- project: <i className={classnames([props.className, 'fas fa-folder fa-lg'])} />,
- collection: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
- process: <i className={classnames([props.className, 'fas fa-cogs fa-lg'])} />
-});
-
-class IconBase extends React.Component<IconBaseProps, IconBaseState> {
- state = {
- icon: IconTypes.FOLDER,
- };
-
- render() {
- return getSpecificIcon(this.props)[this.props.icon];
- }
-}
-
-export default IconBase;
\ No newline at end of file
+export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
+export const AdvancedIcon: IconType = (props) => <Folder {...props} />;
+export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
+export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
+export const CollectionIcon: IconType = (props) => <Folder {...props} />;
+export const CloseIcon: IconType = (props) => <Close {...props} />;
+export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
+export const DetailsIcon: IconType = (props) => <Info {...props} />;
+export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
+export const FavoriteIcon: IconType = (props) => <Star {...props} />;
+export const HelpIcon: IconType = (props) => <Help {...props} />;
+export const LogIcon: IconType = (props) => <Folder {...props} />;
+export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
+export const MoveToIcon: IconType = (props) => <Input {...props} />;
+export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
+export const NotificationIcon: IconType = (props) => <Notifications {...props} />;
+export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
+export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
+export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
+export const ProcessIcon: IconType = (props) => <BubbleChart {...props} />;
+export const ProjectIcon: IconType = (props) => <Folder {...props} />;
+export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
+export const ProvenanceGraphIcon: IconType = (props) => <Folder {...props} />;
+export const RecentIcon: IconType = (props) => <AccessTime {...props} />;
+export const RemoveIcon: IconType = (props) => <Delete {...props} />;
+export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
+export const RenameIcon: IconType = (props) => <Edit {...props} />;
+export const ReRunProcessIcon: IconType = (props) => <Cached {...props} />;
+export const SearchIcon: IconType = (props) => <Search {...props} />;
+export const ShareIcon: IconType = (props) => <PersonAdd {...props} />;
+export const ShareMeIcon: IconType = (props) => <People {...props} />;
+export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props} />;
+export const TrashIcon: IconType = (props) => <Delete {...props} />;
+export const UserPanelIcon: IconType = (props) => <Person {...props} />;
+export const UsedByIcon: IconType = (props) => <Folder {...props} />;
+export const WorkflowIcon: IconType = (props) => <Code {...props} />;
\ No newline at end of file
import * as React from 'react';
import { ReactElement } from 'react';
-import { StyleRulesCallback, Theme, WithStyles, withStyles } from '@material-ui/core/styles';
-import List from "@material-ui/core/List/List";
-import ListItem from "@material-ui/core/ListItem/ListItem";
-import ListItemText from "@material-ui/core/ListItemText/ListItemText";
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Collapse from "@material-ui/core/Collapse/Collapse";
-
-import { Typography } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
+import { ArvadosTheme } from '../../common/custom-theme';
+import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
+import { SidePanelRightArrowIcon, IconType } from '../icon/icon';
+import * as classnames from "classnames";
export interface SidePanelItem {
id: string;
name: string;
- icon: string;
+ icon: IconType;
active?: boolean;
open?: boolean;
margin?: boolean;
class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
- const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
+ const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, iconArrowContainer } = classes;
return (
<div className={leftSidePanelContainer}>
<List>
<span key={it.name}>
<ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
<span className={row}>
- {it.openAble ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
- ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
+ {it.openAble ? (
+ <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
+ <SidePanelRightArrowIcon className={this.getIconClassNames(it.open, it.active)} />
+ </i>
+ ) : null}
<ListItemIcon className={it.active ? active : ''}>
- <i className={`${it.icon} ${icon} ${it.margin ? projectIconMargin : ''}`} />
+ {<it.icon className={`${icon} ${it.margin ? projectIconMargin : ''}`} />}
</ListItemIcon>
- <ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
+ <ListItemText className={listItemText}
+ primary={renderListItemText(it.name, active, it.active)} />
</span>
</ListItem>
{it.openAble ? (
<Collapse in={it.open} timeout="auto" unmountOnExit>
{children}
- </Collapse>) : null}
+ </Collapse>
+ ) : null}
</span>
))}
</List>
);
}
+ getIconClassNames = (itemOpen ?: boolean, itemActive ?: boolean) => {
+ const { classes } = this.props;
+ return classnames(classes.iconArrow, {
+ [classes.iconOpen]: itemOpen,
+ [classes.iconClose]: !itemOpen,
+ [classes.active]: itemActive
+ });
+ }
+
handleRowContextMenu = (item: SidePanelItem) =>
(event: React.MouseEvent<HTMLElement>) =>
item.openAble ? this.props.onContextMenu(event, item) : null
}
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' |
- 'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
+const renderListItemText = (itemName: string, active: string, itemActive?: boolean) =>
+ <Typography className={itemActive ? active : ''}>{itemName}</Typography>;
+
+type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' |
+ 'projectIconMargin' | 'iconClose' | 'iconOpen' | 'iconArrowContainer' | 'iconArrow';
-const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
active: {
- color: '#4285F6',
+ color: theme.palette.primary.main,
},
listItemText: {
padding: '0px',
display: 'flex',
alignItems: 'center',
},
- activeArrow: {
- color: '#4285F6',
- position: 'absolute',
+ iconArrowContainer: {
+ color: theme.palette.grey["700"],
+ height: '14px',
+ position: 'absolute'
},
- inactiveArrow: {
- position: 'absolute',
+ iconArrow: {
+ fontSize: '14px'
},
- arrowTransition: {
+ iconClose: {
transition: 'all 0.1s ease',
},
- arrowRotate: {
+ iconOpen: {
transition: 'all 0.1s ease',
- transform: 'rotate(-90deg)',
+ transform: 'rotate(90deg)',
},
leftSidePanelContainer: {
overflowY: 'auto',
flexGrow: 1,
},
list: {
- paddingBottom: '5px',
- paddingTop: '5px',
- paddingLeft: '14px',
+ padding: '5px 0px 5px 14px',
minWidth: '240px',
},
icon: {
- minWidth: '20px',
+ fontSize: '20px'
},
projectIconMargin: {
marginLeft: '17px',
import sidePanelReducer from "./side-panel-reducer";
import actions from "./side-panel-action";
+import { ProjectsIcon } from "../../components/icon/icon";
describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: false,
active: false,
}
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: false,
active: true,
}
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: false,
active: false,
}
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: true,
active: false,
}
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: false,
active: true,
}
{
id: "1",
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: false,
active: false,
}
// SPDX-License-Identifier: AGPL-3.0
import * as _ from "lodash";
-
import actions, { SidePanelAction } from './side-panel-action';
import { SidePanelItem } from '../../components/side-panel/side-panel';
+import { ProjectsIcon, ShareMeIcon, WorkflowIcon, RecentIcon, FavoriteIcon, TrashIcon } from "../../components/icon/icon";
export type SidePanelState = SidePanelItem[];
{
id: SidePanelIdentifiers.Projects,
name: "Projects",
- icon: "fas fa-th fa-fw",
+ icon: ProjectsIcon,
open: false,
active: false,
margin: true,
{
id: SidePanelIdentifiers.SharedWithMe,
name: "Shared with me",
- icon: "fas fa-users fa-fw",
+ icon: ShareMeIcon,
active: false,
},
{
id: SidePanelIdentifiers.Workflows,
name: "Workflows",
- icon: "fas fa-cogs fa-fw",
+ icon: WorkflowIcon,
active: false,
},
{
id: SidePanelIdentifiers.RecentOpen,
name: "Recent open",
- icon: "icon-time fa-fw",
+ icon: RecentIcon,
active: false,
},
{
id: SidePanelIdentifiers.Favourites,
name: "Favorites",
- icon: "fas fa-star fa-fw",
+ icon: FavoriteIcon,
active: false,
},
{
id: SidePanelIdentifiers.Trash,
name: "Trash",
- icon: "fas fa-trash-alt fa-fw",
+ icon: TrashIcon,
active: false,
}
];
// 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 { 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 Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
import * as classnames from "classnames";
import { connect, Dispatch } from 'react-redux';
import { RootState } from '../../store/store';
import actions from "../../store/details-panel/details-panel-action";
import { ProjectResource } from '../../models/project';
import { CollectionResource } from '../../models/collection';
-import IconBase, { IconTypes } from '../../components/icon/icon';
+import { CloseIcon } from '../../components/icon/icon';
import { ProcessResource } from '../../models/process';
import DetailsPanelFactory from '../../components/details-panel-factory/details-panel-factory';
import AbstractItem from '../../components/details-panel-factory/items/abstract-item';
<Typography component="div" className={classes.headerContainer}>
<Grid container alignItems='center' justify='space-around'>
<Grid item xs={2}>
- <IconBase className={classes.headerIcon} icon={item.getIcon()} />
+ {item.getIcon(classes.headerIcon)}
</Grid>
<Grid item xs={8}>
<Typography variant="title">
</Grid>
<Grid item>
<IconButton color="inherit" onClick={onCloseDrawer}>
- <IconBase icon={IconTypes.CLOSE} />
+ {<CloseIcon />}
</IconButton>
</Grid>
</Grid>
import * as React from "react";
import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Button, MenuItem } from "@material-ui/core";
-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 { User, getUserFullname } from "../../models/user";
import SearchBar from "../../components/search-bar/search-bar";
import Breadcrumbs, { Breadcrumb } from "../../components/breadcrumbs/breadcrumbs";
import DropdownMenu from "../../components/dropdown-menu/dropdown-menu";
-import { User, getUserFullname } from "../../models/user";
+import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "../../components/icon/icon";
export interface MainAppBarMenuItem {
label: string;
onContextMenu={props.onContextMenu} />
}
<IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
- <InfoIcon />
+ { <DetailsIcon /> }
</IconButton>
</Toolbar>
</AppBar>;
<>
<IconButton color="inherit">
<Badge badgeContent={3} color="primary">
- <NotificationsIcon />
+ {<NotificationIcon />}
</Badge>
</IconButton>
- <DropdownMenu icon={PersonIcon} id="account-menu">
+ <DropdownMenu icon={<UserPanelIcon />} id="account-menu">
<MenuItem>
{getUserFullname(user)}
</MenuItem>
{renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
</DropdownMenu>
- <DropdownMenu icon={HelpIcon} id="help-menu">
+ <DropdownMenu icon={<HelpIcon />} id="help-menu">
{renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
</DropdownMenu>
</>
projects / arvados-workbench2.git / commitdiff