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

2
src/App.tsx
View File

@@ -3,7 +3,7 @@ import FileBrowser from "./components/FileBrowser"
const App: React.FC = () => {
return (
<div className="container">
<div>
<FileBrowser/>
</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)
return (
<ul className="flex text-gray-500 text-lg">
<li className="inline-flex items-center">
<ul className="flex text-gray-500 dark:text-gray-400 text-lg">
<li className="inline-flex items-center cursor-pointer">
<a onClick={()=>{
props.onDirClick?.("/")
}}>
@@ -21,7 +21,7 @@ const Breadcrum: React.FC<Props> = (props) => {
</li>
{parts.map((e,i,arr)=>{
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 />
<li>
<a

14
src/components/FileBrowser.tsx
View File

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

4
src/components/FileBrowserContextMenu.tsx
View File

@@ -28,14 +28,14 @@ const FileBrowserContextMenu: React.FC<Props> = (props) => {
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.FileCopy} >Copy</Item>
<Item onClick={onClick} data={Action.FileMove} >Move</Item>
<Separator />
<Item onClick={onClick} data={Action.FilePaste} disabled={!props.pasteActive}>Paste</Item>
</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} >Item 2</Item>
<Separator />

2
src/components/FileBrowserElement.tsx
View File

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

4
src/components/Modal.tsx
View File

@@ -10,11 +10,11 @@ const Modal: React.FC<Props> = (props) => {
<div
className={`${!props.show?"hidden":"" }
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={()=>{
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()
}}>
{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 = {
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
darkMode: false, // or 'media' or 'class'
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},