diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx index 8593c2db..f511342b 100644 --- a/src/components/node/NodeImageSlideBlock/index.tsx +++ b/src/components/node/NodeImageSlideBlock/index.tsx @@ -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 = ({ 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 = ({ ); return ( -
-
-
- +
+
+
+
+ +
-
-
- {!is_loading && - images.map((file, index) => ( -
- -
- ))} -
+
+ {!is_loading && + images.map((file, index) => ( +
+ +
+ ))} +
- {!is_loading && ( + {images.length > 1 && ( +
+ {current + 1} + / + {images.length} +
+ )} + + {/* + !is_loading && ( - )} + ) + */} +
+ +
+ +
+ +
+ +
); }; diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss index 710854cb..eb064b21 100644 --- a/src/components/node/NodeImageSlideBlock/styles.scss +++ b/src/components/node/NodeImageSlideBlock/styles.scss @@ -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%;