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

arrows markup

Browse source
This commit is contained in:
Fedor Katurov 2020-04-27 19:20:02 +07:00
parent 25a59bf944
commit ada2e59676
2 changed files with 114 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,7 @@ import { PRESETS } from '~/constants/urls';
import { LoaderCircle } from '~/components/input/LoaderCircle';
import { throttle } from 'throttle-debounce';
import * as MODAL_ACTIONS from '~/redux/modal/actions';
import { Icon } from '~/components/input/Icon';
interface IProps {
is_loading: boolean;
@ -183,7 +184,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
setIsDragging(false);
normalizeOffset();
if (Math.abs(new Date().getTime() - drag_start) < 200 && initial_x - getX(event) < 50) {
if (Math.abs(new Date().getTime() - drag_start) < 200 && initial_x - getX(event) < 20) {
onOpenPhotoSwipe();
}
},
@ -233,57 +234,77 @@ const NodeImageSlideBlock: FC<IProps> = ({
);
return (
<div className={classNames(styles.wrap, { [styles.is_loading]: is_loading })} ref={wrap}>
<div
className={classNames(styles.placeholder, {
[styles.is_loading]: is_loading || !loaded[current],
})}
>
<div>
<LoaderCircle size={96} />
<div className={styles.wrap}>
<div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
<div
className={classNames(styles.placeholder, {
[styles.is_loading]: is_loading || !loaded[current],
})}
>
<div>
<LoaderCircle size={96} />
</div>
</div>
</div>
<div
className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
style={{
height,
transform: `translate(${offset}px, 0)`,
width: `${images.length * 100}%`,
}}
onMouseDown={startDragging}
onTouchStart={startDragging}
ref={slide}
>
{!is_loading &&
images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)}
key={node.updated_at + file.id}
>
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
style={{ maxHeight: max_height }}
/>
</div>
))}
</div>
<div
className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
style={{
height,
transform: `translate(${offset}px, 0)`,
width: `${images.length * 100}%`,
}}
onMouseDown={startDragging}
onTouchStart={startDragging}
ref={slide}
>
{!is_loading &&
images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)}
key={node.updated_at + file.id}
>
<img
className={styles.image}
src={getURL(file, PRESETS['1600'])}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
style={{ maxHeight: max_height }}
/>
</div>
))}
</div>
{!is_loading && (
{images.length > 1 && (
<div className={styles.image_count}>
{current + 1}
<small> / </small>
{images.length}
</div>
)}
{/*
!is_loading && (
<ImageSwitcher
total={images.length}
current={current}
onChange={changeCurrent}
loaded={loaded}
/>
)}
)
*/}
</div>
<div className={classNames(styles.image_arrow)}>
<Icon icon="left" size={40} />
</div>
<div className={classNames(styles.image_arrow, styles.image_arrow_right)}>
<Icon icon="right" size={40} />
</div>
</div>
);
};

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

@ -1,4 +1,8 @@
.wrap {
position: relative;
}
.cutter {
overflow: hidden;
position: relative;
min-width: 0;
@ -52,12 +56,58 @@
align-items: center;
justify-content: center;
padding: 0 $gap / 2;
position: relative;
&:global(.is_active) {
opacity: 1;
}
}
.image_count {
position: absolute;
color: transparentize(white, 0.5);
bottom: $gap * 3;
right: 50%;
padding: $gap / 2 $gap * 1.2;
border-radius: 20px;
background: $content_bg;
font: $font_14_semibold;
transform: translate(50%, 0);
display: flex;
align-items: center;
justify-content: center;
user-select: none;
small {
font-size: 0.8em;
padding: 0 5px;
}
}
.image_arrow {
position: absolute;
left: -$gap;
top: 50%;
width: 40px;
height: 64px;
border-radius: $radius;
display: flex;
align-items: center;
justify-content: center;
transform: translate(-100%, -50%);
&_right {
right: -$gap;
left: auto;
transform: translate(100%, -50%);
}
svg {
position: relative;
left: -2px;
}
}
.placeholder {
position: absolute;
width: 100%;