added 3dot menu
This commit is contained in:
parent
cdae3cf570
commit
02b43201b1
19
package.json
19
package.json
@ -10,6 +10,7 @@
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"rooks": "^5.7.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat"
|
||||
},
|
||||
"scripts": {
|
||||
@ -45,21 +46,21 @@
|
||||
"@graphql-codegen/typescript": "^1.23.0",
|
||||
"@graphql-codegen/typescript-operations": "1.18.4",
|
||||
"@graphql-codegen/typescript-react-apollo": "2.3.1",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.4",
|
||||
"@typescript-eslint/parser": "^4.28.4",
|
||||
"autoprefixer": "^9",
|
||||
"eslint": "^7.31.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"postcss": "^7",
|
||||
"react-scripts": "4.0.3",
|
||||
"@types/jest": "^26.0.15",
|
||||
"@types/node": "^12.0.0",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@types/react-router-dom": "^5.1.8",
|
||||
"typescript": "^4.1.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.28.4",
|
||||
"@typescript-eslint/parser": "^4.28.4",
|
||||
"apollo": "^2.33.4",
|
||||
"autoprefixer": "^9",
|
||||
"eslint": "^7.31.0",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"node-sass": "^6.0.1",
|
||||
"apollo": "^2.33.4"
|
||||
"postcss": "^7",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.1.2"
|
||||
},
|
||||
"proxy": "http://localhost:8080"
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ import FileUploadButton from "./FileUploadButton"
|
||||
import { ReactComponent as Spinner } from "./../assets/spinner.svg"
|
||||
import FileBrowserList from "./FileBrowserList"
|
||||
import pathRename from "../functions/pathRename"
|
||||
import MoreMenu from "./MoreMenu"
|
||||
|
||||
function uriToPath(pathname:string) {
|
||||
// strip the "/f" from e.g. "/f/dir1/dir2"
|
||||
@ -139,6 +140,9 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
|
||||
onUpload={(files)=>handleDrop(files)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<MoreMenu />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
|
||||
51
src/components/MoreMenu.tsx
Normal file
51
src/components/MoreMenu.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import React from "react"
|
||||
import { useState } from "react"
|
||||
import { MdMoreVert } from "react-icons/md"
|
||||
import { useOutsideClickRef } from "rooks"
|
||||
import MoreMenuEntry from "./MoreMenuEntry"
|
||||
|
||||
const MoreMenu: React.FC = () => {
|
||||
const [showMenu,setShowMenu] = useState(false)
|
||||
|
||||
const [outsideRef] = useOutsideClickRef(()=>{
|
||||
setShowMenu(false)
|
||||
})
|
||||
|
||||
return <>
|
||||
<button
|
||||
onClick={()=>{
|
||||
setShowMenu(!showMenu)
|
||||
}}
|
||||
>
|
||||
<MdMoreVert size="40"/>
|
||||
</button>
|
||||
<div className="" ref={outsideRef} >
|
||||
{
|
||||
showMenu && (
|
||||
<div className="absolute -ml-32 bg-white dark:bg-gray-800 p-2 border-2 dark:border-gray-900">
|
||||
{/* TODO: there has got to be a better way than "w-36" */}
|
||||
<div className="w-36">
|
||||
<ul>
|
||||
<MoreMenuEntry>
|
||||
Menu 1
|
||||
</MoreMenuEntry>
|
||||
<MoreMenuEntry>
|
||||
Menu 2
|
||||
</MoreMenuEntry>
|
||||
<MoreMenuEntry
|
||||
onclick={()=>{
|
||||
setShowMenu(false)
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MoreMenuEntry>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
|
||||
export default MoreMenu
|
||||
18
src/components/MoreMenuEntry.tsx
Normal file
18
src/components/MoreMenuEntry.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from "react"
|
||||
|
||||
interface Props {
|
||||
onclick?: ()=>void
|
||||
}
|
||||
|
||||
const MoreMenuEntry: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<li
|
||||
className="py-2 px-2 hover:bg-gray-100 dark:hover:bg-gray-900 cursor-pointer text-xl"
|
||||
onClick={props.onclick}
|
||||
>
|
||||
{props.children}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export default MoreMenuEntry
|
||||
105
yarn.lock
105
yarn.lock
@ -1246,7 +1246,7 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
|
||||
version "7.14.8"
|
||||
resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz"
|
||||
integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
|
||||
@ -2357,60 +2357,11 @@
|
||||
dependencies:
|
||||
defer-to-connect "^1.0.1"
|
||||
|
||||
"@testing-library/dom@^7.28.1":
|
||||
version "7.31.2"
|
||||
resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-7.31.2.tgz"
|
||||
integrity sha512-3UqjCpey6HiTZT92vODYLPxTBWlM8ZOOjr3LX5F37/VRipW2M1kX6I/Cm4VXzteZqfGfagg8yXywpcOgQBlNsQ==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.10.4"
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@types/aria-query" "^4.2.0"
|
||||
aria-query "^4.2.2"
|
||||
chalk "^4.1.0"
|
||||
dom-accessibility-api "^0.5.6"
|
||||
lz-string "^1.4.4"
|
||||
pretty-format "^26.6.2"
|
||||
|
||||
"@testing-library/jest-dom@^5.11.4":
|
||||
version "5.14.1"
|
||||
resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz"
|
||||
integrity sha512-dfB7HVIgTNCxH22M1+KU6viG5of2ldoA5ly8Ar8xkezKHKXjRvznCdbMbqjYGgO2xjRbwnR+rR8MLUIqF3kKbQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
"@types/testing-library__jest-dom" "^5.9.1"
|
||||
aria-query "^4.2.2"
|
||||
chalk "^3.0.0"
|
||||
css "^3.0.0"
|
||||
css.escape "^1.5.1"
|
||||
dom-accessibility-api "^0.5.6"
|
||||
lodash "^4.17.15"
|
||||
redent "^3.0.0"
|
||||
|
||||
"@testing-library/react@^11.1.0":
|
||||
version "11.2.7"
|
||||
resolved "https://registry.npmjs.org/@testing-library/react/-/react-11.2.7.tgz"
|
||||
integrity sha512-tzRNp7pzd5QmbtXNG/mhdcl7Awfu/Iz1RaVHY75zTdOkmHCuzMhRL83gWHSgOAcjS3CCbyfwUHMZgRJb4kAfpA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
"@testing-library/dom" "^7.28.1"
|
||||
|
||||
"@testing-library/user-event@^12.1.10":
|
||||
version "12.8.3"
|
||||
resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz"
|
||||
integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
|
||||
"@tootallnate/once@1":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
|
||||
integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
|
||||
|
||||
"@types/aria-query@^4.2.0":
|
||||
version "4.2.2"
|
||||
resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz"
|
||||
integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
|
||||
|
||||
"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
|
||||
version "7.1.15"
|
||||
resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.15.tgz"
|
||||
@ -2513,7 +2464,7 @@
|
||||
dependencies:
|
||||
"@types/istanbul-lib-report" "*"
|
||||
|
||||
"@types/jest@*", "@types/jest@^26.0.15":
|
||||
"@types/jest@^26.0.15":
|
||||
version "26.0.24"
|
||||
resolved "https://registry.npmjs.org/@types/jest/-/jest-26.0.24.tgz"
|
||||
integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
|
||||
@ -2656,13 +2607,6 @@
|
||||
resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz"
|
||||
integrity sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==
|
||||
|
||||
"@types/testing-library__jest-dom@^5.9.1":
|
||||
version "5.14.1"
|
||||
resolved "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.1.tgz"
|
||||
integrity sha512-Gk9vaXfbzc5zCXI9eYE9BI5BNHEp4D3FWjgqBE/ePGYElLAP+KvxBcsdkwfIVvezs605oiyd/VrpiHe3Oeg+Aw==
|
||||
dependencies:
|
||||
"@types/jest" "*"
|
||||
|
||||
"@types/uglify-js@*":
|
||||
version "3.13.1"
|
||||
resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz"
|
||||
@ -5341,11 +5285,6 @@ css-what@^5.0.0:
|
||||
resolved "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz"
|
||||
integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
|
||||
|
||||
css.escape@^1.5.1:
|
||||
version "1.5.1"
|
||||
resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz"
|
||||
integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
|
||||
|
||||
css@^2.0.0:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.npmjs.org/css/-/css-2.2.4.tgz"
|
||||
@ -5356,15 +5295,6 @@ css@^2.0.0:
|
||||
source-map-resolve "^0.5.2"
|
||||
urix "^0.1.0"
|
||||
|
||||
css@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.npmjs.org/css/-/css-3.0.0.tgz"
|
||||
integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
|
||||
dependencies:
|
||||
inherits "^2.0.4"
|
||||
source-map "^0.6.1"
|
||||
source-map-resolve "^0.6.0"
|
||||
|
||||
cssdb@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz"
|
||||
@ -5804,11 +5734,6 @@ doctrine@^3.0.0:
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
|
||||
dom-accessibility-api@^0.5.6:
|
||||
version "0.5.6"
|
||||
resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.6.tgz"
|
||||
integrity sha512-DplGLZd8L1lN64jlT27N9TVSESFR5STaEJvX+thCby7fuCHonfPpAlodYc3vuUYbDuDec5w8AMP7oCM5TWFsqw==
|
||||
|
||||
dom-converter@^0.2.0:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz"
|
||||
@ -9582,11 +9507,6 @@ lru-cache@^6.0.0:
|
||||
dependencies:
|
||||
yallist "^4.0.0"
|
||||
|
||||
lz-string@^1.4.4:
|
||||
version "1.4.4"
|
||||
resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz"
|
||||
integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
|
||||
|
||||
magic-string@^0.25.0, magic-string@^0.25.7:
|
||||
version "0.25.7"
|
||||
resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz"
|
||||
@ -12684,6 +12604,14 @@ rollup@^1.31.1:
|
||||
"@types/node" "*"
|
||||
acorn "^7.1.0"
|
||||
|
||||
rooks@^5.7.1:
|
||||
version "5.7.1"
|
||||
resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.7.1.tgz#a9c91e94e760e21a9df5afc1de4ba07d09a6156d"
|
||||
integrity sha512-Gztycgm+e+bS0vqLMSGlGe8f7rkXMxjfPj3FucM06/xu1CEFQx1pZ0zMVdWVxDeMXRePaQ2/g1K7ArIlGKyHbQ==
|
||||
dependencies:
|
||||
lodash.debounce "^4.0.8"
|
||||
raf "^3.4.1"
|
||||
|
||||
rsvp@^4.8.4:
|
||||
version "4.8.5"
|
||||
resolved "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz"
|
||||
@ -13172,14 +13100,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
|
||||
source-map-url "^0.4.0"
|
||||
urix "^0.1.0"
|
||||
|
||||
source-map-resolve@^0.6.0:
|
||||
version "0.6.0"
|
||||
resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz"
|
||||
integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
|
||||
dependencies:
|
||||
atob "^2.1.2"
|
||||
decode-uri-component "^0.2.0"
|
||||
|
||||
source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.19:
|
||||
version "0.5.19"
|
||||
resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz"
|
||||
@ -14648,11 +14568,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
|
||||
dependencies:
|
||||
minimalistic-assert "^1.0.0"
|
||||
|
||||
web-vitals@^1.0.1:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-1.1.2.tgz"
|
||||
integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==
|
||||
|
||||
webidl-conversions@^5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user