Merge pull request #97 from sitegeist/feature/push-preview-on-props-i…

…nspector

FEATURE: Shrink the preview frame when props pane is open

Resources/Private/JavaScript/bootstrap/createStore.js

@@ -24,6 +24,9 @@ export default env => {
             isOpen: false,
             searchTerm: ''
         },
+        propsInspector: {
+            isOpen: false
+        },
         qrcode: {
             isVisible: false
         }

Resources/Private/JavaScript/containers/styleguide/header/toolbox/props-inspector/index.js

@@ -5,14 +5,17 @@ import {connect} from 'react-redux';
 import Button from '@neos-project/react-ui-components/lib/Button';
 import Icon from '@neos-project/react-ui-components/lib/Icon';
 
-import {withToggableState} from 'components';
+import {selectors, actions} from 'state';
 
 import Inspector from './inspector';
 
 import style from './style.css';
 
-@withToggableState('isOpen')
-@connect(() => ({}), {})
+@connect(state => ({
+    isOpen: selectors.propsInspector.isOpen(state)
+}), {
+    toggleIsOpen: actions.propsInspector.toggle
+})
 export default class PropsInspector extends PureComponent {
     static propTypes = {
         toggleIsOpen: PropTypes.func.isRequired,

Resources/Private/JavaScript/containers/styleguide/main/preview-frame/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {$get} from 'plow-js';
 import debounce from 'lodash.debounce';
+import mergeClassNames from 'classnames';
 
 import {selectors, actions} from 'state';
 import {visibility} from 'components';
@@ -13,17 +14,21 @@ import style from './style.css';
     const src = selectors.navigation.previewUri(state);
     const sourceQuerySelector = $get('env.previewSettings.sourceQuerySelector', state);
     const currentlySelectedBreakpoint = selectors.breakpoints.currentlySelected(state);
+    const isLocked = Boolean(currentlySelectedBreakpoint);
     const isVisible = Boolean(src);
-    const styles = currentlySelectedBreakpoint ? {
+    const isPropsInspectorOpen = selectors.propsInspector.isOpen(state);
+
+    const styles = isLocked ? {
         width: currentlySelectedBreakpoint.width,
         transform: window.innerWidth < currentlySelectedBreakpoint.width ?
-            `translate(-50%) scale(${window.innerWidth / currentlySelectedBreakpoint.width})` : 'translate(-50%)',
+        `translate(-50%) scale(${window.innerWidth / currentlySelectedBreakpoint.width})` : 'translate(-50%)',
         height: currentlySelectedBreakpoint.height
     } : {
-        width: '100%'
+        width: isPropsInspectorOpen ? 'calc(100% - 50vw - 2rem)' : '100%',
+        minWidth: isPropsInspectorOpen ? 'calc(100% - 400px - 2rem)' : '100%'
     };
 
-    return {src, sourceQuerySelector, isVisible, styles};
+    return {src, sourceQuerySelector, isVisible, isLocked, styles};
 }, {
     onLoad: actions.prototypes.ready,
     setCurrentHtml: actions.prototypes.setCurrentHtml
@@ -35,7 +40,8 @@ export default class PreviewFrame extends PureComponent {
         sourceQuerySelector: PropTypes.string.isRequired,
         styles: PropTypes.object,
         onLoad: PropTypes.func.isRequired,
-        setCurrentHtml: PropTypes.func.isRequired
+        setCurrentHtml: PropTypes.func.isRequired,
+        isLocked: PropTypes.bool.isRequired
     };
 
     updateSrc = debounce(src => {
@@ -68,14 +74,17 @@ export default class PreviewFrame extends PureComponent {
     }
 
     render() {
-        const {styles} = this.props;
+        const {styles, isLocked} = this.props;
 
         return (
 	<iframe
     role="presentation"
     id="preview-frame"
     ref={this.iframeReference}
-    className={style.frame}
+    className={mergeClassNames({
+        [style.frame]: true,
+        [style.isLocked]: isLocked
+    })}
     style={styles}
     frameBorder="0"
     onLoad={this.iframeLoaded}

Resources/Private/JavaScript/containers/styleguide/main/preview-frame/style.css

@@ -1,8 +1,11 @@
 .frame {
-    position: relative;
     flex-grow: 1;
     flex-basis: 0;
+    transition: width .3s, min-width .3s, transform .3s, left .3s;
+}
+
+.isLocked {
+    position: relative;
     left: 50%;
     transform: translateX(-50%);
-    transition: width .3s, transform .3s;
 }

Resources/Private/JavaScript/state/index.js

@@ -7,6 +7,7 @@ import * as locales from './locales';
 import * as sites from './sites';
 import * as business from './business';
 import * as navigation from './navigation';
+import * as propsInspector from './props-inspector';
 import * as routing from './routing';
 import * as qrcode from './qrcode';
 
@@ -17,6 +18,7 @@ export const actions = {
     sites: sites.actions,
     business: business.actions,
     navigation: navigation.actions,
+    propsInspector: propsInspector.actions,
     routing: routing.actions,
     qrcode: qrcode.actions
 };
@@ -28,6 +30,7 @@ export const reducer = (state, action) => [
     sites.reducer,
     business.reducer,
     navigation.reducer,
+    propsInspector.reducer,
     qrcode.reducer
 ].reduce((state, reducer) => reducer(state, action), state);
 
@@ -38,6 +41,7 @@ export const selectors = {
     sites: sites.selectors,
     business: business.selectors,
     navigation: navigation.selectors,
+    propsInspector: propsInspector.selectors,
     qrcode: qrcode.selectors
 };
 

Resources/Private/JavaScript/state/props-inspector/index.js

@@ -0,0 +1,24 @@
+import {createAction} from 'redux-actions';
+import {$get, $toggle} from 'plow-js';
+
+export const actions = {};
+
+actions.toggle = createAction(
+    '@sitegeist/monocle/props-inspector/toggle'
+);
+
+export const reducer = (state, action) => {
+    switch (action.type) {
+        case actions.toggle.toString():
+            return $toggle('propsInspector.isOpen', state);
+
+        default:
+            return state;
+    }
+};
+
+export const selectors = {};
+
+selectors.isOpen = $get('propsInspector.isOpen');
+
+export const sagas = {};