[ARVADOS-WORKBENCH2] updated: 1.1.4-296-g9ec2e25
Git user
git at public.curoverse.com
Tue Jul 17 04:13:15 EDT 2018
Summary of changes:
.../details-panel-factory/items/abstract-item.tsx | 3 +-
.../items/collection-item.tsx | 6 +-
.../details-panel-factory/items/empty-item.tsx | 8 +-
.../details-panel-factory/items/process-item.tsx | 6 +-
.../details-panel-factory/items/project-item.tsx | 6 +-
.../dropdown-menu/dropdown-menu.test.tsx | 15 ++-
src/components/dropdown-menu/dropdown-menu.tsx | 8 +-
src/components/empty-state/empty-state.tsx | 5 +-
src/components/icon/icon.tsx | 133 ++++++---------------
src/components/side-panel/side-panel.tsx | 10 +-
src/store/side-panel/side-panel-reducer.test.ts | 14 +--
src/store/side-panel/side-panel-reducer.ts | 15 ++-
.../details-panel/details-panel.tsx | 6 +-
src/views-components/main-app-bar/main-app-bar.tsx | 10 +-
14 files changed, 90 insertions(+), 155 deletions(-)
via 9ec2e259bd565aea710cdae34d8cba433b09a749 (commit)
from 664fa00705ba7c1ee63d297afe6cdd0238c370e0 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 9ec2e259bd565aea710cdae34d8cba433b09a749
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Wed Jul 11 15:15:49 2018 +0200
add all icons to icon component, refactor code and change icons
Feature #13764
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/src/components/details-panel-factory/items/abstract-item.tsx b/src/components/details-panel-factory/items/abstract-item.tsx
index a50c867..d5e46a2 100644
--- a/src/components/details-panel-factory/items/abstract-item.tsx
+++ b/src/components/details-panel-factory/items/abstract-item.tsx
@@ -3,7 +3,6 @@
// 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> {
@@ -14,7 +13,7 @@ export default abstract class AbstractItem<T extends DetailsPanelResource = Deta
return this.item.name;
}
- abstract getIcon(): IconTypes;
+ abstract getIcon(className?: string): React.ReactElement<any>;
abstract buildDetails(): React.ReactElement<any>;
buildActivity(): React.ReactElement<any> {
diff --git a/src/components/details-panel-factory/items/collection-item.tsx b/src/components/details-panel-factory/items/collection-item.tsx
index 9b978ea..1c8bd00 100644
--- a/src/components/details-panel-factory/items/collection-item.tsx
+++ b/src/components/details-panel-factory/items/collection-item.tsx
@@ -3,7 +3,7 @@
// 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';
@@ -13,8 +13,8 @@ import { ResourceKind } from '../../../models/resource';
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> {
diff --git a/src/components/details-panel-factory/items/empty-item.tsx b/src/components/details-panel-factory/items/empty-item.tsx
index 38ef967..356ccc2 100644
--- a/src/components/details-panel-factory/items/empty-item.tsx
+++ b/src/components/details-panel-factory/items/empty-item.tsx
@@ -3,19 +3,19 @@
// 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
diff --git a/src/components/details-panel-factory/items/process-item.tsx b/src/components/details-panel-factory/items/process-item.tsx
index efc3ee7..66a6071 100644
--- a/src/components/details-panel-factory/items/process-item.tsx
+++ b/src/components/details-panel-factory/items/process-item.tsx
@@ -3,7 +3,7 @@
// 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';
@@ -13,8 +13,8 @@ import { resourceLabel } from '../../../common/labels';
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> {
diff --git a/src/components/details-panel-factory/items/project-item.tsx b/src/components/details-panel-factory/items/project-item.tsx
index eb4698e..6d8ad04 100644
--- a/src/components/details-panel-factory/items/project-item.tsx
+++ b/src/components/details-panel-factory/items/project-item.tsx
@@ -3,7 +3,7 @@
// 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';
@@ -13,8 +13,8 @@ import { resourceLabel } from '../../../common/labels';
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> {
diff --git a/src/components/dropdown-menu/dropdown-menu.test.tsx b/src/components/dropdown-menu/dropdown-menu.test.tsx
index 54957f3..08f5e0f 100644
--- a/src/components/dropdown-menu/dropdown-menu.test.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.test.tsx
@@ -5,23 +5,22 @@
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>
@@ -30,13 +29,13 @@ describe("<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();
});
diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index af9e551..98c29c6 100644
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -6,11 +6,10 @@ import * as React from 'react';
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> {
@@ -34,7 +33,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
aria-haspopup="true"
color="inherit"
onClick={this.handleOpen}>
- <IconBase icon={icon} />
+ {icon}
</IconButton>
<Menu
id={id}
@@ -43,8 +42,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps> {
onClose={this.handleClose}
onClick={this.handleClose}
anchorOrigin={this.transformOrigin}
- transformOrigin={this.transformOrigin}
- >
+ transformOrigin={this.transformOrigin}>
{children}
</Menu>
</div>
diff --git a/src/components/empty-state/empty-state.tsx b/src/components/empty-state/empty-state.tsx
index 205053b..3c21eca 100644
--- a/src/components/empty-state/empty-state.tsx
+++ b/src/components/empty-state/empty-state.tsx
@@ -6,11 +6,10 @@ import * as React from 'react';
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;
}
@@ -22,7 +21,7 @@ class EmptyState extends React.Component<EmptyStateProps, {}> {
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> }
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index ef16ced..9c0faac 100644
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -3,10 +3,7 @@
// 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';
@@ -18,7 +15,7 @@ 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 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';
@@ -26,7 +23,7 @@ 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 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';
@@ -36,93 +33,39 @@ import Search from '@material-ui/icons/Search';
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
diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 670c477..361d127 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -7,13 +7,13 @@ import { ReactElement } from 'react';
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;
@@ -40,13 +40,11 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
<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)} />
diff --git a/src/store/side-panel/side-panel-reducer.test.ts b/src/store/side-panel/side-panel-reducer.test.ts
index 21c10cc..5edd902 100644
--- a/src/store/side-panel/side-panel-reducer.test.ts
+++ b/src/store/side-panel/side-panel-reducer.test.ts
@@ -4,7 +4,7 @@
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', () => {
@@ -13,7 +13,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
}
@@ -22,7 +22,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: true,
}
@@ -37,7 +37,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
}
@@ -46,7 +46,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: true,
active: false,
}
@@ -61,7 +61,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: true,
}
@@ -70,7 +70,7 @@ describe('side-panel-reducer', () => {
{
id: "1",
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
}
diff --git a/src/store/side-panel/side-panel-reducer.ts b/src/store/side-panel/side-panel-reducer.ts
index b5ab785..a0da7db 100644
--- a/src/store/side-panel/side-panel-reducer.ts
+++ b/src/store/side-panel/side-panel-reducer.ts
@@ -3,10 +3,9 @@
// 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[];
@@ -49,7 +48,7 @@ export const sidePanelData = [
{
id: SidePanelIdentifiers.Projects,
name: "Projects",
- icon: IconTypes.INBOX,
+ icon: ProjectsIcon,
open: false,
active: false,
margin: true,
@@ -58,31 +57,31 @@ export const sidePanelData = [
{
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,
}
];
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 83508ca..7fa6d34 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -12,7 +12,7 @@ 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';
@@ -49,7 +49,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
<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">
@@ -58,7 +58,7 @@ class DetailsPanel extends React.Component<DetailsPanelProps, {}> {
</Grid>
<Grid item>
<IconButton color="inherit" onClick={onCloseDrawer}>
- <IconBase icon={IconTypes.CLOSE} />
+ {CloseIcon()}
</IconButton>
</Grid>
</Grid>
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 bf9c657..ce9ddb7 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -8,7 +8,7 @@ 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 IconBase, { IconTypes } from "../../components/icon/icon";
+import { DetailsIcon, NotificationIcon, UserPanelIcon, HelpIcon } from "../../components/icon/icon";
export interface MainAppBarMenuItem {
label: string;
@@ -74,7 +74,7 @@ export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
onContextMenu={props.onContextMenu} />
}
<IconButton color="inherit" onClick={props.onDetailsPanelToggle}>
- <IconBase icon={IconTypes.INFO} />
+ { DetailsIcon() }
</IconButton>
</Toolbar>
</AppBar>;
@@ -86,16 +86,16 @@ const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps
<>
<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>
</>
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list