From 3b28473082e555945ca8217f782bcb2851afebd3 Mon Sep 17 00:00:00 2001 From: Wilhelm Behncke Date: Thu, 31 Jan 2019 07:59:52 +0100 Subject: [PATCH 1/3] FEATURE: Shrink the preview frame when props pane is open --- .../JavaScript/bootstrap/createStore.js | 3 + .../header/toolbox/props-inspector/index.js | 9 +- .../styleguide/main/preview-frame/index.js | 20 +- .../styleguide/main/preview-frame/style.css | 7 +- Resources/Private/JavaScript/state/index.js | 4 + .../JavaScript/state/props-inspector/index.js | 24 + Resources/Public/JavaScript/App.js | 6999 +++++++++-------- Resources/Public/JavaScript/App.js.map | 2 +- Resources/Public/Styles/App.css | 36 +- 9 files changed, 3619 insertions(+), 3485 deletions(-) create mode 100644 Resources/Private/JavaScript/state/props-inspector/index.js diff --git a/Resources/Private/JavaScript/bootstrap/createStore.js b/Resources/Private/JavaScript/bootstrap/createStore.js index db26b84f..570fe562 100644 --- a/Resources/Private/JavaScript/bootstrap/createStore.js +++ b/Resources/Private/JavaScript/bootstrap/createStore.js @@ -24,6 +24,9 @@ export default env => { isOpen: false, searchTerm: '' }, + propsInspector: { + isOpen: false + }, qrcode: { isVisible: false } diff --git a/Resources/Private/JavaScript/containers/styleguide/header/toolbox/props-inspector/index.js b/Resources/Private/JavaScript/containers/styleguide/header/toolbox/props-inspector/index.js index c0bcf9b7..ec926a1b 100644 --- a/Resources/Private/JavaScript/containers/styleguide/header/toolbox/props-inspector/index.js +++ b/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, diff --git a/Resources/Private/JavaScript/containers/styleguide/main/preview-frame/index.js b/Resources/Private/JavaScript/containers/styleguide/main/preview-frame/index.js index 4498deae..e4c89516 100644 --- a/Resources/Private/JavaScript/containers/styleguide/main/preview-frame/index.js +++ b/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)' : '100%', + minWidth: isPropsInspectorOpen ? 'calc(100% - 400px)' : '100%' }; - return {src, sourceQuerySelector, isVisible, styles}; + return {src, sourceQuerySelector, isVisible, isLocked, styles}; }, { onLoad: actions.prototypes.ready, setCurrentHtml: actions.prototypes.setCurrentHtml @@ -68,14 +73,17 @@ export default class PreviewFrame extends PureComponent { } render() { - const {styles} = this.props; + const {styles, isLocked} = this.props; return (