🔎 Increase thumbnails size (#2556)

linagora · Oct 4, 2022 · 6e4e9b4 · 6e4e9b4
1 parent 369a871
commit 6e4e9b4
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/twake/frontend/src/app/components/file/file-component.tsx b/twake/frontend/src/app/components/file/file-component.tsx
@@ -30,6 +30,7 @@ type PropsType = {
   onRemove?: () => void;
   className?: string;
   large?: boolean;
+  xlarge?: boolean;
 };
 
 export default ({
@@ -43,6 +44,7 @@ export default ({
   status,
   onRemove,
   large,
+  xlarge,
 }: PropsType) => {
   const { companyId, workspaceId } = RouterService.getStateFromRoute();
   const [file, setFile] = useState<DataFileType>(_file);
@@ -109,13 +111,34 @@ export default ({
     }
   };
 
-  const computedWidth = file.thumbnail_ratio * 200;
+  let computedHeight = 200;
+  let computedWidth = file.thumbnail_ratio * 200;
   const isMediaFile = ['image', 'video'].includes(file.type);
 
+  if (xlarge) {
+    computedWidth = Math.max(
+      160,
+      Math.min(
+        Math.min(messageFile.metadata?.thumbnails?.[0]?.width || 600, 600),
+        file.thumbnail_ratio * document.body.clientHeight * 0.5,
+      ),
+    );
+    computedHeight = Math.max(
+      200,
+      Math.min(
+        Math.min(
+          messageFile.metadata?.thumbnails?.[0]?.height || 10000,
+          document.body.clientHeight * 0.5,
+        ),
+        computedWidth / file.thumbnail_ratio,
+      ),
+    );
+  }
+
   return (
     <div
       className={classNames(classNameArguments)}
-      style={large ? { width: computedWidth } : {}}
+      style={large ? { width: computedWidth, height: computedHeight } : {}}
       onClick={() => companyId && onClickFile()}
     >
       {large && <LargePreview file={file} />}

diff --git a/twake/frontend/src/app/components/file/file.scss b/twake/frontend/src/app/components/file/file.scss
@@ -14,8 +14,9 @@
   }
 
   &.large-view {
-    height: 200px;
-    max-width: 400px;
+    min-height: 200px;
+    max-height: 500px;
+    max-width: 90%;
     min-width: 160px;
     position: relative;
 

diff --git a/twake/frontend/src/app/views/applications/messages/message/parts/MessageAttachments.tsx b/twake/frontend/src/app/views/applications/messages/message/parts/MessageAttachments.tsx
@@ -37,13 +37,14 @@ export default () => {
             key={file.metadata?.external_id || file.id}
             type={'message'}
             file={file}
+            xlarge={files.length === 1 && (files[0].metadata?.thumbnails?.length || 0) > 0}
             large={
               //If all the documents are images
               files.length <= 6 &&
               files.filter(
                 file =>
                   file.metadata?.source === 'internal' &&
-                  (file.metadata?.thumbnails?.length || 0) > 0
+                  (file.metadata?.thumbnails?.length || 0) > 0,
               ).length === files.length
             }
             onRemove={() => setFiles(files.filter(f => f.id !== file.id))}

diff --git a/.../frontend/src/app/views/applications/messages/message/parts/PossiblyPendingAttachment.tsx b/.../frontend/src/app/views/applications/messages/message/parts/PossiblyPendingAttachment.tsx
@@ -11,9 +11,10 @@ type PropsType = {
   onRemove?: () => void;
   type: 'input' | 'message';
   large?: boolean;
+  xlarge?: boolean;
 };
 
-export default ({ file, onRemove, type, large }: PropsType) => {
+export default ({ file, onRemove, type, large, xlarge }: PropsType) => {
   const { getOnePendingFile } = useUpload();
 
   const id =
@@ -68,6 +69,7 @@ export default ({ file, onRemove, type, large }: PropsType) => {
       file={formatedFile}
       messageFile={file}
       large={large}
+      xlarge={xlarge}
       status={status}
       progress={progress}
       onRemove={onRemove}