Browse Source

Fix tooltips for upvotes and create post buttons

pull/1/head
GreatBearShark 1 year ago
parent
commit
6b39e8a787
  1. 12
      src/StyledLink.tsx
  2. 9
      src/components/Tooltip.tsx
  3. 33
      src/components/community.tsx
  4. 21
      src/components/elements/Button.tsx
  5. 18
      src/components/main.tsx
  6. 56
      src/components/post-listing.tsx

12
src/StyledLink.tsx

@ -1,7 +1,11 @@
import React from 'react';
import React, { Ref } from 'react';
import { Link, LinkProps } from 'react-router-dom';
import { Link as ThemeLink, LinkProps as ThemeLinkProps } from 'theme-ui';
export default function StyledLink(props: LinkProps & ThemeLinkProps) {
return <ThemeLink as={Link} {...props} />;
}
const StyledLink = React.forwardRef(
(props: LinkProps & ThemeLinkProps, ref: Ref<HTMLAnchorElement>) => {
return <ThemeLink as={Link} ref={ref} {...props} />;
}
);
export default StyledLink;

9
src/components/Tooltip.tsx

@ -158,9 +158,14 @@ const TriangleTooltip = React.forwardRef(
const Tooltip = ({
style,
'aria-label': ariaLabel,
label,
...props
}: { style?: React.CSSProperties; 'aria-label': string } & TooltipProps) => {
return <TriangleTooltip aria-label={ariaLabel} {...props} />;
}: {
style?: React.CSSProperties;
label: string;
'aria-label': string;
} & TooltipProps) => {
return <TriangleTooltip label={label} aria-label={ariaLabel} {...props} />;
};
export default Tooltip;

33
src/components/community.tsx

@ -61,6 +61,7 @@ import Block, { Flex } from './elements/Block';
import { Box, Heading, Text } from 'theme-ui';
import Header, { Separator } from './Header';
import StyledLink from '../StyledLink';
import Tooltip from './Tooltip';
interface State {
community: CommunityI;
@ -203,6 +204,20 @@ export class BaseCommunity extends Component<any, State> {
render() {
const isMobile = window.innerWidth < 992;
// only show tooltip on smaller screens
const TooltipWrapper = isMobile
? props => (
<Tooltip
label={i18n.t('create_post')}
aria-label={`${i18n.t('create_post')} - ${
this.state.community.name
}`}
{...props}
/>
)
: props => <div {...props} />;
return (
<div className="container">
<DocumentTitle
@ -245,14 +260,16 @@ export class BaseCommunity extends Component<any, State> {
</Button>
)}
<Separator />
<ResponsiveButton
as={StyledLink}
to={`/create_post?community=${this.state.community.name}`}
variant="primary"
mobileText={<Icon name="plus" />}
>
{i18n.t('create_post')}
</ResponsiveButton>
<TooltipWrapper>
<ResponsiveButton
as={StyledLink}
to={`/create_post?community=${this.state.community.name}`}
variant="primary"
mobileText={<Icon name="plus" />}
>
{i18n.t('create_post')}
</ResponsiveButton>
</TooltipWrapper>
</Flex>
</Header>
</Block>

21
src/components/elements/Button.tsx

@ -1,4 +1,4 @@
import React from 'react';
import React, { Ref } from 'react';
import { Button as ThemeButton, ButtonProps } from 'theme-ui';
import useMediaQuery from '../../hooks/useMediaQuery';
@ -54,9 +54,16 @@ const Button = React.forwardRef(
export default Button;
export function ResponsiveButton({ mobileText, children, ...props }) {
const isMobile = useMediaQuery('(max-width: 992px)');
return (
<Button {...props}>{isMobile && mobileText ? mobileText : children}</Button>
);
}
export const ResponsiveButton = React.forwardRef(
(
{ mobileText, children, ...props }: CustomButtonProps & any,
ref: Ref<HTMLUnknownElement>
) => {
const isMobile = useMediaQuery('(max-width: 992px)');
return (
<Button ref={ref} {...props}>
{isMobile && mobileText ? mobileText : children}
</Button>
);
}
);

18
src/components/main.tsx

@ -72,6 +72,7 @@ import Block from './elements/Block';
import Spinner, { SpinnerSection } from './Spinner';
import { useInterval } from '../hooks/useInterval';
import StyledLink from '../StyledLink';
import Tooltip from './Tooltip';
interface MainState {
subscribedCommunities: Array<CommunityUser>;
@ -586,13 +587,18 @@ class Main extends Component<MainProps & RouteComponentProps, MainState> {
{isMobile && (
<Block marginLeft="auto">
<Link to="/create_post">
<Button
variant="primary"
title={i18n.t('create_post')}
css={{ paddingBottom: '10px' }}
<Tooltip
label={i18n.t('create_post')}
aria-label={i18n.t('create_post')}
>
<Icon name="plus" className="icon custom-icon" />
</Button>
<Button
variant="primary"
title={i18n.t('create_post')}
css={{ paddingBottom: '10px' }}
>
<Icon name="plus" className="icon custom-icon" />
</Button>
</Tooltip>
</Link>
</Block>
)}

56
src/components/post-listing.tsx

@ -210,43 +210,47 @@ export const VoteButton = ({
if (voteType === VoteButtonTypes.Upvote) {
return (
<Tooltip aria-label={i18n.t('upvote')} label={i18n.t('upvote')}>
<Button
as="button"
p={1}
backgroundColor="transparent"
// color="text"
onClick={onClick}
data-tippy-content={i18n.t('upvote')}
color={my_vote === 1 ? upvoteColor : 'text'}
css={{
':hover': {
backgroundColor: 'transparent',
color: upvoteColor,
},
}}
{...props}
>
<Icon name="upvote" className="icon upvote" />
</Button>
</Tooltip>
);
}
return (
<Tooltip label={i18n.t('downvote')} aria-label={i18n.t('downvote')}>
<Button
as="button"
p={1}
backgroundColor="transparent"
// color="text"
onClick={onClick}
data-tippy-content={i18n.t('upvote')}
color={my_vote === 1 ? upvoteColor : 'text'}
data-tippy-content={i18n.t('downvote')}
color={my_vote === -1 ? downvoteColor : 'text'}
css={{
':hover': {
backgroundColor: 'transparent',
color: upvoteColor,
color: downvoteColor,
},
}}
{...props}
>
<Icon name="upvote" className="icon upvote" />
<Icon name="downvote" className="icon downvote" />
</Button>
);
}
return (
<Button
p={1}
backgroundColor="transparent"
onClick={onClick}
data-tippy-content={i18n.t('downvote')}
color={my_vote === -1 ? downvoteColor : 'text'}
css={{
':hover': {
backgroundColor: 'transparent',
color: downvoteColor,
},
}}
>
<Icon name="downvote" className="icon downvote" />
</Button>
</Tooltip>
);
};

Loading…
Cancel
Save