// 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';
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';
export default class CollectionItem extends AbstractItem<CollectionResource> {
- getIcon(): IconTypes {
- return IconTypes.COLLECTION;
+ getIcon(className?: string): React.ReactElement<any> {
+ return CollectionIcon(className);
}
buildDetails(): React.ReactElement<any> {
// 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.INBOX;
+ getIcon(className?: string): React.ReactElement<any> {
+ return ProjectsIcon(className);
}
buildDetails(): React.ReactElement<any> {
- return <EmptyState icon={IconTypes.RATE_REVIEW}
+ 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 { IconTypes } from '../../icon/icon';
+import { ProcessIcon } from '../../icon/icon';
import Attribute from '../../attribute/attribute';
import AbstractItem from './abstract-item';
import { ProcessResource } from '../../../models/process';
export default class ProcessItem extends AbstractItem<ProcessResource> {
- getIcon(): IconTypes {
- return IconTypes.BUBBLE_CHART;
+ getIcon(className?: string): React.ReactElement<any> {
+ return ProcessIcon(className);
}
buildDetails(): React.ReactElement<any> {
// 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';
export default class ProjectItem extends AbstractItem<ProjectResource> {
- getIcon(): IconTypes {
- return IconTypes.FOLDER;
+ getIcon(className?: string): React.ReactElement<any> {
+ return ProjectIcon(className);
}
buildDetails(): React.ReactElement<any> {
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 IconBase, { IconTypes } from "../icon/icon";
+import { PaginationRightArrowIcon } from "../icon/icon";
+import ChevronRight from '@material-ui/icons/ChevronRight';
configure({ adapter: new Adapter() });
describe("<DropdownMenu />", () => {
it("renders menu icon", () => {
- const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={IconTypes.CHEVRON_RIGHT} />);
- expect(dropdownMenu.find(IconBase)).toHaveLength(1);
+ const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={PaginationRightArrowIcon()} />);
+ expect(dropdownMenu.find(ChevronRight)).toHaveLength(1);
});
it("render menu items", () => {
const dropdownMenu = shallow(
- <DropdownMenu id="test-menu" icon={IconTypes.CHEVRON_RIGHT}>
+ <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={IconTypes.CHEVRON_RIGHT} />);
+ 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={IconTypes.CHEVRON_RIGHT} />);
+ const dropdownMenu = shallow(<DropdownMenu id="test-menu" icon={PaginationRightArrowIcon()} />);
dropdownMenu.find(Menu).simulate("click", {currentTarget: {}});
expect(dropdownMenu.state().anchorEl).toBeUndefined();
});
import Menu from '@material-ui/core/Menu';
import IconButton from '@material-ui/core/IconButton';
import { PopoverOrigin } from '@material-ui/core/Popover';
-import IconBase, { IconTypes } from '../icon/icon';
interface DropdownMenuProps {
id: string;
- icon: IconTypes;
+ icon: React.ReactElement<any>;
}
class DropdownMenu extends React.Component<DropdownMenuProps> {
aria-haspopup="true"
color="inherit"
onClick={this.handleOpen}>
- <IconBase icon={icon} />
+ {icon}
</IconButton>
<Menu
id={id}
onClose={this.handleClose}
onClick={this.handleClose}
anchorOrigin={this.transformOrigin}
- transformOrigin={this.transformOrigin}
- >
+ transformOrigin={this.transformOrigin}>
{children}
</Menu>
</div>
import Typography from '@material-ui/core/Typography';
import { WithStyles, withStyles, StyleRulesCallback } from '@material-ui/core/styles';
import { ArvadosTheme } from 'src/common/custom-theme';
-import IconBase, { IconTypes } from '../icon/icon';
export interface EmptyStateDataProps {
message: string;
- icon: IconTypes;
+ icon: (className?: string) => React.ReactElement<any>;
details?: string;
}
const { classes, message, details, icon, children } = this.props;
return (
<Typography className={classes.container} component="div">
- <IconBase icon={icon} className={classes.icon} />
+ {icon(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 AccessTime from '@material-ui/icons/AccessTime';
-import Announcement from '@material-ui/icons/Announcement';
import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
import BubbleChart from '@material-ui/icons/BubbleChart';
import Cached from '@material-ui/icons/Cached';
import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
import Delete from '@material-ui/icons/Delete';
import Edit from '@material-ui/icons/Edit';
-import FolderIcon from '@material-ui/icons/Folder';
+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 Input from '@material-ui/icons/Input';
import Menu from '@material-ui/icons/Menu';
import MoreVert from '@material-ui/icons/MoreVert';
-import NotificationsIcon from '@material-ui/icons/Notifications';
+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 Star from '@material-ui/icons/Star';
import StarBorder from '@material-ui/icons/StarBorder';
-export enum IconTypes {
- ACCESS_TIME = 'access_time',
- ANNOUNCEMENT = 'announcement',
- ARROW_DROP_DOWN = 'arrow_drop_down',
- BUBBLE_CHART = 'bubble_chart',
- CACHED = 'cached',
- CODE = 'code',
- CHEVRON_LEFT = 'chevron_left',
- CHEVRON_RIGHT = 'chevron-right',
- COLLECTION = 'collection',
- CLOSE = 'close',
- CONTENT_COPY = 'content_copy',
- CREATE_NEW_FOLDER = 'create_new_folder',
- DELETE = 'delete',
- EDIT = 'edit',
- FOLDER = 'folder',
- GET_APP = 'get_app',
- HELP = 'help',
- INBOX = 'inbox',
- INFO = 'info',
- INPUT = 'input',
- MENU = 'menu',
- MORE_VERT = 'more_vert',
- NOTIFICATIONS = 'notifications',
- PEOPLE = 'people',
- PERSON = 'person',
- PERSON_ADD = 'person_add',
- PLAY_ARROW = 'play_arrow',
- RATE_REVIEW = 'rate_review',
- SEARCH = 'search',
- STAR = 'star',
- STAR_BORDER = 'star_border'
-}
-
-interface IconBaseDataProps {
- icon: IconTypes;
- className?: string;
-}
-
-type IconBaseProps = IconBaseDataProps;
-
-interface IconBaseState {
- icon: IconTypes;
-}
-
-const getSpecificIcon = (props: any) => ({
- [IconTypes.ACCESS_TIME]: <AccessTime className={props.className} />,
- [IconTypes.ANNOUNCEMENT]: <Announcement className={props.className} />,
- [IconTypes.ARROW_DROP_DOWN]: <ArrowDropDown className={props.className} />,
- [IconTypes.BUBBLE_CHART]: <BubbleChart className={props.className} />,
- [IconTypes.CACHED]: <Cached className={props.className} />,
- [IconTypes.CODE]: <Code className={props.className} />,
- [IconTypes.CHEVRON_LEFT]: <ChevronLeft className={props.className} />,
- [IconTypes.CHEVRON_RIGHT]: <ChevronRight className={props.className} />,
- [IconTypes.COLLECTION]: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
- [IconTypes.CLOSE]: <Close className={props.className} />,
- [IconTypes.CONTENT_COPY]: <ContentCopy className={props.className} />,
- [IconTypes.CREATE_NEW_FOLDER]: <CreateNewFolder className={props.className} />,
- [IconTypes.DELETE]: <Delete className={props.className} />,
- [IconTypes.EDIT]: <Edit className={props.className} />,
- [IconTypes.FOLDER]: <FolderIcon className={props.className} />,
- [IconTypes.GET_APP]: <GetApp className={props.className} />,
- [IconTypes.HELP]: <Help className={props.className} />,
- [IconTypes.INBOX]: <Inbox className={props.className} />,
- [IconTypes.INFO]: <Info className={props.className} />,
- [IconTypes.INPUT]: <Input className={props.className} />,
- [IconTypes.MENU]: <Menu className={props.className} />,
- [IconTypes.MORE_VERT]: <MoreVert className={props.className} />,
- [IconTypes.NOTIFICATIONS]: <NotificationsIcon className={props.className} />,
- [IconTypes.PEOPLE]: <People className={props.className} />,
- [IconTypes.PERSON]: <Person className={props.className} />,
- [IconTypes.PERSON_ADD]: <PersonAdd className={props.className} />,
- [IconTypes.PLAY_ARROW]: <PlayArrow className={props.className} />,
- [IconTypes.RATE_REVIEW]: <RateReview className={props.className} />,
- [IconTypes.SEARCH]: <Search className={props.className} />,
- [IconTypes.STAR]: <Star className={props.className} />,
- [IconTypes.STAR_BORDER]: <StarBorder className={props.className} />
-});
-
-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 = (className?: string) => <StarBorder className={className} />;
+export const AdvancedIcon = (className?: string) => <Folder className={className} />;
+export const CustomizeTableIcon = (className?: string) => <Menu className={className} />;
+export const CopyIcon = (className?: string) => <ContentCopy className={className} />;
+export const CollectionIcon = (className?: string) => <Folder className={className} />;
+export const CloseIcon = (className?: string) => <Close className={className} />;
+export const DefaultIcon = (className?: string) => <RateReview className={className} />;
+export const DetailsIcon = (className?: string) => <Info className={className} />;
+export const DownloadIcon = (className?: string) => <GetApp className={className} />;
+export const FavoriteIcon = (className?: string) => <Star className={className} />;
+export const HelpIcon = (className?: string) => <Help className={className} />;
+export const LogIcon = (className?: string) => <Folder className={className} />;
+export const MoreOptionsIcon = (className?: string) => <MoreVert className={className} />;
+export const MoveToIcon = (className?: string) => <Input className={className} />;
+export const NewProjectIcon = (className?: string) => <CreateNewFolder className={className} />;
+export const NotificationIcon = (className?: string) => <Notifications className={className} />;
+export const PaginationDownIcon = (className?: string) => <ArrowDropDown className={className} />;
+export const PaginationLeftArrowIcon = (className?: string) => <ChevronLeft className={className} />;
+export const PaginationRightArrowIcon = (className?: string) => <ChevronRight className={className} />;
+export const ProcessIcon = (className?: string) => <BubbleChart className={className} />;
+export const ProjectIcon = (className?: string) => <Folder className={className} />;
+export const ProjectsIcon = (className?: string) => <Inbox className={className} />;
+export const ProvenanceGraphIcon = (className?: string) => <Folder className={className} />;
+export const RecentIcon = (className?: string) => <AccessTime className={className} />;
+export const RemoveIcon = (className?: string) => <Delete className={className} />;
+export const RemoveFavoriteIcon = (className?: string) => <Star className={className} />;
+export const RenameIcon = (className?: string) => <Edit className={className} />;
+export const ReRunProcessIcon = (className?: string) => <Cached className={className} />;
+export const SearchIcon = (className?: string) => <Search className={className} />;
+export const ShareIcon = (className?: string) => <PersonAdd className={className} />;
+export const ShareMeIcon = (className?: string) => <People className={className} />;
+export const SidePanelRightArrowIcon = (className?: string) => <PlayArrow className={className} />;
+export const TrashIcon = (className?: string) => <Delete className={className} />;
+export const UserPanelIcon = (className?: string) => <Person className={className} />;
+export const UsedByIcon = (className?: string) => <Folder className={className} />;
+export const WorkflowIcon = (className?: string) => <Code className={className} />;
\ No newline at end of file
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 IconBase, { IconTypes } from '../icon/icon';
+import { SidePanelRightArrowIcon } from '../icon/icon';
import * as classnames from "classnames";
export interface SidePanelItem {
id: string;
name: string;
- icon: IconTypes;
+ icon: (className?: string) => React.ReactElement<any>;
active?: boolean;
open?: boolean;
margin?: boolean;
<span className={row}>
{it.openAble ? (
<i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
- <IconBase icon={IconTypes.PLAY_ARROW}
- className={this.getIconClassNames(it.open, it.active)}/>
+ {SidePanelRightArrowIcon(this.getIconClassNames(it.open, it.active))}
</i>
) : null}
<ListItemIcon className={it.active ? active : ''}>
- <IconBase icon={it.icon}
- className={ `${icon} ${it.margin ? projectIconMargin : ''}` } />
+ {it.icon(`${icon} ${it.margin ? projectIconMargin : ''}`)}
</ListItemIcon>
<ListItemText className={listItemText}
primary={renderListItemText(it.name, active, it.active)} />
import sidePanelReducer from "./side-panel-reducer";
import actions from "./side-panel-action";
-import { IconTypes } from "../../components/icon/icon";
+import { ProjectsIcon } from "../../components/icon/icon";
describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
}
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: true,
}
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
}
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: true,
active: false,
}
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: true,
}
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ 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 { IconTypes } from "../../components/icon/icon";
+import { ProjectsIcon, ShareMeIcon, WorkflowIcon, RecentIcon, FavoriteIcon, TrashIcon } from "../../components/icon/icon";
export type SidePanelState = SidePanelItem[];
{
id: SidePanelIdentifiers.Projects,
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
margin: true,
{
id: SidePanelIdentifiers.SharedWithMe,
name: "Shared with me",
- icon: IconTypes.PEOPLE,
+ icon: ShareMeIcon,
active: false,
},
{
id: SidePanelIdentifiers.Workflows,
name: "Workflows",
- icon: IconTypes.CODE,
+ icon: WorkflowIcon,
active: false,
},
{
id: SidePanelIdentifiers.RecentOpen,
name: "Recent open",
- icon: IconTypes.ACCESS_TIME,
+ icon: RecentIcon,
active: false,
},
{
id: SidePanelIdentifiers.Favourites,
name: "Favorites",
- icon: IconTypes.STAR,
+ icon: FavoriteIcon,
active: false,
},
{
id: SidePanelIdentifiers.Trash,
name: "Trash",
- icon: IconTypes.DELETE,
+ icon: TrashIcon,
active: false,
}
];
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 SearchBar from "../../components/search-bar/search-bar";
import Breadcrumbs, { Breadcrumb } from "../../components/breadcrumbs/breadcrumbs";
import DropdownMenu from "../../components/dropdown-menu/dropdown-menu";
-import IconBase, { IconTypes } from "../../components/icon/icon";
+import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "../../components/icon/icon";
export interface MainAppBarMenuItem {
label: string;
onContextMenu={props.onContextMenu} />
}
<IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
- <IconBase icon={IconTypes.INFO} />
+ { DetailsIcon() }
</IconButton>
</Toolbar>
</AppBar>;
<>
<IconButton color="inherit">
<Badge badgeContent={3} color="primary">
- <IconBase icon={IconTypes.NOTIFICATIONS} />
+ {NotificationIcon()}
</Badge>
</IconButton>
- <DropdownMenu icon={IconTypes.PERSON} id="account-menu">
+ <DropdownMenu icon={UserPanelIcon()} id="account-menu">
<MenuItem>
{getUserFullname(user)}
</MenuItem>
{renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
</DropdownMenu>
- <DropdownMenu icon={IconTypes.HELP} id="help-menu">
+ <DropdownMenu icon={HelpIcon()} id="help-menu">
{renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
</DropdownMenu>
</>
projects / arvados-workbench2.git / commitdiff