From 10a55e7fb9f0737438ec48647ed134977587f8d2 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 3 Jan 2019 15:00:09 -0600 Subject: [PATCH 01/22] make focus background full width --- src/components/list_group/_list_group_item.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index 1177f140f59..06ea7de8697 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -6,6 +6,7 @@ display: flex; align-items: center; transition: background-color $euiAnimSpeedFast; + position: relative; &:first-child { margin-top: 0; From 898bfdd860c3007440e336b91a9ce38707085c7b Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Wed, 26 Dec 2018 15:54:27 -0600 Subject: [PATCH 02/22] initial commit --- src-docs/src/routes.js | 4 + src-docs/src/views/nav_drawer/nav_drawer.js | 317 ++++++++++++++++++ .../views/nav_drawer/nav_drawer_example.js | 37 ++ src/components/index.js | 4 + src/components/index.scss | 1 + src/components/nav_drawer/_index.scss | 5 + src/components/nav_drawer/_nav_drawer.scss | 36 ++ src/components/nav_drawer/index.js | 3 + src/components/nav_drawer/nav_drawer.js | 36 ++ 9 files changed, 443 insertions(+) create mode 100644 src-docs/src/views/nav_drawer/nav_drawer.js create mode 100644 src-docs/src/views/nav_drawer/nav_drawer_example.js create mode 100644 src/components/nav_drawer/_index.scss create mode 100644 src/components/nav_drawer/_nav_drawer.scss create mode 100644 src/components/nav_drawer/index.js create mode 100644 src/components/nav_drawer/nav_drawer.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 2e97b630318..fae0e6f7833 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -171,6 +171,9 @@ import { ModalExample } import { MutationObserverExample } from './views/mutation_observer/mutation_observer_example'; +import { NavDrawerExample } + from './views/nav_drawer/nav_drawer_example'; + import { OutsideClickDetectorExample } from './views/outside_click_detector/outside_click_detector_example'; @@ -335,6 +338,7 @@ const navigation = [{ HeaderExample, HorizontalRuleExample, ModalExample, + NavDrawerExample, PageExample, PanelExample, PopoverExample, diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js new file mode 100644 index 00000000000..d4446260530 --- /dev/null +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -0,0 +1,317 @@ +import React, { Component } from 'react'; + +import { + EuiPage, + EuiPageBody, + EuiPageHeader, + EuiPageHeaderSection, + EuiPageContent, + EuiPageContentHeader, + EuiPageContentHeaderSection, + EuiPageContentBody, + EuiHeader, + EuiHeaderSection, + EuiHeaderSectionItem, + EuiHeaderLogo, + EuiTitle, + EuiNavDrawer, + EuiListGroup, + EuiHorizontalRule, +} from '../../../../src/components'; + +const topLinks = [ + { + label: 'Recently viewed', + href: '/#/layout/nav-drawer', + iconType: 'clock', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Recently viewed items', + extraAction: { + color: 'subdued', + iconType: 'arrowRight', + iconSize: 's', + 'aria-label': 'Expand to view recent apps and objects', + }, + }, + { + label: 'Favorites', + href: '/#/layout/nav-drawer', + iconType: 'pin', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Favorited items', + extraAction: { + color: 'subdued', + iconType: 'arrowRight', + iconSize: 's', + 'aria-label': 'Expand to view favorited apps and objects', + }, + }, +]; + +const bottomLinks = [ + { + label: 'Discover', + href: '/#/layout/nav-drawer', + iconType: 'discoverApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Discover', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Visualize', + href: '/#/layout/nav-drawer', + iconType: 'visualizeApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Visualize', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Dashboard', + href: '/#/layout/nav-drawer', + iconType: 'dashboardApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Dashboard', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Timelion', + href: '/#/layout/nav-drawer', + iconType: 'timelionApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Timelion', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Canvas', + href: '/#/layout/nav-drawer', + iconType: 'canvasApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Canvas', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'APM', + href: '/#/layout/nav-drawer', + iconType: 'apmApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'APM', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Machine learning', + href: '/#/layout/nav-drawer', + iconType: 'machineLearningApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Machine learning', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Infra ops', + href: '/#/layout/nav-drawer', + iconType: 'infraApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Infra', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Logs', + href: '/#/layout/nav-drawer', + iconType: 'loggingApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Logs', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Graph', + href: '/#/layout/nav-drawer', + iconType: 'graphApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Graph', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Dev tools', + href: '/#/layout/nav-drawer', + iconType: 'devToolsApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Dev tools', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Monitoring', + href: '/#/layout/nav-drawer', + iconType: 'monitoringApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Monitoring', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Maps', + href: '/#/layout/nav-drawer', + iconType: 'gisApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Maps', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Management', + href: '/#/layout/nav-drawer', + iconType: 'managementApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Management', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, +]; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + isCollapsed: true, + }; + } + + renderLogo() { + return ; + } + + expandDrawer = () => { + this.setState({ isCollapsed: false }); + }; + + collapseDrawer = () => { + this.setState({ isCollapsed: true }); + }; + + render() { + const { + isCollapsed, + } = this.state; + + return ( +
+ + + {this.renderLogo()} + + + + + + + + + + + + + +

Page title

+
+
+
+ + + + +

Content title

+
+
+
+ + Content body + +
+
+
+
+ ); + } +} diff --git a/src-docs/src/views/nav_drawer/nav_drawer_example.js b/src-docs/src/views/nav_drawer/nav_drawer_example.js new file mode 100644 index 00000000000..8c0b4de0eb3 --- /dev/null +++ b/src-docs/src/views/nav_drawer/nav_drawer_example.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { renderToHtml } from '../../services'; + +import { + GuideSectionTypes, +} from '../../components'; + +import { + EuiNavDrawer, +} from '../../../../src/components'; + +import NavDrawer from './nav_drawer'; +const navDrawerSource = require('!!raw-loader!./nav_drawer'); +const navDrawerHtml = renderToHtml(NavDrawer); + +export const NavDrawerExample = { + title: 'Nav Drawer', + sections: [{ + source: [{ + type: GuideSectionTypes.JS, + code: navDrawerSource, + }, { + type: GuideSectionTypes.HTML, + code: navDrawerHtml, + }], + text: ( +

+ The nav drawer is made up of several individual components. +

+ ), + props: { + EuiNavDrawer, + }, + demo: , + }] +}; diff --git a/src/components/index.js b/src/components/index.js index 31bc138669d..859d9f4d108 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -217,6 +217,10 @@ export { EuiMutationObserver, } from './mutation_observer'; +export { + EuiNavDrawer, +} from './nav_drawer'; + export { EuiOutsideClickDetector, } from './outside_click_detector'; diff --git a/src/components/index.scss b/src/components/index.scss index 333447b1ca0..dd41057b6d2 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -36,6 +36,7 @@ @import 'list_group/index'; @import 'loading/index'; @import 'modal/index'; +@import 'nav_drawer/index'; @import 'overlay_mask/index'; @import 'page/index'; @import 'pagination/index'; diff --git a/src/components/nav_drawer/_index.scss b/src/components/nav_drawer/_index.scss new file mode 100644 index 00000000000..3477545e6ce --- /dev/null +++ b/src/components/nav_drawer/_index.scss @@ -0,0 +1,5 @@ +// Themable colors +$euiNavDrawerBackgroundColor: $euiColorEmptyShade; + +// Components +@import 'nav_drawer'; diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss new file mode 100644 index 00000000000..f605b9691cf --- /dev/null +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -0,0 +1,36 @@ +// Nav drawer. Global application navigation. + +$euiNavDrawerWidthExpanded: 240px; +$euiNavDrawerWidthCollapsed: 48px; +$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); + +.euiNavDrawer { + width: $euiNavDrawerWidthExpanded; + height: 100%; + position: absolute; + left: 0; + top: 0; + // z-index: $euiZHeader; // ensure the shadow shows above content + background: $euiHeaderBackgroundColor; + box-shadow: $euiNavDrawerSideShadow; + + &.euiNavDrawer-isCollapsed { + width: $euiNavDrawerWidthCollapsed; + transition: width $euiAnimSpeedFast ease-in; + } + + &.euiNavDrawer-isExpanded { + transition: width $euiAnimSpeedNormal ease-out 1.8s; // Delays the expanded view + + .euiListGroupItem__label, + .euiListGroupItem__extraAction { + visibility: visible; + } + } + + .euiListGroupItem__label, + .euiListGroupItem__extraAction { + visibility: hidden; + white-space: nowrap; + } +} diff --git a/src/components/nav_drawer/index.js b/src/components/nav_drawer/index.js new file mode 100644 index 00000000000..f9a8126c509 --- /dev/null +++ b/src/components/nav_drawer/index.js @@ -0,0 +1,3 @@ +export { + EuiNavDrawer, +} from './nav_drawer'; diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js new file mode 100644 index 00000000000..870bbaf5a8e --- /dev/null +++ b/src/components/nav_drawer/nav_drawer.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiNavDrawer = ({ children, className, isCollapsed, ...rest }) => { + const classes = classNames( + 'euiNavDrawer', + { + 'euiNavDrawer-isCollapsed': isCollapsed, + 'euiNavDrawer-isExpanded': !isCollapsed, + }, + className + ); + + return ( +
+ {children} +
+ ); +}; + +EuiNavDrawer.propTypes = { + className: PropTypes.string, + + /** + * Toggle the nav drawer between collapsed and expanded + */ + isCollapsed: PropTypes.bool, +}; + +EuiNavDrawer.defaultProps = { + isCollapsed: true, +}; \ No newline at end of file From 066d642eef83edff18ddc70791fb884d11de71fd Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Wed, 2 Jan 2019 10:35:24 -0600 Subject: [PATCH 03/22] adds secondary menu --- src-docs/src/views/nav_drawer/nav_drawer.js | 539 ++++++++++-------- src/components/index.js | 2 + src/components/nav_drawer/_index.scss | 5 +- src/components/nav_drawer/_nav_drawer.scss | 32 +- .../nav_drawer/_nav_drawer_flyout.scss | 37 ++ .../nav_drawer/_nav_drawer_menu.scss | 3 + src/components/nav_drawer/_variables.scss | 7 + src/components/nav_drawer/index.js | 8 + src/components/nav_drawer/nav_drawer.js | 9 +- .../nav_drawer/nav_drawer_flyout.js | 47 ++ src/components/nav_drawer/nav_drawer_menu.js | 37 ++ 11 files changed, 478 insertions(+), 248 deletions(-) create mode 100644 src/components/nav_drawer/_nav_drawer_flyout.scss create mode 100644 src/components/nav_drawer/_nav_drawer_menu.scss create mode 100644 src/components/nav_drawer/_variables.scss create mode 100644 src/components/nav_drawer/nav_drawer_flyout.js create mode 100644 src/components/nav_drawer/nav_drawer_menu.js diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index d4446260530..f349350e177 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -15,247 +15,296 @@ import { EuiHeaderLogo, EuiTitle, EuiNavDrawer, + EuiNavDrawerMenu, + EuiNavDrawerFlyout, EuiListGroup, EuiHorizontalRule, } from '../../../../src/components'; -const topLinks = [ - { - label: 'Recently viewed', - href: '/#/layout/nav-drawer', - iconType: 'clock', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Recently viewed items', - extraAction: { - color: 'subdued', - iconType: 'arrowRight', - iconSize: 's', - 'aria-label': 'Expand to view recent apps and objects', - }, - }, - { - label: 'Favorites', - href: '/#/layout/nav-drawer', - iconType: 'pin', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Favorited items', - extraAction: { - color: 'subdued', - iconType: 'arrowRight', - iconSize: 's', - 'aria-label': 'Expand to view favorited apps and objects', - }, - }, -]; - -const bottomLinks = [ - { - label: 'Discover', - href: '/#/layout/nav-drawer', - iconType: 'discoverApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Discover', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Visualize', - href: '/#/layout/nav-drawer', - iconType: 'visualizeApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Visualize', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Dashboard', - href: '/#/layout/nav-drawer', - iconType: 'dashboardApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Dashboard', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Timelion', - href: '/#/layout/nav-drawer', - iconType: 'timelionApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Timelion', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Canvas', - href: '/#/layout/nav-drawer', - iconType: 'canvasApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Canvas', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'APM', - href: '/#/layout/nav-drawer', - iconType: 'apmApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'APM', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Machine learning', - href: '/#/layout/nav-drawer', - iconType: 'machineLearningApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Machine learning', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Infra ops', - href: '/#/layout/nav-drawer', - iconType: 'infraApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Infra', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Logs', - href: '/#/layout/nav-drawer', - iconType: 'loggingApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Logs', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Graph', - href: '/#/layout/nav-drawer', - iconType: 'graphApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Graph', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Dev tools', - href: '/#/layout/nav-drawer', - iconType: 'devToolsApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Dev tools', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Monitoring', - href: '/#/layout/nav-drawer', - iconType: 'monitoringApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Monitoring', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Maps', - href: '/#/layout/nav-drawer', - iconType: 'gisApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Maps', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Management', - href: '/#/layout/nav-drawer', - iconType: 'managementApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Management', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, -]; - export default class extends Component { constructor(props) { super(props); this.state = { isCollapsed: true, + flyoutIsCollapsed: true, }; + + this.topLinks = [ + { + label: 'Recently viewed', + iconType: 'clock', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Recently viewed items', + onClick: this.expandFlyout, + extraAction: { + color: 'subdued', + iconType: 'arrowRight', + iconSize: 's', + 'aria-label': 'Expand to view recent apps and objects', + onClick: this.expandFlyout, + }, + }, + { + label: 'Favorites', + href: '/#/layout/nav-drawer', + iconType: 'starEmpty', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Favorited items', + extraAction: { + color: 'subdued', + iconType: 'arrowRight', + iconSize: 's', + 'aria-label': 'Expand to view favorited apps and objects', + }, + }, + ]; + + this.bottomLinks = [ + { + label: 'Discover', + href: '/#/layout/nav-drawer', + iconType: 'discoverApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Discover', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Visualize', + href: '/#/layout/nav-drawer', + iconType: 'visualizeApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Visualize', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Dashboard', + href: '/#/layout/nav-drawer', + iconType: 'dashboardApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Dashboard', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Timelion', + href: '/#/layout/nav-drawer', + iconType: 'timelionApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Timelion', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Canvas', + href: '/#/layout/nav-drawer', + iconType: 'canvasApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Canvas', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'APM', + href: '/#/layout/nav-drawer', + iconType: 'apmApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'APM', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Machine learning', + href: '/#/layout/nav-drawer', + iconType: 'machineLearningApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Machine learning', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Infra ops', + href: '/#/layout/nav-drawer', + iconType: 'infraApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Infra', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Logs', + href: '/#/layout/nav-drawer', + iconType: 'loggingApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Logs', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Graph', + href: '/#/layout/nav-drawer', + iconType: 'graphApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Graph', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Dev tools', + href: '/#/layout/nav-drawer', + iconType: 'devToolsApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Dev tools', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Monitoring', + href: '/#/layout/nav-drawer', + iconType: 'monitoringApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Monitoring', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Maps', + href: '/#/layout/nav-drawer', + iconType: 'gisApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Maps', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'Management', + href: '/#/layout/nav-drawer', + iconType: 'managementApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Management', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + ]; + + this.recentLinks = [ + { + label: 'My dashboard', + href: '/#/layout/nav-drawer', + iconType: 'dashboardApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'My dashboard', + extraAction: { + color: 'subdued', + iconType: 'starEmpty', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'My workpad', + href: '/#/layout/nav-drawer', + iconType: 'canvasApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'My workpad', + extraAction: { + color: 'subdued', + iconType: 'starEmpty', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'My logs', + href: '/#/layout/nav-drawer', + iconType: 'loggingApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'My logs', + extraAction: { + color: 'subdued', + iconType: 'starEmpty', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + ]; } renderLogo() { @@ -270,9 +319,18 @@ export default class extends Component { this.setState({ isCollapsed: true }); }; + expandFlyout = () => { + this.setState({ flyoutIsCollapsed: false }); + }; + + collapseFlyout = () => { + this.setState({ flyoutIsCollapsed: true }); + }; + render() { const { isCollapsed, + flyoutIsCollapsed, } = this.state; return ( @@ -283,10 +341,23 @@ export default class extends Component { - - - - + + + + + + + diff --git a/src/components/index.js b/src/components/index.js index 859d9f4d108..9d39dd18f68 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -219,6 +219,8 @@ export { export { EuiNavDrawer, + EuiNavDrawerMenu, + EuiNavDrawerFlyout, } from './nav_drawer'; export { diff --git a/src/components/nav_drawer/_index.scss b/src/components/nav_drawer/_index.scss index 3477545e6ce..8eeab22cbe3 100644 --- a/src/components/nav_drawer/_index.scss +++ b/src/components/nav_drawer/_index.scss @@ -1,5 +1,6 @@ -// Themable colors -$euiNavDrawerBackgroundColor: $euiColorEmptyShade; +@import 'variables'; // Components @import 'nav_drawer'; +@import 'nav_drawer_menu'; +@import 'nav_drawer_flyout'; diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index f605b9691cf..fe484b083c7 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -1,11 +1,7 @@ // Nav drawer. Global application navigation. -$euiNavDrawerWidthExpanded: 240px; -$euiNavDrawerWidthCollapsed: 48px; -$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); - .euiNavDrawer { - width: $euiNavDrawerWidthExpanded; + width: $euiNavDrawerWidthCollapsed; height: 100%; position: absolute; left: 0; @@ -15,21 +11,35 @@ $euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); box-shadow: $euiNavDrawerSideShadow; &.euiNavDrawer-isCollapsed { - width: $euiNavDrawerWidthCollapsed; transition: width $euiAnimSpeedFast ease-in; + + &.euiNavDrawer-flyoutIsExpanded { + width: $euiNavDrawerWidthCollapsed + $euiNavDrawerWidthExpanded; + } } &.euiNavDrawer-isExpanded { - transition: width $euiAnimSpeedNormal ease-out 1.8s; // Delays the expanded view + width: $euiNavDrawerWidthExpanded; + transition: width $euiAnimSpeedNormal ease-out; + // transition: width $euiAnimSpeedNormal ease-out 1.8s; // TODO Delays the expanded view - .euiListGroupItem__label, - .euiListGroupItem__extraAction { + .euiNavDrawerMenu .euiListGroupItem__label, + .euiNavDrawerMenu .euiListGroupItem__extraAction { visibility: visible; } + + &.euiNavDrawer-flyoutIsExpanded { + width: $euiNavDrawerWidthExpanded * 2; + // transition-delay: 0s; // TODO works with delay + } + + // &.euiNavDrawer-flyoutIsCollapsed { + // transition-delay: 0s; // TODO this fixes the delay when flyout collapses, but breaks the delay when menu expands + // } } - .euiListGroupItem__label, - .euiListGroupItem__extraAction { + .euiNavDrawerMenu .euiListGroupItem__label, + .euiNavDrawerMenu .euiListGroupItem__extraAction { visibility: hidden; white-space: nowrap; } diff --git a/src/components/nav_drawer/_nav_drawer_flyout.scss b/src/components/nav_drawer/_nav_drawer_flyout.scss new file mode 100644 index 00000000000..bbb7ffdef6e --- /dev/null +++ b/src/components/nav_drawer/_nav_drawer_flyout.scss @@ -0,0 +1,37 @@ +.euiNavDrawerFlyout { + position: absolute; + left: $euiNavDrawerWidthCollapsed; + top: 0; + width: 0; + height: 100%; + padding: $euiSize; + background-color: $euiNavDrawerBackgroundColor; + border-left: $euiBorderThin; + box-shadow: $euiNavDrawerSideShadow; + visibility: hidden; + opacity: 0; + + &.euiNavDrawerFlyout-isExpanded { + visibility: visible; + opacity: 1; + width: $euiNavDrawerWidthExpanded; + transition: opacity $euiAnimSpeedFast .2s, width $euiAnimSpeedNormal; + } + + &.euiNavDrawerFlyout-isCollapsed { + transition: opacity $euiAnimSpeedFast, width $euiAnimSpeedFast; + } + + .euiNavDrawer-isCollapsed & { + left: $euiNavDrawerWidthCollapsed; + } + + .euiNavDrawer-isExpanded & { + left: $euiNavDrawerWidthExpanded; + } + + .euiNavDrawerFlyout__listGroup { + padding-left: 0; + padding-right: 0; + } +} \ No newline at end of file diff --git a/src/components/nav_drawer/_nav_drawer_menu.scss b/src/components/nav_drawer/_nav_drawer_menu.scss new file mode 100644 index 00000000000..aa28f9e91ba --- /dev/null +++ b/src/components/nav_drawer/_nav_drawer_menu.scss @@ -0,0 +1,3 @@ +.euiNavDrawerMenu { + max-width: $euiNavDrawerWidthExpanded; +} \ No newline at end of file diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss new file mode 100644 index 00000000000..ec5afc5d245 --- /dev/null +++ b/src/components/nav_drawer/_variables.scss @@ -0,0 +1,7 @@ +// Themable colors +$euiNavDrawerBackgroundColor: $euiColorEmptyShade; + +// Drawer variables +$euiNavDrawerWidthExpanded: 240px; +$euiNavDrawerWidthCollapsed: 48px; +$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); \ No newline at end of file diff --git a/src/components/nav_drawer/index.js b/src/components/nav_drawer/index.js index f9a8126c509..d67776d58f9 100644 --- a/src/components/nav_drawer/index.js +++ b/src/components/nav_drawer/index.js @@ -1,3 +1,11 @@ export { EuiNavDrawer, } from './nav_drawer'; + +export { + EuiNavDrawerMenu, +} from './nav_drawer_menu'; + +export { + EuiNavDrawerFlyout, +} from './nav_drawer_flyout'; diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 870bbaf5a8e..414eec9a7c2 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -2,12 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiNavDrawer = ({ children, className, isCollapsed, ...rest }) => { +export const EuiNavDrawer = ({ children, className, isCollapsed, flyoutIsCollapsed, ...rest }) => { const classes = classNames( 'euiNavDrawer', { 'euiNavDrawer-isCollapsed': isCollapsed, 'euiNavDrawer-isExpanded': !isCollapsed, + 'euiNavDrawer-flyoutIsCollapsed': flyoutIsCollapsed, + 'euiNavDrawer-flyoutIsExpanded': !flyoutIsCollapsed, }, className ); @@ -29,6 +31,11 @@ EuiNavDrawer.propTypes = { * Toggle the nav drawer between collapsed and expanded */ isCollapsed: PropTypes.bool, + + /** + * Toggle the flyout menu between collapsed and expanded + */ + flyoutIsCollapsed: PropTypes.bool, }; EuiNavDrawer.defaultProps = { diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js new file mode 100644 index 00000000000..821243f4a2e --- /dev/null +++ b/src/components/nav_drawer/nav_drawer_flyout.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import { EuiTitle } from '../title'; +import { EuiListGroup } from '../list_group'; + +export const EuiNavDrawerFlyout = ({ children, className, title, isCollapsed, listItems, ...rest }) => { + const classes = classNames( + 'euiNavDrawerFlyout', + { + 'euiNavDrawerFlyout-isCollapsed': isCollapsed, + 'euiNavDrawerFlyout-isExpanded': !isCollapsed, + }, + className + ); + + return ( +
+ {children} +
{title}
+ +
+ ); +}; + +EuiNavDrawerFlyout.propTypes = { + className: PropTypes.string, + children: PropTypes.node, + + /** + * Display a title atop the flyout + */ + title: PropTypes.string, + + /** + * Toggle the nav drawer between collapsed and expanded + */ + isCollapsed: PropTypes.bool, +}; + +EuiNavDrawerFlyout.defaultProps = { + isCollapsed: true, +}; \ No newline at end of file diff --git a/src/components/nav_drawer/nav_drawer_menu.js b/src/components/nav_drawer/nav_drawer_menu.js new file mode 100644 index 00000000000..ff95bbcaad9 --- /dev/null +++ b/src/components/nav_drawer/nav_drawer_menu.js @@ -0,0 +1,37 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +export const EuiNavDrawerMenu = ({ children, className, isCollapsed, ...rest }) => { + const classes = classNames( + 'euiNavDrawerMenu', + { + 'euiNavDrawerMenu-isCollapsed': isCollapsed, + 'euiNavDrawerMenu-isExpanded': !isCollapsed, + }, + className + ); + + return ( +
+ {children} +
+ ); +}; + +EuiNavDrawerMenu.propTypes = { + className: PropTypes.string, + children: PropTypes.node, + + /** + * Toggle the nav drawer between collapsed and expanded + */ + isCollapsed: PropTypes.bool, +}; + +EuiNavDrawerMenu.defaultProps = { + isCollapsed: true, +}; \ No newline at end of file From 874a2d5e843af30535635f8935fa4a3df11513c1 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 3 Jan 2019 11:23:27 -0600 Subject: [PATCH 04/22] more complete example --- src-docs/src/views/nav_drawer/nav_drawer.js | 191 +++++++++++++------ src/components/nav_drawer/_nav_drawer.scss | 22 ++- src/components/nav_drawer/nav_drawer.js | 6 +- src/components/nav_drawer/nav_drawer_menu.js | 15 +- 4 files changed, 157 insertions(+), 77 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index f349350e177..1d57aea638b 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { EuiPage, @@ -19,6 +19,10 @@ import { EuiNavDrawerFlyout, EuiListGroup, EuiHorizontalRule, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiSwitch, } from '../../../../src/components'; export default class extends Component { @@ -28,6 +32,10 @@ export default class extends Component { this.state = { isCollapsed: true, flyoutIsCollapsed: true, + flyoutIsAnimating: false, + hasDelay: true, + navFlyoutTitle: undefined, + navFlyoutContent: [], }; this.topLinks = [ @@ -37,27 +45,28 @@ export default class extends Component { size: 's', style: { color: 'inherit' }, 'aria-label': 'Recently viewed items', - onClick: this.expandFlyout, + onClick: () => this.expandFlyout('recents', 'Recent items'), extraAction: { color: 'subdued', iconType: 'arrowRight', iconSize: 's', 'aria-label': 'Expand to view recent apps and objects', - onClick: this.expandFlyout, + onClick: () => this.expandFlyout('recents', 'Recent items'), }, }, { label: 'Favorites', - href: '/#/layout/nav-drawer', iconType: 'starEmpty', size: 's', style: { color: 'inherit' }, 'aria-label': 'Favorited items', + onClick: () => this.expandFlyout('favorites', 'Favorited items'), extraAction: { color: 'subdued', iconType: 'arrowRight', iconSize: 's', 'aria-label': 'Expand to view favorited apps and objects', + onClick: () => this.expandFlyout('favorites', 'Favorited items'), }, }, ]; @@ -305,84 +314,158 @@ export default class extends Component { }, }, ]; + + this.favoriteLinks = [ + { + label: 'My workpad', + href: '/#/layout/nav-drawer', + iconType: 'canvasApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'My workpad', + extraAction: { + color: 'subdued', + iconType: 'starEmpty', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + { + label: 'My logs', + href: '/#/layout/nav-drawer', + iconType: 'loggingApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'My logs', + extraAction: { + color: 'subdued', + iconType: 'starEmpty', + iconSize: 's', + 'aria-label': 'Add to favorites', + }, + }, + ]; } renderLogo() { return ; } + toggleHasDelay = () => { + this.setState(prevState => ({ hasDelay: !prevState.hasDelay })); + }; + expandDrawer = () => { this.setState({ isCollapsed: false }); }; collapseDrawer = () => { - this.setState({ isCollapsed: true }); + this.setState({ flyoutIsAnimating: false }); + + setTimeout(() => { + this.setState({ + isCollapsed: true, + flyoutIsCollapsed: true, + }); + }, 350); }; - expandFlyout = () => { - this.setState({ flyoutIsCollapsed: false }); + expandFlyout = (id, title) => { + const content = (id === 'recents') ? this.recentLinks : this.favoriteLinks; + + this.setState({ + flyoutIsCollapsed: false, + flyoutIsAnimating: true, + navFlyoutTitle: title, + navFlyoutContent: content, + }); }; collapseFlyout = () => { - this.setState({ flyoutIsCollapsed: true }); + this.setState({ flyoutIsAnimating: true }); + + setTimeout(() => { + this.setState({ flyoutIsCollapsed: true }); + }, 250); }; render() { const { isCollapsed, flyoutIsCollapsed, + flyoutIsAnimating, + hasDelay, + navFlyoutTitle, + navFlyoutContent, } = this.state; return ( -
- - - {this.renderLogo()} - - - - - - - - - - + + + Show with hover delay} + checked={this.state.hasDelay} + onChange={this.toggleHasDelay} /> - + + + + + +
+ + + {this.renderLogo()} + + + + + + + + + + + - - - - -

Page title

-
-
-
- - - - -

Content title

+ + + + +

Page title

-
-
- - Content body - -
-
-
-
+ + + + + + +

Content title

+
+
+
+ + Content body + +
+ +
+
+ ); } } diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index fe484b083c7..42edd2a6e25 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -6,12 +6,11 @@ position: absolute; left: 0; top: 0; - // z-index: $euiZHeader; // ensure the shadow shows above content background: $euiHeaderBackgroundColor; box-shadow: $euiNavDrawerSideShadow; &.euiNavDrawer-isCollapsed { - transition: width $euiAnimSpeedFast ease-in; + transition: width $euiAnimSpeedExtraFast ease-in; &.euiNavDrawer-flyoutIsExpanded { width: $euiNavDrawerWidthCollapsed + $euiNavDrawerWidthExpanded; @@ -20,27 +19,34 @@ &.euiNavDrawer-isExpanded { width: $euiNavDrawerWidthExpanded; - transition: width $euiAnimSpeedNormal ease-out; - // transition: width $euiAnimSpeedNormal ease-out 1.8s; // TODO Delays the expanded view + transition: width $euiAnimSpeedFast ease-out; + + &.euiNavDrawer-isDelayed { + transition: width $euiAnimSpeedFast ease-out 1.8s; // TODO For prototype alternative + } .euiNavDrawerMenu .euiListGroupItem__label, .euiNavDrawerMenu .euiListGroupItem__extraAction { visibility: visible; + opacity: 1; + transition: opacity $euiAnimSpeedExtraFast .2s; } &.euiNavDrawer-flyoutIsExpanded { width: $euiNavDrawerWidthExpanded * 2; - // transition-delay: 0s; // TODO works with delay } - // &.euiNavDrawer-flyoutIsCollapsed { - // transition-delay: 0s; // TODO this fixes the delay when flyout collapses, but breaks the delay when menu expands - // } + &.euiNavDrawer-flyoutIsAnimating { + transition-delay: 0s; + transition-property: width; + } } .euiNavDrawerMenu .euiListGroupItem__label, .euiNavDrawerMenu .euiListGroupItem__extraAction { visibility: hidden; white-space: nowrap; + opacity: 0; + transition: opacity $euiAnimSpeedExtraFast; } } diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 414eec9a7c2..d0a974c36b0 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiNavDrawer = ({ children, className, isCollapsed, flyoutIsCollapsed, ...rest }) => { +export const EuiNavDrawer = ({ children, className, isCollapsed, flyoutIsCollapsed, flyoutIsAnimating, hasDelay, ...rest }) => { const classes = classNames( 'euiNavDrawer', { @@ -10,6 +10,8 @@ export const EuiNavDrawer = ({ children, className, isCollapsed, flyoutIsCollaps 'euiNavDrawer-isExpanded': !isCollapsed, 'euiNavDrawer-flyoutIsCollapsed': flyoutIsCollapsed, 'euiNavDrawer-flyoutIsExpanded': !flyoutIsCollapsed, + 'euiNavDrawer-flyoutIsAnimating': flyoutIsAnimating, + 'euiNavDrawer-isDelayed': hasDelay, }, className ); @@ -36,6 +38,8 @@ EuiNavDrawer.propTypes = { * Toggle the flyout menu between collapsed and expanded */ flyoutIsCollapsed: PropTypes.bool, + flyoutIsAnimatigng: PropTypes.bool, + hasDelay: PropTypes.bool, }; EuiNavDrawer.defaultProps = { diff --git a/src/components/nav_drawer/nav_drawer_menu.js b/src/components/nav_drawer/nav_drawer_menu.js index ff95bbcaad9..ac75d0388b5 100644 --- a/src/components/nav_drawer/nav_drawer_menu.js +++ b/src/components/nav_drawer/nav_drawer_menu.js @@ -2,13 +2,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiNavDrawerMenu = ({ children, className, isCollapsed, ...rest }) => { +export const EuiNavDrawerMenu = ({ children, className, ...rest }) => { const classes = classNames( 'euiNavDrawerMenu', - { - 'euiNavDrawerMenu-isCollapsed': isCollapsed, - 'euiNavDrawerMenu-isExpanded': !isCollapsed, - }, className ); @@ -25,13 +21,4 @@ export const EuiNavDrawerMenu = ({ children, className, isCollapsed, ...rest }) EuiNavDrawerMenu.propTypes = { className: PropTypes.string, children: PropTypes.node, - - /** - * Toggle the nav drawer between collapsed and expanded - */ - isCollapsed: PropTypes.bool, -}; - -EuiNavDrawerMenu.defaultProps = { - isCollapsed: true, }; \ No newline at end of file From 6eb89924f4cef51aed36cffc5ce3abd83af4ad06 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 4 Jan 2019 11:28:22 -0600 Subject: [PATCH 05/22] improved example --- src-docs/src/views/nav_drawer/nav_drawer.js | 84 ++++++++++----------- src/components/nav_drawer/_nav_drawer.scss | 6 +- 2 files changed, 40 insertions(+), 50 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 1d57aea638b..6c3c3fce354 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -52,6 +52,7 @@ export default class extends Component { iconSize: 's', 'aria-label': 'Expand to view recent apps and objects', onClick: () => this.expandFlyout('recents', 'Recent items'), + alwaysShow: true, }, }, { @@ -67,79 +68,82 @@ export default class extends Component { iconSize: 's', 'aria-label': 'Expand to view favorited apps and objects', onClick: () => this.expandFlyout('favorites', 'Favorited items'), + alwaysShow: true, }, }, ]; this.bottomLinks = [ { - label: 'Discover', + label: 'Canvas', href: '/#/layout/nav-drawer', - iconType: 'discoverApp', + iconType: 'canvasApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'Discover', + 'aria-label': 'Canvas', extraAction: { color: 'subdued', - iconType: 'pin', + iconType: 'pinFilled', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', + alwaysShow: true, }, }, { - label: 'Visualize', + label: 'Maps', href: '/#/layout/nav-drawer', - iconType: 'visualizeApp', + iconType: 'gisApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'Visualize', + 'aria-label': 'Maps', extraAction: { color: 'subdued', - iconType: 'pin', + iconType: 'pinFilled', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', + alwaysShow: true, }, }, { - label: 'Dashboard', + label: 'Discover', href: '/#/layout/nav-drawer', - iconType: 'dashboardApp', + iconType: 'discoverApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'Dashboard', + 'aria-label': 'Discover', extraAction: { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { - label: 'Timelion', + label: 'Visualize', href: '/#/layout/nav-drawer', - iconType: 'timelionApp', + iconType: 'visualizeApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'Timelion', + 'aria-label': 'Visualize', extraAction: { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { - label: 'Canvas', + label: 'Dashboard', href: '/#/layout/nav-drawer', - iconType: 'canvasApp', + iconType: 'dashboardApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'Canvas', + 'aria-label': 'Dashboard', extraAction: { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -153,7 +157,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -167,7 +171,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -181,7 +185,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -195,7 +199,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -209,7 +213,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -223,7 +227,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -237,21 +241,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', - }, - }, - { - label: 'Maps', - href: '/#/layout/nav-drawer', - iconType: 'gisApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Maps', - extraAction: { - color: 'subdued', - iconType: 'pin', - iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, { @@ -265,7 +255,7 @@ export default class extends Component { color: 'subdued', iconType: 'pin', iconSize: 's', - 'aria-label': 'Add to favorites', + 'aria-label': 'Pin to top', }, }, ]; @@ -325,9 +315,10 @@ export default class extends Component { 'aria-label': 'My workpad', extraAction: { color: 'subdued', - iconType: 'starEmpty', + iconType: 'starFilled', iconSize: 's', 'aria-label': 'Add to favorites', + alwaysShow: true, }, }, { @@ -339,9 +330,10 @@ export default class extends Component { 'aria-label': 'My logs', extraAction: { color: 'subdued', - iconType: 'starEmpty', + iconType: 'starFilled', iconSize: 's', 'aria-label': 'Add to favorites', + alwaysShow: true, }, }, ]; diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index 42edd2a6e25..0406ffc0042 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -25,8 +25,7 @@ transition: width $euiAnimSpeedFast ease-out 1.8s; // TODO For prototype alternative } - .euiNavDrawerMenu .euiListGroupItem__label, - .euiNavDrawerMenu .euiListGroupItem__extraAction { + .euiNavDrawerMenu .euiListGroupItem__label { visibility: visible; opacity: 1; transition: opacity $euiAnimSpeedExtraFast .2s; @@ -42,8 +41,7 @@ } } - .euiNavDrawerMenu .euiListGroupItem__label, - .euiNavDrawerMenu .euiListGroupItem__extraAction { + .euiNavDrawerMenu .euiListGroupItem__label { visibility: hidden; white-space: nowrap; opacity: 0; From beebcd3c73ccf14fdc4bea0492527f970228e5eb Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 4 Jan 2019 17:23:18 -0600 Subject: [PATCH 06/22] moves nav outside of EuiPage --- src-docs/src/views/nav_drawer/nav_drawer.js | 48 ++++++++++----------- src/components/nav_drawer/_nav_drawer.scss | 6 +-- src/components/nav_drawer/_variables.scss | 5 ++- 3 files changed, 31 insertions(+), 28 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 6c3c3fce354..1597b0c69ec 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -405,35 +405,35 @@ export default class extends Component { -
+
{this.renderLogo()} - - - - - - - - - - + + + + + + + + + diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index 0406ffc0042..84a931e2dfd 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -2,10 +2,10 @@ .euiNavDrawer { width: $euiNavDrawerWidthCollapsed; - height: 100%; - position: absolute; + height: calc(100% - #{$euiHeaderSize}); + position: fixed; left: 0; - top: 0; + top: $euiHeaderSize; background: $euiHeaderBackgroundColor; box-shadow: $euiNavDrawerSideShadow; diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss index ec5afc5d245..323d254abe3 100644 --- a/src/components/nav_drawer/_variables.scss +++ b/src/components/nav_drawer/_variables.scss @@ -4,4 +4,7 @@ $euiNavDrawerBackgroundColor: $euiColorEmptyShade; // Drawer variables $euiNavDrawerWidthExpanded: 240px; $euiNavDrawerWidthCollapsed: 48px; -$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); \ No newline at end of file +$euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); + +// Layout variables +$euiHeaderSize: $euiSizeXXL + $euiSizeL; \ No newline at end of file From b758c1cdea03e7f4b16610a0ce732e6d66f076f5 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Wed, 9 Jan 2019 16:22:43 -0600 Subject: [PATCH 07/22] incorporating prototype feedback --- src-docs/src/views/nav_drawer/nav_drawer.js | 177 +++++++++++------- src/components/nav_drawer/_nav_drawer.scss | 24 +-- .../nav_drawer/_nav_drawer_flyout.scss | 21 +-- src/components/nav_drawer/_variables.scss | 8 +- .../nav_drawer/nav_drawer_flyout.js | 3 +- 5 files changed, 135 insertions(+), 98 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 1597b0c69ec..57ac9ae3fb4 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -12,17 +12,14 @@ import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem, - EuiHeaderLogo, + EuiHeaderSectionItemButton, + EuiIcon, EuiTitle, EuiNavDrawer, EuiNavDrawerMenu, EuiNavDrawerFlyout, EuiListGroup, EuiHorizontalRule, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiSwitch, } from '../../../../src/components'; export default class extends Component { @@ -33,7 +30,6 @@ export default class extends Component { isCollapsed: true, flyoutIsCollapsed: true, flyoutIsAnimating: false, - hasDelay: true, navFlyoutTitle: undefined, navFlyoutContent: [], }; @@ -45,13 +41,13 @@ export default class extends Component { size: 's', style: { color: 'inherit' }, 'aria-label': 'Recently viewed items', - onClick: () => this.expandFlyout('recents', 'Recent items'), + onClick: () => this.expandFlyout(this.recentLinks, 'Recent items'), extraAction: { color: 'subdued', iconType: 'arrowRight', iconSize: 's', 'aria-label': 'Expand to view recent apps and objects', - onClick: () => this.expandFlyout('recents', 'Recent items'), + onClick: () => this.expandFlyout(this.recentLinks, 'Recent items'), alwaysShow: true, }, }, @@ -61,19 +57,19 @@ export default class extends Component { size: 's', style: { color: 'inherit' }, 'aria-label': 'Favorited items', - onClick: () => this.expandFlyout('favorites', 'Favorited items'), + onClick: () => this.expandFlyout(this.favoriteLinks, 'Favorite items'), extraAction: { color: 'subdued', iconType: 'arrowRight', iconSize: 's', 'aria-label': 'Expand to view favorited apps and objects', - onClick: () => this.expandFlyout('favorites', 'Favorited items'), + onClick: () => this.expandFlyout(this.favoriteLinks, 'Favorite items'), alwaysShow: true, }, }, ]; - this.bottomLinks = [ + this.exploreLinks = [ { label: 'Canvas', href: '/#/layout/nav-drawer', @@ -81,21 +77,7 @@ export default class extends Component { size: 's', style: { color: 'inherit' }, 'aria-label': 'Canvas', - extraAction: { - color: 'subdued', - iconType: 'pinFilled', - iconSize: 's', - 'aria-label': 'Pin to top', - alwaysShow: true, - }, - }, - { - label: 'Maps', - href: '/#/layout/nav-drawer', - iconType: 'gisApp', - size: 's', - style: { color: 'inherit' }, - 'aria-label': 'Maps', + isActive: true, extraAction: { color: 'subdued', iconType: 'pinFilled', @@ -147,12 +129,12 @@ export default class extends Component { }, }, { - label: 'APM', + label: 'Machine learning', href: '/#/layout/nav-drawer', - iconType: 'apmApp', + iconType: 'machineLearningApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'APM', + 'aria-label': 'Machine learning', extraAction: { color: 'subdued', iconType: 'pin', @@ -161,12 +143,29 @@ export default class extends Component { }, }, { - label: 'Machine learning', + label: 'Graph', href: '/#/layout/nav-drawer', - iconType: 'machineLearningApp', + iconType: 'graphApp', size: 's', style: { color: 'inherit' }, - 'aria-label': 'Machine learning', + 'aria-label': 'Graph', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Pin to top', + }, + } + ]; + + this.solutionsLinks = [ + { + label: 'APM', + href: '/#/layout/nav-drawer', + iconType: 'apmApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'APM', extraAction: { color: 'subdued', iconType: 'pin', @@ -175,7 +174,7 @@ export default class extends Component { }, }, { - label: 'Infra ops', + label: 'Infrastructure', href: '/#/layout/nav-drawer', iconType: 'infraApp', size: 's', @@ -189,7 +188,7 @@ export default class extends Component { }, }, { - label: 'Logs', + label: 'Log viewer', href: '/#/layout/nav-drawer', iconType: 'loggingApp', size: 's', @@ -203,9 +202,9 @@ export default class extends Component { }, }, { - label: 'Graph', + label: 'Uptime', href: '/#/layout/nav-drawer', - iconType: 'graphApp', + iconType: 'upgradeAssistantApp', size: 's', style: { color: 'inherit' }, 'aria-label': 'Graph', @@ -216,6 +215,56 @@ export default class extends Component { 'aria-label': 'Pin to top', }, }, + { + label: 'Maps', + href: '/#/layout/nav-drawer', + iconType: 'gisApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Maps', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Pin to top', + }, + }, + { + label: 'SIEM', + href: '/#/layout/nav-drawer', + iconType: 'securityAnalyticsApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'SIEM', + extraAction: { + color: 'subdued', + iconType: 'pin', + iconSize: 's', + 'aria-label': 'Pin to top', + }, + } + ]; + + this.adminLinks = [ + { + label: 'Admin', + iconType: 'managementApp', + size: 's', + style: { color: 'inherit' }, + 'aria-label': 'Admin', + onClick: () => this.expandFlyout(this.adminSubLinks, 'Tools and settings'), + extraAction: { + color: 'subdued', + iconType: 'arrowRight', + iconSize: 's', + 'aria-label': 'Pin to top', + alwaysShow: true, + onClick: () => this.expandFlyout(this.adminSubLinks, 'Tools and settings'), + }, + }, + ]; + + this.adminSubLinks = [ { label: 'Dev tools', href: '/#/layout/nav-drawer', @@ -225,13 +274,13 @@ export default class extends Component { 'aria-label': 'Dev tools', extraAction: { color: 'subdued', - iconType: 'pin', + iconType: 'starEmpty', iconSize: 's', - 'aria-label': 'Pin to top', + 'aria-label': 'Add to favorites', }, }, { - label: 'Monitoring', + label: 'Stack Monitoring', href: '/#/layout/nav-drawer', iconType: 'monitoringApp', size: 's', @@ -239,13 +288,13 @@ export default class extends Component { 'aria-label': 'Monitoring', extraAction: { color: 'subdued', - iconType: 'pin', + iconType: 'starEmpty', iconSize: 's', - 'aria-label': 'Pin to top', + 'aria-label': 'Add to favorites', }, }, { - label: 'Management', + label: 'Stack Management', href: '/#/layout/nav-drawer', iconType: 'managementApp', size: 's', @@ -253,9 +302,9 @@ export default class extends Component { 'aria-label': 'Management', extraAction: { color: 'subdued', - iconType: 'pin', + iconType: 'starEmpty', iconSize: 's', - 'aria-label': 'Pin to top', + 'aria-label': 'Add to favorites', }, }, ]; @@ -340,13 +389,15 @@ export default class extends Component { } renderLogo() { - return ; + return ( + + + + ); } - toggleHasDelay = () => { - this.setState(prevState => ({ hasDelay: !prevState.hasDelay })); - }; - expandDrawer = () => { this.setState({ isCollapsed: false }); }; @@ -362,14 +413,14 @@ export default class extends Component { }, 350); }; - expandFlyout = (id, title) => { - const content = (id === 'recents') ? this.recentLinks : this.favoriteLinks; + expandFlyout = (links, title) => { + const content = links; this.setState({ flyoutIsCollapsed: false, flyoutIsAnimating: true, navFlyoutTitle: title, - navFlyoutContent: content, + navFlyoutContent: content }); }; @@ -386,25 +437,12 @@ export default class extends Component { isCollapsed, flyoutIsCollapsed, flyoutIsAnimating, - hasDelay, navFlyoutTitle, navFlyoutContent, } = this.state; return ( - - - Show with hover delay} - checked={this.state.hasDelay} - onChange={this.toggleHasDelay} - /> - - - - -
@@ -413,7 +451,6 @@ export default class extends Component { - - + + + + + + {children} -
{title}
+
); From a189625cf0fd4cb79d4abbf6f00787e390468be2 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 10 Jan 2019 16:26:18 -0600 Subject: [PATCH 08/22] adds mobile nav --- src-docs/src/views/nav_drawer/nav_drawer.js | 35 +++++++++++++++++- src/components/nav_drawer/_nav_drawer.scss | 41 ++++++++++++++++++--- src/components/nav_drawer/_variables.scss | 1 + src/components/nav_drawer/nav_drawer.js | 14 ++++++- 4 files changed, 83 insertions(+), 8 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 57ac9ae3fb4..b5000b1371e 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -20,6 +20,7 @@ import { EuiNavDrawerFlyout, EuiListGroup, EuiHorizontalRule, + EuiShowFor, } from '../../../../src/components'; export default class extends Component { @@ -32,6 +33,7 @@ export default class extends Component { flyoutIsAnimating: false, navFlyoutTitle: undefined, navFlyoutContent: [], + mobileIsHidden: true, }; this.topLinks = [ @@ -398,6 +400,23 @@ export default class extends Component { ); } + renderMenuTrigger() { + return ( + + + + ); + } + + toggleOpen = () => { + this.setState({ + mobileIsHidden: !this.state.mobileIsHidden + }); + }; + expandDrawer = () => { this.setState({ isCollapsed: false }); }; @@ -409,6 +428,7 @@ export default class extends Component { this.setState({ isCollapsed: true, flyoutIsCollapsed: true, + mobileIsHidden: true, }); }, 350); }; @@ -416,8 +436,11 @@ export default class extends Component { expandFlyout = (links, title) => { const content = links; + this.setState(prevState => ({ + flyoutIsCollapsed: prevState.navFlyoutTitle === title ? !this.state.flyoutIsCollapsed : false, + })); + this.setState({ - flyoutIsCollapsed: false, flyoutIsAnimating: true, navFlyoutTitle: title, navFlyoutContent: content @@ -439,6 +462,7 @@ export default class extends Component { flyoutIsAnimating, navFlyoutTitle, navFlyoutContent, + mobileIsHidden, } = this.state; return ( @@ -446,6 +470,14 @@ export default class extends Component {
+ + + {this.renderMenuTrigger()} + + {this.renderLogo()} @@ -456,6 +488,7 @@ export default class extends Component { onMouseOver={this.expandDrawer} onFocus={this.expandDrawer} onMouseLeave={this.collapseDrawer} + mobileIsHidden={mobileIsHidden} style={{ position: 'absolute' }} // This is for the embedded docs example only > diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index cf940c29197..5ebf8d1e4c2 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -8,17 +8,12 @@ top: $euiHeaderSize; overflow-x: hidden; overflow-y: scroll; + z-index: $euiZHeader - 1; background: $euiHeaderBackgroundColor; box-shadow: $euiNavDrawerSideShadow; transition: width $euiAnimSpeedFast $euiAnimSlightResistance; transition-delay: $euiNavDrawerContractingDelay; - &.euiNavDrawer-isCollapsed { - &.euiNavDrawer-flyoutIsExpanded { - width: $euiNavDrawerWidthCollapsed + $euiNavDrawerWidthExpanded; - } - } - &.euiNavDrawer-isExpanded { width: $euiNavDrawerWidthExpanded; transition-delay: $euiNavDrawerExpandingDelay; @@ -48,3 +43,37 @@ ); } } + +@include euiBreakpoint('xs', 's') { + .euiNavDrawer { + width: $euiNavDrawerWidthExpanded; + height: calc(100% - #{$euiHeaderSizeMobile}); + top: $euiHeaderSizeMobile; + + &.euiNavDrawer-mobileIsHidden { + width: 0; + } + + &.euiNavDrawer-isExpanded.euiNavDrawer-flyoutIsExpanded { + width: $euiNavDrawerWidthCollapsed + $euiNavDrawerWidthExpanded; + + .euiNavDrawerFlyout { + left: $euiNavDrawerWidthCollapsed; + } + } + + &.euiNavDrawer-flyoutIsExpanded .euiNavDrawerMenu { + width: $euiNavDrawerWidthCollapsed; + } + + &.euiNavDrawer-flyoutIsCollapsed .euiNavDrawerFlyout { + width: 0; + transition-delay: 0s; + transition-duration: 0s; + } + + .euiNavDrawerMenu .euiListGroupItem__label { + opacity: 1; + } + } +} diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss index 3465762af93..f2b140fd214 100644 --- a/src/components/nav_drawer/_variables.scss +++ b/src/components/nav_drawer/_variables.scss @@ -8,6 +8,7 @@ $euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); // Layout variables $euiHeaderSize: $euiSizeXXL + $euiSizeL; +$euiHeaderSizeMobile: $euiHeaderSize - $euiSize; // Animation variables $euiNavDrawerExpandingDelay: $euiAnimSpeedNormal; diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index d0a974c36b0..9021ed56a6f 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -2,7 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiNavDrawer = ({ children, className, isCollapsed, flyoutIsCollapsed, flyoutIsAnimating, hasDelay, ...rest }) => { +export const EuiNavDrawer = ({ + children, + className, + isCollapsed, + flyoutIsCollapsed, + flyoutIsAnimating, + hasDelay, + mobileIsHidden, + ...rest +}) => { const classes = classNames( 'euiNavDrawer', { @@ -12,6 +21,7 @@ export const EuiNavDrawer = ({ children, className, isCollapsed, flyoutIsCollaps 'euiNavDrawer-flyoutIsExpanded': !flyoutIsCollapsed, 'euiNavDrawer-flyoutIsAnimating': flyoutIsAnimating, 'euiNavDrawer-isDelayed': hasDelay, + 'euiNavDrawer-mobileIsHidden': mobileIsHidden, }, className ); @@ -40,8 +50,10 @@ EuiNavDrawer.propTypes = { flyoutIsCollapsed: PropTypes.bool, flyoutIsAnimatigng: PropTypes.bool, hasDelay: PropTypes.bool, + mobileIsHidden: PropTypes.bool, }; EuiNavDrawer.defaultProps = { isCollapsed: true, + mobileIsHidden: true, }; \ No newline at end of file From 0c3e3ed8bbbab6d9f49fc198ad97c2e63b9d2efe Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 11 Jan 2019 10:09:44 -0600 Subject: [PATCH 09/22] ie and edge fixes --- src-docs/src/views/nav_drawer/nav_drawer.js | 39 ++++++++++--------- .../list_group/_list_group_item.scss | 2 +- src/components/nav_drawer/_nav_drawer.scss | 3 ++ 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index b5000b1371e..1ef3f41318b 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -21,6 +21,7 @@ import { EuiListGroup, EuiHorizontalRule, EuiShowFor, + EuiHideFor } from '../../../../src/components'; export default class extends Component { @@ -509,25 +510,27 @@ export default class extends Component { - - - -

Page title

-
-
-
- - - - -

Content title

+ + + + +

Page title

-
-
- - Content body - -
+ + + + + + +

Content title

+
+
+
+ + Content body + +
+
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index 06ea7de8697..f2cb42ce077 100644 --- a/src/components/list_group/_list_group_item.scss +++ b/src/components/list_group/_list_group_item.scss @@ -41,7 +41,7 @@ padding: $euiSizeM $euiSizeS; display: flex; align-items: center; - flex-grow: 1; + flex: 1 0 auto; // The flex-shrink and flex-basis values are needed for IE11 text-align: left; } diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index 5ebf8d1e4c2..0a082b839ed 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -13,6 +13,9 @@ box-shadow: $euiNavDrawerSideShadow; transition: width $euiAnimSpeedFast $euiAnimSlightResistance; transition-delay: $euiNavDrawerContractingDelay; + // This prevents the scrollbar from overlapping the nav links. Scrollbars still show on hover + // sass-lint:disable no-vendor-prefixes + -ms-overflow-style: -ms-autohiding-scrollbar; &.euiNavDrawer-isExpanded { width: $euiNavDrawerWidthExpanded; From f8d2c7ad827d15dbe5b29571b8a07e6ce17e45ae Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 11 Jan 2019 12:11:03 -0600 Subject: [PATCH 10/22] adjust euiheader size to match side nav --- src-docs/src/views/nav_drawer/nav_drawer.js | 63 +++++++++++++++++++ .../__snapshots__/header_logo.test.js.snap | 6 +- src/components/header/_index.scss | 2 +- src/components/header/header_logo.js | 2 +- .../header_section/_header_section_item.scss | 2 +- src/components/nav_drawer/_nav_drawer.scss | 2 +- src/components/nav_drawer/_variables.scss | 4 +- 7 files changed, 72 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 1ef3f41318b..c0344ffa46f 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -13,6 +13,7 @@ import { EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, + EuiHeaderBreadcrumbs, EuiIcon, EuiTitle, EuiNavDrawer, @@ -24,6 +25,9 @@ import { EuiHideFor } from '../../../../src/components'; +import HeaderUserMenu from '../header/header_user_menu'; +import HeaderSpacesMenu from '../header/header_spaces_menu'; + export default class extends Component { constructor(props) { super(props); @@ -412,6 +416,54 @@ export default class extends Component { ); } + renderBreadcrumbs() { + const breadcrumbs = [ + { + text: 'Management', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked management'); + }, + 'data-test-subj': 'breadcrumbsAnimals', + className: 'customClass' + }, + { + text: 'Truncation test is here for a really long item', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked truncation test'); + } + }, + { + text: 'hidden', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked hidden'); + } + }, + { + text: 'Users', + href: '#', + onClick: e => { + e.preventDefault(); + console.log('You clicked users'); + } + }, + { + text: 'Create' + } + ]; + + return ( + + ); + } + toggleOpen = () => { this.setState({ mobileIsHidden: !this.state.mobileIsHidden @@ -480,6 +532,17 @@ export default class extends Component { {this.renderLogo()} + + + + + + {this.renderBreadcrumbs()} + + + + + diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss index 9ec1827752f..d6d40c1d7a9 100644 --- a/src/components/header/header_section/_header_section_item.scss +++ b/src/components/header/header_section/_header_section_item.scss @@ -19,7 +19,7 @@ .euiHeaderSectionItem__button { height: $euiHeaderChildSize; - min-width: $euiHeaderChildSize; + min-width: $euiHeaderChildSize + 1px; text-align: center; font-size: 0; // aligns icons better vertically diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index 0a082b839ed..fd4efc4eaeb 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -8,7 +8,7 @@ top: $euiHeaderSize; overflow-x: hidden; overflow-y: scroll; - z-index: $euiZHeader - 1; + z-index: $euiZHeader; background: $euiHeaderBackgroundColor; box-shadow: $euiNavDrawerSideShadow; transition: width $euiAnimSpeedFast $euiAnimSlightResistance; diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss index f2b140fd214..b36ede4725b 100644 --- a/src/components/nav_drawer/_variables.scss +++ b/src/components/nav_drawer/_variables.scss @@ -7,8 +7,8 @@ $euiNavDrawerWidthCollapsed: 48px; $euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); // Layout variables -$euiHeaderSize: $euiSizeXXL + $euiSizeL; -$euiHeaderSizeMobile: $euiHeaderSize - $euiSize; +$euiHeaderSize: $euiSizeXXL + $euiSizeS + 1px; +$euiHeaderSizeMobile: $euiSizeXL + $euiSizeXS + 1px; // Animation variables $euiNavDrawerExpandingDelay: $euiAnimSpeedNormal; From 650b63777279b03e59949c20b74514e3188af8b0 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 11 Jan 2019 12:25:32 -0600 Subject: [PATCH 11/22] update docs --- src-docs/src/views/nav_drawer/nav_drawer_example.js | 6 +++++- src/components/nav_drawer/nav_drawer.js | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer_example.js b/src-docs/src/views/nav_drawer/nav_drawer_example.js index 8c0b4de0eb3..a28df3fec52 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer_example.js +++ b/src-docs/src/views/nav_drawer/nav_drawer_example.js @@ -8,6 +8,7 @@ import { import { EuiNavDrawer, + EuiCode, } from '../../../../src/components'; import NavDrawer from './nav_drawer'; @@ -26,7 +27,10 @@ export const NavDrawerExample = { }], text: (

- The nav drawer is made up of several individual components. + EuiNavDrawer provides a side navigation feature that + is complete with interactions and a mobile-frienly design. It can + contain one or more EuiListGroup components and is + designed to be used in conjunction with EuiHeader.

), props: { diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index 9021ed56a6f..cf0fa9e3038 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -40,7 +40,7 @@ EuiNavDrawer.propTypes = { className: PropTypes.string, /** - * Toggle the nav drawer between collapsed and expanded + * Toggle the nav drawer between collapsed (docked) and expanded */ isCollapsed: PropTypes.bool, From 61d5aa28e1a8ecbd1e46a277e155d071e066b7a0 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 11 Jan 2019 14:14:48 -0600 Subject: [PATCH 12/22] fix scrollbar behavior --- src/components/nav_drawer/_nav_drawer.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index fd4efc4eaeb..31205d66e08 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -1,13 +1,13 @@ // Nav drawer. Global application navigation. .euiNavDrawer { + @include euiScrollBar; width: $euiNavDrawerWidthCollapsed; height: calc(100% - #{$euiHeaderSize}); position: fixed; left: 0; top: $euiHeaderSize; - overflow-x: hidden; - overflow-y: scroll; + overflow: hidden; z-index: $euiZHeader; background: $euiHeaderBackgroundColor; box-shadow: $euiNavDrawerSideShadow; @@ -20,6 +20,7 @@ &.euiNavDrawer-isExpanded { width: $euiNavDrawerWidthExpanded; transition-delay: $euiNavDrawerExpandingDelay; + overflow-y: auto; .euiNavDrawerMenu .euiListGroupItem__label { opacity: 1; From baf742caf2bd282a8d07a51607161be3b897736f Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 11 Jan 2019 14:56:01 -0600 Subject: [PATCH 13/22] add delay to show scrollbar --- src-docs/src/views/nav_drawer/nav_drawer.js | 16 ++++++++++++++-- src/components/nav_drawer/_nav_drawer.scss | 5 ++++- src/components/nav_drawer/nav_drawer.js | 4 ++++ 3 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index c0344ffa46f..f29f06d3513 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -39,6 +39,7 @@ export default class extends Component { navFlyoutTitle: undefined, navFlyoutContent: [], mobileIsHidden: true, + showScrollbar: false, }; this.topLinks = [ @@ -472,16 +473,25 @@ export default class extends Component { expandDrawer = () => { this.setState({ isCollapsed: false }); + + setTimeout(() => { + this.setState({ + showScrollbar: true, + }); + }, 350); }; collapseDrawer = () => { - this.setState({ flyoutIsAnimating: false }); + this.setState({ + flyoutIsAnimating: false, + }); setTimeout(() => { this.setState({ isCollapsed: true, flyoutIsCollapsed: true, mobileIsHidden: true, + showScrollbar: false, }); }, 350); }; @@ -516,6 +526,7 @@ export default class extends Component { navFlyoutTitle, navFlyoutContent, mobileIsHidden, + showScrollbar, } = this.state; return ( @@ -553,6 +564,7 @@ export default class extends Component { onFocus={this.expandDrawer} onMouseLeave={this.collapseDrawer} mobileIsHidden={mobileIsHidden} + showScrollbar={showScrollbar} style={{ position: 'absolute' }} // This is for the embedded docs example only > @@ -571,7 +583,7 @@ export default class extends Component { onMouseLeave={this.collapseFlyout} />
- + diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index 31205d66e08..e3a4b74cf10 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -20,7 +20,6 @@ &.euiNavDrawer-isExpanded { width: $euiNavDrawerWidthExpanded; transition-delay: $euiNavDrawerExpandingDelay; - overflow-y: auto; .euiNavDrawerMenu .euiListGroupItem__label { opacity: 1; @@ -46,6 +45,10 @@ $euiNavDrawerContractingDelay + $euiNavDrawerMenuAddedDelay ); } + + &.euiNavDrawer-showScrollbar { + overflow-y: auto; + } } @include euiBreakpoint('xs', 's') { diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index cf0fa9e3038..fb044501742 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -10,6 +10,7 @@ export const EuiNavDrawer = ({ flyoutIsAnimating, hasDelay, mobileIsHidden, + showScrollbar, ...rest }) => { const classes = classNames( @@ -22,6 +23,7 @@ export const EuiNavDrawer = ({ 'euiNavDrawer-flyoutIsAnimating': flyoutIsAnimating, 'euiNavDrawer-isDelayed': hasDelay, 'euiNavDrawer-mobileIsHidden': mobileIsHidden, + 'euiNavDrawer-showScrollbar': showScrollbar, }, className ); @@ -51,9 +53,11 @@ EuiNavDrawer.propTypes = { flyoutIsAnimatigng: PropTypes.bool, hasDelay: PropTypes.bool, mobileIsHidden: PropTypes.bool, + showScrollbar: PropTypes.bool, }; EuiNavDrawer.defaultProps = { isCollapsed: true, mobileIsHidden: true, + showScrollbar: false, }; \ No newline at end of file From 10cb2b05c324663121c76ad32795f706b51a62d9 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 11 Jan 2019 17:07:36 -0600 Subject: [PATCH 14/22] addresses some feedback --- src-docs/src/views/nav_drawer/nav_drawer.js | 9 +++------ .../header_section/_header_section_item.scss | 4 ++-- src/components/nav_drawer/_nav_drawer.scss | 19 +++++++++++++++---- 3 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index f29f06d3513..846f13c478b 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -22,7 +22,7 @@ import { EuiListGroup, EuiHorizontalRule, EuiShowFor, - EuiHideFor + EuiHideFor, } from '../../../../src/components'; import HeaderUserMenu from '../header/header_user_menu'; @@ -535,10 +535,7 @@ export default class extends Component { - + {this.renderMenuTrigger()} @@ -583,7 +580,7 @@ export default class extends Component { onMouseLeave={this.collapseFlyout} /> - + diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss index d6d40c1d7a9..6df1a27e2e9 100644 --- a/src/components/header/header_section/_header_section_item.scss +++ b/src/components/header/header_section/_header_section_item.scss @@ -45,8 +45,8 @@ .euiHeaderNotification { position: absolute; - top: 18%; - right: 18%; + top: 9%; + right: 9%; box-shadow: 0 0 0 1px $euiHeaderBackgroundColor; } diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index e3a4b74cf10..c3a02db48d4 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -54,8 +54,6 @@ @include euiBreakpoint('xs', 's') { .euiNavDrawer { width: $euiNavDrawerWidthExpanded; - height: calc(100% - #{$euiHeaderSizeMobile}); - top: $euiHeaderSizeMobile; &.euiNavDrawer-mobileIsHidden { width: 0; @@ -69,8 +67,14 @@ } } - &.euiNavDrawer-flyoutIsExpanded .euiNavDrawerMenu { - width: $euiNavDrawerWidthCollapsed; + &.euiNavDrawer-flyoutIsExpanded { + .euiNavDrawerMenu { + width: $euiNavDrawerWidthCollapsed; + } + + .euiNavDrawerMenu .euiListGroupItem__label { + display: none; + } } &.euiNavDrawer-flyoutIsCollapsed .euiNavDrawerFlyout { @@ -84,3 +88,10 @@ } } } + +@include euiBreakpoint('xs') { + .euiNavDrawer { + height: calc(100% - #{$euiHeaderSizeMobile}); + top: $euiHeaderSizeMobile; + } +} \ No newline at end of file From afa42f71229d3fb2b9f2eca7eae71adc9ba4e52c Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 14 Jan 2019 11:27:45 -0600 Subject: [PATCH 15/22] close mobile nav with outside click --- src-docs/src/views/nav_drawer/nav_drawer.js | 67 +++++++++++++-------- 1 file changed, 41 insertions(+), 26 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 846f13c478b..c75e40e55ee 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -23,6 +23,7 @@ import { EuiHorizontalRule, EuiShowFor, EuiHideFor, + EuiOutsideClickDetector, } from '../../../../src/components'; import HeaderUserMenu from '../header/header_user_menu'; @@ -40,6 +41,7 @@ export default class extends Component { navFlyoutContent: [], mobileIsHidden: true, showScrollbar: false, + outsideClickDisaled: true, }; this.topLinks = [ @@ -469,6 +471,12 @@ export default class extends Component { this.setState({ mobileIsHidden: !this.state.mobileIsHidden }); + + setTimeout(() => { + this.setState({ + outsideClickDisaled: this.state.mobileIsHidden ? true : false, + }); + }, 150); }; expandDrawer = () => { @@ -492,6 +500,7 @@ export default class extends Component { flyoutIsCollapsed: true, mobileIsHidden: true, showScrollbar: false, + outsideClickDisaled: true, }); }, 350); }; @@ -527,6 +536,7 @@ export default class extends Component { navFlyoutContent, mobileIsHidden, showScrollbar, + outsideClickDisaled, } = this.state; return ( @@ -553,33 +563,38 @@ export default class extends Component { - this.collapseDrawer()} + isDisabled={outsideClickDisaled} > - - - - - - - - - - - + + + + + + + + + + + + + From a006e7f0d6617a9542be0ef55cfcda05b5204d74 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 14 Jan 2019 13:12:00 -0600 Subject: [PATCH 16/22] makes menu and flyout scroll separately --- src/components/nav_drawer/_nav_drawer.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index c3a02db48d4..d688cd7d1c4 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -13,9 +13,6 @@ box-shadow: $euiNavDrawerSideShadow; transition: width $euiAnimSpeedFast $euiAnimSlightResistance; transition-delay: $euiNavDrawerContractingDelay; - // This prevents the scrollbar from overlapping the nav links. Scrollbars still show on hover - // sass-lint:disable no-vendor-prefixes - -ms-overflow-style: -ms-autohiding-scrollbar; &.euiNavDrawer-isExpanded { width: $euiNavDrawerWidthExpanded; @@ -46,8 +43,13 @@ ); } - &.euiNavDrawer-showScrollbar { + &.euiNavDrawer-showScrollbar .euiNavDrawerMenu, + &.euiNavDrawer-showScrollbar .euiNavDrawerFlyout { + height: 100%; overflow-y: auto; + // This prevents the scrollbar from overlapping the nav links. Scrollbars still show on hover + // sass-lint:disable no-vendor-prefixes + -ms-overflow-style: -ms-autohiding-scrollbar; } } From 6fa29ccf225d112196b79d9f8eab245964317b65 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 14 Jan 2019 17:04:45 -0600 Subject: [PATCH 17/22] clean up flyout props --- src/components/nav_drawer/nav_drawer.js | 10 +++++----- src/components/nav_drawer/nav_drawer_flyout.js | 5 ++--- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index fb044501742..03991ae15ef 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -8,7 +8,6 @@ export const EuiNavDrawer = ({ isCollapsed, flyoutIsCollapsed, flyoutIsAnimating, - hasDelay, mobileIsHidden, showScrollbar, ...rest @@ -21,7 +20,6 @@ export const EuiNavDrawer = ({ 'euiNavDrawer-flyoutIsCollapsed': flyoutIsCollapsed, 'euiNavDrawer-flyoutIsExpanded': !flyoutIsCollapsed, 'euiNavDrawer-flyoutIsAnimating': flyoutIsAnimating, - 'euiNavDrawer-isDelayed': hasDelay, 'euiNavDrawer-mobileIsHidden': mobileIsHidden, 'euiNavDrawer-showScrollbar': showScrollbar, }, @@ -45,19 +43,21 @@ EuiNavDrawer.propTypes = { * Toggle the nav drawer between collapsed (docked) and expanded */ isCollapsed: PropTypes.bool, + mobileIsHidden: PropTypes.bool, /** * Toggle the flyout menu between collapsed and expanded */ flyoutIsCollapsed: PropTypes.bool, - flyoutIsAnimatigng: PropTypes.bool, - hasDelay: PropTypes.bool, - mobileIsHidden: PropTypes.bool, + flyoutIsAnimating: PropTypes.bool, + showScrollbar: PropTypes.bool, }; EuiNavDrawer.defaultProps = { isCollapsed: true, mobileIsHidden: true, + flyoutIsCollapsed: true, + flyoutIsAnimating: false, showScrollbar: false, }; \ No newline at end of file diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js index 8325caabdb2..468ffe5b829 100644 --- a/src/components/nav_drawer/nav_drawer_flyout.js +++ b/src/components/nav_drawer/nav_drawer_flyout.js @@ -5,7 +5,7 @@ import classNames from 'classnames'; import { EuiTitle } from '../title'; import { EuiListGroup } from '../list_group'; -export const EuiNavDrawerFlyout = ({ children, className, title, isCollapsed, listItems, ...rest }) => { +export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, ...rest }) => { const classes = classNames( 'euiNavDrawerFlyout', { @@ -21,7 +21,6 @@ export const EuiNavDrawerFlyout = ({ children, className, title, isCollapsed, li aria-labelledby="navDrawerFlyoutTitle" {...rest} > - {children}
@@ -30,7 +29,7 @@ export const EuiNavDrawerFlyout = ({ children, className, title, isCollapsed, li EuiNavDrawerFlyout.propTypes = { className: PropTypes.string, - children: PropTypes.node, + listItems: EuiListGroup.propTypes.listItems, /** * Display a title atop the flyout From b57a360d87426e6fcaaccb16bec7b2794870fe8b Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 15 Jan 2019 10:09:16 -0600 Subject: [PATCH 18/22] collapse drawer upon tab out --- src-docs/src/views/nav_drawer/nav_drawer.js | 37 +++++++++++++++++++-- 1 file changed, 35 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index c75e40e55ee..1d6d33a61e5 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -42,6 +42,7 @@ export default class extends Component { mobileIsHidden: true, showScrollbar: false, outsideClickDisaled: true, + isManagingFocus: false, }; this.topLinks = [ @@ -467,6 +468,8 @@ export default class extends Component { ); } + timeoutID; + toggleOpen = () => { this.setState({ mobileIsHidden: !this.state.mobileIsHidden @@ -476,7 +479,7 @@ export default class extends Component { this.setState({ outsideClickDisaled: this.state.mobileIsHidden ? true : false, }); - }, 150); + }, 0); }; expandDrawer = () => { @@ -487,6 +490,19 @@ export default class extends Component { showScrollbar: true, }); }, 350); + + // This prevents the drawer from collapsing when tabbing through children + // by clearing the timeout thus cancelling the onBlur event (see focusOut). + // This means isManagingFocus remains true as long as a child element + // has focus. This is the case since React bubbles up onFocus and onBlur + // events from the child elements. + clearTimeout(this.timeoutID); + + if (!this.state.isManagingFocus) { + this.setState({ + isManagingFocus: true, + }); + } }; collapseDrawer = () => { @@ -505,6 +521,22 @@ export default class extends Component { }, 350); }; + focusOut = () => { + // This collapses the drawer when no children have focus (i.e. tabbed out). + // In other words, if focus does not bubble up from a child element, then + // the drawer will collapse. See the corresponding block in expandDrawer + // (called by onFocus) which cancels this operation via clearTimeout. + this.timeoutID = setTimeout(() => { + if (this.state.isManagingFocus) { + this.setState({ + isManagingFocus: false, + }); + + this.collapseDrawer(); + } + }, 0); + } + expandFlyout = (links, title) => { const content = links; @@ -573,6 +605,7 @@ export default class extends Component { flyoutIsAnimating={flyoutIsAnimating} onMouseOver={this.expandDrawer} onFocus={this.expandDrawer} + onBlur={this.focusOut} onMouseLeave={this.collapseDrawer} mobileIsHidden={mobileIsHidden} showScrollbar={showScrollbar} @@ -614,7 +647,7 @@ export default class extends Component { - Content body + Body content From 48cd803b705686027fd55db35abcf9e453375cdf Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 15 Jan 2019 13:54:10 -0600 Subject: [PATCH 19/22] scroll to top, scroll styles, reuse header vars --- src-docs/src/views/nav_drawer/nav_drawer.js | 13 +++++++++++-- src/components/header/_index.scss | 9 ++------- src/components/header/_variables.scss | 7 +++++++ src/components/nav_drawer/_nav_drawer.scss | 1 - src/components/nav_drawer/_nav_drawer_flyout.scss | 1 + src/components/nav_drawer/_nav_drawer_menu.scss | 1 + src/components/nav_drawer/_variables.scss | 8 ++++---- 7 files changed, 26 insertions(+), 14 deletions(-) create mode 100644 src/components/header/_variables.scss diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index 1d6d33a61e5..a1723b750af 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -519,6 +519,10 @@ export default class extends Component { outsideClickDisaled: true, }); }, 350); + + // Scrolls the menu and flyout back to top when the nav drawer collapses + document.getElementById('navDrawerMenu').scroll(0, 0); + document.getElementById('navDrawerFlyout').scroll(0, 0); }; focusOut = () => { @@ -555,7 +559,11 @@ export default class extends Component { this.setState({ flyoutIsAnimating: true }); setTimeout(() => { - this.setState({ flyoutIsCollapsed: true }); + this.setState({ + flyoutIsCollapsed: true, + navFlyoutTitle: null, + navFlyoutContent: null + }); }, 250); }; @@ -611,7 +619,7 @@ export default class extends Component { showScrollbar={showScrollbar} style={{ position: 'absolute' }} // This is for the embedded docs example only > - + @@ -621,6 +629,7 @@ export default class extends Component { Date: Tue, 15 Jan 2019 15:46:06 -0600 Subject: [PATCH 20/22] tidy up header and nav size variables --- src-docs/src/views/nav_drawer/nav_drawer.js | 2 +- src/components/header/_variables.scss | 1 + .../header/header_section/_header_section_item.scss | 4 ++-- src/components/nav_drawer/_nav_drawer.scss | 9 +++++---- src/components/nav_drawer/_variables.scss | 4 ++-- 5 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js index a1723b750af..bb475b74512 100644 --- a/src-docs/src/views/nav_drawer/nav_drawer.js +++ b/src-docs/src/views/nav_drawer/nav_drawer.js @@ -479,7 +479,7 @@ export default class extends Component { this.setState({ outsideClickDisaled: this.state.mobileIsHidden ? true : false, }); - }, 0); + }, 150); }; expandDrawer = () => { diff --git a/src/components/header/_variables.scss b/src/components/header/_variables.scss index 61b4c2a86c7..4b3bf1dc2df 100644 --- a/src/components/header/_variables.scss +++ b/src/components/header/_variables.scss @@ -5,3 +5,4 @@ $euiHeaderBreadcrumbColor: $euiColorDarkestShade; // Layout vars $euiHeaderChildSize: $euiSizeXXL + $euiSizeS; +$euiHeaderChildSizeMobile: $euiHeaderChildSize * .75; diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss index 6df1a27e2e9..8ad4addb559 100644 --- a/src/components/header/header_section/_header_section_item.scss +++ b/src/components/header/header_section/_header_section_item.scss @@ -53,8 +53,8 @@ @include euiBreakpoint('xs') { .euiHeaderSectionItem, .euiHeaderSectionItem__button { - height: $euiHeaderChildSize * .75; - min-width: $euiHeaderChildSize * .75; + height: $euiHeaderChildSizeMobile; + min-width: $euiHeaderChildSizeMobile; } .euiHeaderSectionItem--borderLeft, diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss index 3ad0569347f..bfa23c53f18 100644 --- a/src/components/nav_drawer/_nav_drawer.scss +++ b/src/components/nav_drawer/_nav_drawer.scss @@ -2,10 +2,10 @@ .euiNavDrawer { width: $euiNavDrawerWidthCollapsed; - height: calc(100% - #{$euiHeaderSize}); + height: calc(100% - #{$euiNavDrawerTopPosition}); position: fixed; left: 0; - top: $euiHeaderSize; + top: $euiNavDrawerTopPosition; overflow: hidden; z-index: $euiZHeader; background: $euiHeaderBackgroundColor; @@ -71,6 +71,7 @@ &.euiNavDrawer-flyoutIsExpanded { .euiNavDrawerMenu { width: $euiNavDrawerWidthCollapsed; + overflow-y: hidden; } .euiNavDrawerMenu .euiListGroupItem__label { @@ -92,7 +93,7 @@ @include euiBreakpoint('xs') { .euiNavDrawer { - height: calc(100% - #{$euiHeaderSizeMobile}); - top: $euiHeaderSizeMobile; + height: calc(100% - #{$euiNavDrawerTopPositionMobile}); + top: $euiNavDrawerTopPositionMobile; } } \ No newline at end of file diff --git a/src/components/nav_drawer/_variables.scss b/src/components/nav_drawer/_variables.scss index e7312dd68a0..6c146f027ed 100644 --- a/src/components/nav_drawer/_variables.scss +++ b/src/components/nav_drawer/_variables.scss @@ -7,8 +7,8 @@ $euiNavDrawerWidthCollapsed: $euiHeaderChildSize; $euiNavDrawerSideShadow: 2px 0 2px -1px rgba($euiShadowColor, .3); // Layout variables -$euiHeaderSize: $euiHeaderChildSize + 1px; -$euiHeaderSizeMobile: ($euiHeaderChildSize * .75) + 1px; +$euiNavDrawerTopPosition: $euiHeaderChildSize + 1px; +$euiNavDrawerTopPositionMobile: $euiHeaderChildSizeMobile + 1px; // Animation variables $euiNavDrawerExpandingDelay: $euiAnimSpeedNormal; From 680a0fbf26d074ccc7f0edb3de8935eeac6dd944 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Tue, 15 Jan 2019 15:22:36 -0700 Subject: [PATCH 21/22] Trap & release focus in EuiNavDrawerFlyout --- .../nav_drawer/nav_drawer_flyout.js | 135 ++++++++++++------ 1 file changed, 94 insertions(+), 41 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js index 468ffe5b829..467ebe09bda 100644 --- a/src/components/nav_drawer/nav_drawer_flyout.js +++ b/src/components/nav_drawer/nav_drawer_flyout.js @@ -1,47 +1,100 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import FocusTrap from 'focus-trap-react'; import { EuiTitle } from '../title'; import { EuiListGroup } from '../list_group'; -export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, ...rest }) => { - const classes = classNames( - 'euiNavDrawerFlyout', - { - 'euiNavDrawerFlyout-isCollapsed': isCollapsed, - 'euiNavDrawerFlyout-isExpanded': !isCollapsed, - }, - className - ); - - return ( -
- - -
- ); -}; - -EuiNavDrawerFlyout.propTypes = { - className: PropTypes.string, - listItems: EuiListGroup.propTypes.listItems, - - /** - * Display a title atop the flyout - */ - title: PropTypes.string, - - /** - * Toggle the nav drawer between collapsed and expanded - */ - isCollapsed: PropTypes.bool, -}; - -EuiNavDrawerFlyout.defaultProps = { - isCollapsed: true, -}; \ No newline at end of file +export class EuiNavDrawerFlyout extends Component { + static propTypes = { + className: PropTypes.string, + listItems: EuiListGroup.propTypes.listItems, + + /** + * Display a title atop the flyout + */ + title: PropTypes.string, + + /** + * Toggle the nav drawer between collapsed and expanded + */ + isCollapsed: PropTypes.bool, + }; + + static defaultProps = { + isCollapsed: true, + }; + + constructor(...args) { + super(...args); + + // The version of focus-trap-react that we're on only + // returns focus when the trap is unmounted, not on deactivation + // To track if we need the trap mounted or not means tracking focus + this.state = { + trappingFocus: false, + }; + } + + componentDidUpdate(prevProps) { + const { isCollapsed: wasCollapsed, listItems: prevItems } = prevProps; + const { isCollapsed, listItems } = this.props; + + const nowExpanded = wasCollapsed && !isCollapsed; + const newItems = prevItems !== listItems; + if (nowExpanded || newItems) { + this.setState({ // eslint-disable-line react/no-did-update-set-state + trappingFocus: true + }); + } + } + + untrap = () => { + this.setState({ + trappingFocus: false + }); + } + + render() { + const { className, title, isCollapsed, listItems, ...rest } = this.props; + const classes = classNames( + 'euiNavDrawerFlyout', + { + 'euiNavDrawerFlyout-isCollapsed': isCollapsed, + 'euiNavDrawerFlyout-isExpanded': !isCollapsed, + }, + className + ); + + const items = ; + + return ( +
+ + { + this.state.trappingFocus + ? ( + + {items} + + ) + : items + } +
+ ); + + } +} From 39a7fbf3300b63aa1a2e9273914332d262e3bca4 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Wed, 16 Jan 2019 11:44:02 -0600 Subject: [PATCH 22/22] Revert "Trap & release focus in EuiNavDrawerFlyout" This reverts commit 680a0fbf26d074ccc7f0edb3de8935eeac6dd944. --- .../nav_drawer/nav_drawer_flyout.js | 135 ++++++------------ 1 file changed, 41 insertions(+), 94 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js index 467ebe09bda..468ffe5b829 100644 --- a/src/components/nav_drawer/nav_drawer_flyout.js +++ b/src/components/nav_drawer/nav_drawer_flyout.js @@ -1,100 +1,47 @@ -import React, { Component } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import FocusTrap from 'focus-trap-react'; import { EuiTitle } from '../title'; import { EuiListGroup } from '../list_group'; -export class EuiNavDrawerFlyout extends Component { - static propTypes = { - className: PropTypes.string, - listItems: EuiListGroup.propTypes.listItems, - - /** - * Display a title atop the flyout - */ - title: PropTypes.string, - - /** - * Toggle the nav drawer between collapsed and expanded - */ - isCollapsed: PropTypes.bool, - }; - - static defaultProps = { - isCollapsed: true, - }; - - constructor(...args) { - super(...args); - - // The version of focus-trap-react that we're on only - // returns focus when the trap is unmounted, not on deactivation - // To track if we need the trap mounted or not means tracking focus - this.state = { - trappingFocus: false, - }; - } - - componentDidUpdate(prevProps) { - const { isCollapsed: wasCollapsed, listItems: prevItems } = prevProps; - const { isCollapsed, listItems } = this.props; - - const nowExpanded = wasCollapsed && !isCollapsed; - const newItems = prevItems !== listItems; - if (nowExpanded || newItems) { - this.setState({ // eslint-disable-line react/no-did-update-set-state - trappingFocus: true - }); - } - } - - untrap = () => { - this.setState({ - trappingFocus: false - }); - } - - render() { - const { className, title, isCollapsed, listItems, ...rest } = this.props; - const classes = classNames( - 'euiNavDrawerFlyout', - { - 'euiNavDrawerFlyout-isCollapsed': isCollapsed, - 'euiNavDrawerFlyout-isExpanded': !isCollapsed, - }, - className - ); - - const items = ; - - return ( -
- - { - this.state.trappingFocus - ? ( - - {items} - - ) - : items - } -
- ); - - } -} +export const EuiNavDrawerFlyout = ({ className, title, isCollapsed, listItems, ...rest }) => { + const classes = classNames( + 'euiNavDrawerFlyout', + { + 'euiNavDrawerFlyout-isCollapsed': isCollapsed, + 'euiNavDrawerFlyout-isExpanded': !isCollapsed, + }, + className + ); + + return ( +
+ + +
+ ); +}; + +EuiNavDrawerFlyout.propTypes = { + className: PropTypes.string, + listItems: EuiListGroup.propTypes.listItems, + + /** + * Display a title atop the flyout + */ + title: PropTypes.string, + + /** + * Toggle the nav drawer between collapsed and expanded + */ + isCollapsed: PropTypes.bool, +}; + +EuiNavDrawerFlyout.defaultProps = { + isCollapsed: true, +}; \ No newline at end of file