add action buttons to file listing, close #50
This commit is contained in:
parent
8a5f4482cd
commit
a3644b50e5
2 changed files with 67 additions and 26 deletions
|
@ -65,8 +65,8 @@ const FileListItem: FunctionComponent<{
|
|||
const renderEmoji = emojiIcon && !emojiIcon.index
|
||||
|
||||
return (
|
||||
<div className="p-3 grid grid-cols-10 items-center space-x-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800">
|
||||
<div className="flex space-x-2 items-center col-span-10 md:col-span-7 truncate">
|
||||
<div className="p-3 grid grid-cols-11 items-center space-x-2 cursor-pointer">
|
||||
<div className="flex space-x-2 items-center col-span-11 md:col-span-7 truncate">
|
||||
{/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */}
|
||||
<div className="w-5 text-center flex-shrink-0">
|
||||
{renderEmoji ? (
|
||||
|
@ -79,7 +79,7 @@ const FileListItem: FunctionComponent<{
|
|||
{renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:block font-mono text-sm col-span-2 text-gray-700 dark:text-gray-500 flex-shrink-0">
|
||||
<div className="hidden md:block text-sm font-mono col-span-3 text-gray-700 dark:text-gray-500 flex-shrink-0">
|
||||
{new Date(c.lastModifiedDateTime).toLocaleString('en-US', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
|
@ -89,7 +89,7 @@ const FileListItem: FunctionComponent<{
|
|||
hour12: false,
|
||||
})}
|
||||
</div>
|
||||
<div className="hidden md:block font-mono text-sm text-gray-700 dark:text-gray-500 flex-shrink-0">
|
||||
<div className="hidden md:block text-sm font-mono col-span-1 truncate text-gray-700 dark:text-gray-500 flex-shrink-0">
|
||||
{humanFileSize(c.size)}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -164,10 +164,11 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-900 dark:text-gray-100 shadow rounded">
|
||||
<div className="p-3 grid grid-cols-10 items-center space-x-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-10 md:col-span-7 font-bold">Name</div>
|
||||
<div className="hidden md:block font-bold col-span-2">Last Modified</div>
|
||||
<div className="p-3 grid grid-cols-12 items-center space-x-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="col-span-12 md:col-span-7 font-bold">Name</div>
|
||||
<div className="hidden md:block font-bold col-span-3">Last Modified</div>
|
||||
<div className="hidden md:block font-bold">Size</div>
|
||||
<div className="hidden md:block font-bold">Actions</div>
|
||||
</div>
|
||||
<Toaster />
|
||||
|
||||
|
@ -197,7 +198,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
return toolbars.concat([
|
||||
{
|
||||
key: 'copy',
|
||||
render: <FontAwesomeIcon icon="copy" />,
|
||||
render: <FontAwesomeIcon icon={['fas', 'copy']} />,
|
||||
onClick: i => {
|
||||
clipboard.copy(i.alt ? `${getBaseUrl()}/api?path=${path + '/' + i.alt}&raw=true` : '')
|
||||
toast.success('Copied image permanent link to clipboard.')
|
||||
|
@ -209,8 +210,9 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
)}
|
||||
|
||||
{children.map((c: any) => (
|
||||
<div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-800" key={c.id}>
|
||||
<div
|
||||
key={c.id}
|
||||
className="col-span-11"
|
||||
onClick={e => {
|
||||
e.preventDefault()
|
||||
|
||||
|
@ -224,6 +226,41 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
>
|
||||
<FileListItem fileContent={c} />
|
||||
</div>
|
||||
{c.folder ? (
|
||||
<div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
|
||||
<span
|
||||
title="Copy folder permalink"
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
onClick={() => {
|
||||
clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
|
||||
toast.success('Copied folder permanent link to clipboard.')
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={['far', 'copy']} />
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
|
||||
<span
|
||||
title="Copy raw file permalink"
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
onClick={() => {
|
||||
clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`)
|
||||
toast.success('Copied permanent raw file link to clipboard.')
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={['far', 'copy']} />
|
||||
</span>
|
||||
<a
|
||||
title="Download file"
|
||||
className="cursor-pointer hover:opacity-80"
|
||||
href={c['@microsoft.graph.downloadUrl']}
|
||||
>
|
||||
<FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{renderReadme && (
|
||||
|
@ -272,13 +309,13 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
return <OfficePreview file={resp} />
|
||||
|
||||
default:
|
||||
return <div className="bg-white shadow rounded">{fileName}</div>
|
||||
return <div className="bg-white dark:bg-gray-900 shadow rounded">{fileName}</div>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<div className="shadow bg-white dark:bg-gray-900 rounded p-3">
|
||||
<FourOhFour
|
||||
errorMsg={`Preview for file ${resp.name} is not available, download directly with the button below.`}
|
||||
/>
|
||||
|
@ -291,7 +328,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="shadow bg-white rounded p-3">
|
||||
<div className="shadow bg-white dark:bg-gray-900 rounded p-3">
|
||||
<FourOhFour errorMsg={`Cannot preview ${resp.name}.`} />
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -16,16 +16,18 @@ import {
|
|||
faFileAlt,
|
||||
faFile,
|
||||
faFolder,
|
||||
faCopy,
|
||||
faArrowAltCircleDown,
|
||||
} from '@fortawesome/free-regular-svg-icons'
|
||||
import {
|
||||
faPlus,
|
||||
faMinus,
|
||||
faCopy as faCopySolid,
|
||||
faDownload,
|
||||
faMusic,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faFileDownload,
|
||||
faCopy,
|
||||
faUndo,
|
||||
faBook,
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
@ -53,11 +55,13 @@ library.add(
|
|||
faArrowRight,
|
||||
faFileDownload,
|
||||
faCopy,
|
||||
faCopySolid,
|
||||
faPlus,
|
||||
faMinus,
|
||||
faDownload,
|
||||
faUndo,
|
||||
faBook
|
||||
faBook,
|
||||
faArrowAltCircleDown
|
||||
)
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
|
|
Loading…
Reference in a new issue