From 4cd8f4a94cad5bc5e8fe8c456c87eefbcf692a84 Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 19 Aug 2022 12:15:22 +0530 Subject: [PATCH 1/4] Open image in lightbox (#767) * Add lightbox * Fix vertical media height (#467) * Update dialog animation * Fix overlay opacity * Fix dialog animation * Update open in new tab icon --- public/res/ic/outlined/external.svg | 14 ++--- src/app/atoms/modal/RawModal.jsx | 1 - src/app/atoms/modal/RawModal.scss | 51 ++++++++++--------- .../image-lightbox/ImageLightbox.jsx | 47 +++++++++++++++++ .../image-lightbox/ImageLightbox.scss | 50 ++++++++++++++++++ src/app/molecules/media/Media.jsx | 42 ++++++++++++--- src/app/molecules/media/Media.scss | 7 +++ src/index.scss | 5 +- 8 files changed, 173 insertions(+), 44 deletions(-) create mode 100644 src/app/molecules/image-lightbox/ImageLightbox.jsx create mode 100644 src/app/molecules/image-lightbox/ImageLightbox.scss diff --git a/public/res/ic/outlined/external.svg b/public/res/ic/outlined/external.svg index 92b007cc..adade1bd 100644 --- a/public/res/ic/outlined/external.svg +++ b/public/res/ic/outlined/external.svg @@ -1,12 +1,4 @@ - - - - - - - - - - + + + diff --git a/src/app/atoms/modal/RawModal.jsx b/src/app/atoms/modal/RawModal.jsx index 306d7d1b..450be0e0 100644 --- a/src/app/atoms/modal/RawModal.jsx +++ b/src/app/atoms/modal/RawModal.jsx @@ -42,7 +42,6 @@ function RawModal({ shouldCloseOnEsc={closeFromOutside} shouldCloseOnOverlayClick={closeFromOutside} shouldReturnFocusAfterClose={false} - closeTimeoutMS={300} > {children} diff --git a/src/app/atoms/modal/RawModal.scss b/src/app/atoms/modal/RawModal.scss index 72a64d76..80458752 100644 --- a/src/app/atoms/modal/RawModal.scss +++ b/src/app/atoms/modal/RawModal.scss @@ -1,27 +1,3 @@ -.ReactModal__Overlay { - opacity: 0; - transition: opacity 200ms var(--fluid-slide-up); -} -.ReactModal__Overlay--after-open{ - opacity: 1; -} -.ReactModal__Overlay--before-close{ - opacity: 0; -} - -.ReactModal__Content { - transform: translateY(100%); - transition: transform 200ms var(--fluid-slide-up); -} - -.ReactModal__Content--after-open{ - transform: translateY(0); -} - -.ReactModal__Content--before-close{ - transform: translateY(100%); -} - .raw-modal { --small-modal-width: 525px; --medium-modal-width: 712px; @@ -60,4 +36,31 @@ height: 100%; background-color: var(--bg-overlay); } +} + +.ReactModal__Overlay { + animation: raw-modal--overlay 150ms; +} + +.ReactModal__Content { + animation: raw-modal--content 150ms; +} + +@keyframes raw-modal--content { + 0% { + transform: translateY(100px); + opacity: .5; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +@keyframes raw-modal--overlay { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } \ No newline at end of file diff --git a/src/app/molecules/image-lightbox/ImageLightbox.jsx b/src/app/molecules/image-lightbox/ImageLightbox.jsx new file mode 100644 index 00000000..c1c45db8 --- /dev/null +++ b/src/app/molecules/image-lightbox/ImageLightbox.jsx @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './ImageLightbox.scss'; +import FileSaver from 'file-saver'; + +import Text from '../../atoms/text/Text'; +import RawModal from '../../atoms/modal/RawModal'; +import IconButton from '../../atoms/button/IconButton'; + +import DownloadSVG from '../../../../public/res/ic/outlined/download.svg'; +import ExternalSVG from '../../../../public/res/ic/outlined/external.svg'; + +function ImageLightbox({ + url, alt, isOpen, onRequestClose, +}) { + const handleDownload = () => { + FileSaver.saveAs(url, alt); + }; + + return ( + +
+ {alt} + window.open(url)} size="small" src={ExternalSVG} /> + +
+
+ {alt} +
+ + ); +} + +ImageLightbox.propTypes = { + url: PropTypes.string.isRequired, + alt: PropTypes.string.isRequired, + isOpen: PropTypes.bool.isRequired, + onRequestClose: PropTypes.func.isRequired, +}; + +export default ImageLightbox; diff --git a/src/app/molecules/image-lightbox/ImageLightbox.scss b/src/app/molecules/image-lightbox/ImageLightbox.scss new file mode 100644 index 00000000..5a900b98 --- /dev/null +++ b/src/app/molecules/image-lightbox/ImageLightbox.scss @@ -0,0 +1,50 @@ +@use '../../partials/flex'; +@use '../../partials/text'; + +.image-lightbox__modal { + box-shadow: none; + width: unset; + gap: var(--sp-normal); + + border-radius: 0; + pointer-events: none; + + & .text { + color: white; + } + & .ic-raw { + background-color: white; + } +} + +.image-lightbox__overlay { + background-color: var(--bg-overlay-low); +} + + +.image-lightbox__header > *, +.image-lightbox__content > * { + pointer-events: all; +} +.image-lightbox__header { + display: flex; + align-items: center; + + & > .text { + @extend .cp-fx__item-one; + @extend .cp-txt__ellipsis; + } +} +.image-lightbox__content { + display: flex; + justify-content: center; + max-height: 90vh; + + & img { + background-color: black; + object-fit: contain; + max-width: 100%; + max-height: 100%; + border-radius: var(--bo-radius); + } +} \ No newline at end of file diff --git a/src/app/molecules/media/Media.jsx b/src/app/molecules/media/Media.jsx index d7ba3854..e2b61775 100644 --- a/src/app/molecules/media/Media.jsx +++ b/src/app/molecules/media/Media.jsx @@ -8,6 +8,7 @@ import { BlurhashCanvas } from 'react-blurhash'; import Text from '../../atoms/text/Text'; import IconButton from '../../atoms/button/IconButton'; import Spinner from '../../atoms/spinner/Spinner'; +import ImageLightbox from '../image-lightbox/ImageLightbox'; import DownloadSVG from '../../../../public/res/ic/outlined/download.svg'; import ExternalSVG from '../../../../public/res/ic/outlined/external.svg'; @@ -124,6 +125,7 @@ function Image({ }) { const [url, setUrl] = useState(null); const [blur, setBlur] = useState(true); + const [lightbox, setLightbox] = useState(false); useEffect(() => { let unmounted = false; @@ -138,14 +140,42 @@ function Image({ }; }, []); + const toggleLightbox = () => { + if (!url) return; + setLightbox(!lightbox); + }; + return ( -
- -
- { blurhash && blur && } - { url !== null && setBlur(false)} src={url || link} alt={name} />} + <> +
+
+ { blurhash && blur && } + { url !== null && ( + setBlur(false)} + src={url || link} + alt={name} + /> + )} +
-
+ {url && ( + + )} + ); } Image.defaultProps = { diff --git a/src/app/molecules/media/Media.scss b/src/app/molecules/media/Media.scss index 7c73305a..8d98c428 100644 --- a/src/app/molecules/media/Media.scss +++ b/src/app/molecules/media/Media.scss @@ -62,6 +62,13 @@ margin: 0 !important; } } +.image-container { + max-height: 460px; + img { + cursor: pointer; + object-fit: cover; + } +} .video-container { position: relative; diff --git a/src/index.scss b/src/index.scss index 3a4707ca..39d0612b 100644 --- a/src/index.scss +++ b/src/index.scss @@ -105,7 +105,7 @@ /* shadow and overlay */ --bg-overlay: rgba(0, 0, 0, 20%); - --bg-overlay-low: rgba(0, 0, 0, 85%); + --bg-overlay-low: rgba(0, 0, 0, 50%); --bs-popup: 0 0 16px rgba(0, 0, 0, 10%); @@ -264,7 +264,8 @@ } /* shadow and overlay */ - --bg-overlay: rgba(0, 0, 0, 50%); + --bg-overlay: rgba(0, 0, 0, 60%); + --bg-overlay-low: rgba(0, 0, 0, 80%); --bs-popup: 0 0 16px rgba(0, 0, 0, 25%); From 2f2680be3ccf90171dfcaec4f0aefed6ab45059f Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 19 Aug 2022 13:57:24 +0530 Subject: [PATCH 2/4] Fix minor css bugs --- src/app/molecules/image-lightbox/ImageLightbox.scss | 2 +- src/app/organisms/room/RoomViewInput.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/molecules/image-lightbox/ImageLightbox.scss b/src/app/molecules/image-lightbox/ImageLightbox.scss index 5a900b98..05520c86 100644 --- a/src/app/molecules/image-lightbox/ImageLightbox.scss +++ b/src/app/molecules/image-lightbox/ImageLightbox.scss @@ -41,7 +41,7 @@ max-height: 90vh; & img { - background-color: black; + background-color: var(--bg-surface-low); object-fit: contain; max-width: 100%; max-height: 100%; diff --git a/src/app/organisms/room/RoomViewInput.scss b/src/app/organisms/room/RoomViewInput.scss index 598c5274..9fb7c4de 100644 --- a/src/app/organisms/room/RoomViewInput.scss +++ b/src/app/organisms/room/RoomViewInput.scss @@ -70,6 +70,7 @@ &__preview > img { max-height: 40px; border-radius: var(--bo-radius); + max-width: 150px; } &__icon { padding: var(--sp-extra-tight); From 6f7934badc2f2e25ed681fea3523d6a0244dca1b Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Fri, 19 Aug 2022 15:19:12 +0530 Subject: [PATCH 3/4] Fix more css bugs --- src/app/atoms/modal/RawModal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/atoms/modal/RawModal.scss b/src/app/atoms/modal/RawModal.scss index 80458752..d612a4bc 100644 --- a/src/app/atoms/modal/RawModal.scss +++ b/src/app/atoms/modal/RawModal.scss @@ -3,7 +3,7 @@ --medium-modal-width: 712px; --large-modal-width: 1024px; - + position: relative; width: 100%; max-height: 100%; border-radius: var(--bo-radius); @@ -63,4 +63,4 @@ 100% { opacity: 1; } -} \ No newline at end of file +} From 1deef51df0c92d4c8394cb6d4c76aaf2ea473f32 Mon Sep 17 00:00:00 2001 From: jameskitt616 <52933658+jameskitt616@users.noreply.github.com> Date: Sat, 20 Aug 2022 15:26:37 +0200 Subject: [PATCH 4/4] Add cancel edit-message on Escape Key press (#765) --- src/app/molecules/message/Message.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx index 1e5a006e..42344d75 100644 --- a/src/app/molecules/message/Message.jsx +++ b/src/app/molecules/message/Message.jsx @@ -290,6 +290,11 @@ function MessageEdit({ body, onSave, onCancel }) { }, []); const handleKeyDown = (e) => { + if (e.key === 'Escape') { + e.preventDefault(); + onCancel(); + } + if (e.key === 'Enter' && e.shiftKey === false) { e.preventDefault(); onSave(editInputRef.current.value);