rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add file information panel to file preview modal (#965)

Browse Source
This commit is contained in:
Aman Harwara
2022-04-11 19:33:34 +05:30
committed by GitHub
parent 290c3badd0
commit 3126d97dca
3 changed files with 104 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/javascripts/components/Files/FilePreviewInfoPanel.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { formatSizeToReadableString } from '@standardnotes/filepicker';
import { SNFile } from '@standardnotes/snjs';
import { FunctionComponent } from 'preact';
import { Icon } from '../Icon';
type Props = {
file: SNFile;
};
export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
return (
<div className="flex flex-col min-w-70 p-4 border-0 border-l-1px border-solid border-main">
<div className="flex items-center mb-4">
<Icon type="info" className="mr-2" />
<div className="font-semibold">File information</div>
</div>
<div className="mb-3">
<span className="font-semibold">Type:</span> {file.mimeType}
</div>
<div className="mb-3">
<span className="font-semibold">Size:</span>{' '}
{formatSizeToReadableString(file.size)}
</div>
<div className="mb-3">
<span className="font-semibold">Created:</span>{' '}
{file.created_at.toLocaleString()}
</div>
<div className="mb-3">
<span className="font-semibold">Last Modified:</span>{' '}
{file.userModifiedDate.toLocaleString()}
</div>
<div>
<span className="font-semibold">File ID:</span> {file.uuid}
</div>
</div>
);
};

107
app/assets/javascripts/components/Files/FilePreviewModal.tsx
View File

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
import { getFileIconComponent } from '../AttachedFilesPopover/PopoverFileItem';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { FilePreviewInfoPanel } from './FilePreviewInfoPanel';
import { isFileTypePreviewable } from './isFilePreviewable';
type Props = {
@@ -40,6 +41,7 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
const [objectUrl, setObjectUrl] = useState<string>();
const [isFilePreviewable, setIsFilePreviewable] = useState(false);
const [isLoadingFile, setIsLoadingFile] = useState(false);
const [showFileInfoPanel, setShowFileInfoPanel] = useState(false);
const closeButtonRef = useRef<HTMLButtonElement>(null);
const getObjectUrl = useCallback(async () => {
@@ -109,6 +111,12 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
<span className="ml-3 font-medium">{file.name}</span>
</div>
<div className="flex items-center">
<button
className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-main border-1 cursor-pointer rounded"
onClick={() => setShowFileInfoPanel((show) => !show)}
>
<Icon type="info" className="color-neutral" />
</button>
{objectUrl && (
<Button
variant="primary"
@@ -126,67 +134,70 @@ export const FilePreviewModal: FunctionComponent<Props> = ({
ref={closeButtonRef}
onClick={onDismiss}
aria-label="Close modal"
className="flex p-1 bg-transparent border-0 cursor-pointer"
className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded"
>
<Icon type="close" className="color-neutral" />
</button>
</div>
</div>
<div className="flex flex-grow items-center justify-center min-h-0 overflow-auto">
{objectUrl ? (
getPreviewComponentForFile(file, objectUrl)
) : isLoadingFile ? (
<div className="sk-spinner w-5 h-5 spinner-info"></div>
) : (
<div className="flex flex-col items-center">
<NoPreviewIllustration className="w-30 h-30 mb-4" />
<div className="font-bold text-base mb-2">
This file can't be previewed.
</div>
{isFilePreviewable ? (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
There was an error loading the file. Try again, or download
it and open it using another application.
</div>
<div className="flex items-center">
<div className="flex flex-grow min-h-0 overflow-auto">
<div className="flex flex-grow items-center justify-center">
{objectUrl ? (
getPreviewComponentForFile(file, objectUrl)
) : isLoadingFile ? (
<div className="sk-spinner w-5 h-5 spinner-info"></div>
) : (
<div className="flex flex-col items-center">
<NoPreviewIllustration className="w-30 h-30 mb-4" />
<div className="font-bold text-base mb-2">
This file can't be previewed.
</div>
{isFilePreviewable ? (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
There was an error loading the file. Try again, or
download the file and open it using another application.
</div>
<div className="flex items-center">
<Button
variant="primary"
className="mr-3"
onClick={() => {
getObjectUrl();
}}
>
Try again
</Button>
<Button
variant="normal"
onClick={() => {
application.getAppState().files.downloadFile(file);
}}
>
Download
</Button>
</div>
</>
) : (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
To view this file, download it and open it using another
application.
</div>
<Button
variant="primary"
className="mr-3"
onClick={() => {
getObjectUrl();
}}
>
Try again
</Button>
<Button
variant="normal"
onClick={() => {
application.getAppState().files.downloadFile(file);
}}
>
Download
</Button>
</div>
</>
) : (
<>
<div className="text-sm text-center color-grey-0 mb-4 max-w-35ch">
To view this file, download it and open it using another
application.
</div>
<Button
variant="primary"
onClick={() => {
application.getAppState().files.downloadFile(file);
}}
>
Download
</Button>
</>
)}
</div>
)}
</>
)}
</div>
)}
</div>
{showFileInfoPanel && <FilePreviewInfoPanel file={file} />}
</div>
</DialogContent>
</DialogOverlay>

8
app/assets/stylesheets/_sn.scss
View File

@@ -473,6 +473,10 @@
border-right-width: 1px;
}
.sn-component .border-l-1px {
border-left-width: 1px;
}
.sn-component .border-t-1px {
border-top-width: 1px;
}
@@ -493,6 +497,10 @@
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
.p-8 {
padding: 2rem;
}