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