added react icons

This commit is contained in:
Niklas 2021-08-20 19:24:05 +02:00
parent deed778cc7
commit adeddc7994
7 changed files with 34 additions and 21 deletions

View File

@ -17,6 +17,7 @@
"react": "^17.0.2", "react": "^17.0.2",
"react-contexify": "^5.0.0", "react-contexify": "^5.0.0",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"typescript": "^4.1.2", "typescript": "^4.1.2",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"

View File

@ -1,6 +1,7 @@
import React, { useRef } from "react" import React, { useRef } from "react"
import { useEffect } from "react" import { useEffect } from "react"
import { useState } from "react" import { useState } from "react"
import { MdCreateNewFolder } from "react-icons/md"
interface Props { interface Props {
onPressed?: (dirName: string)=>void onPressed?: (dirName: string)=>void
@ -26,7 +27,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
}} }}
> >
Create Dir <MdCreateNewFolder size="40"/>
</button> </button>
<div className={`${!show?"hidden":""} flex`}> <div className={`${!show?"hidden":""} flex`}>
<form <form

View File

@ -1,6 +1,7 @@
import React from "react" import React from "react"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import { Directory } from "../generated/graphql" import { Directory } from "../generated/graphql"
import { MdFolderOpen } from "react-icons/md"
interface Props { interface Props {
dir: Directory dir: Directory
@ -10,7 +11,7 @@ const DirectoryElement: React.FC<Props> = (props) => {
return ( return (
<> <>
<td> <td>
📂 {props.dir.name} <MdFolderOpen className="inline"/> {props.dir.name}
</td> </td>
<td> <td>
</td> </td>

View File

@ -105,18 +105,26 @@ const FileBrowser: React.FC = () => {
await handleDrop(files) await handleDrop(files)
}} }}
> >
<FileUploadButton <div className="flex justify-between">
onUpload={(files)=>handleDrop(files)} <Breadcrum path={path} onDirClick={(newPath)=>{
/> setPath(newPath)
}}/>
<div className="ml-auto">
<CreateDirButton <CreateDirButton
onPressed={async (dirName)=>{ onPressed={async (dirName)=>{
await createDirMutation({variables:{path:dirName}}) await createDirMutation({variables:{path:dirName}})
refetchDir() refetchDir()
}} }}
/> />
<Breadcrum path={path} onDirClick={(newPath)=>{ </div>
setPath(newPath) <div>
}}/> <FileUploadButton
onUpload={(files)=>handleDrop(files)}
/>
</div>
</div>
<div> <div>
{loading && {loading &&
<div>Loading...</div> // TODO: center <div>Loading...</div> // TODO: center

View File

@ -3,6 +3,7 @@ import PropTypes from "prop-types"
import { File } from "../generated/graphql" import { File } from "../generated/graphql"
import sizeToReadable from "../functions/sizeToReadable" import sizeToReadable from "../functions/sizeToReadable"
import dateFormat from "../functions/dateFomat" import dateFormat from "../functions/dateFomat"
import { FaRegFileAlt } from "react-icons/fa"
interface Props { interface Props {
file: File file: File
@ -12,7 +13,7 @@ const FileElement: React.FC<Props> = (props) => {
return ( return (
<> <>
<td> <td>
📄 {props.file.name} <FaRegFileAlt className="inline" /> {props.file.name}
</td> </td>
<td> <td>
{dateFormat(props.file.lastModified)} {dateFormat(props.file.lastModified)}

View File

@ -1,5 +1,6 @@
import React from "react" import React from "react"
import { useRef } from "react" import { useRef } from "react"
import { MdFileUpload } from "react-icons/md"
interface Props { interface Props {
onUpload?: (files: FileList)=>void onUpload?: (files: FileList)=>void
@ -12,7 +13,7 @@ const FileUploadButton: React.FC<Props> = (props) => {
return ( return (
<> <>
<button onClick={()=>inputRef.current?.click()} > <button onClick={()=>inputRef.current?.click()} >
Upload files <MdFileUpload size="40"/>
</button> </button>
<input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{ <input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{
if (inputRef.current && inputRef.current.files){ if (inputRef.current && inputRef.current.files){

View File

@ -11955,6 +11955,11 @@ react-error-overlay@^6.0.9:
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz" resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
react-icons@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
react-is@^16.7.0, react-is@^16.8.1: react-is@^16.7.0, react-is@^16.8.1:
version "16.13.1" version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@ -13169,11 +13174,6 @@ spdy@^4.0.2:
select-hose "^2.0.0" select-hose "^2.0.0"
spdy-transport "^3.0.0" spdy-transport "^3.0.0"
spectre.css@^0.5.9:
version "0.5.9"
resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==
split-on-first@^1.0.0: split-on-first@^1.0.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz" resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"