[UI Framework] Add functionality for hiding and showing the chrome wh…

…en viewing Sandboxes (#13475) (#13478) * Update UI Framework doc site with functionality for hiding and showing the chrome when viewing Sandboxes. (#13437) * Fix formatting in generator-kui templates. (#13443)
elastic · Aug 11, 2017 · 239a5dc · 239a5dc
1 parent f8542c6
commit 239a5dc
Show file tree

Hide file tree

Showing 16 changed files with 206 additions and 9 deletions.
diff --git a/ui_framework/doc_site/src/actions/action_types.js b/ui_framework/doc_site/src/actions/action_types.js
@@ -7,6 +7,10 @@ export default keyMirror({
   OPEN_CODE_VIEWER: null,
   CLOSE_CODE_VIEWER: null,
 
+  // Sandbox actions
+  OPEN_SANDBOX: null,
+  CLOSE_SANDBOX: null,
+
   // Example nav actions
   REGISTER_SECTION: null,
   UNREGISTER_SECTION: null,

diff --git a/ui_framework/doc_site/src/actions/index.js b/ui_framework/doc_site/src/actions/index.js
@@ -3,6 +3,11 @@ export {
   closeCodeViewer,
 } from './code_viewer_actions';
 
+export {
+  openSandbox,
+  closeSandbox,
+} from './sandbox_actions';
+
 export {
   registerSection,
   unregisterSection,

diff --git a/ui_framework/doc_site/src/actions/sandbox_actions.js b/ui_framework/doc_site/src/actions/sandbox_actions.js
@@ -0,0 +1,9 @@
+import ActionTypes from './action_types';
+
+export const openSandbox = () => ({
+  type: ActionTypes.OPEN_SANDBOX,
+});
+
+export const closeSandbox = () => ({
+  type: ActionTypes.CLOSE_SANDBOX,
+});
diff --git a/ui_framework/doc_site/src/components/guide/_guide.scss b/ui_framework/doc_site/src/components/guide/_guide.scss
@@ -25,6 +25,7 @@ html {
   padding-top: $guideNavHeight;
   background-color: $guideBaseBackgroundColor;
   transition:
+    padding-top $guideChromeTransition,
     padding-right $guideCodeViewerTransition,
     opacity $guideCodeViewerTransition;
 
@@ -39,6 +40,10 @@ html {
   .is-guide-nav-open + & {
     opacity: 0.7;
   }
+
+  &.is-chrome-hidden {
+    padding-top: 0;
+  }
 }
 
 @media only screen and (max-width: 1300px) {

diff --git a/ui_framework/doc_site/src/components/guide_components.scss b/ui_framework/doc_site/src/components/guide_components.scss
@@ -6,6 +6,7 @@ $guideSideNavSmallWidth: 220px;
 $guideCodeViewerWidth: 660px;
 $guideCodeViewerSmallWidth: 520px;
 $guideCodeViewerTransition: 0.2s ease;
+$guideChromeTransition: 0.3s ease;
 
 // Colors
 $guideBaseBackgroundColor: #f7f7f7;

diff --git a/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss b/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
@@ -11,16 +11,37 @@
   border-bottom: 1px solid #CCCCCC;
   color: $guideTextColor;
   background-color: $guidePanelBackgroundColor;
-  transition: height 0.3s ease, box-shadow 0.3s linear;
+  transition:
+    top $guideChromeTransition,
+    height 0.3s ease,
+    box-shadow 0.3s linear;
   overflow: hidden;
   box-shadow: 0 0 0 rgba(black, 0.3);
 
   &.is-guide-nav-open {
     height: 100%;
     box-shadow: 0 40px 200px rgba(black, 0.05);
   }
+
+  &.is-chrome-hidden {
+    top: -$guideNavHeight;
+  }
 }
 
+  .guideNav__showButton {
+    position: fixed;
+    z-index: 9999;
+    top: 5px;
+    right: 5px;
+    font-size: 10px;
+    opacity: 0;
+    transition: opacity $guideChromeTransition;
+
+    .is-chrome-hidden & {
+      opacity: 1;
+    }
+  }
+
   .guideNav__header {
     position: relative;
     flex: 0 0 auto;

diff --git a/ui_framework/doc_site/src/components/guide_nav/guide_nav.js b/ui_framework/doc_site/src/components/guide_nav/guide_nav.js
@@ -78,8 +78,23 @@ export class GuideNav extends Component {
       </Link>
     );
 
+    let hideChromeButton;
+
+    if (this.props.isSandbox) {
+      hideChromeButton = (
+        <button
+          className="guideLink"
+          style={{ marginRight: '10px' }}
+          onClick={this.props.onHideChrome}
+        >
+          Hide chrome
+        </button>
+      );
+    }
+
     return (
       <div className="guideNavPaginationButtons">
+        {hideChromeButton}
         {previousButton}
         {nextButton}
       </div>
@@ -89,6 +104,7 @@ export class GuideNav extends Component {
   render() {
     const classes = classNames('guideNav', {
       'is-guide-nav-open': this.props.isNavOpen,
+      'is-chrome-hidden': !this.props.isChromeVisible,
     });
 
     const buttonClasses = classNames('guideNav__menu fa fa-bars', {
@@ -185,14 +201,25 @@ export class GuideNav extends Component {
             { sandboxNavItems.length ? sandboxNavItems : this.renderNoItems('sandboxes') }
           </div>
         </div>
+
+        <button
+          className="guideLink guideNav__showButton"
+          onClick={this.props.onShowChrome}
+        >
+          Show chrome
+        </button>
       </div>
     );
   }
 }
 
 GuideNav.propTypes = {
+  isChromeVisible: PropTypes.bool,
   isNavOpen: PropTypes.bool,
+  isSandbox: PropTypes.bool,
   onToggleNav: PropTypes.func,
+  onHideChrome: PropTypes.func,
+  onShowChrome: PropTypes.func,
   onClickNavItem: PropTypes.func,
   version: PropTypes.string,
   routes: PropTypes.array,

diff --git a/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js b/ui_framework/doc_site/src/components/guide_sandbox/guide_sandbox.js
@@ -1,7 +1,55 @@
-import React from 'react';
+import React, {
+  Component,
+} from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 
-export const GuideSandbox = props => (
-  <div className="guideSandbox">
-    {props.children}
-  </div>
-);
+import {
+  getIsSandbox,
+} from '../../store';
+
+import {
+  openSandbox,
+  closeSandbox,
+} from '../../actions';
+
+function mapStateToProps(state) {
+  return {
+    isSandbox: getIsSandbox(state),
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  const actions = {
+    openSandbox,
+    closeSandbox,
+  };
+
+  return bindActionCreators(actions, dispatch);
+}
+
+class GuideSandboxComponent extends Component {
+  componentWillMount() {
+    this.props.openSandbox();
+  }
+
+  componentWillUnmount() {
+    this.props.closeSandbox();
+  }
+
+  render() {
+    return (
+      <div className="guideSandbox">
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+GuideSandboxComponent.propTypes = {
+  openSandbox: PropTypes.func,
+  closeSandbox: PropTypes.func,
+};
+
+export const GuideSandbox = connect(mapStateToProps, mapDispatchToProps)(GuideSandboxComponent);
diff --git a/ui_framework/doc_site/src/components/guide_section/_guide_section.scss b/ui_framework/doc_site/src/components/guide_section/_guide_section.scss
@@ -25,9 +25,15 @@
     border: 1px solid $guideLinkHoverColor;
     border-radius: 3px;
     cursor: pointer;
+    transform: translateX(0);
+    transition: transform $guideChromeTransition;
 
     &:hover,
     &:active {
       background-color: #e6f7fc;
     }
+
+    .is-chrome-hidden & {
+      transform: translateX(60px);
+    }
   }
diff --git a/ui_framework/doc_site/src/store/configure_store.js b/ui_framework/doc_site/src/store/configure_store.js
@@ -11,6 +11,7 @@ import {
 } from 'react-router-redux';
 
 import codeViewerReducer from './reducers/code_viewer_reducer';
+import sandboxReducer from './reducers/sandbox_reducer';
 import sectionsReducer from './reducers/sections_reducer';
 
 /**
@@ -22,6 +23,7 @@ export default function configureStore(initialState) {
     return {
       routing: routerReducer(state.routing, action),
       codeViewer: codeViewerReducer(state.codeViewer, action),
+      sandbox: sandboxReducer(state.sandbox, action),
       sections: sectionsReducer(state.sections, action),
     };
   }

diff --git a/ui_framework/doc_site/src/store/index.js b/ui_framework/doc_site/src/store/index.js
@@ -2,6 +2,10 @@ export function getIsCodeViewerOpen(state) {
   return state.codeViewer.isOpen;
 }
 
+export function getIsSandbox(state) {
+  return state.sandbox.isSandbox;
+}
+
 export function getSections(state) {
   return state.sections.sections;
 }

diff --git a/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js b/ui_framework/doc_site/src/store/reducers/sandbox_reducer.js
@@ -0,0 +1,26 @@
+import ActionTypes from '../../actions/action_types';
+
+const defaultState = {
+  isSandbox: false,
+};
+
+export default function sandboxReducer(state = defaultState, action) {
+  switch (action.type) {
+    case ActionTypes.OPEN_SANDBOX: {
+      return Object.assign({}, state, {
+        isSandbox: true,
+      });
+    }
+
+    case ActionTypes.CLOSE_SANDBOX: {
+      return Object.assign({}, state, {
+        isSandbox: false,
+      });
+    }
+
+    default:
+      break;
+  }
+
+  return state;
+}
diff --git a/ui_framework/doc_site/src/views/app_container.js b/ui_framework/doc_site/src/views/app_container.js
@@ -3,11 +3,14 @@ import { connect } from 'react-redux';
 
 import {
   getIsCodeViewerOpen,
+  getIsSandbox,
   getSections,
   getSource,
   getTitle,
 } from '../store';
+
 import { AppView } from './app_view';
+
 import {
   openCodeViewer,
   closeCodeViewer,
@@ -19,6 +22,7 @@ function mapStateToProps(state, ownProps) {
   return {
     routes: ownProps.routes,
     isCodeViewerOpen: getIsCodeViewerOpen(state),
+    isSandbox: getIsSandbox(state),
     source: getSource(state),
     title: getTitle(state),
     sections: getSections(state),

diff --git a/ui_framework/doc_site/src/views/app_view.js b/ui_framework/doc_site/src/views/app_view.js
@@ -23,11 +23,14 @@ export class AppView extends Component {
 
     this.state = {
       isNavOpen: false,
+      isChromeVisible: !props.isSandbox,
     };
 
     this.onClickNavItem = this.onClickNavItem.bind(this);
     this.onToggleNav = this.onToggleNav.bind(this);
     this.onCloseCodeViewer = this.onCloseCodeViewer.bind(this);
+    this.onHideChrome = this.onHideChrome.bind(this);
+    this.onShowChrome = this.onShowChrome.bind(this);
   }
 
   onClickNavItem() {
@@ -46,15 +49,44 @@ export class AppView extends Component {
     });
   }
 
+  onHideChrome() {
+    this.setState({
+      isChromeVisible: false,
+      isNavOpen: false,
+    });
+
+    this.props.closeCodeViewer();
+  }
+
+  onShowChrome() {
+    this.setState({
+      isChromeVisible: true,
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Only force the chrome to be hidden if we're navigating from a non-sandbox to a sandbox.
+    if (!this.props.isSandbox && nextProps.isSandbox) {
+      this.setState({
+        isChromeVisible: false,
+      });
+    }
+  }
+
   render() {
     const contentClasses = classNames('guideContent', {
       'is-code-viewer-open': this.props.isCodeViewerOpen,
+      'is-chrome-hidden': !this.state.isChromeVisible,
     });
 
     return (
       <div className="guide">
         <GuideNav
+          isChromeVisible={this.state.isChromeVisible}
           isNavOpen={this.state.isNavOpen}
+          isSandbox={this.props.isSandbox}
+          onHideChrome={this.onHideChrome}
+          onShowChrome={this.onShowChrome}
           onToggleNav={this.onToggleNav}
           onClickNavItem={this.onClickNavItem}
           version={pkg.version}
@@ -83,6 +115,7 @@ export class AppView extends Component {
 AppView.propTypes = {
   children: PropTypes.any,
   routes: PropTypes.array.isRequired,
+  isSandbox: PropTypes.bool,
   openCodeViewer: PropTypes.func,
   closeCodeViewer: PropTypes.func,
   isCodeViewerOpen: PropTypes.bool,

diff --git a/ui_framework/generator-kui/component/templates/index.js b/ui_framework/generator-kui/component/templates/index.js
@@ -1 +1,3 @@
-export { <%= componentName %> } from './<%= fileName %>';
+export {
+  <%= componentName %>,
+} from './<%= fileName %>';
diff --git a/ui_framework/generator-kui/component/templates/test.js b/ui_framework/generator-kui/component/templates/test.js
@@ -7,7 +7,7 @@ import { <%= componentName %> } from './<%= fileName %>';
 describe('<%= componentName %>', () => {
   test('is rendered', () => {
     const component = render(
-      <<%= componentName %> { ...requiredProps } />
+      <<%= componentName %> {...requiredProps} />
     );
 
     expect(component)