diff options
Diffstat (limited to 'opendc-web/opendc-web-ui')
9 files changed, 46 insertions, 68 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js index 54f3bbf3..f9ef00aa 100644 --- a/opendc-web/opendc-web-ui/src/components/AppHeader.js +++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js @@ -20,6 +20,8 @@ * SOFTWARE. */ +import Image from 'next/image' +import PropTypes from 'prop-types' import React from 'react' import { Masthead, @@ -30,19 +32,26 @@ import { ToolbarContent, ToolbarItem, } from '@patternfly/react-core' -import Link from "next/link"; +import Link from 'next/link' import AppHeaderTools from './AppHeaderTools' import AppHeaderUser from './AppHeaderUser' import ProjectSelector from './context/ProjectSelector' import styles from './AppHeader.module.scss' -export function AppHeader() { +export default function AppHeader({ nav }) { return ( - <Masthead id="app-header"> + <Masthead id="app-header" className={styles.header}> <MastheadMain> - <MastheadBrand className={styles.logo} component={props => <Link href="/projects"><a {...props} /></Link>}> - <img src="/img/logo.svg" alt="OpenDC logo" width={30} height={30} /> + <MastheadBrand + className={styles.logo} + component={(props) => ( + <Link href="/projects"> + <a {...props} /> + </Link> + )} + > + <Image src="/img/logo.svg" alt="OpenDC logo" width={25} height={25} /> <span>OpenDC</span> </MastheadBrand> </MastheadMain> @@ -52,6 +61,7 @@ export function AppHeader() { <ToolbarItem> <ProjectSelector /> </ToolbarItem> + {nav && <ToolbarItem>{nav}</ToolbarItem>} <AppHeaderTools /> <AppHeaderUser /> </ToolbarContent> @@ -61,4 +71,6 @@ export function AppHeader() { ) } -AppHeader.propTypes = {} +AppHeader.propTypes = { + nav: PropTypes.node, +} diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss b/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss index a7a6e325..73ef553c 100644 --- a/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss +++ b/opendc-web/opendc-web-ui/src/components/AppHeader.module.scss @@ -20,12 +20,21 @@ * SOFTWARE. */ +.header.header { + /* Increase precedence */ + --pf-c-masthead--m-display-inline__content--MinHeight: 3rem; + --pf-c-masthead--m-display-inline__main--MinHeight: 3rem; + + --pf-c-masthead--c-context-selector--Width: 200px; +} + .logo { span { margin-left: 8px; color: #fff; align-self: center; - font-weight: 500; + font-weight: 600; + font-size: 0.9rem; } &:hover, diff --git a/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js b/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js index 809f3ac3..e271accb 100644 --- a/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js +++ b/opendc-web/opendc-web-ui/src/components/AppHeaderUser.js @@ -51,9 +51,9 @@ export default function AppHeaderUser() { ] const avatarComponent = avatar ? ( - <Avatar src={avatar} alt="Avatar image" /> + <Avatar src={avatar} alt="Avatar image" size="sm" /> ) : ( - <Skeleton className="pf-c-avatar" shape="circle" width="2.25rem" screenreaderText="Loading avatar" /> + <Skeleton className="pf-c-avatar" shape="circle" width="24px" screenreaderText="Loading avatar" /> ) return ( diff --git a/opendc-web/opendc-web-ui/src/components/AppNavigation.js b/opendc-web/opendc-web-ui/src/components/AppNavigation.js deleted file mode 100644 index 77c683a2..00000000 --- a/opendc-web/opendc-web-ui/src/components/AppNavigation.js +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright (c) 2021 AtLarge Research - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import { Nav, NavItem, NavList } from '@patternfly/react-core' -import { useRouter } from 'next/router' -import NavItemLink from './util/NavItemLink' - -export function AppNavigation() { - const { pathname } = useRouter() - - return ( - <Nav variant="horizontal"> - <NavList> - <NavItem - id="projects" - to="/projects" - itemId={0} - component={NavItemLink} - isActive={pathname === '/projects' || pathname === '/projects/[project]'} - > - Projects - </NavItem> - </NavList> - </Nav> - ) -} - -AppNavigation.propTypes = {} diff --git a/opendc-web/opendc-web-ui/src/components/AppPage.js b/opendc-web/opendc-web-ui/src/components/AppPage.js index 25afaf9a..2893146e 100644 --- a/opendc-web/opendc-web-ui/src/components/AppPage.js +++ b/opendc-web/opendc-web-ui/src/components/AppPage.js @@ -21,7 +21,7 @@ */ import PropTypes from 'prop-types' -import { AppHeader } from './AppHeader' +import AppHeader from './AppHeader' import React from 'react' import { Page, PageGroup, PageBreadcrumb } from '@patternfly/react-core' diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js index 436c179b..059cfea8 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js @@ -23,9 +23,10 @@ import PropTypes from 'prop-types' import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core' import { useMemo, useState } from 'react' + import styles from './ContextSelector.module.scss' -function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label, isFullHeight, type = 'page' }) { +function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) { const [searchValue, setSearchValue] = useState('') const filteredItems = useMemo( () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items, @@ -34,11 +35,11 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label, return ( <PFContextSelector + id={id} className={type === 'page' && styles.pageSelector} - toggleText={activeItem ? `${label}: ${activeItem.name}` : label} + toggleText={toggleText} onSearchInputChange={(value) => setSearchValue(value)} searchInputValue={searchValue} - isOpen={isOpen} onToggle={(_, isOpen) => onToggle(isOpen)} onSelect={(event) => { const targetId = +event.target.value @@ -47,6 +48,7 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label, onSelect(target) onToggle(!isOpen) }} + isOpen={isOpen} isFullHeight={isFullHeight} > {filteredItems.map((item) => ( @@ -64,14 +66,14 @@ const Item = PropTypes.shape({ }) ContextSelector.propTypes = { - activeItem: Item, + id: PropTypes.string, + type: PropTypes.oneOf(['app', 'page']), items: PropTypes.arrayOf(Item).isRequired, + toggleText: PropTypes.string, onSelect: PropTypes.func.isRequired, onToggle: PropTypes.func.isRequired, isOpen: PropTypes.bool, - label: PropTypes.string, isFullHeight: PropTypes.bool, - type: PropTypes.oneOf(['app', 'page']), } export default ContextSelector diff --git a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js index c4f2d50e..e401e6fc 100644 --- a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js @@ -34,7 +34,8 @@ function PortfolioSelector({ activePortfolio }) { return ( <ContextSelector - label="Portfolio" + id="portfolio" + toggleText={activePortfolio ? `Portfolio: ${activePortfolio.name}` : 'Select portfolio'} activeItem={activePortfolio} items={portfolios} onSelect={(portfolio) => router.push(`/projects/${portfolio.project.id}/portfolios/${portfolio.number}`)} diff --git a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js index 5f47c798..f2791b38 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js @@ -36,14 +36,14 @@ function ProjectSelector() { return ( <ContextSelector - label="Project" - activeItem={activeProject} + id="project" + type="app" + toggleText={activeProject ? activeProject.name : 'Select project'} items={projects} onSelect={(project) => router.push(`/projects/${project.id}`)} onToggle={setOpen} isOpen={isOpen} isFullHeight - type="app" /> ) } diff --git a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js index 9cae4cbf..355d9f4b 100644 --- a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js @@ -34,7 +34,8 @@ function TopologySelector({ activeTopology }) { return ( <ContextSelector - label="Topology" + id="topology" + toggleText={activeTopology ? `Topology: ${activeTopology.name}` : 'Select topology'} activeItem={activeTopology} items={topologies} onSelect={(topology) => router.push(`/projects/${topology.project.id}/topologies/${topology.number}`)} |