add all icons and modify items fo details panel

Feature #13764

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>

diff --git a/src/components/details-panel-factory/items/empty-item.tsx b/src/components/details-panel-factory/items/empty-item.tsx
index e0f60d40b08935c99b6830500afa0e0f4b40b8c2..38ef96787fda7eb6bf5cc1abfa47349f0391c65a 100644 (file)
--- a/src/components/details-panel-factory/items/empty-item.tsx
+++ b/src/components/details-panel-factory/items/empty-item.tsx
@@ -15,7 +15,7 @@ export default class EmptyItem extends AbstractItem<EmptyResource> {
     }
 
     buildDetails(): React.ReactElement<any> {
-        return <EmptyState icon={IconTypes.FOLDER}
+        return <EmptyState icon={IconTypes.RATE_REVIEW}
             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 cbb3c236717b837f8df9e289333e57e3e00417a7..add85631f62ef7d75ff51e2698017fb3c99dbdf7 100644 (file)
--- a/src/components/details-panel-factory/items/process-item.tsx
+++ b/src/components/details-panel-factory/items/process-item.tsx
@@ -13,7 +13,7 @@ import { ResourceKind } from '../../../models/resource';
 export default class ProcessItem extends AbstractItem<ProcessResource> {
 
     getIcon(): IconTypes {
-        return IconTypes.PROCESS;
+        return IconTypes.BUBBLE_CHART;
     }
 
     buildDetails(): React.ReactElement<any> {

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 535d46944b5e2299bf78006f3d38e177ca97f128..ef16ced6c53640b9d5282f351cd7173fc1b5226a 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -6,38 +6,68 @@ import * as React from 'react';
 import * as classnames from "classnames";
 
 import AccessTime from '@material-ui/icons/AccessTime';
-import CodeIcon from '@material-ui/icons/Code';
-import CloseAnnouncement from '@material-ui/icons/Announcement';
-import CloseIcon from '@material-ui/icons/Close';
-import DeleteIcon from '@material-ui/icons/Delete';
+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 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 FolderIcon from '@material-ui/icons/Folder';
-import InboxIcon from '@material-ui/icons/Inbox';
-import InfoIcon from '@material-ui/icons/Info';
-import HelpIcon from '@material-ui/icons/Help';
+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 NotificationsIcon from '@material-ui/icons/Notifications';
-import PeopleIcon from '@material-ui/icons/People';
-import PersonIcon from '@material-ui/icons/Person';
+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 StarIcon from '@material-ui/icons/Star';
+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 {
     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',
-    PROCESS = 'process',
-    PROJECT  = 'project',
-    STAR = 'star'
+    RATE_REVIEW = 'rate_review',
+    SEARCH = 'search',
+    STAR = 'star',
+    STAR_BORDER = 'star_border'
 }
 
 interface IconBaseDataProps {
@@ -53,22 +83,36 @@ interface IconBaseState {
 
 const getSpecificIcon = (props: any) => ({
     [IconTypes.ACCESS_TIME]: <AccessTime className={props.className} />,
-    [IconTypes.ANNOUNCEMENT]: <CloseAnnouncement className={props.className} />,
-    [IconTypes.CODE]: <CodeIcon 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]: <CloseIcon className={props.className} />,
-    [IconTypes.DELETE]: <DeleteIcon className={props.className} />,
+    [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.HELP]: <HelpIcon className={props.className} />,
-    [IconTypes.INFO]: <InfoIcon className={props.className} />,
-    [IconTypes.INBOX]: <InboxIcon 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]: <PeopleIcon className={props.className} />,
-    [IconTypes.PERSON]: <PersonIcon 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.PROCESS]: <i className={classnames([props.className, 'fas fa-cogs fa-lg'])} />,
-    [IconTypes.PROJECT]: <i className={classnames([props.className, 'fas fa-folder fa-lg'])} />,
-    [IconTypes.STAR]: <StarIcon 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> {