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 FileCopy from '@material-ui/icons/FileCopy';
  22 import CreateNewFolder from '@material-ui/icons/CreateNewFolder';
  23 import Delete from '@material-ui/icons/Delete';
  24 import DeviceHub from '@material-ui/icons/DeviceHub';
  25 import Edit from '@material-ui/icons/Edit';
  26 import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
  27 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
  28 import FlipToFront from '@material-ui/icons/FlipToFront';
  29 import Folder from '@material-ui/icons/Folder';
  30 import FolderShared from '@material-ui/icons/FolderShared';
  31 import Pageview from '@material-ui/icons/Pageview';
  32 import GetApp from '@material-ui/icons/GetApp';
  33 import Help from '@material-ui/icons/Help';
  34 import HelpOutline from '@material-ui/icons/HelpOutline';
  35 import History from '@material-ui/icons/History';
  36 import Inbox from '@material-ui/icons/Inbox';
  37 import Memory from '@material-ui/icons/Memory';
  38 import MoveToInbox from '@material-ui/icons/MoveToInbox';
  39 import Info from '@material-ui/icons/Info';
  40 import Input from '@material-ui/icons/Input';
  41 import InsertDriveFile from '@material-ui/icons/InsertDriveFile';
  42 import LastPage from '@material-ui/icons/LastPage';
  43 import LibraryBooks from '@material-ui/icons/LibraryBooks';
  44 import ListAlt from '@material-ui/icons/ListAlt';
  45 import Menu from '@material-ui/icons/Menu';
  46 import MoreVert from '@material-ui/icons/MoreVert';
  47 import MoreHoriz from '@material-ui/icons/MoreHoriz';
  48 import Mail from '@material-ui/icons/Mail';
  49 import Notifications from '@material-ui/icons/Notifications';
  50 import OpenInNew from '@material-ui/icons/OpenInNew';
  51 import People from '@material-ui/icons/People';
  52 import Person from '@material-ui/icons/Person';
  53 import PersonAdd from '@material-ui/icons/PersonAdd';
  54 import PlayArrow from '@material-ui/icons/PlayArrow';
  55 import Public from '@material-ui/icons/Public';
  56 import RateReview from '@material-ui/icons/RateReview';
  57 import RestoreFromTrash from '@material-ui/icons/History';
  58 import Search from '@material-ui/icons/Search';
  59 import SettingsApplications from '@material-ui/icons/SettingsApplications';
  60 import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
  61 import Settings from '@material-ui/icons/Settings';
  62 import Star from '@material-ui/icons/Star';
  63 import StarBorder from '@material-ui/icons/StarBorder';
  64 import Warning from '@material-ui/icons/Warning';
  65 import VpnKey from '@material-ui/icons/VpnKey';
  66 import LinkOutlined from '@material-ui/icons/LinkOutlined';
  67 import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
  68 import Computer from '@material-ui/icons/Computer';
  69 import WrapText from '@material-ui/icons/WrapText';
  70 import TextIncrease from '@material-ui/icons/ZoomIn';
  71 import TextDecrease from '@material-ui/icons/ZoomOut';
  72 import FullscreenSharp from '@material-ui/icons/FullscreenSharp';
  73 import FullscreenExitSharp from '@material-ui/icons/FullscreenExitSharp';
  74 import ExitToApp from '@material-ui/icons/ExitToApp';
  75 import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
  76 import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
  77 import NotInterested from '@material-ui/icons/NotInterested';
  78 import Image from '@material-ui/icons/Image';
  79 import Stop from '@material-ui/icons/Stop';
  80
  81 // Import FontAwesome icons
  82 import { library } from '@fortawesome/fontawesome-svg-core';
  83 import { faPencilAlt, faSlash, faUsers, faEllipsisH } from '@fortawesome/free-solid-svg-icons';
  84 import { FormatAlignLeft } from '@material-ui/icons';
  85 library.add(
  86     faPencilAlt,
  87     faSlash,
  88     faUsers,
  89     faEllipsisH,
  90 );
  91
  92 export const FreezeIcon = (props: any) =>
  93     <SvgIcon {...props}>
  94         <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" />
  95     </SvgIcon>
  96
  97 export const UnfreezeIcon = (props: any) =>
  98     <SvgIcon {...props}>
  99         <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" />
 100     </SvgIcon>
 101
 102 export const PendingIcon = (props: any) =>
 103     <span {...props}>
 104         <span className='fas fa-ellipsis-h' />
 105     </span>
 106
 107 export const ReadOnlyIcon = (props: any) =>
 108     <span {...props}>
 109         <div className="fa-layers fa-1x fa-fw">
 110             <span className="fas fa-slash"
 111                 data-fa-mask="fas fa-pencil-alt" data-fa-transform="down-1.5" />
 112             <span className="fas fa-slash" />
 113         </div>
 114     </span>;
 115
 116 export const GroupsIcon = (props: any) =>
 117     <span {...props}>
 118         <span className="fas fa-users" />
 119     </span>;
 120
 121 export const CollectionOldVersionIcon = (props: any) =>
 122     <Tooltip title='Old version'>
 123         <Badge badgeContent={<History fontSize='small' />}>
 124             <CollectionIcon {...props} />
 125         </Badge>
 126     </Tooltip>;
 127
 128 // https://materialdesignicons.com/icon/image-off
 129 export const ImageOffIcon = (props: any) =>
 130     <SvgIcon {...props}>
 131         <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" />
 132     </SvgIcon>;
 133
 134 // https://materialdesignicons.com/icon/inbox-arrow-up
 135 export const OutputIcon: IconType = (props: any) =>
 136     <SvgIcon {...props}>
 137         <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" />
 138     </SvgIcon>;
 139
 140 // https://pictogrammers.com/library/mdi/icon/file-move/
 141 export const FileMoveIcon: IconType = (props: any) =>
 142     <SvgIcon {...props}>
 143         <path d="M14,17H18V14L23,18.5L18,23V20H14V17M13,9H18.5L13,3.5V9M6,2H14L20,8V12.34C19.37,12.12 18.7,12 18,12A6,6 0 0,0 12,18C12,19.54 12.58,20.94 13.53,22H6C4.89,22 4,21.1 4,20V4A2,2 0 0,1 6,2Z" />
 144     </SvgIcon>;
 145
 146 // https://pictogrammers.com/library/mdi/icon/checkbox-multiple-outline/
 147 export const CheckboxMultipleOutline: IconType = (props: any) =>
 148     <SvgIcon {...props}>
 149         <path d="M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M20,16H8V4H20V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16M18.53,8.06L17.47,7L12.59,11.88L10.47,9.76L9.41,10.82L12.59,14L18.53,8.06Z" />
 150     </SvgIcon>;
 151
 152 // https://pictogrammers.com/library/mdi/icon/checkbox-multiple-blank-outline/
 153 export const CheckboxMultipleBlankOutline: IconType = (props: any) =>
 154     <SvgIcon {...props}>
 155         <path d="M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z" />
 156     </SvgIcon>;
 157
 158 export type IconType = React.SFC<{ className?: string, style?: object }>;
 159
 160 // https://v4.mui.com/components/material-icons/
 161 export const AddIcon: IconType = (props) => <Add {...props} />;
 162 export const AddFavoriteIcon: IconType = (props) => <StarBorder {...props} />;
 163 export const AdminMenuIcon: IconType = (props) => <Build {...props} />;
 164 export const AdvancedIcon: IconType = (props) => <SettingsApplications {...props} />;
 165 export const AttributesIcon: IconType = (props) => <ListAlt {...props} />;
 166 export const BackIcon: IconType = (props) => <ArrowBack {...props} />;
 167 export const CustomizeTableIcon: IconType = (props) => <Menu {...props} />;
 168 export const CommandIcon: IconType = (props) => <LastPage {...props} />;
 169 export const CopyIcon: IconType = (props) => <ContentCopy {...props} />;
 170 export const FileCopyIcon: IconType = (props) => <FileCopy {...props} />;
 171 export const CollectionIcon: IconType = (props) => <LibraryBooks {...props} />;
 172 export const CloseIcon: IconType = (props) => <Close {...props} />;
 173 export const CloudUploadIcon: IconType = (props) => <CloudUpload {...props} />;
 174 export const DefaultIcon: IconType = (props) => <RateReview {...props} />;
 175 export const DetailsIcon: IconType = (props) => <Info {...props} />;
 176 export const DirectoryIcon: IconType = (props) => <Folder {...props} />;
 177 export const DownloadIcon: IconType = (props) => <GetApp {...props} />;
 178 export const EditSavedQueryIcon: IconType = (props) => <Create {...props} />;
 179 export const ExpandIcon: IconType = (props) => <ExpandMoreIcon {...props} />;
 180 export const ErrorIcon: IconType = (props) => <ErrorRoundedIcon style={{ color: '#ff0000' }} {...props} />;
 181 export const FavoriteIcon: IconType = (props) => <Star {...props} />;
 182 export const FileIcon: IconType = (props) => <DescriptionIcon {...props} />;
 183 export const HelpIcon: IconType = (props) => <Help {...props} />;
 184 export const HelpOutlineIcon: IconType = (props) => <HelpOutline {...props} />;
 185 export const ImportContactsIcon: IconType = (props) => <ImportContacts {...props} />;
 186 export const InfoIcon: IconType = (props) => <Info {...props} />;
 187 export const FileInputIcon: IconType = (props) => <InsertDriveFile {...props} />;
 188 export const KeyIcon: IconType = (props) => <VpnKey {...props} />;
 189 export const LogIcon: IconType = (props) => <SettingsEthernet {...props} />;
 190 export const MailIcon: IconType = (props) => <Mail {...props} />;
 191 export const MaximizeIcon: IconType = (props) => <FullscreenSharp {...props} />;
 192 export const MemoryIcon: IconType = (props) => <Memory {...props} />;
 193 export const UnMaximizeIcon: IconType = (props) => <FullscreenExitSharp {...props} />;
 194 export const MoreVerticalIcon: IconType = (props) => <MoreVert {...props} />;
 195 export const MoreHorizontalIcon: IconType = (props) => <MoreHoriz {...props} />;
 196 export const MoveToIcon: IconType = (props) => <Input {...props} />;
 197 export const NewProjectIcon: IconType = (props) => <CreateNewFolder {...props} />;
 198 export const NotificationIcon: IconType = (props) => <Notifications {...props} />;
 199 export const OpenIcon: IconType = (props) => <OpenInNew {...props} />;
 200 export const InputIcon: IconType = (props) => <MoveToInbox {...props} />;
 201 export const PaginationDownIcon: IconType = (props) => <ArrowDropDown {...props} />;
 202 export const PaginationLeftArrowIcon: IconType = (props) => <ChevronLeft {...props} />;
 203 export const PaginationRightArrowIcon: IconType = (props) => <ChevronRight {...props} />;
 204 export const ProcessIcon: IconType = (props) => <Settings {...props} />;
 205 export const ProjectIcon: IconType = (props) => <Folder {...props} />;
 206 export const FilterGroupIcon: IconType = (props) => <Pageview {...props} />;
 207 export const ProjectsIcon: IconType = (props) => <Inbox {...props} />;
 208 export const ProvenanceGraphIcon: IconType = (props) => <DeviceHub {...props} />;
 209 export const RemoveIcon: IconType = (props) => <Delete {...props} />;
 210 export const RemoveFavoriteIcon: IconType = (props) => <Star {...props} />;
 211 export const PublicFavoriteIcon: IconType = (props) => <Public {...props} />;
 212 export const RenameIcon: IconType = (props) => <Edit {...props} />;
 213 export const RestoreVersionIcon: IconType = (props) => <FlipToFront {...props} />;
 214 export const RestoreFromTrashIcon: IconType = (props) => <RestoreFromTrash {...props} />;
 215 export const ReRunProcessIcon: IconType = (props) => <Cached {...props} />;
 216 export const SearchIcon: IconType = (props) => <Search {...props} />;
 217 export const ShareIcon: IconType = (props) => <PersonAdd {...props} />;
 218 export const ShareMeIcon: IconType = (props) => <People {...props} />;
 219 export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props} />;
 220 export const TrashIcon: IconType = (props) => <Delete {...props} />;
 221 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 222 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 223 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
 224 export const WarningIcon: IconType = (props) => <Warning style={{ color: '#fbc02d', height: '30px', width: '30px' }} {...props} />;
 225 export const Link: IconType = (props) => <LinkOutlined {...props} />;
 226 export const FolderSharedIcon: IconType = (props) => <FolderShared {...props} />;
 227 export const CanReadIcon: IconType = (props) => <RemoveRedEye {...props} />;
 228 export const CanWriteIcon: IconType = (props) => <Edit {...props} />;
 229 export const CanManageIcon: IconType = (props) => <Computer {...props} />;
 230 export const AddUserIcon: IconType = (props) => <PersonAdd {...props} />;
 231 export const WordWrapOnIcon: IconType = (props) => <WrapText {...props} />;
 232 export const WordWrapOffIcon: IconType = (props) => <FormatAlignLeft {...props} />;
 233 export const TextIncreaseIcon: IconType = (props) => <TextIncrease {...props} />;
 234 export const TextDecreaseIcon: IconType = (props) => <TextDecrease {...props} />;
 235 export const DeactivateUserIcon: IconType = (props) => <NotInterested {...props} />;
 236 export const LoginAsIcon: IconType = (props) => <ExitToApp {...props} />;
 237 export const ActiveIcon: IconType = (props) => <CheckCircleOutline {...props} />;
 238 export const SetupIcon: IconType = (props) => <RemoveCircleOutline {...props} />;
 239 export const InactiveIcon: IconType = (props) => <NotInterested {...props} />;
 240 export const ImageIcon: IconType = (props) => <Image {...props} />;
 241 export const StartIcon: IconType = (props) => <PlayArrow {...props} />;
 242 export const StopIcon: IconType = (props) => <Stop {...props} />;
 243 export const SelectAllIcon: IconType = (props) => <CheckboxMultipleOutline {...props} />;
 244 export const SelectNoneIcon: IconType = (props) => <CheckboxMultipleBlankOutline {...props} />;