muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +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 // update outside hooks
useEffect(() => updateLayout(), [loaded, height, images]); useEffect(updateLayout, [loaded, height, images]);
useEffect(() => updateSizes(), [refs, current, loaded, images]); useEffect(updateSizes, [refs, current, loaded, images]);
useEffect(() => { useEffect(() => {
const timeout = setTimeout(updateLayout, 300); const timeout = setTimeout(updateLayout, 300);
@ -300,14 +300,26 @@ const NodeImageSlideBlock: FC<IProps> = ({
ref={setRef(index)} ref={setRef(index)}
key={node.updated_at + file.id} 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} className={styles.image}
src={getURL(file, PRESETS['1600'])} style={{ maxHeight: max_height, width: file.metadata.width }}
alt="" >
key={file.id} <rect fill="blue" width="100%" height="100%" />
onLoad={onImageLoad(index)} </svg>
style={{ maxHeight: max_height }} {
/> <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>
))} ))}
</div> </div>

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

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