From d2c0b9c038f5cbcb2b1528d4cb22b862309bd99a Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Sep 2022 16:56:37 +0200 Subject: fix(web/ui): Fix z-index of context selector component This change addresses an issue with the context selector component where the dropdown would fall behind a sticky tab bar in the main content. --- .../opendc-web-ui/src/components/context/ContextSelector.module.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'opendc-web/opendc-web-ui/src/components/context') diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss index 07b7b1d0..c4b89503 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss @@ -24,6 +24,7 @@ // Ensure this selector has precedence over the default one margin-right: 20px; + --pf-c-context-selector__menu--ZIndex: var(--pf-global--ZIndex--lg); --pf-c-context-selector__toggle--PaddingTop: var(--pf-global--spacer--sm); --pf-c-context-selector__toggle--PaddingRight: 0; --pf-c-context-selector__toggle--PaddingBottom: var(--pf-global--spacer--sm); -- cgit v1.2.3 From 9dd75a9a40f7f2aebbc617980c99085f9dc688f8 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Sep 2022 23:02:46 +0200 Subject: refactor(web/ui): Move project selector into masthead This change moves the project selector into the masthead since it affects the whole application. This follows the PatternFly guidelines. --- .../opendc-web-ui/src/components/context/ContextSelector.js | 9 ++++++--- .../src/components/context/ContextSelector.module.scss | 2 +- .../opendc-web-ui/src/components/context/ProjectSelector.js | 8 ++++++-- 3 files changed, 13 insertions(+), 6 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/context') 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 a99b60c0..436c179b 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,9 @@ import PropTypes from 'prop-types' import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core' import { useMemo, useState } from 'react' -import { contextSelector } from './ContextSelector.module.scss' +import styles from './ContextSelector.module.scss' -function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label }) { +function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label, isFullHeight, type = 'page' }) { const [searchValue, setSearchValue] = useState('') const filteredItems = useMemo( () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items, @@ -34,7 +34,7 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label return ( setSearchValue(value)} searchInputValue={searchValue} @@ -47,6 +47,7 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label onSelect(target) onToggle(!isOpen) }} + isFullHeight={isFullHeight} > {filteredItems.map((item) => ( @@ -69,6 +70,8 @@ ContextSelector.propTypes = { 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/ContextSelector.module.scss b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss index c4b89503..4f86ac64 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss +++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.module.scss @@ -20,7 +20,7 @@ * SOFTWARE. */ -.contextSelector.contextSelector { +.pageSelector.pageSelector { // Ensure this selector has precedence over the default one margin-right: 20px; 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 7721e04c..5f47c798 100644 --- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js +++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js @@ -22,14 +22,16 @@ import { useRouter } from 'next/router' import { useState } from 'react' -import { useProjects } from '../../data/project' +import { useProjects, useProject } from '../../data/project' import { Project } from '../../shapes' import ContextSelector from './ContextSelector' -function ProjectSelector({ activeProject }) { +function ProjectSelector() { const router = useRouter() + const projectId = +router.query['project'] const [isOpen, setOpen] = useState(false) + const { data: activeProject } = useProject(+projectId) const { data: projects = [] } = useProjects({ enabled: isOpen }) return ( @@ -40,6 +42,8 @@ function ProjectSelector({ activeProject }) { onSelect={(project) => router.push(`/projects/${project.id}`)} onToggle={setOpen} isOpen={isOpen} + isFullHeight + type="app" /> ) } -- cgit v1.2.3 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. --- .../src/components/context/ContextSelector.js | 14 ++++++++------ .../src/components/context/PortfolioSelector.js | 3 ++- .../src/components/context/ProjectSelector.js | 6 +++--- .../src/components/context/TopologySelector.js | 3 ++- 4 files changed, 15 insertions(+), 11 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/context') 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