@material-ui/icons#HelpOutline TypeScript Examples

The following examples show how to use @material-ui/icons#HelpOutline. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TextWithTooltip.tsx    From shadowsocks-electron with GNU General Public License v3.0 6 votes vote down vote up 
export function TextWithTooltip(props: TextWithTooltipProps) {
  const {
    text,
    tooltip,
    icon
  } = props;
  const styles = useStyles();

  return (
    <div className={styles.root}>
      <span>{text}</span>
      {
        tooltip ? (
          <Tooltip arrow placement="top" title={<span>{tooltip}</span>}>
            { icon ? icon : <HelpOutline fontSize="small" /> }
          </Tooltip>
        ) : (
          icon || <HelpOutline fontSize="small" />
        )
      }
    </div>
  );
}
Example #2
Source File: TopButtons.tsx    From SeeQR with MIT License 6 votes vote down vote up 
TopButtons = ({
  selectedView,
  setSelectedView,
  toggleOpen,
}: TopButtonsProps) => {
  const toggleCompareView = () => {
    if (selectedView === 'compareView') return setSelectedView('queryView');
    return setSelectedView('compareView');
  };

  return (
    <Container>
      <Tooltip title="Help">
        <StyledIconButton onClick={() => setSelectedView('quickStartView')}>
          <HelpOutline fontSize="large" />
        </StyledIconButton>
      </Tooltip>
      <Tooltip title="Compare Queries">
        <StyledIconButton onClick={toggleCompareView}>
          <StyledCompareIcon
            fontSize="large"
            $isSelected={selectedView === 'compareView'}
          />
        </StyledIconButton>
      </Tooltip>
      <Tooltip title="Hide Sidebar">
        <StyledIconButton onClick={toggleOpen}>
          <ArrowBackIos fontSize="large" />
        </StyledIconButton>
      </Tooltip>
    </Container>
  );
}
Example #3
Source File: Header.tsx    From frontend with Apache License 2.0 4 votes vote down vote up 
Header: FunctionComponent = () => {
  const [avatarMenuRef, setAvatarMenuRef] = React.useState<null | HTMLElement>(null);
  const [helpMenuRef, setHelpMenuRef] = React.useState<null | HTMLElement>(null);
  const { loggedIn, user } = useUserState();
  const authDispatch = useUserDispatch();

  const styleMenuItem = {
    display: "flex",
    alignItems: "center",
  };

  const handleMenuClose = () => {
    setAvatarMenuRef(null);
    setHelpMenuRef(null);
  };

  const closeMenuAndOpenLink = () => {
    handleMenuClose();
    window.open("https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/new", "_blank");
  };

  const getVRTVersion = (): string => {
    //For cypress tests, window._env_ variable may be undefined, so return a dummy value.
    return window._env_ ? window._env_.VRT_VERSION : "5.0.0";
  };

  const renderHelpMenu = (
    <Menu
      anchorEl={helpMenuRef}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id="headerHelpMenu"
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={!!helpMenuRef}
      onClose={handleMenuClose}
    >
      <MenuItem onClick={handleMenuClose} >
        <GuidedTour />
      </MenuItem>
      <MenuItem onClick={closeMenuAndOpenLink} style={styleMenuItem}>
        <IconButton size="small">
          <GitHub />
        </IconButton>
        Open an issue in GitHub
      </MenuItem>
      <hr />
      <MenuItem style={{
        justifyContent: "center"
      }}>
        VRT Version : {getVRTVersion()}
      </MenuItem>
    </Menu >
  );

  const renderAvatarMenu = (
    <Menu
      anchorEl={avatarMenuRef}
      anchorOrigin={{ vertical: "top", horizontal: "right" }}
      id="headerAvatarMenu"
      keepMounted
      transformOrigin={{ vertical: "top", horizontal: "right" }}
      open={!!avatarMenuRef}
      onClose={handleMenuClose}
    >
      {user?.role === "admin" && (
        <MenuItem
          component={Link}
          to={routes.USER_LIST_PAGE}
          onClick={handleMenuClose}
          style={styleMenuItem}
        >
          <IconButton size="small">
            <People />
          </IconButton>
          Users
        </MenuItem>
      )}
      <MenuItem
        component={Link}
        to={routes.PROJECT_LIST_PAGE}
        onClick={handleMenuClose}
        style={styleMenuItem}
      >
        <IconButton size="small">
          <AllInbox />
        </IconButton>
        Projects
      </MenuItem>
      <MenuItem
        component={Link}
        to={routes.PROFILE_PAGE}
        onClick={handleMenuClose}
        style={styleMenuItem}
      >
        <IconButton size="small">
          <Face />
        </IconButton>
        Profile
      </MenuItem>
      <MenuItem
        onClick={() => {
          handleMenuClose();
          logout(authDispatch);
        }}
        data-testid="logoutBtn"
      >
        <IconButton size="small">
          <SettingsPower />
        </IconButton>
        Logout
      </MenuItem>
    </Menu>
  );

  return (
    <React.Fragment>
      <AppBar position="static" color="default">
        <Toolbar>
          <Grid container justifyContent="space-between" alignItems="center">
            <Grid item>
              <Link to="/">
                <img src={logo} width="60" height="60" alt="logo" />
              </Link>
            </Grid>
            <Grid item>
              <Grid
                container
                justifyContent="space-between"
                alignItems="center"
              >
                <IconButton onClick={(event: React.MouseEvent<HTMLElement>) =>
                  setHelpMenuRef(event.currentTarget)
                }>
                  <Avatar>
                    <HelpOutline />
                  </Avatar>
                </IconButton>
                {loggedIn && (
                  <IconButton
                    onClick={(event: React.MouseEvent<HTMLElement>) =>
                      setAvatarMenuRef(event.currentTarget)
                    }
                  >
                    <Avatar>{`${user?.firstName[0]}${user?.lastName[0]}`}</Avatar>
                  </IconButton>
                )}
              </Grid>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
      {renderAvatarMenu}
      {renderHelpMenu}
    </React.Fragment>
  );
}