From 5be4d5a5e9e9a3ec1fbb2c3153a2b9ac01b54845 Mon Sep 17 00:00:00 2001 From: tianywan819 <57418894+tianywan819@users.noreply.github.com> Date: Fri, 25 Aug 2023 12:22:56 -0400 Subject: [PATCH] Icons reformatted for Nav Bar. fix #164 --- client/src/App.css | 21 +- .../src/components/builder/usabilityDomain.js | 1 - client/src/components/home/Documentation.js | 7 +- client/src/images/api.jpeg | Bin 0 -> 12108 bytes client/src/layouts/MainLayout/AppDropDown.js | 66 +++++ client/src/layouts/MainLayout/DocDropDown.js | 77 ++++++ client/src/layouts/MainLayout/HelpDropDown.js | 58 +++++ client/src/layouts/MainLayout/NavBar.js | 246 ++++++++++-------- 8 files changed, 361 insertions(+), 115 deletions(-) create mode 100644 client/src/images/api.jpeg create mode 100644 client/src/layouts/MainLayout/AppDropDown.js create mode 100644 client/src/layouts/MainLayout/DocDropDown.js create mode 100644 client/src/layouts/MainLayout/HelpDropDown.js diff --git a/client/src/App.css b/client/src/App.css index 837a7d95..b0939eb7 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -88,4 +88,23 @@ justify-content: space-between; flex-wrap: wrap; margin: 0 -15px; -} \ No newline at end of file +} + +.nav-link { + text-decoration: none; + color: inherit; /* Inherits the color from its parent */ + /* Add any additional styling you want */ +} + +.hover-background { + color: inherit; + transition: background-color 0.3s ease; +} + +.white-icon { + color: white; +} + +.hover-background:hover { + background-color: inherit; /* Change to the desired background color on hover */ +} diff --git a/client/src/components/builder/usabilityDomain.js b/client/src/components/builder/usabilityDomain.js index bfe66d63..9974a136 100644 --- a/client/src/components/builder/usabilityDomain.js +++ b/client/src/components/builder/usabilityDomain.js @@ -65,7 +65,6 @@ export const UsabilityDomain = ({onSave}) => { )} -
) diff --git a/client/src/components/home/Documentation.js b/client/src/components/home/Documentation.js index acdd1543..5af7ee4b 100644 --- a/client/src/components/home/Documentation.js +++ b/client/src/components/home/Documentation.js @@ -10,6 +10,7 @@ import { } from "@material-ui/core"; import mediaWiki from "../../images/mediawikiwiki.svg"; +import api from "../../images/api.jpeg"; const useStyles = makeStyles({ bullet: { @@ -54,12 +55,10 @@ export default function Documentation() { global.window.open(docsLink)}> - BCO Docs Site + MediaWiki logo + API
- - User Guide, Best Practices, tutorial -
diff --git a/client/src/images/api.jpeg b/client/src/images/api.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..97ceab260278d986b932594cbb23504d49c3399e GIT binary patch literal 12108 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 + }> + + + + + + + + + + Builder + + + + + + Prefix Registry + + + + + + BCODB + + + + ); +} diff --git a/client/src/layouts/MainLayout/DocDropDown.js b/client/src/layouts/MainLayout/DocDropDown.js new file mode 100644 index 00000000..e292e38e --- /dev/null +++ b/client/src/layouts/MainLayout/DocDropDown.js @@ -0,0 +1,77 @@ +import * as React from "react"; +import IconButton from "@mui/joy/IconButton"; +import Menu from "@mui/joy/Menu"; +import MenuItem from "@mui/joy/MenuItem"; +import MenuButton from "@mui/joy/MenuButton"; +import Dropdown from "@mui/joy/Dropdown"; +import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined"; +import { Tooltip } from "@material-ui/core"; +import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; +import ApiOutlinedIcon from '@mui/icons-material/ApiOutlined'; +import WebhookOutlinedIcon from '@mui/icons-material/WebhookOutlined'; +import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna'; +import { ListItemDecorator } from "@mui/joy"; +import AutoStoriesOutlinedIcon from '@mui/icons-material/AutoStoriesOutlined'; + +export default function DocDropDown() { + return ( + + } + > + + + + + + + + + + Quick Start Guide + + + + + + BioCompute API + + + + + + Wiki + + + + + + BCO Resources + + + + ); +} diff --git a/client/src/layouts/MainLayout/HelpDropDown.js b/client/src/layouts/MainLayout/HelpDropDown.js new file mode 100644 index 00000000..8bf8b12f --- /dev/null +++ b/client/src/layouts/MainLayout/HelpDropDown.js @@ -0,0 +1,58 @@ +import * as React from "react"; +import MenuButton from "@mui/joy/MenuButton"; +import Menu from "@mui/joy/Menu"; +import MenuItem from "@mui/joy/MenuItem"; +import Apps from "@mui/icons-material/Apps"; +import Dropdown from "@mui/joy/Dropdown"; +// import AppRegistrationOutlinedIcon from "@mui/icons-material/AppRegistrationOutlined"; +import ModeEditOutlineOutlinedIcon from '@mui/icons-material/ModeEditOutlineOutlined'; +import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'; +import { ListItemDecorator } from "@mui/joy"; +import GroupOutlinedIcon from '@mui/icons-material/GroupOutlined'; +import IconButton from "@mui/joy/IconButton"; +import { Tooltip } from "@material-ui/core"; +// import { Mode } from "@mui/icons-material"; +import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; +import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'; +import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined'; +import ContactPageOutlinedIcon from '@mui/icons-material/ContactPageOutlined'; + +export default function APP() { + return ( + + }> + + + + + + + + + + Report an issue + + + + + + Contact Us + + + + ); +} diff --git a/client/src/layouts/MainLayout/NavBar.js b/client/src/layouts/MainLayout/NavBar.js index 7169b3b3..15ca324d 100644 --- a/client/src/layouts/MainLayout/NavBar.js +++ b/client/src/layouts/MainLayout/NavBar.js @@ -1,4 +1,4 @@ -import React from "react"; +import React , {useState} from "react"; import { makeStyles } from "@material-ui/core/styles"; import { Button } from "@material-ui/core"; import AppBar from "@material-ui/core/AppBar"; @@ -12,22 +12,22 @@ import Menu from "@material-ui/core/Menu"; import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; import LoginIcon from '@mui/icons-material/Login'; import AccountCircle from "@material-ui/icons/AccountCircle"; -// import EditOutlinedIcon from "@mui/icons-material/Construction"; -// import SearchIcon from "@mui/icons-material/DataObject"; -import BugReportIcon from "@mui/icons-material/BugReport"; -// import GroupIcon from "@mui/icons-material/AppRegistration"; +import ConstructionIcon from "@mui/icons-material/Construction"; +import DataObjectIcon from "@mui/icons-material/DataObject"; +import AppRegistrationIcon from "@mui/icons-material/AppRegistration"; import { useSelector } from "react-redux"; import MoreIcon from "@material-ui/icons/MoreVert"; import { Link } from "react-router-dom"; -// import SettingsInputAntennaIcon from "@mui/icons-material/MiscellaneousServices"; +import MiscellaneousServicesIcon from "@mui/icons-material/MiscellaneousServices"; import ContactPageIcon from "@mui/icons-material/ContactPage"; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; -import { Info } from "@mui/icons-material"; -import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna'; -// import SearchIcon from '@mui/icons-material/Storage'; -import SearchIcon from '@mui/icons-material/Search'; -import GroupIcon from '@mui/icons-material/Group'; -import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; +import DocDropDown from "./DocDropDown"; +import AppDropDown from "./AppDropDown"; +import BugReportOutlinedIcon from '@mui/icons-material/BugReportOutlined'; +import SearchIcon from "@mui/icons-material/Search"; // Import the search icon +import InputBase from "@mui/material/InputBase"; +import HelpDropDown from "./HelpDropDown"; const useStyles = makeStyles((theme) => ({ grow: { @@ -66,7 +66,38 @@ const useStyles = makeStyles((theme) => ({ [theme.breakpoints.up("sm")]: { display: "none" } - } + }, + search: { + position: "relative", + borderRadius: theme.shape.borderRadius, + backgroundColor: "#ffffff", // White background color + marginRight: theme.spacing(2), + marginLeft: 0, + width: "150px", + [theme.breakpoints.up("sm")]: { + marginLeft: theme.spacing(3), + width: "auto", + }, + }, + searchIcon: { + padding: theme.spacing(0, 2), + height: "80%", + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center", + }, + inputRoot: { + color: "inherit", + }, + inputInput: { + padding: theme.spacing(1), + paddingLeft: `calc(1em + ${theme.spacing(4)})`, + transition: theme.transitions.create("width"), + width: "100%", + textAlign:"center" + }, })); const NavBar = () => { @@ -84,7 +115,39 @@ const NavBar = () => { const handleMobileMenuClose = () => { setMobileMoreAnchorEl(null); }; + const [documentationAnchorEL, setDocumentationAnchorEL] = React.useState(null); + + const handleDocumentationOpen = (event) => { + setDocumentationAnchorEL(event.currentTraget); + }; + + const handleDocumentationClose = () => { + setDocumentationAnchorEL(null); + }; + + const [open, setOpen] = React.useState(false); + const anchorRef = React.useRef(null); + const [selectedIndex, setSelectedIndex] = React.useState(1); + const handleClick = () => { + console.info(`You clicked ${options[selectedIndex]}`); + }; + + const handleMenuItemClick = (event, index) => { + setSelectedIndex(index); + setOpen(false); + }; + + const handleToggle = () => { + setOpen((prevOpen) => !prevOpen); + }; + const handleClose = (event) => { + if (anchorRef.current && anchorRef.current.contains(event.target)) { + return; + } + + setOpen(false); + }; const mobileMenuId = "menu-mobile"; /*Need to add switch in here */ const renderMobileMenu = ( @@ -105,18 +168,10 @@ const NavBar = () => {

