From 24b857ae580fcbea441e7cb91bc7aba681fc6c8b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 15 Sep 2022 10:17:44 +0200 Subject: feat(web/ui): Reduce height of application header This change reduces the height of the application header to 3.5rem to increase the screen real-estate that we can use for the application content. --- .../opendc-web-ui/src/components/AppHeader.js | 24 ++++++++--- .../src/components/AppHeader.module.scss | 11 ++++- .../opendc-web-ui/src/components/AppHeaderUser.js | 4 +- .../opendc-web-ui/src/components/AppNavigation.js | 47 ---------------------- opendc-web/opendc-web-ui/src/components/AppPage.js | 2 +- .../src/components/context/ContextSelector.js | 14 ++++--- .../src/components/context/PortfolioSelector.js | 3 +- .../src/components/context/ProjectSelector.js | 6 +-- .../src/components/context/TopologySelector.js | 3 +- 9 files changed, 46 insertions(+), 68 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/components/AppNavigation.js (limited to 'opendc-web/opendc-web-ui/src') 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 ( - + - }> - OpenDC logo + ( + + + + )} + > + OpenDC logo OpenDC @@ -52,6 +61,7 @@ export function AppHeader() { + {nav && {nav}} @@ -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 ? ( - + ) : ( - + ) 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 ( - - ) -} - -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 ( 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 ( 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 ( 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 ( router.push(`/projects/${topology.project.id}/topologies/${topology.number}`)} -- cgit v1.2.3