Skip to content

Commit

Permalink
[UI Framework] Add functionality for hiding and showing the chrome wh…
Browse files Browse the repository at this point in the history
…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)
  • Loading branch information
cjcenizal authored Aug 11, 2017
1 parent f8542c6 commit 239a5dc
Show file tree
Hide file tree
Showing 16 changed files with 206 additions and 9 deletions.
4 changes: 4 additions & 0 deletions ui_framework/doc_site/src/actions/action_types.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 5 additions & 0 deletions ui_framework/doc_site/src/actions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ export {
closeCodeViewer,
} from './code_viewer_actions';

export {
openSandbox,
closeSandbox,
} from './sandbox_actions';

export {
registerSection,
unregisterSection,
Expand Down
9 changes: 9 additions & 0 deletions ui_framework/doc_site/src/actions/sandbox_actions.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import ActionTypes from './action_types';

export const openSandbox = () => ({
type: ActionTypes.OPEN_SANDBOX,
});

export const closeSandbox = () => ({
type: ActionTypes.CLOSE_SANDBOX,
});
5 changes: 5 additions & 0 deletions ui_framework/doc_site/src/components/guide/_guide.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ html {
padding-top: $guideNavHeight;
background-color: $guideBaseBackgroundColor;
transition:
padding-top $guideChromeTransition,
padding-right $guideCodeViewerTransition,
opacity $guideCodeViewerTransition;

Expand All @@ -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) {
Expand Down
1 change: 1 addition & 0 deletions ui_framework/doc_site/src/components/guide_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ $guideSideNavSmallWidth: 220px;
$guideCodeViewerWidth: 660px;
$guideCodeViewerSmallWidth: 520px;
$guideCodeViewerTransition: 0.2s ease;
$guideChromeTransition: 0.3s ease;

// Colors
$guideBaseBackgroundColor: #f7f7f7;
Expand Down
23 changes: 22 additions & 1 deletion ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
27 changes: 27 additions & 0 deletions ui_framework/doc_site/src/components/guide_nav/guide_nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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', {
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
2 changes: 2 additions & 0 deletions ui_framework/doc_site/src/store/configure_store.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -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),
};
}
Expand Down
4 changes: 4 additions & 0 deletions ui_framework/doc_site/src/store/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
26 changes: 26 additions & 0 deletions ui_framework/doc_site/src/store/reducers/sandbox_reducer.js
Original file line number Diff line number Diff line change
@@ -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;
}
4 changes: 4 additions & 0 deletions ui_framework/doc_site/src/views/app_container.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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),
Expand Down
33 changes: 33 additions & 0 deletions ui_framework/doc_site/src/views/app_view.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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}
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 3 additions & 1 deletion ui_framework/generator-kui/component/templates/index.js
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export { <%= componentName %> } from './<%= fileName %>';
export {
<%= componentName %>,
} from './<%= fileName %>';
2 changes: 1 addition & 1 deletion ui_framework/generator-kui/component/templates/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { <%= componentName %> } from './<%= fileName %>';
describe('<%= componentName %>', () => {
test('is rendered', () => {
const component = render(
<<%= componentName %> { ...requiredProps } />
<<%= componentName %> {...requiredProps} />
);

expect(component)
Expand Down

0 comments on commit 239a5dc

Please sign in to comment.