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 import Stop from '@material-ui/icons/Stop';
  78
  79 // Import FontAwesome icons
  80 import { library } from '@fortawesome/fontawesome-svg-core';
  81 import { faPencilAlt, faSlash, faUsers, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
  82 import { FormatAlignLeft } from '@material-ui/icons';
  83 library.add(
  84     faPencilAlt,
  85     faSlash,
  86     faUsers,
  87     faEllipsisH,
  88 );
  89
  90 export const FreezeIcon = (props: any) =>
  91     <SvgIcon {...props}>
  92         <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" />
  93     </SvgIcon>
  94
  95 export const UnfreezeIcon = (props: any) =>
  96     <SvgIcon {...props}>
  97         <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" />
  98     </SvgIcon>
  99
 100 export const PendingIcon = (props: any) =>
 101     <span {...props}>
 102         <span className='fas fa-ellipsis-h' />
 103     </span>
 104
 105 export const ReadOnlyIcon = (props: any) =>
 106     <span {...props}>
 107         <div className="fa-layers fa-1x fa-fw">
 108             <span className="fas fa-slash"
 109                 data-fa-mask="fas fa-pencil-alt" data-fa-transform="down-1.5" />
 110             <span className="fas fa-slash" />
 111         </div>
 112     </span>;
 113
 114 export const GroupsIcon = (props: any) =>
 115     <span {...props}>
 116         <span className="fas fa-users" />
 117     </span>;
 118
 119 export const CollectionOldVersionIcon = (props: any) =>
 120     <Tooltip title='Old version'>
 121         <Badge badgeContent={<History fontSize='small' />}>
 122             <CollectionIcon {...props} />
 123         </Badge>
 124     </Tooltip>;
 125
 126 // https://materialdesignicons.com/icon/image-off
 127 export const ImageOffIcon = (props: any) =>
 128     <SvgIcon {...props}>
 129         <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" />
 130     </SvgIcon>;
 131
 132 // https://materialdesignicons.com/icon/inbox-arrow-up
 133 export const OutputIcon: IconType = (props: any) =>
 134     <SvgIcon {...props}>
 135         <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" />
 136     </SvgIcon>;
 137
 138 export type IconType = React.SFC<{ className?: string, style?: object }>;
 139
 140 export const AddIcon: IconType = (props) => <Add {...props} />;
 141 export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
 142 export const AdminMenuIcon: IconType = (props) => <Build {...props} />;
 143 export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
 144 export const AttributesIcon: IconType = (props) => <ListAlt {...props} />;
 145 export const BackIcon: IconType = (props) => <ArrowBack {...props} />;
 146 export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
 147 export const CommandIcon: IconType = (props) => <LastPage {...props} />;
 148 export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
 149 export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
 150 export const CloseIcon: IconType = (props) => <Close {...props} />;
 151 export const CloudUploadIcon: IconType = (props) => <CloudUpload {...props} />;
 152 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 153 export const DetailsIcon: IconType = (props) => <Info {...props} />;
 154 export const DirectoryIcon: IconType = (props) => <Folder {...props} />;
 155 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
 156 export const EditSavedQueryIcon: IconType = (props) => <Create {...props} />;
 157 export const ExpandIcon: IconType = (props) => <ExpandMoreIcon {...props} />;
 158 export const ErrorIcon: IconType = (props) => <ErrorRoundedIcon style={{ color: '#ff0000' }} {...props} />;
 159 export const FavoriteIcon: IconType = (props) => <Star {...props} />;
 160 export const FileIcon: IconType = (props) => <DescriptionIcon {...props} />;
 161 export const HelpIcon: IconType = (props) => <Help {...props} />;
 162 export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
 163 export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
 164 export const InfoIcon: IconType = (props) => <Info {...props} />;
 165 export const FileInputIcon: IconType = (props) => <InsertDriveFile {...props} />;
 166 export const KeyIcon: IconType = (props) => <VpnKey {...props} />;
 167 export const LogIcon: IconType = (props) => <SettingsEthernet {...props} />;
 168 export const MailIcon: IconType = (props) => <Mail {...props} />;
 169 export const MaximizeIcon: IconType = (props) => <FullscreenSharp {...props} />;
 170 export const MemoryIcon: IconType = (props) => <Memory {...props} />;
 171 export const UnMaximizeIcon: IconType = (props) => <FullscreenExitSharp {...props} />;
 172 export const MoreOptionsIcon: IconType = (props) => <MoreVert {...props} />;
 173 export const MoveToIcon: IconType = (props) => <Input {...props} />;
 174 export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
 175 export const NotificationIcon: IconType = (props) => <Notifications {...props} />;
 176 export const OpenIcon: IconType = (props) => <OpenInNew {...props} />;
 177 export const InputIcon: IconType = (props) => <MoveToInbox {...props} />;
 178 export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
 179 export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
 180 export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
 181 export const ProcessIcon: IconType = (props) => <Settings {...props} />;
 182 export const ProjectIcon: IconType = (props) => <Folder {...props} />;
 183 export const FilterGroupIcon: IconType = (props) => <Pageview {...props} />;
 184 export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
 185 export const ProvenanceGraphIcon: IconType = (props) => <DeviceHub {...props} />;
 186 export const RemoveIcon: IconType = (props) => <Delete {...props} />;
 187 export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
 188 export const PublicFavoriteIcon: IconType = (props) => <Public {...props} />;
 189 export const RenameIcon: IconType = (props) => <Edit {...props} />;
 190 export const RestoreVersionIcon: IconType = (props) => <FlipToFront {...props} />;
 191 export const RestoreFromTrashIcon: IconType = (props) => <RestoreFromTrash {...props} />;
 192 export const ReRunProcessIcon: IconType = (props) => <Cached {...props} />;
 193 export const SearchIcon: IconType = (props) => <Search {...props} />;
 194 export const ShareIcon: IconType = (props) => <PersonAdd {...props} />;
 195 export const ShareMeIcon: IconType = (props) => <People {...props} />;
 196 export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props} />;
 197 export const TrashIcon: IconType = (props) => <Delete {...props} />;
 198 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 199 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 200 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
 201 export const WarningIcon: IconType = (props) => <Warning style={{ color: '#fbc02d', height: '30px', width: '30px' }} {...props} />;
 202 export const Link: IconType = (props) => <LinkOutlined {...props} />;
 203 export const FolderSharedIcon: IconType = (props) => <FolderShared {...props} />;
 204 export const CanReadIcon: IconType = (props) => <RemoveRedEye {...props} />;
 205 export const CanWriteIcon: IconType = (props) => <Edit {...props} />;
 206 export const CanManageIcon: IconType = (props) => <Computer {...props} />;
 207 export const AddUserIcon: IconType = (props) => <PersonAdd {...props} />;
 208 export const WordWrapOnIcon: IconType = (props) => <WrapText {...props} />;
 209 export const WordWrapOffIcon: IconType = (props) => <FormatAlignLeft {...props} />;
 210 export const TextIncreaseIcon: IconType = (props) => <TextIncrease {...props} />;
 211 export const TextDecreaseIcon: IconType = (props) => <TextDecrease {...props} />;
 212 export const DeactivateUserIcon: IconType = (props) => <NotInterested {...props} />;
 213 export const LoginAsIcon: IconType = (props) => <ExitToApp {...props} />;
 214 export const ActiveIcon: IconType = (props) => <CheckCircleOutline {...props} />;
 215 export const SetupIcon: IconType = (props) => <RemoveCircleOutline {...props} />;
 216 export const InactiveIcon: IconType = (props) => <NotInterested {...props} />;
 217 export const ImageIcon: IconType = (props) => <Image {...props} />;
 218 export const StartIcon: IconType = (props) => <PlayArrow {...props} />;
 219 export const StopIcon: IconType = (props) => <Stop {...props} />;