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