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

added hoverable hints

Browse source
This commit is contained in:
Fedor Katurov 2022-12-14 16:18:36 +06:00
parent c888f13c60
commit f5ca735049
7 changed files with 278 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/comment/CommentImageGrid/index.tsx
View file

@ -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<CommentImageGridProps> = ({ files, onClick }) => {
[styles.multiple]: files.length > 1,
})}
>
{files.map((file, index) => (
<div key={file.id} onClick={() => onClick(file)}>
{files.map((file) => (
<Hoverable
key={file.id}
onClick={() => onClick(file)}
className={styles.item}
icon={<Icon icon="zoom" size={30} />}
>
<img
srcSet={getFileSrcSet(file)}
src={getURL(file, imagePresets['300'])}
@ -33,7 +40,7 @@ const CommentImageGrid: FC<CommentImageGridProps> = ({ files, onClick }) => {
className={styles.image}
sizes={files.length > 1 ? singleSrcSet : multipleSrcSet}
/>
</div>
</Hoverable>
))}
</div>
);

4
src/components/comment/CommentImageGrid/styles.module.scss
View file

@ -30,3 +30,7 @@
max-inline-size: 250px;
}
}
.item {
border-radius: $radius;
}

30
src/components/common/Hoverable/index.tsx Normal file
View file

@ -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<HoverableProps> = ({
children,
className,
icon,
...rest
}) => (
<div
{...rest}
className={classNames(styles.hoverable, className, {
[styles.with_icon]: !!icon,
})}
>
{icon && <div className={styles.icon}>{icon}</div>}
{children}
</div>
);
export { Hoverable };

43
src/components/common/Hoverable/styles.module.scss Normal file
View file

@ -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;
}
}

8
src/components/node/NodeRelated/index.tsx
View file

@ -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<INode>[];
@ -19,8 +19,10 @@ const NodeRelated: FC<IProps> = ({ title, items }) => {
<SubTitle className={styles.title}>{title}</SubTitle>
<div className={styles.grid}>
{items.map(item => (
<NodeRelatedItem item={item} key={item.id} />
{items.map((item) => (
<Hoverable key={item.id}>
<NodeRelatedItem item={item} />
</Hoverable>
))}
</div>
</Group>

2
src/components/node/NodeRelatedItem/index.tsx
View file

@ -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';

207
src/sprites/Sprites.tsx
View file

@ -15,9 +15,33 @@ const Sprites: FC = () => (
</defs>
<g id="cell-single" stroke="none">
<rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect
x="13.5"
y="2.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<rect
x="13.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<rect
x="2.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
@ -28,8 +52,24 @@ const Sprites: FC = () => (
</g>
<g id="cell-double-h" stroke="none">
<rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect
x="13.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<rect
x="2.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
@ -40,8 +80,24 @@ const Sprites: FC = () => (
</g>
<g id="cell-double-h-text" stroke="none">
<rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect
x="13.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<rect
x="2.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
@ -49,14 +105,54 @@ const Sprites: FC = () => (
fill="currentColor"
stroke="none"
/>
<rect x="4" y="4" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect x="4" y="6" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect x="4" y="8" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect
x="4"
y="4"
width="5"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
<rect
x="4"
y="6"
width="6"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
<rect
x="4"
y="8"
width="6"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
</g>
<g id="cell-double-v" stroke="none">
<rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect
x="13.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<rect
x="13.5"
y="2.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
@ -66,8 +162,24 @@ const Sprites: FC = () => (
/>
</g>
<g id="cell-double-v-text" stroke="none">
<rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
<rect
x="13.5"
y="13.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<rect
x="13.5"
y="2.5"
width="8"
height="8"
rx="1.5"
stroke="currentColor"
fill="none"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
@ -75,9 +187,33 @@ const Sprites: FC = () => (
fill="currentColor"
stroke="none"
/>
<rect x="4" y="15" width="3" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect x="4" y="17" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect x="4" y="19" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect
x="4"
y="15"
width="3"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
<rect
x="4"
y="17"
width="5"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
<rect
x="4"
y="19"
width="5"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
</g>
<g id="cell-quadro" stroke="none">
@ -97,9 +233,33 @@ const Sprites: FC = () => (
fill="currentColor"
stroke="none"
/>
<rect x="4" y="15" width="4" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect x="4" y="17" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect x="4" y="19" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
<rect
x="4"
y="15"
width="4"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
<rect
x="4"
y="17"
width="6"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
<rect
x="4"
y="19"
width="6"
height="1"
rx="0.5"
fill="currentColor"
stroke="none"
/>
</g>
<g id="play">
@ -190,6 +350,11 @@ const Sprites: FC = () => (
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />
</g>
<g id="zoom" stroke="none">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M3 21v-6h2v2.6l3.1-3.1 1.4 1.4L6.4 19H9v2Zm12 0v-2h2.6l-3.1-3.1 1.4-1.4 3.1 3.1V15h2v6ZM8.1 9.5 5 6.4V9H3V3h6v2H6.4l3.1 3.1Zm7.8 0-1.4-1.4L17.6 5H15V3h6v6h-2V6.4Z" />
</g>
<g id="profile" stroke="none">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
@ -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"
/>
</g>
</svg>
);