muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

show like button to guests

Browse source
This commit is contained in:
Fedor Katurov 2023-10-30 17:37:31 +06:00
parent 8e40cf9885
commit 7e20975cb1
7 changed files with 149 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/node/NodeLikeButton/index.tsx Normal file
View file

@ -0,0 +1,38 @@
import React, { FC } from 'react';
import classNames from 'classnames';
import { Icon } from '~/components/input/Icon';
import styles from './styles.module.scss';
interface NodeLikeButtonProps {
active: boolean;
count?: number;
className?: string;
onClick: () => void;
}
const NodeLikeButton: FC<NodeLikeButtonProps> = ({
className,
active,
count,
onClick,
}) => (
<div
className={classNames(styles.like, className, {
[styles.is_liked]: active,
})}
>
{active ? (
<Icon icon="heart_full" size={24} onClick={onClick} />
) : (
<Icon icon="heart" size={24} onClick={onClick} />
)}
{!!count && count > 0 && <div className={styles.count}>{count}</div>}
</div>
);
export { NodeLikeButton };

72
src/components/node/NodeLikeButton/styles.module.scss Normal file
View file

@ -0,0 +1,72 @@
@import 'src/styles/variables';
@keyframes pulse {
0% {
transform: scale(1);
}
45% {
transform: scale(1);
}
60% {
transform: scale(1.4);
}
75% {
transform: scale(1);
}
90% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
.like {
transition: fill, stroke 0.25s;
will-change: transform;
position: relative;
flex: 0 0 32px;
fill: currentColor;
&.is_liked {
opacity: 1;
svg {
fill: $color_like;
}
.like_count {
color: $color_like;
}
}
&:hover {
fill: $color_like;
animation: pulse 0.75s infinite;
.count {
opacity: 0;
}
}
}
.count {
position: absolute;
font: $font_12_bold;
left: 16px;
bottom: 0;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
background: $content_bg_dark;
padding: 0 3px;
border-radius: 10px;
z-index: 3;
color: $gray_50;
pointer-events: none;
touch-action: none;
}

59
src/components/node/NodeTitle/index.tsx
View file

@ -1,14 +1,14 @@
import React, { memo, VFC } from 'react';
import { memo, VFC } from 'react';
import classNames from 'classnames';
import { Authorized } from '~/components/containers/Authorized';
import { Icon } from '~/components/input/Icon';
import { SeparatedMenu } from '~/components/menu/SeparatedMenu';
import { NodeEditMenu } from '~/components/node/NodeEditMenu';
import { Placeholder } from '~/components/placeholders/Placeholder';
import { getPrettyDate } from '~/utils/dom';
import { NodeLikeButton } from '../NodeLikeButton';
import styles from './styles.module.scss';
interface IProps {
@ -77,39 +77,28 @@ const NodeTitle: VFC<IProps> = memo(
)}
</div>
<Authorized>
<SeparatedMenu className={styles.buttons}>
{canEdit && (
<NodeEditMenu
className={styles.button}
canStar={canStar}
isHeroic={isHeroic}
isLocked={isLocked}
onStar={onStar}
onLock={onLock}
onEdit={onEdit}
/>
)}
<SeparatedMenu className={styles.buttons}>
{canEdit && (
<NodeEditMenu
className={styles.button}
canStar={canStar}
isHeroic={isHeroic}
isLocked={isLocked}
onStar={onStar}
onLock={onLock}
onEdit={onEdit}
/>
)}
{canLike && (
<div
className={classNames(styles.button, styles.like, {
[styles.is_liked]: isLiked,
})}
>
{isLiked ? (
<Icon icon="heart_full" size={24} onClick={onLike} />
) : (
<Icon icon="heart" size={24} onClick={onLike} />
)}
{!!likeCount && likeCount > 0 && (
<div className={styles.like_count}>{likeCount}</div>
)}
</div>
)}
</SeparatedMenu>
</Authorized>
{canLike && (
<NodeLikeButton
active={isLiked}
count={likeCount}
onClick={onLike}
className={styles.button}
/>
)}
</SeparatedMenu>
</div>
</div>
);

71
src/components/node/NodeTitle/styles.module.scss
View file

@ -59,77 +59,6 @@
min-width: 0;
}
@keyframes pulse {
0% {
transform: scale(1);
}
45% {
transform: scale(1);
}
60% {
transform: scale(1.4);
}
75% {
transform: scale(1);
}
90% {
transform: scale(1.4);
}
100% {
transform: scale(1);
}
}
.like {
transition: fill, stroke 0.25s;
will-change: transform;
position: relative;
flex: 0 0 32px;
fill: currentColor;
&.is_liked {
opacity: 1;
svg {
fill: $color_like;
}
.like_count {
color: $color_like;
}
}
&:hover {
fill: $color_like;
animation: pulse 0.75s infinite;
.like_count {
opacity: 0;
}
}
}
.like_count {
position: absolute;
font: $font_12_bold;
left: 16px;
bottom: 0;
opacity: 1;
transition: opacity 0.25s, color 0.25s;
background: $content_bg_dark;
padding: 0 3px;
border-radius: 10px;
z-index: 3;
color: $gray_50;
pointer-events: none;
touch-action: none;
}
.buttons {
margin-top: 12px;
margin-right: $gap;