Home

- - - - - - -

BCO Resources

- - +

BCO Builder

@@ -124,7 +179,7 @@ const NavBar = () => { - +

Prefix Registry

@@ -132,7 +187,7 @@ const NavBar = () => { - +

BCO DB

@@ -149,7 +204,7 @@ const NavBar = () => { - +

Bug Report

@@ -198,18 +253,10 @@ const NavBar = () => {

Home

 - - - - - - -

BCO Resources

- - +

BCO Builder

@@ -217,7 +264,7 @@ const NavBar = () => { - +

Prefix Registry

@@ -225,7 +272,7 @@ const NavBar = () => { - +

BCO DB

@@ -242,7 +289,7 @@ const NavBar = () => { - +

Bug Report

@@ -276,44 +323,20 @@ const NavBar = () => { - BioCompute Object Portal + BioCompute Object Portal
{auth.user ? ( <> - - - - - - - - - - - + + - - - - - - + + - - - - - - - - - - - - - + + @@ -321,12 +344,12 @@ const NavBar = () => { - - + + {/* - + @@ -335,11 +358,25 @@ const NavBar = () => { - + - + */} + {/*
+
+ +
+ +
*/} + { ) : ( <> - - - - - - - - - - - + + - - - - - - + + - - - - - - - - - - - - - + + - + - - + + + {/* - + @@ -413,11 +427,24 @@ const NavBar = () => { - + - + */} + {/*
+
+ +
+ +
*/} Log in @@ -426,6 +453,7 @@ const NavBar = () => { )}
+
{auth.user ? ( <>