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> <!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>
) )

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) 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 cursor-pointer"> <li className="inline-flex items-center cursor-pointer">
<a onClick={()=>{ <a onClick={()=>{
props.onDirClick?.("/") props.onDirClick?.("/")

6
src/components/FileBrowser.tsx
View File

@ -101,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}
@ -137,14 +137,14 @@ 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}

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}

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