This repository has been archived by the owner on Jul 21, 2023. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #963 from mturley/865-breadcrumb-switcher
[#865][BZ#1670703] Add BreadcrumbPageSwitcher for Plans, Mappings and Settings pages (cherry picked from commit 6569511) Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1717024
- Loading branch information
Showing
9 changed files
with
162 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
app/assets/stylesheets/manageiq-v2v/breadcrumbswitcher-popover.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| /* | ||
| Until we can properly import patternfly-react CSS extensions, we need to include the styles for breadcrumbswitcher manually. | ||
| This can be replaced with a proper import after https://github.com/patternfly/patternfly-react/issues/673 is fixed. | ||
| This is a copy of https://github.com/patternfly/patternfly-react/blob/master/packages/patternfly-3/patternfly-react/sass/patternfly-react/_breadcrumbswitcher-popover.scss | ||
| */ | ||
|
|
||
| $switcher-max-height: 400px; | ||
| $switcher-max-width: 200px; | ||
| $switcher-min-width: 200px; | ||
|
|
||
| #breadcrumb-switcher-popover { | ||
| z-index: 1000 !important; | ||
|
|
||
| .popover-content { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| max-height: $switcher-max-height; | ||
| overflow: hidden; | ||
| max-width: $switcher-max-width; | ||
| min-width: $switcher-max-width; | ||
|
|
||
| .input-search { | ||
| position: relative; | ||
| left: 0; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
|
|
||
| input { | ||
| padding: 0 25px 0 25px; | ||
| width: 180px; | ||
| } | ||
|
|
||
| .fa-search { | ||
| color: $color-pf-blue-400; | ||
| position: absolute; | ||
| top: 7px; | ||
| left: 8px; | ||
| z-index: 99; | ||
| } | ||
|
|
||
| .fa-close { | ||
| cursor: pointer; | ||
| position: absolute; | ||
| top: 7px; | ||
| right: 10px; | ||
| z-index: 99; | ||
| } | ||
| } | ||
|
|
||
| .breadcrumb-switcher-popover-error { | ||
| text-indent: 10px; | ||
| color: $color-pf-red-100; | ||
| } | ||
|
|
||
| .list-group-item { | ||
| padding: 5px 10px 5px 10px; | ||
|
|
||
| &:hover { | ||
| background-color: $color-pf-blue-25; | ||
| } | ||
|
|
||
| &.active { | ||
| background-color: $color-pf-blue-400; | ||
| } | ||
| } | ||
|
|
||
| .no-border { | ||
| border: none; | ||
| } | ||
|
|
||
| .pager { | ||
| margin: 0 10px; | ||
|
|
||
| a { | ||
| width: 22px; | ||
| } | ||
|
|
||
| .fa { | ||
| margin-left: -2px; | ||
| } | ||
| } | ||
|
|
||
| .scrollable-list { | ||
| margin-top: 5px; | ||
| margin-bottom: 10px; | ||
|
|
||
| &.list-group { | ||
| border-top: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .breadcrumb-switcher-popover-loading { | ||
| margin-top: 10px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
app/javascript/react/screens/App/common/BreadcrumbPageSwitcher.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames'; | ||
| import { OverlayTrigger, Popover, Button, Icon, ListGroup, ListGroupItem } from 'patternfly-react'; | ||
|
|
||
| const BreadcrumbPageSwitcher = ({ activeHref }) => { | ||
| const SwitcherItem = ({ name, href }) => ( | ||
| <ListGroupItem className={classNames('no-border', { active: href === activeHref })} href={href}> | ||
| {name} | ||
| </ListGroupItem> | ||
| ); | ||
| SwitcherItem.propTypes = { | ||
| name: PropTypes.string, | ||
| href: PropTypes.string | ||
| }; | ||
|
|
||
| const popoverContent = ( | ||
| <ListGroup style={{ marginBottom: 0, borderTop: 0 }}> | ||
| <SwitcherItem name={__('Migration Plans')} href="#/plans" /> | ||
| <SwitcherItem name={__('Infrastructure Mappings')} href="#/mappings" /> | ||
| <SwitcherItem name={__('Migration Settings')} href="#/settings" /> | ||
| </ListGroup> | ||
| ); | ||
|
|
||
| return ( | ||
| <OverlayTrigger | ||
| rootClose | ||
| trigger="click" | ||
| placement="bottom" | ||
| overlay={<Popover id="breadcrumb-switcher-popover">{popoverContent}</Popover>} | ||
| > | ||
| <Button | ||
| style={{ | ||
| marginTop: '-2px', | ||
| marginBottom: '-4px', | ||
| marginLeft: '15px', | ||
| height: '22px', | ||
| width: '32px', | ||
| lineHeight: '14px' | ||
| }} | ||
| > | ||
| <Icon type="fa" name="exchange" /> | ||
| </Button> | ||
| </OverlayTrigger> | ||
| ); | ||
| }; | ||
|
|
||
| BreadcrumbPageSwitcher.propTypes = { | ||
| activeHref: PropTypes.string | ||
| }; | ||
|
|
||
| export default BreadcrumbPageSwitcher; |