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

simple dark mode

Browse Source
This commit is contained in:
Niklas 2021-08-24 20:16:59 +02:00
parent 27326898f9
commit 98f198c74a
8 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File 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>
)

2
src/components/Breadcrum.tsx
View File

@ -11,7 +11,7 @@ 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">
<ul className="flex text-gray-500 dark:text-gray-400 text-lg">
<li className="inline-flex items-center cursor-pointer">
<a onClick={()=>{
props.onDirClick?.("/")

6
src/components/FileBrowser.tsx
View File

@ -101,7 +101,7 @@ const FileBrowser: React.FC = () => {
}
return (
<div>
<div className="dark:text-gray-300">
<FileBrowserContextMenu
onSelect={onContextSelect}
pasteActive={!!srcID}
@ -137,14 +137,14 @@ 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}

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}

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: {},
},