feat: preview improvements (#989)

* feat: preview file on click

* fix: maintain aspect ratio of image when previewing

* fix: use min width instead of width

app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx

@@ -7,6 +7,7 @@ import { useEffect, useRef, useState } from 'preact/hooks'
 import { Icon, ICONS } from '@/Components/Icon'
 import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
 import { PopoverFileSubmenu } from './PopoverFileSubmenu'
+import { useFilePreviewModal } from '@/Components/Files/FilePreviewModalProvider'
 
 export const getFileIconComponent = (iconType: string, className: string) => {
   const IconComponent = ICONS[iconType as keyof typeof ICONS]
@@ -29,6 +30,8 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
   getIconType,
   closeOnBlur,
 }) => {
+  const filePreviewModal = useFilePreviewModal()
+
   const [fileName, setFileName] = useState(file.name)
   const [isRenamingFile, setIsRenamingFile] = useState(false)
   const itemRef = useRef<HTMLDivElement>(null)
@@ -65,13 +68,17 @@ export const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
     renameFile(file, fileName).catch(console.error)
   }
 
+  const clickHandler = () => {
+    filePreviewModal.activate(file)
+  }
+
   return (
     <div
       ref={itemRef}
       className="flex items-center justify-between p-3 focus:shadow-none"
       tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
     >
-      <div className="flex items-center">
+      <div onClick={clickHandler} className="flex items-center cursor-pointer">
         {getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
         <div className="flex flex-col mx-4">
           {isRenamingFile ? (

app/assets/javascripts/Components/Files/ImagePreview.tsx

@@ -1,6 +1,6 @@
 import { IconType } from '@standardnotes/snjs'
 import { FunctionComponent } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { useRef, useState } from 'preact/hooks'
 import { IconButton } from '../Button/IconButton'
 
 type Props = {
@@ -11,19 +11,16 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
   const initialImgHeightRef = useRef<number>()
 
   const [imageZoomPercent, setImageZoomPercent] = useState(100)
-  const [imageHeight, setImageHeight] = useState(initialImgHeightRef.current)
-
-  useEffect(() => {
-    if (initialImgHeightRef.current) {
-      setImageHeight(imageZoomPercent * (initialImgHeightRef.current / 100))
-    }
-  }, [imageZoomPercent])
 
   return (
     <div className="flex items-center justify-center w-full h-full overflow-auto">
       <img
         src={objectUrl}
-        height={imageHeight}
+        style={{
+          'min-width': '100%',
+          height: `${imageZoomPercent}%`,
+          'object-fit': 'contain',
+        }}
         ref={(imgElement) => {
           if (!initialImgHeightRef.current) {
             initialImgHeightRef.current = imgElement?.height
@@ -32,16 +29,6 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
       />
       <div className="flex items-center absolute bottom-6 py-1 px-3 bg-default border-1 border-solid border-main rounded">
         <span className="mr-1.5">Zoom:</span>
-        <IconButton
-          className="hover:bg-contrast p-1 rounded"
-          icon="add"
-          title="Zoom In"
-          focusable={true}
-          onClick={() => {
-            setImageZoomPercent((percent) => percent + 10)
-          }}
-        />
-        <span className="mx-2">{imageZoomPercent}%</span>
         <IconButton
           className="hover:bg-contrast p-1 rounded"
           icon={'subtract' as IconType}
@@ -58,6 +45,16 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
             })
           }}
         />
+        <span className="mx-2">{imageZoomPercent}%</span>
+        <IconButton
+          className="hover:bg-contrast p-1 rounded"
+          icon="add"
+          title="Zoom In"
+          focusable={true}
+          onClick={() => {
+            setImageZoomPercent((percent) => percent + 10)
+          }}
+        />
       </div>
     </div>
   )