Merge pull request #145 from UniRegensburg/141-feat-datei-vorschau-vo…

…llbildmodus add fullscreen option for pdf preview
UniRegensburg · Jan 23, 2024 · 113bcf1 · 113bcf1
2 parents 3262fea + 75c7d39
commit 113bcf1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 15 deletions.
diff --git a/src/components/entry/Entry.tsx b/src/components/entry/Entry.tsx
@@ -6,7 +6,7 @@ import {
   BookmarkSimple,
   DotsThree,
   Notepad,
-  Pencil,
+  PencilSimple,
   Scales,
   Trash,
   ArrowSquareOut,
@@ -481,7 +481,7 @@ export const Entry: React.FC<EntryProps> = ({
                           showEditButton
                           editButtonContent={
                             <Tooltip asChild text="Name bearbeiten">
-                              <Pencil />
+                              <PencilSimple />
                             </Tooltip>
                           }
                           editButtonProps={{
@@ -561,7 +561,7 @@ export const Entry: React.FC<EntryProps> = ({
                                     tabIndex={0}
                                     onClick={editEntry}
                                     className="flex items-center gap-2 p-2 rounded-lg hover:bg-offWhite focus:bg-offWhite focus:outline-none">
-                                    <Pencil size={20} />
+                                    <PencilSimple size={20} />
                                     Bearbeiten
                                   </li>
                                   <li

diff --git a/src/components/entry/EvidencePopup.tsx b/src/components/entry/EvidencePopup.tsx
@@ -447,7 +447,7 @@ export const EvidencesPopup: React.FC<EvidencesPopupProps> = ({
       <div className="fixed inset-0 flex flex-col justify-center items-center z-50">
         <div
           className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
-            p-8 bg-white rounded-lg content-center shadow-lg space-y-8 w-full max-w-[600px] overflow-y-auto">
+            p-8 bg-white rounded-lg content-center shadow-lg space-y-8 w-full max-w-[600px] max-h-[90vh] overflow-y-auto">
           <div className="flex items-start justify-between rounded-lg ">
             <h3>Beweise hinzufügen</h3>
             <div>

diff --git a/src/components/entry/ImageViewerPopup.tsx b/src/components/entry/ImageViewerPopup.tsx
@@ -1,5 +1,7 @@
-import { X } from "phosphor-react";
+import { CornersIn, CornersOut, X } from "phosphor-react";
 import { useEvidence } from "../../contexts/EvidenceContext";
+import { useState } from "react";
+import cx from "classnames";
 
 interface ImageViewerPopupProps {
   filename: string;
@@ -19,6 +21,7 @@ export const ImageViewerPopup: React.FC<ImageViewerPopupProps> = ({
   setIsVisible,
 }) => {
   const { getFileSize } = useEvidence();
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
 
   if (!isVisible) {
     return null;
@@ -52,11 +55,22 @@ export const ImageViewerPopup: React.FC<ImageViewerPopupProps> = ({
   return (
     <>
       <div className="opacity-25 fixed inset-0 z-50 bg-black !m-0" />
-      <div className="justify-center -translate-y-1/2 -translate-x-1/2 left-1/2 top-1/2 items-center flex bg-white overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none w-fit h-fit px-5 rounded-md shadow-md">
+      <div className="w-fit h-fit justify-center -translate-y-1/2 -translate-x-1/2 left-1/2 top-1/2 flex bg-white overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none px-5 rounded-md shadow-md">
         <div className="my-6 mx-auto">
-          <div className="flex justify-between">
-            <h3>{title}</h3>
-            <div>
+          <div className="flex justify-between mb-5">
+            <span className="font-bold text-xl self-end">{title}</span>
+            <div className="flex gap-2 items-start">
+              <button
+                onClick={() => {
+                  setIsFullscreen(!isFullscreen);
+                }}
+                className="text-darkGrey bg-offWhite p-1 rounded-md hover:bg-lightGrey">
+                {isFullscreen ? (
+                  <CornersIn size={24} />
+                ) : (
+                  <CornersOut size={24} />
+                )}
+              </button>
               <button
                 onClick={() => {
                   setIsVisible(false);
@@ -70,9 +84,13 @@ export const ImageViewerPopup: React.FC<ImageViewerPopupProps> = ({
           <div>
             <div className="flex justify-center w-full overflow-auto mb-3">
               <embed
-                className="w-[40vw] h-[50vh]"
+                className={cx("", {
+                  "w-[40vw] h-[50vh]": !isFullscreen,
+                  "w-[90vw] h-[80vh]": isFullscreen,
+                })}
                 src={filedataurl + "#navpanes=0"} // hide the nav-panel of pdf-embed at first
-                type={filetype}></embed>
+                type={filetype}
+                title={filename}></embed>
             </div>
             <span className="text-sm text-darkGrey opacity-80">{`${
               filetype.includes("image") ? "TIFF" : "PDF"

diff --git a/src/components/entry/NewEntry.tsx b/src/components/entry/NewEntry.tsx
@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { ArrowBendDownRight, Pencil } from "phosphor-react";
+import { ArrowBendDownRight, PencilSimple } from "phosphor-react";
 import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
 import { EditText } from "react-edit-text";
@@ -225,7 +225,7 @@ export const NewEntry: React.FC<NewEntryProps> = ({
               showEditButton
               editButtonContent={
                 <Tooltip asChild text="Name bearbeiten">
-                  <Pencil />
+                  <PencilSimple />
                 </Tooltip>
               }
               editButtonProps={{

diff --git a/src/components/header/ColorSelectorListItem.tsx b/src/components/header/ColorSelectorListItem.tsx
@@ -1,4 +1,4 @@
-import { Check, Pencil } from "phosphor-react";
+import { Check, PencilSimple } from "phosphor-react";
 import { useState } from "react";
 import "react-edit-text/dist/index.css";
 import { Tooltip } from "../Tooltip";
@@ -73,7 +73,7 @@ export const ColorSelectorListItem: React.FC<IProps> = ({
           {inputSelected ? (
             <Check onClick={() => setInputSelected(false)} weight="bold" />
           ) : (
-            <Pencil
+            <PencilSimple
               onClick={() => {
                 setInputSelected(true);
               }}