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

made proof-of-concept for image previewing

Browse source
This commit is contained in:
Fedor Katurov 2020-10-27 15:05:42 +07:00
parent 4da04bb970
commit dfb66e3742
2 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/node/NodeImageSlideBlock/index.tsx
View file

@ -77,8 +77,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
]);
// update outside hooks
useEffect(() => updateLayout(), [loaded, height, images]);
useEffect(() => updateSizes(), [refs, current, loaded, images]);
useEffect(updateLayout, [loaded, height, images]);
useEffect(updateSizes, [refs, current, loaded, images]);
useEffect(() => {
const timeout = setTimeout(updateLayout, 300);
@ -300,14 +300,26 @@ const NodeImageSlideBlock: FC<IProps> = ({
ref={setRef(index)}
key={node.updated_at + file.id}
>
<img
{
// check if metadata is available, then show loader
}
<svg
viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
style={{ maxHeight: max_height }}
/>
style={{ maxHeight: max_height, width: file.metadata.width }}
>
<rect fill="blue" width="100%" height="100%" />
</svg>
{
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
style={{ maxHeight: max_height, position: 'absolute', width: 100, top: '50%' }}
/>
}
</div>
))}
</div>

1
src/components/node/NodeImageSlideBlock/styles.scss
View file

@ -155,7 +155,6 @@
align-items: center;
justify-content: center;
background: $content_bg;
z-index: 0;
pointer-events: none;
touch-action: none;
transition: opacity 2s;