services/workbench2/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 MoreHoriz from "@material-ui/icons/MoreHoriz";
  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 import FileCopy from "@material-ui/icons/FileCopy";
  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(faPencilAlt, faSlash, faUsers, faEllipsisH);
  86
  87 export const FreezeIcon: IconType = (props: any) => (
  88     <SvgIcon {...props}>
  89         <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" />
  90     </SvgIcon>
  91 );
  92
  93 export const UnfreezeIcon: IconType = (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
  99 export const PendingIcon = (props: any) => (
 100     <span {...props}>
 101         <span className="fas fa-ellipsis-h" />
 102     </span>
 103 );
 104
 105 export const ReadOnlyIcon = (props: any) => (
 106     <span {...props}>
 107         <div className="fa-layers fa-1x fa-fw">
 108             <span
 109                 className="fas fa-slash"
 110                 data-fa-mask="fas fa-pencil-alt"
 111                 data-fa-transform="down-1.5"
 112             />
 113             <span className="fas fa-slash" />
 114         </div>
 115     </span>
 116 );
 117
 118 export const GroupsIcon = (props: any) => (
 119     <span {...props}>
 120         <span className="fas fa-users" />
 121     </span>
 122 );
 123
 124 export const CollectionOldVersionIcon = (props: any) => (
 125     <Tooltip title="Old version">
 126         <Badge badgeContent={<History fontSize="small" />}>
 127             <CollectionIcon {...props} />
 128         </Badge>
 129     </Tooltip>
 130 );
 131
 132 // https://materialdesignicons.com/icon/image-off
 133 export const ImageOffIcon = (props: any) => (
 134     <SvgIcon {...props}>
 135         <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" />
 136     </SvgIcon>
 137 );
 138
 139 // https://materialdesignicons.com/icon/inbox-arrow-up
 140 export const OutputIcon: IconType = (props: any) => (
 141     <SvgIcon {...props}>
 142         <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" />
 143     </SvgIcon>
 144 );
 145
 146 // https://pictogrammers.com/library/mdi/icon/file-move/
 147 export const FileMoveIcon: IconType = (props: any) => (
 148     <SvgIcon {...props}>
 149         <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" />
 150     </SvgIcon>
 151 );
 152
 153 // https://pictogrammers.com/library/mdi/icon/checkbox-multiple-outline/
 154 export const CheckboxMultipleOutline: IconType = (props: any) => (
 155     <SvgIcon {...props}>
 156         <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" />
 157     </SvgIcon>
 158 );
 159
 160 // https://pictogrammers.com/library/mdi/icon/checkbox-multiple-blank-outline/
 161 export const CheckboxMultipleBlankOutline: IconType = (props: any) => (
 162     <SvgIcon {...props}>
 163         <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" />
 164     </SvgIcon>
 165 );
 166
 167 //https://pictogrammers.com/library/mdi/icon/console/
 168 export const TerminalIcon: IconType = (props: any) => (
 169     <SvgIcon {...props}>
 170         <path d="M20,19V7H4V19H20M20,3A2,2 0 0,1 22,5V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V5C2,3.89 2.9,3 4,3H20M13,17V15H18V17H13M9.58,13L5.57,9H8.4L11.7,12.3C12.09,12.69 12.09,13.33 11.7,13.72L8.42,17H5.59L9.58,13Z" />
 171     </SvgIcon>
 172 )
 173
 174 //https://pictogrammers.com/library/mdi/icon/chevron-double-right/
 175 export const DoubleRightArrows: IconType = (props: any) => (
 176     <SvgIcon {...props}>
 177         <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z" />
 178     </SvgIcon>
 179 )
 180
 181 export type IconType = React.SFC<{ className?: string; style?: object }>;
 182
 183 export const AddIcon: IconType = props => <Add {...props} />;
 184 export const AddFavoriteIcon: IconType = props => <StarBorder {...props} />;
 185 export const AdminMenuIcon: IconType = props => <Build {...props} />;
 186 export const AdvancedIcon: IconType = props => <SettingsApplications {...props} />;
 187 export const AttributesIcon: IconType = props => <ListAlt {...props} />;
 188 export const BackIcon: IconType = props => <ArrowBack {...props} />;
 189 export const CustomizeTableIcon: IconType = props => <Menu {...props} />;
 190 export const CommandIcon: IconType = props => <LastPage {...props} />;
 191 export const CopyIcon: IconType = props => <ContentCopy {...props} />;
 192 export const FileCopyIcon: IconType = props => <FileCopy {...props} />;
 193 export const CollectionIcon: IconType = props => <LibraryBooks {...props} />;
 194 export const CloseIcon: IconType = props => <Close {...props} />;
 195 export const CloudUploadIcon: IconType = props => <CloudUpload {...props} />;
 196 export const DefaultIcon: IconType = props => <RateReview {...props} />;
 197 export const DetailsIcon: IconType = props => <Info {...props} />;
 198 export const DirectoryIcon: IconType = props => <Folder {...props} />;
 199 export const DownloadIcon: IconType = props => <GetApp {...props} />;
 200 export const EditSavedQueryIcon: IconType = props => <Create {...props} />;
 201 export const ExpandIcon: IconType = props => <ExpandMoreIcon {...props} />;
 202 export const ErrorIcon: IconType = props => (
 203     <ErrorRoundedIcon
 204         style={{ color: "#ff0000" }}
 205         {...props}
 206     />
 207 );
 208 export const FavoriteIcon: IconType = props => <Star {...props} />;
 209 export const FileIcon: IconType = props => <DescriptionIcon {...props} />;
 210 export const HelpIcon: IconType = props => <Help {...props} />;
 211 export const HelpOutlineIcon: IconType = props => <HelpOutline {...props} />;
 212 export const ImportContactsIcon: IconType = props => <ImportContacts {...props} />;
 213 export const InfoIcon: IconType = props => <Info {...props} />;
 214 export const FileInputIcon: IconType = props => <InsertDriveFile {...props} />;
 215 export const KeyIcon: IconType = props => <VpnKey {...props} />;
 216 export const LogIcon: IconType = props => <SettingsEthernet {...props} />;
 217 export const MailIcon: IconType = props => <Mail {...props} />;
 218 export const MaximizeIcon: IconType = props => <FullscreenSharp {...props} />;
 219 export const ResourceIcon: IconType = props => <Memory {...props} />;
 220 export const UnMaximizeIcon: IconType = props => <FullscreenExitSharp {...props} />;
 221 export const MoreVerticalIcon: IconType = props => <MoreVert {...props} />;
 222 export const MoreHorizontalIcon: IconType = props => <MoreHoriz {...props} />;
 223 export const MoveToIcon: IconType = props => <Input {...props} />;
 224 export const NewProjectIcon: IconType = props => <CreateNewFolder {...props} />;
 225 export const NotificationIcon: IconType = props => <Notifications {...props} />;
 226 export const OpenIcon: IconType = props => <OpenInNew {...props} />;
 227 export const InputIcon: IconType = props => <MoveToInbox {...props} />;
 228 export const PaginationDownIcon: IconType = props => <ArrowDropDown {...props} />;
 229 export const PaginationLeftArrowIcon: IconType = props => <ChevronLeft {...props} />;
 230 export const PaginationRightArrowIcon: IconType = props => <ChevronRight {...props} />;
 231 export const ProcessIcon: IconType = props => <Settings {...props} />;
 232 export const ProjectIcon: IconType = props => <Folder {...props} />;
 233 export const FilterGroupIcon: IconType = props => <Pageview {...props} />;
 234 export const ProjectsIcon: IconType = props => <Inbox {...props} />;
 235 export const ProvenanceGraphIcon: IconType = props => <DeviceHub {...props} />;
 236 export const RemoveIcon: IconType = props => <Delete {...props} />;
 237 export const RemoveFavoriteIcon: IconType = props => <Star {...props} />;
 238 export const PublicFavoriteIcon: IconType = props => <Public {...props} />;
 239 export const RenameIcon: IconType = props => <Edit {...props} />;
 240 export const RestoreVersionIcon: IconType = props => <FlipToFront {...props} />;
 241 export const RestoreFromTrashIcon: IconType = props => <RestoreFromTrash {...props} />;
 242 export const ReRunProcessIcon: IconType = props => <Cached {...props} />;
 243 export const SearchIcon: IconType = props => <Search {...props} />;
 244 export const ShareIcon: IconType = props => <PersonAdd {...props} />;
 245 export const ShareMeIcon: IconType = props => <People {...props} />;
 246 export const SidePanelRightArrowIcon: IconType = props => <PlayArrow {...props} />;
 247 export const TrashIcon: IconType = props => <Delete {...props} />;
 248 export const UserPanelIcon: IconType = props => <Person {...props} />;
 249 export const UsedByIcon: IconType = props => <Folder {...props} />;
 250 export const WorkflowIcon: IconType = props => <Code {...props} />;
 251 export const WarningIcon: IconType = props => (
 252     <Warning
 253         style={{ color: "#fbc02d", height: "30px", width: "30px" }}
 254         {...props}
 255     />
 256 );
 257 export const Link: IconType = props => <LinkOutlined {...props} />;
 258 export const FolderSharedIcon: IconType = props => <FolderShared {...props} />;
 259 export const CanReadIcon: IconType = props => <RemoveRedEye {...props} />;
 260 export const CanWriteIcon: IconType = props => <Edit {...props} />;
 261 export const CanManageIcon: IconType = props => <Computer {...props} />;
 262 export const AddUserIcon: IconType = props => <PersonAdd {...props} />;
 263 export const WordWrapOnIcon: IconType = props => <WrapText {...props} />;
 264 export const WordWrapOffIcon: IconType = props => <FormatAlignLeft {...props} />;
 265 export const TextIncreaseIcon: IconType = props => <TextIncrease {...props} />;
 266 export const TextDecreaseIcon: IconType = props => <TextDecrease {...props} />;
 267 export const DeactivateUserIcon: IconType = props => <NotInterested {...props} />;
 268 export const LoginAsIcon: IconType = props => <ExitToApp {...props} />;
 269 export const ActiveIcon: IconType = props => <CheckCircleOutline {...props} />;
 270 export const SetupIcon: IconType = props => <RemoveCircleOutline {...props} />;
 271 export const InactiveIcon: IconType = props => <NotInterested {...props} />;
 272 export const ImageIcon: IconType = props => <Image {...props} />;
 273 export const StartIcon: IconType = props => <PlayArrow {...props} />;
 274 export const StopIcon: IconType = props => <Stop {...props} />;
 275 export const SelectAllIcon: IconType = props => <CheckboxMultipleOutline {...props} />;
 276 export const SelectNoneIcon: IconType = props => <CheckboxMultipleBlankOutline {...props} />;