From f5ca7350499ccdeab2aed97beceebcf2db6726c5 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 14 Dec 2022 16:18:36 +0600 Subject: [PATCH] added hoverable hints --- .../comment/CommentImageGrid/index.tsx | 13 +- .../CommentImageGrid/styles.module.scss | 4 + src/components/common/Hoverable/index.tsx | 30 +++ .../common/Hoverable/styles.module.scss | 43 ++++ src/components/node/NodeRelated/index.tsx | 8 +- src/components/node/NodeRelatedItem/index.tsx | 2 +- src/sprites/Sprites.tsx | 207 ++++++++++++++++-- 7 files changed, 278 insertions(+), 29 deletions(-) create mode 100644 src/components/common/Hoverable/index.tsx create mode 100644 src/components/common/Hoverable/styles.module.scss diff --git a/src/components/comment/CommentImageGrid/index.tsx b/src/components/comment/CommentImageGrid/index.tsx index b6ca70f0..179f8ca8 100644 --- a/src/components/comment/CommentImageGrid/index.tsx +++ b/src/components/comment/CommentImageGrid/index.tsx @@ -2,6 +2,8 @@ import { FC } from 'react'; import classNames from 'classnames'; +import { Hoverable } from '~/components/common/Hoverable'; +import { Icon } from '~/components/input/Icon'; import { imagePresets } from '~/constants/urls'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; @@ -24,8 +26,13 @@ const CommentImageGrid: FC = ({ files, onClick }) => { [styles.multiple]: files.length > 1, })} > - {files.map((file, index) => ( -
onClick(file)}> + {files.map((file) => ( + onClick(file)} + className={styles.item} + icon={} + > = ({ files, onClick }) => { className={styles.image} sizes={files.length > 1 ? singleSrcSet : multipleSrcSet} /> -
+ ))} ); diff --git a/src/components/comment/CommentImageGrid/styles.module.scss b/src/components/comment/CommentImageGrid/styles.module.scss index e7525fe8..2440b3f7 100644 --- a/src/components/comment/CommentImageGrid/styles.module.scss +++ b/src/components/comment/CommentImageGrid/styles.module.scss @@ -30,3 +30,7 @@ max-inline-size: 250px; } } + +.item { + border-radius: $radius; +} diff --git a/src/components/common/Hoverable/index.tsx b/src/components/common/Hoverable/index.tsx new file mode 100644 index 00000000..e628bfae --- /dev/null +++ b/src/components/common/Hoverable/index.tsx @@ -0,0 +1,30 @@ +import React, { FC, ReactNode } from 'react'; + +import classNames from 'classnames'; + +import { DivProps } from '~/utils/types'; + +import styles from './styles.module.scss'; + +interface HoverableProps extends DivProps { + icon?: ReactNode; +} + +const Hoverable: FC = ({ + children, + className, + icon, + ...rest +}) => ( +
+ {icon &&
{icon}
} + {children} +
+); + +export { Hoverable }; diff --git a/src/components/common/Hoverable/styles.module.scss b/src/components/common/Hoverable/styles.module.scss new file mode 100644 index 00000000..d6b48675 --- /dev/null +++ b/src/components/common/Hoverable/styles.module.scss @@ -0,0 +1,43 @@ +@import 'src/styles/variables'; + +.hoverable { + position: relative; + cursor: pointer; + + &::after { + content: ' '; + position: absolute; + inset: 0; + border-radius: $radius; + opacity: 0; + transition: all 100ms; + box-shadow: inset $color_primary 0 0 0 2px; + touch-action: none; + pointer-events: none; + } + + &.with_icon::after { + background: linear-gradient(325deg, $color_primary 20px, transparent 100px); + } + + &:hover { + z-index: 10; + transition: all 100ms; + + &::after { + opacity: 1; + } + } +} + +.icon { + position: absolute; + bottom: 4px; + right: 4px; + z-index: 2; + opacity: 0; + + .hoverable:hover & { + opacity: 1; + } +} diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx index fc324707..6cce0818 100644 --- a/src/components/node/NodeRelated/index.tsx +++ b/src/components/node/NodeRelated/index.tsx @@ -1,5 +1,6 @@ import React, { FC, ReactElement } from 'react'; +import { Hoverable } from '~/components/common/Hoverable'; import { SubTitle } from '~/components/common/SubTitle'; import { Group } from '~/components/containers/Group'; import { NodeRelatedItem } from '~/components/node/NodeRelatedItem'; @@ -7,7 +8,6 @@ import { INode } from '~/types'; import styles from './styles.module.scss'; - interface IProps { title: ReactElement | string; items: Partial[]; @@ -19,8 +19,10 @@ const NodeRelated: FC = ({ title, items }) => { {title}
- {items.map(item => ( - + {items.map((item) => ( + + + ))}
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index cba4585b..d33693b8 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/src/components/node/NodeRelatedItem/index.tsx @@ -1,4 +1,4 @@ -import React, { FC, memo, useEffect, useMemo, useRef, useState } from 'react'; +import { FC, memo, useEffect, useMemo, useRef, useState } from 'react'; import classNames from 'classnames'; diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 18bee9f6..4e81bef7 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -15,9 +15,33 @@ const Sprites: FC = () => ( - - - + + + ( - - + + ( - - + + ( fill="currentColor" stroke="none" /> - - - + + + - - + + ( /> - - + + ( fill="currentColor" stroke="none" /> - - - + + + @@ -97,9 +233,33 @@ const Sprites: FC = () => ( fill="currentColor" stroke="none" /> - - - + + + @@ -190,6 +350,11 @@ const Sprites: FC = () => ( + + + + + @@ -423,8 +588,6 @@ const Sprites: FC = () => ( d="M11 13q.425 0 .713-.288Q12 12.425 12 12t-.287-.713Q11.425 11 11 11t-.712.287Q10 11.575 10 12t.288.712Q10.575 13 11 13Zm-4 8v-2l6-1V6.875q0-.375-.225-.675-.225-.3-.575-.35L7 5V3l5.5.9q1.1.2 1.8 1.025T15 6.85v12.8Zm-4 0v-2h2V5q0-.85.588-1.425Q6.175 3 7 3h10q.85 0 1.425.575Q19 4.15 19 5v14h2v2Zm4-2h10V5H7Z" /> - - );