src/components/icon/icon.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { Badge, SvgIcon, Tooltip } from '@material-ui/core';
   7 import Add from '@material-ui/icons/Add';
   8 import ArrowBack from '@material-ui/icons/ArrowBack';
   9 import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
  10 import Build from '@material-ui/icons/Build';
  11 import Cached from '@material-ui/icons/Cached';
  12 import DescriptionIcon from '@material-ui/icons/Description';
  13 import ChevronLeft from '@material-ui/icons/ChevronLeft';
  14 import CloudUpload from '@material-ui/icons/CloudUpload';
  15 import Code from '@material-ui/icons/Code';
  16 import Create from '@material-ui/icons/Create';
  17 import ImportContacts from '@material-ui/icons/ImportContacts';
  18 import ChevronRight from '@material-ui/icons/ChevronRight';
  19 import Close from '@material-ui/icons/Close';
  20 import ContentCopy from '@material-ui/icons/FileCopyOutlined';
  21 import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
  22 import Delete from '@material-ui/icons/Delete';
  23 import DeviceHub from '@material-ui/icons/DeviceHub';
  24 import Edit from '@material-ui/icons/Edit';
  25 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
  26 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  27 import FlipToFront from '@material-ui/icons/FlipToFront';
  28 import Folder from '@material-ui/icons/Folder';
  29 import FolderShared from '@material-ui/icons/FolderShared';
  30 import Pageview from '@material-ui/icons/Pageview';
  31 import GetApp from '@material-ui/icons/GetApp';
  32 import Help from '@material-ui/icons/Help';
  33 import HelpOutline from '@material-ui/icons/HelpOutline';
  34 import History from '@material-ui/icons/History';
  35 import Inbox from '@material-ui/icons/Inbox';
  36 import Memory from '@material-ui/icons/Memory';
  37 import MoveToInbox from '@material-ui/icons/MoveToInbox';
  38 import Info from '@material-ui/icons/Info';
  39 import Input from '@material-ui/icons/Input';
  40 import InsertDriveFile from '@material-ui/icons/InsertDriveFile';
  41 import LastPage from '@material-ui/icons/LastPage';
  42 import LibraryBooks from '@material-ui/icons/LibraryBooks';
  43 import ListAlt from '@material-ui/icons/ListAlt';
  44 import Menu from '@material-ui/icons/Menu';
  45 import MoreVert from '@material-ui/icons/MoreVert';
  46 import Mail from '@material-ui/icons/Mail';
  47 import Notifications from '@material-ui/icons/Notifications';
  48 import OpenInNew from '@material-ui/icons/OpenInNew';
  49 import People from '@material-ui/icons/People';
  50 import Person from '@material-ui/icons/Person';
  51 import PersonAdd from '@material-ui/icons/PersonAdd';
  52 import PlayArrow from '@material-ui/icons/PlayArrow';
  53 import Public from '@material-ui/icons/Public';
  54 import RateReview from '@material-ui/icons/RateReview';
  55 import RestoreFromTrash from '@material-ui/icons/History';
  56 import Search from '@material-ui/icons/Search';
  57 import SettingsApplications from '@material-ui/icons/SettingsApplications';
  58 import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
  59 import Settings from '@material-ui/icons/Settings';
  60 import Star from '@material-ui/icons/Star';
  61 import StarBorder from '@material-ui/icons/StarBorder';
  62 import Warning from '@material-ui/icons/Warning';
  63 import VpnKey from '@material-ui/icons/VpnKey';
  64 import LinkOutlined from '@material-ui/icons/LinkOutlined';
  65 import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
  66 import Computer from '@material-ui/icons/Computer';
  67 import WrapText from '@material-ui/icons/WrapText';
  68 import TextIncrease from '@material-ui/icons/ZoomIn';
  69 import TextDecrease from '@material-ui/icons/ZoomOut';
  70 import FullscreenSharp from '@material-ui/icons/FullscreenSharp';
  71 import FullscreenExitSharp from '@material-ui/icons/FullscreenExitSharp';
  72 import ExitToApp from '@material-ui/icons/ExitToApp';
  73 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
  74 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
  75 import NotInterested from '@material-ui/icons/NotInterested';
  76 import Image from '@material-ui/icons/Image';
  77
  78 // Import FontAwesome icons
  79 import { library } from '@fortawesome/fontawesome-svg-core';
  80 import { faPencilAlt, faSlash, faUsers, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
  81 import { FormatAlignLeft } from '@material-ui/icons';
  82 library.add(
  83     faPencilAlt,
  84     faSlash,
  85     faUsers,
  86     faEllipsisH,
  87 );
  88
  89 export const FreezeIcon = (props: any) =>
  90     <SvgIcon {...props}>
  91         <path d="M20.79,13.95L18.46,14.57L16.46,13.44V10.56L18.46,9.43L20.79,10.05L21.31,8.12L19.54,7.65L20,5.88L18.07,5.36L17.45,7.69L15.45,8.82L13,7.38V5.12L14.71,3.41L13.29,2L12,3.29L10.71,2L9.29,3.41L11,5.12V7.38L8.5,8.82L6.5,7.69L5.92,5.36L4,5.88L4.47,7.65L2.7,8.12L3.22,10.05L5.55,9.43L7.55,10.56V13.45L5.55,14.58L3.22,13.96L2.7,15.89L4.47,16.36L4,18.12L5.93,18.64L6.55,16.31L8.55,15.18L11,16.62V18.88L9.29,20.59L10.71,22L12,20.71L13.29,22L14.7,20.59L13,18.88V16.62L15.5,15.17L17.5,16.3L18.12,18.63L20,18.12L19.53,16.35L21.3,15.88L20.79,13.95M9.5,10.56L12,9.11L14.5,10.56V13.44L12,14.89L9.5,13.44V10.56Z" />
  92     </SvgIcon>
  93
  94 export const UnfreezeIcon = (props: any) =>
  95     <SvgIcon {...props}>
  96         <path d="M11 5.12L9.29 3.41L10.71 2L12 3.29L13.29 2L14.71 3.41L13 5.12V7.38L15.45 8.82L17.45 7.69L18.07 5.36L20 5.88L19.54 7.65L21.31 8.12L20.79 10.05L18.46 9.43L16.46 10.56V13.26L14.5 11.3V10.56L12.74 9.54L10.73 7.53L11 7.38V5.12M18.46 14.57L16.87 13.67L19.55 16.35L21.3 15.88L20.79 13.95L18.46 14.57M13 16.62V18.88L14.7 20.59L13.29 22L12 20.71L10.71 22L9.29 20.59L11 18.88V16.62L8.55 15.18L6.55 16.31L5.93 18.64L4 18.12L4.47 16.36L2.7 15.89L3.22 13.96L5.55 14.58L7.55 13.45V10.56L5.55 9.43L3.22 10.05L2.7 8.12L4.47 7.65L4 5.89L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73L14.1 16L13 16.62M12 14.89L12.63 14.5L9.5 11.39V13.44L12 14.89Z" />
  97     </SvgIcon>
  98
  99 export const PendingIcon = (props: any) =>
 100     <span {...props}>
 101         <span className='fas fa-ellipsis-h' />
 102     </span>
 103
 104 export const ReadOnlyIcon = (props: any) =>
 105     <span {...props}>
 106         <div className="fa-layers fa-1x fa-fw">
 107             <span className="fas fa-slash"
 108                 data-fa-mask="fas fa-pencil-alt" data-fa-transform="down-1.5" />
 109             <span className="fas fa-slash" />
 110         </div>
 111     </span>;
 112
 113 export const GroupsIcon = (props: any) =>
 114     <span {...props}>
 115         <span className="fas fa-users" />
 116     </span>;
 117
 118 export const CollectionOldVersionIcon = (props: any) =>
 119     <Tooltip title='Old version'>
 120         <Badge badgeContent={<History fontSize='small' />}>
 121             <CollectionIcon {...props} />
 122         </Badge>
 123     </Tooltip>;
 124
 125 // https://materialdesignicons.com/icon/image-off
 126 export const ImageOffIcon = (props: any) =>
 127     <SvgIcon {...props}>
 128         <path d="M21 17.2L6.8 3H19C20.1 3 21 3.9 21 5V17.2M20.7 22L19.7 21H5C3.9 21 3 20.1 3 19V4.3L2 3.3L3.3 2L22 20.7L20.7 22M16.8 18L12.9 14.1L11 16.5L8.5 13.5L5 18H16.8Z" />
 129     </SvgIcon>;
 130
 131 // https://materialdesignicons.com/icon/inbox-arrow-up
 132 export const OutputIcon: IconType = (props: any) =>
 133     <SvgIcon {...props}>
 134         <path d="M14,14H10V11H8L12,7L16,11H14V14M16,11M5,15V5H19V15H15A3,3 0 0,1 12,18A3,3 0 0,1 9,15H5M19,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3" />
 135     </SvgIcon>;
 136
 137 export type IconType = React.SFC<{ className?: string, style?: object }>;
 138
 139 export const AddIcon: IconType = (props) => <Add {...props} />;
 140 export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
 141 export const AdminMenuIcon: IconType = (props) => <Build {...props} />;
 142 export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
 143 export const AttributesIcon: IconType = (props) => <ListAlt {...props} />;
 144 export const BackIcon: IconType = (props) => <ArrowBack {...props} />;
 145 export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
 146 export const CommandIcon: IconType = (props) => <LastPage {...props} />;
 147 export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
 148 export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
 149 export const CloseIcon: IconType = (props) => <Close {...props} />;
 150 export const CloudUploadIcon: IconType = (props) => <CloudUpload {...props} />;
 151 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 152 export const DetailsIcon: IconType = (props) => <Info {...props} />;
 153 export const DirectoryIcon: IconType = (props) => <Folder {...props} />;
 154 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
 155 export const EditSavedQueryIcon: IconType = (props) => <Create {...props} />;
 156 export const ExpandIcon: IconType = (props) => <ExpandMoreIcon {...props} />;
 157 export const ErrorIcon: IconType = (props) => <ErrorRoundedIcon style={{ color: '#ff0000' }} {...props} />;
 158 export const FavoriteIcon: IconType = (props) => <Star {...props} />;
 159 export const FileIcon: IconType = (props) => <DescriptionIcon {...props} />;
 160 export const HelpIcon: IconType = (props) => <Help {...props} />;
 161 export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
 162 export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
 163 export const InfoIcon: IconType = (props) => <Info {...props} />;
 164 export const FileInputIcon: IconType = (props) => <InsertDriveFile {...props} />;
 165 export const KeyIcon: IconType = (props) => <VpnKey {...props} />;
 166 export const LogIcon: IconType = (props) => <SettingsEthernet {...props} />;
 167 export const MailIcon: IconType = (props) => <Mail {...props} />;
 168 export const MaximizeIcon: IconType = (props) => <FullscreenSharp {...props} />;
 169 export const MemoryIcon: IconType = (props) => <Memory {...props} />;
 170 export const UnMaximizeIcon: IconType = (props) => <FullscreenExitSharp {...props} />;
 171 export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
 172 export const MoveToIcon: IconType = (props) => <Input {...props} />;
 173 export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
 174 export const NotificationIcon: IconType = (props) => <Notifications {...props} />;
 175 export const OpenIcon: IconType = (props) => <OpenInNew {...props} />;
 176 export const InputIcon: IconType = (props) => <MoveToInbox {...props} />;
 177 export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
 178 export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
 179 export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
 180 export const ProcessIcon: IconType = (props) => <Settings {...props} />;
 181 export const ProjectIcon: IconType = (props) => <Folder {...props} />;
 182 export const FilterGroupIcon: IconType = (props) => <Pageview {...props} />;
 183 export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
 184 export const ProvenanceGraphIcon: IconType = (props) => <DeviceHub {...props} />;
 185 export const RemoveIcon: IconType = (props) => <Delete {...props} />;
 186 export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
 187 export const PublicFavoriteIcon: IconType = (props) => <Public {...props} />;
 188 export const RenameIcon: IconType = (props) => <Edit {...props} />;
 189 export const RestoreVersionIcon: IconType = (props) => <FlipToFront {...props} />;
 190 export const RestoreFromTrashIcon: IconType = (props) => <RestoreFromTrash {...props} />;
 191 export const ReRunProcessIcon: IconType = (props) => <Cached {...props} />;
 192 export const SearchIcon: IconType = (props) => <Search {...props} />;
 193 export const ShareIcon: IconType = (props) => <PersonAdd {...props} />;
 194 export const ShareMeIcon: IconType = (props) => <People {...props} />;
 195 export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props} />;
 196 export const TrashIcon: IconType = (props) => <Delete {...props} />;
 197 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 198 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 199 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
 200 export const WarningIcon: IconType = (props) => <Warning style={{ color: '#fbc02d', height: '30px', width: '30px' }} {...props} />;
 201 export const Link: IconType = (props) => <LinkOutlined {...props} />;
 202 export const FolderSharedIcon: IconType = (props) => <FolderShared {...props} />;
 203 export const CanReadIcon: IconType = (props) => <RemoveRedEye {...props} />;
 204 export const CanWriteIcon: IconType = (props) => <Edit {...props} />;
 205 export const CanManageIcon: IconType = (props) => <Computer {...props} />;
 206 export const AddUserIcon: IconType = (props) => <PersonAdd {...props} />;
 207 export const WordWrapOnIcon: IconType = (props) => <WrapText {...props} />;
 208 export const WordWrapOffIcon: IconType = (props) => <FormatAlignLeft {...props} />;
 209 export const TextIncreaseIcon: IconType = (props) => <TextIncrease {...props} />;
 210 export const TextDecreaseIcon: IconType = (props) => <TextDecrease {...props} />;
 211 export const DeactivateUserIcon: IconType = (props) => <NotInterested {...props} />;
 212 export const LoginAsIcon: IconType = (props) => <ExitToApp {...props} />;
 213 export const ActiveIcon: IconType = (props) => <CheckCircleOutline {...props} />;
 214 export const SetupIcon: IconType = (props) => <RemoveCircleOutline {...props} />;
 215 export const InactiveIcon: IconType = (props) => <NotInterested {...props} />;
 216 export const ImageIcon: IconType = (props) => <Image {...props} />;
 217 export const StartIcon: IconType = (props) => <PlayArrow {...props} />;