refactor(lightbox): improve z-index stacking and add stop propagation (…

…#2497)
zer0-os · Dec 6, 2024 · 2aa9d76 · 2aa9d76
1 parent 2ee6beb
commit 2aa9d76
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/src/components/chat-view-container/chat-view.tsx b/src/components/chat-view-container/chat-view.tsx
@@ -107,7 +107,8 @@ export class ChatView extends React.Component<Properties, State> {
     this.setState({ lightboxMedia, lightboxStartIndex, isLightboxOpen: true });
   };
 
-  closeLightBox = () => {
+  closeLightBox = (e) => {
+    e?.stopPropagation?.();
     this.setState({ isLightboxOpen: false });
   };
 

diff --git a/src/components/lightbox/index.tsx b/src/components/lightbox/index.tsx
@@ -10,7 +10,7 @@ export interface LightboxProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   items: any[];
   startingIndex?: number;
-  onClose?: () => void;
+  onClose?: (e?: React.MouseEvent) => void;
   provider: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     fitWithinBox: (media: any) => any;
@@ -133,12 +133,28 @@ export const Lightbox = ({ items, startingIndex = 0, onClose, provider }: Lightb
       onMoveNextRequest={() => setIndex(getNextItemIndex(index))}
       toolbarButtons={[
         !isCurrentItemGif && (
-          <button key='copy' onClick={copyImage} className={styles.DownloadButton} aria-label='Copy image'>
+          <button
+            key='copy'
+            onClick={(e) => {
+              e.stopPropagation();
+              copyImage();
+            }}
+            className={styles.DownloadButton}
+            aria-label='Copy image'
+          >
             <IconCopy2 size={28} isFilled={isCopied} />
           </button>
         ),
         !isCurrentItemGif && (
-          <button key='download' onClick={downloadImage} className={styles.DownloadButton} aria-label='Download image'>
+          <button
+            key='download'
+            onClick={(e) => {
+              e.stopPropagation();
+              downloadImage();
+            }}
+            className={styles.DownloadButton}
+            aria-label='Download image'
+          >
             <IconDownload2 size={28} />
           </button>
         ),

diff --git a/src/components/lightbox/styles.module.scss b/src/components/lightbox/styles.module.scss
@@ -15,12 +15,23 @@
     }
 
     .ril__toolbar {
+      z-index: 10000;
       background: none;
     }
+
+    .ril__toolbarRightSide {
+      position: relative;
+      z-index: 10001;
+    }
+
+    .ril__outer {
+      z-index: 9999;
+    }
   }
 }
 
 .DownloadButton {
+  z-index: 10001;
   width: 40px;
   height: 35px;
   cursor: pointer;