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