niklas/s3browser-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: niklas:2747a833dd4c46500cf997819594158b81a1060e
Branches Tags
niklas:master
..
compare: niklas:98f198c74afb83a531dc6824760c2cb29e323626
Branches Tags
niklas:master

5 Commits
2747a833dd ... 98f198c74a

Author SHA1 Message Date
Niklas
98f198c74a simple dark mode 2021-08-24 20:16:59 +02:00
Niklas
27326898f9 breadcrum pointer 2021-08-24 19:22:04 +02:00
Niklas
fbf1d8e916 more dir path fixes 2021-08-24 15:59:12 +02:00
Niklas
e06d28d75e fixed create dir path again 2021-08-24 15:03:30 +02:00
Niklas
a716b4c8cd fix create dir path 2021-08-24 14:51:08 +02:00
9 changed files with 25 additions and 18 deletions
Expand all files Collapse all files

4
public/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -7,7 +7,7 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body class="dark:bg-gray-800">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>

2
src/App.tsx
View File

@@ -3,7 +3,7 @@ import FileBrowser from "./components/FileBrowser"
const App: React.FC = () => { const App: React.FC = () => {
return ( return (
<div className="container"> <div>
<FileBrowser/> <FileBrowser/>
</div> </div>
) )

6
src/components/Breadcrum.tsx
View File

@@ -11,8 +11,8 @@ const Breadcrum: React.FC<Props> = (props) => {
const parts = props.path.split("/").filter(e=>e.length > 0) const parts = props.path.split("/").filter(e=>e.length > 0)
return ( return (
<ul className="flex text-gray-500 text-lg"> <ul className="flex text-gray-500 dark:text-gray-400 text-lg">
<li className="inline-flex items-center"> <li className="inline-flex items-center cursor-pointer">
<a onClick={()=>{ <a onClick={()=>{
props.onDirClick?.("/") props.onDirClick?.("/")
}}> }}>
@@ -21,7 +21,7 @@ const Breadcrum: React.FC<Props> = (props) => {
</li> </li>
{parts.map((e,i,arr)=>{ {parts.map((e,i,arr)=>{
const last = i == arr.length - 1 const last = i == arr.length - 1
return <div key={e} className="inline-flex items-center"> return <div key={e} className="inline-flex items-center cursor-pointer">
<BreadcrumImage /> <BreadcrumImage />
<li> <li>
<a <a

14
src/components/FileBrowser.tsx
View File

@@ -1,6 +1,7 @@
import React from "react" import React from "react"
import { useState } from "react" import { useState } from "react"
import { useContextMenu } from "react-contexify" import { useContextMenu } from "react-contexify"
import normalizeDirPath from "../functions/normalizeDirPath"
import uploadFile from "../functions/uploadFile" import uploadFile from "../functions/uploadFile"
import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql" import { useCopyMutation, useCreateDirMutation, useDeleteDirMutation, useDeleteFileMutation, useMoveMutation, useOpenDirQuery } from "../generated/graphql"
import Breadcrum from "./Breadcrum" import Breadcrum from "./Breadcrum"
@@ -100,7 +101,7 @@ const FileBrowser: React.FC = () => {
} }
return ( return (
<div> <div className="dark:text-gray-300">
<FileBrowserContextMenu <FileBrowserContextMenu
onSelect={onContextSelect} onSelect={onContextSelect}
pasteActive={!!srcID} pasteActive={!!srcID}
@@ -112,12 +113,13 @@ const FileBrowser: React.FC = () => {
> >
<div className="flex justify-between"> <div className="flex justify-between">
<Breadcrum path={path} onDirClick={(newPath)=>{ <Breadcrum path={path} onDirClick={(newPath)=>{
setPath(newPath) setPath(normalizeDirPath(newPath))
}}/> }}/>
<div className="ml-auto"> <div className="ml-auto">
<CreateDirButton <CreateDirButton
onPressed={async (dirName)=>{ onPressed={async (dirName)=>{
await createDirMutation({variables:{path:dirName}}) const fullPath = normalizeDirPath(path + dirName)
await createDirMutation({variables:{path: fullPath}})
refetchDir() refetchDir()
}} }}
/> />
@@ -135,20 +137,20 @@ const FileBrowser: React.FC = () => {
<div>Loading...</div> // TODO: center <div>Loading...</div> // TODO: center
} }
<table className="w-full"> <table className="w-full">
<thead className="border-b-2"> <thead className="border-b-2 dark:border-gray-900">
<tr> <tr>
<th className="text-left">Name</th> <th className="text-left">Name</th>
<th className="text-left">Last Modified</th> <th className="text-left">Last Modified</th>
<th className="text-left">Size</th> <th className="text-left">Size</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y"> <tbody className="divide-y dark:divide-gray-900">
{ data?.directorys.map(v => (<FileBrowserElement { data?.directorys.map(v => (<FileBrowserElement
key={v?.id} key={v?.id}
dir={v} dir={v}
onClick={(dir)=>{ onClick={(dir)=>{
setPath(dir.id) setPath(normalizeDirPath(dir.id))
}} }}
onContextMenu={(e)=>{ onContextMenu={(e)=>{
openDirContextMenu(e,v.id) openDirContextMenu(e,v.id)

4
src/components/FileBrowserContextMenu.tsx
View File

@@ -28,14 +28,14 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
return ( return (
<> <>
<Menu id={CONTEXT_MENU_FILE} animation={false}> <Menu id={CONTEXT_MENU_FILE} animation={false} className="dark:bg-gray-400">
<Item onClick={onClick} data={Action.FileDelete} >Delete</Item> <Item onClick={onClick} data={Action.FileDelete} >Delete</Item>
<Item onClick={onClick} data={Action.FileCopy} >Copy</Item> <Item onClick={onClick} data={Action.FileCopy} >Copy</Item>
<Item onClick={onClick} data={Action.FileMove} >Move</Item> <Item onClick={onClick} data={Action.FileMove} >Move</Item>
<Separator /> <Separator />
<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item> <Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
</Menu> </Menu>
<Menu id={CONTEXT_MENU_DIR} animation={false}> <Menu id={CONTEXT_MENU_DIR} animation={false} className="dark:bg-gray-400">
<Item onClick={onClick} data={Action.DirDelete} >Delete</Item> <Item onClick={onClick} data={Action.DirDelete} >Delete</Item>
<Item onClick={onClick} >Item 2</Item> <Item onClick={onClick} >Item 2</Item>
<Separator /> <Separator />

2
src/components/FileBrowserElement.tsx
View File

@@ -14,7 +14,7 @@ interface Props {
const FileBrowserElement: React.FC<Props> = (props) => { const FileBrowserElement: React.FC<Props> = (props) => {
return ( return (
<tr <tr
className="hover:bg-gray-100 text-lg" className="hover:bg-gray-100 dark:hover:bg-gray-900 text-lg"
onClick={()=>{ onClick={()=>{
if(props.file){ if(props.file){
props.onClick?.(props.file) props.onClick?.(props.file)

4
src/components/Modal.tsx
View File

@@ -10,11 +10,11 @@ const Modal: React.FC<Props> = (props) => {
<div <div
className={`${!props.show?"hidden":"" } className={`${!props.show?"hidden":"" }
fixed z-10 left-0 top-0 w-full h-full fixed z-10 left-0 top-0 w-full h-full
flex justify-center items-center bg-white bg-opacity-80`} flex justify-center items-center bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80`}
onClick={()=>{ onClick={()=>{
props.onCloseClick?.() props.onCloseClick?.()
}}> }}>
<div className="bg-white mx-auto p-5 border-2 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{ <div className="bg-white dark:bg-gray-800 mx-auto p-5 border-2 dark:border-gray-800 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
e.stopPropagation() e.stopPropagation()
}}> }}>
{props.children} {props.children}

5
src/functions/normalizeDirPath.ts Normal file
View File

@@ -0,0 +1,5 @@
function normalizeDirPath(path:string): string {
return path.endsWith("/")?path: (path + "/")
}
export default normalizeDirPath

2
tailwind.config.js
View File

@@ -1,6 +1,6 @@
module.exports = { module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class' darkMode: "class", // or 'media' or 'class'
theme: { theme: {
extend: {}, extend: {},
}, },