Merge pull request #194 from mewtaylor/issue/gh-41

Implement GH-41: Add minimum width gui
2024-12-22 13:32:28 -05:00 · 2017-11-21 11:06:05 -05:00 · 2017-11-21 11:06:05 -05:00 · 5ffdd14ff0
commit 5ffdd14ff0
parent eb73b6453e 27c0684e1c
36 changed files with 319 additions and 66 deletions
--- a/package.json
+++ b/package.json
@ -68,6 +68,7 @@
    "react-intl-redux": "0.6.0",
    "react-popover": "0.5.4",
    "react-redux": "5.0.5",
+    "react-responsive": "3.0.0",
    "react-test-renderer": "^16.0.0",
    "redux": "3.7.0",
    "redux-mock-store": "^1.2.3",
--- a/src/components/dropdown/dropdown-caret.svg
+++ b/src/components/dropdown/dropdown-caret.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="8px" height="5px" viewBox="0 0 8 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>dropdown-caret</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dropdown-caret" fill="#4C97FF">
+            <path d="M4,5 C3.72520708,5 3.45163006,4.89695045 3.24127973,4.68965311 L0.314613572,1.80666227 C-0.104871191,1.39326583 -0.104871191,0.724642023 0.314613572,0.310047331 C0.732882438,-0.10334911 7.26711756,-0.10334911 7.68538643,0.310047331 C8.10487119,0.723443772 8.10487119,1.39326583 7.68538643,1.80666227 L4.75993617,4.68965311 C4.54958583,4.89695045 4.27600882,5 4,5"></path>
+        </g>
+    </g>
+</svg>
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@ -0,0 +1,30 @@
+@import '../../css/colors.css';
+
+$arrow-border-width: 14px;
+
+.dropdown {
+    border: 1px solid $form-border;
+    border-radius: 5px;
+    overflow: visible;
+    min-width: 3.5rem;
+    color: $motion-primary;
+    padding: .5rem;
+}
+
+.mod-open {
+    background-color: $form-border;
+}
+
+.dropdown-icon {
+    width: .5rem;
+    height: .5rem;
+    margin-left: .5rem;
+    vertical-align: middle;
+    padding-bottom: .2rem;
+}
+
+.mod-caret-up {
+    transform: rotate(180deg);
+    padding-bottom: 0;
+    padding-top: .2rem;
+}
--- a/src/components/dropdown/dropdown.jsx
+++ b/src/components/dropdown/dropdown.jsx
@ -0,0 +1,67 @@
+import bindAll from 'lodash.bindall';
+import classNames from 'classnames';
+import Popover from 'react-popover';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import styles from './dropdown.css';
+
+import dropdownIcon from './dropdown-caret.svg';
+
+class Dropdown extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleClosePopover',
+            'handleToggleOpenState'
+        ]);
+        this.state = {
+            isOpen: false
+        };
+    }
+    handleClosePopover () {
+        this.setState({
+            isOpen: false
+        });
+    }
+    handleToggleOpenState () {
+        this.setState({
+            isOpen: !this.state.isOpen
+        });
+    }
+    render () {
+        return (
+            <Popover
+                body={this.props.popoverContent}
+                isOpen={this.state.isOpen}
+                preferPlace="below"
+                onOuterAction={this.handleClosePopover}
+                {...this.props}
+            >
+                <div
+                    className={classNames(styles.dropdown, this.props.className, {
+                        [styles.modOpen]: this.state.isOpen,
+                        [styles.modClosed]: !this.state.isOpen
+                    })}
+                    onClick={this.handleToggleOpenState}
+                >
+                    {this.props.children}
+                    <img
+                        className={classNames(styles.dropdownIcon, {
+                            [styles.modCaretUp]: this.state.isOpen
+                        })}
+                        src={dropdownIcon}
+                    />
+                </div>
+            </Popover>
+        );
+    }
+}
+
+Dropdown.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    popoverContent: PropTypes.node.isRequired
+};
+
+export default Dropdown;
--- a/src/components/forms/live-input-hoc.jsx
+++ b/src/components/forms/live-input-hoc.jsx
@ -59,8 +59,8 @@ export default function (Input) {
    }

    LiveInput.propTypes = {
-        max: PropTypes.number,
-        min: PropTypes.number,
+        max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
        onSubmit: PropTypes.func.isRequired,
        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
    };
--- a/src/components/input-group/input-group.css
+++ b/src/components/input-group/input-group.css
@ -1,7 +1,7 @@
@import '../../css/units.css';

 .input-group + .input-group {
-    margin-left: calc(3 * $grid-unit);
+    margin-left: calc(2 * $grid-unit);
 }

 .disabled {
--- a/src/components/labeled-icon-button/labeled-icon-button.css
+++ b/src/components/labeled-icon-button/labeled-icon-button.css
@ -15,8 +15,8 @@ $border-radius: 0.25rem;
 }

 .edit-field-icon {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.25rem;
+    height: 1.25rem;
    flex-grow: 1;
    vertical-align: middle;
 }
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/src/components/mode-tools/mode-tools.jsx
@ -13,7 +13,7 @@ import Input from '../forms/input.jsx';
 import InputGroup from '../input-group/input-group.jsx';
 import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
 // import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
-import Modes from '../../modes/modes';
+import Modes from '../../lib/modes';
 import styles from './mode-tools.css';

 import copyIcon from './icons/copy.svg';
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@ -4,7 +4,7 @@
 .editor-container {
    display: flex;
    flex-direction: column;
-    padding: calc(4 * $grid-unit);
+    padding: calc(3 * $grid-unit);
 }

 .row {
@ -30,7 +30,11 @@

 .mod-dashed-border {
    border-right: 1px dashed $ui-pane-border;
-    padding-right: calc(3 * $grid-unit);
+    padding-right: calc(2 * $grid-unit);
+}
+
+.mod-unselect {
+    user-select: none;
 }

 .mod-labeled-icon-height {
@ -44,7 +48,7 @@ $border-radius: 0.25rem;
    border: 1px solid $ui-pane-border;
    border-radius: 0;
    border-left: none;
-    padding: calc(2 * $grid-unit);
+    padding: .35rem;
 }

 .button-group-button:last-of-type {
@ -72,13 +76,50 @@ $border-radius: 0.25rem;
    vertical-align: middle;
 }

+.mod-context-menu {
+    display: flex;
+    flex-direction: column;
+}
+
+.mod-top-divider {
+    border-top: 1px solid $ui-pane-border;
+}
+
+.mod-menu-item {
+    display: flex;
+    margin: 0 -$grid-unit;
+    min-width: 6.25rem;
+    padding: calc(3 * $grid-unit);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: 0.1s ease;
+    align-items: center;
+    font-family: "Helvetica Neue", Helvetica, sans-serif;
+}
+
+.mod-disabled {
+    cursor: auto;
+}
+
+.mod-menu-item:hover {
+    background: $motion-transparent;
+}
+
+.mod-disabled:hover {
+    background-color: transparent;
+}
+
+.menu-item-icon {
+    margin-right: calc(2 * $grid-unit);
+}
+
 .mod-mode-tools {
-    margin-left: calc(3 * $grid-unit);
+    margin-left: calc(2 * $grid-unit);
 }

 .canvas-container {
-    width: 500px;
-    height: 400px;
+    width: 480px;
+    height: 360px;
    box-sizing: content-box;
    border: 1px solid #e8edf1;
    border-radius: .25rem;
@ -89,7 +130,7 @@ $border-radius: 0.25rem;
 .mode-selector {
    display: flex;
    margin-right: calc(2 * $grid-unit);
-    max-width: 5.5rem;
+    max-width: 6rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
@ -101,3 +142,15 @@ $border-radius: 0.25rem;
    display: flex;
    flex-direction: row-reverse;
 }
+
+@media only screen and (max-width: $full-size-paint) {
+    .editor-container {
+        padding: calc(3 * $grid-unit) $grid-unit;
+    }
+
+    .mode-selector {
+        margin-right: $grid-unit;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+}
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@ -1,6 +1,7 @@
 import bindAll from 'lodash.bindall';
 import classNames from 'classnames';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import MediaQuery from 'react-responsive';
 import React from 'react';
 import PropTypes from 'prop-types';

@ -13,6 +14,7 @@ import Button from '../button/button.jsx';
 import ButtonGroup from '../button-group/button-group.jsx';
 import BrushMode from '../../containers/brush-mode.jsx';
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
+import Dropdown from '../dropdown/dropdown.jsx';
 import EraserMode from '../../containers/eraser-mode.jsx';
 import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx';
 import Input from '../forms/input.jsx';
@ -28,6 +30,7 @@ import SelectMode from '../../containers/select-mode.jsx';
 import StrokeColorIndicatorComponent from '../../containers/stroke-color-indicator.jsx';
 import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicator.jsx';

+import layout from '../../lib/layout-constants';
 import styles from './paint-editor.css';

 import groupIcon from './icons/group.svg';
@ -88,6 +91,11 @@ const messages = defineMessages({
        defaultMessage: 'Back',
        description: 'Label for the `Send to back of canvas` button',
        id: 'paint.paintEditor.back'
+    },
+    more: {
+        defaultMessage: 'More',
+        description: 'Label for dropdown to access more action buttons',
+        id: 'paint.paintEditor.more'
    }
 });

@ -114,13 +122,22 @@ class PaintEditorComponent extends React.Component {
                        <div className={styles.row}>
                            {/* Name field */}
                            <InputGroup>
-                                <Label text={this.props.intl.formatMessage(messages.costume)}>
+                                <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
+                                    <Label text={this.props.intl.formatMessage(messages.costume)}>
+                                        <BufferedInput
+                                            type="text"
+                                            value={this.props.name}
+                                            onSubmit={this.props.onUpdateName}
+                                        />
+                                    </Label>
+                                </MediaQuery>
+                                <MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
                                    <BufferedInput
                                        type="text"
                                        value={this.props.name}
                                        onSubmit={this.props.onUpdateName}
                                    />
-                                </Label>
+                                </MediaQuery>
                            </InputGroup>

                            {/* Undo/Redo */}
@ -197,31 +214,87 @@ class PaintEditorComponent extends React.Component {
                                />
                            </InputGroup>

-                            {/* Front/Back */}
-                            <InputGroup>
-                                <LabeledIconButton
-                                    disabled={!shouldShowBringForward()}
-                                    imgSrc={sendFrontIcon}
-                                    title={this.props.intl.formatMessage(messages.front)}
-                                    onClick={this.props.onSendToFront}
-                                />
-                                <LabeledIconButton
-                                    disabled={!shouldShowSendBackward()}
-                                    imgSrc={sendBackIcon}
-                                    title={this.props.intl.formatMessage(messages.back)}
-                                    onClick={this.props.onSendToBack}
-                                />
-                            </InputGroup>
+                            <MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
+                                <div className={styles.row}>
+                                    <InputGroup>
+                                        <LabeledIconButton
+                                            disabled={!shouldShowBringForward()}
+                                            imgSrc={sendFrontIcon}
+                                            title={this.props.intl.formatMessage(messages.front)}
+                                            onClick={this.props.onSendToFront}
+                                        />
+                                        <LabeledIconButton
+                                            disabled={!shouldShowSendBackward()}
+                                            imgSrc={sendBackIcon}
+                                            title={this.props.intl.formatMessage(messages.back)}
+                                            onClick={this.props.onSendToBack}
+                                        />
+                                    </InputGroup>

-                            {/* To be rotation point */}
-                            {/* <InputGroup>
-                                <LabeledIconButton
-                                    imgAlt="Rotation Point"
-                                    imgSrc={rotationPointIcon}
-                                    title="Rotation Point"
-                                    onClick={function () {}}
-                                />
-                            </InputGroup> */}
+                                    {/* To be rotation point */}
+                                    {/* <InputGroup>
+                                        <LabeledIconButton
+                                            imgAlt="Rotation Point"
+                                            imgSrc={rotationPointIcon}
+                                            title="Rotation Point"
+                                            onClick={function () {}}
+                                        />
+                                    </InputGroup> */}
+                                </div>
+                            </MediaQuery>
+                            <MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
+                                <InputGroup>
+                                    <Dropdown
+                                        className={styles.modUnselect}
+                                        enterExitTransitionDurationMs={0}
+                                        popoverContent={
+                                            <InputGroup className={styles.modContextMenu}>
+                                                <Button
+                                                    className={classNames(styles.modMenuItem, {
+                                                        [styles.modDisabled]: !shouldShowBringForward()
+                                                    })}
+                                                    disabled={!shouldShowBringForward()}
+                                                    onClick={this.props.onSendToFront}
+                                                >
+                                                    <img
+                                                        className={styles.menuItemIcon}
+                                                        src={sendFrontIcon}
+                                                    />
+                                                    <span>{this.props.intl.formatMessage(messages.front)}</span>
+                                                </Button>
+                                                <Button
+                                                    className={classNames(styles.modMenuItem, {
+                                                        [styles.modDisabled]: !shouldShowSendBackward()
+                                                    })}
+                                                    disabled={!shouldShowSendBackward()}
+                                                    onClick={this.props.onSendToBack}
+                                                >
+                                                    <img
+                                                        className={styles.menuItemIcon}
+                                                        src={sendBackIcon}
+                                                    />
+                                                    <span>{this.props.intl.formatMessage(messages.back)}</span>
+                                                </Button>
+
+                                                {/* To be rotation point */}
+                                                {/* <Button
+                                                    className={classNames(styles.modMenuItem, styles.modTopDivider)}
+                                                    onClick={function () {}}
+                                                >
+                                                    <img
+                                                        className={styles.menuItemIcon}
+                                                        src={rotationPointIcon}
+                                                    />
+                                                    <span>{'Rotation Point'}</span>
+                                                </Button> */}
+                                            </InputGroup>
+                                        }
+                                        tipSize={.01}
+                                    >
+                                        {this.props.intl.formatMessage(messages.more)}
+                                    </Dropdown>
+                                </InputGroup>
+                            </MediaQuery>
                        </div>

                        {/* Second Row */}
--- a/src/components/tool-select-base/tool-select-base.css
+++ b/src/components/tool-select-base/tool-select-base.css
@ -1,14 +1,16 @@
@import '../../css/colors.css';
+@import "../../css/units.css";

 $border-radius: .25rem;

 .mod-tool-select {
    display: inline-block;
+    margin: $grid-unit;
    border: none;
    border-radius: $border-radius;
    outline: none;
    background: none;
-    padding: 0.25rem;
+    padding: $grid-unit;
    font-size: 0.85rem;
    transition: 0.2s;
 }
@ -27,3 +29,9 @@ img.tool-select-icon {
    flex-grow: 1;
    vertical-align: middle;
 }
+
+@media only screen and (max-width: $full-size-paint) {
+    .mod-tool-select {
+        margin: 0;
+    }
+}
--- a/src/containers/brush-mode.jsx
+++ b/src/containers/brush-mode.jsx
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import Blobbiness from '../helper/blob-tools/blob';
 import {MIXED} from '../helper/style-path';

--- a/src/containers/eraser-mode.jsx
+++ b/src/containers/eraser-mode.jsx
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import Blobbiness from '../helper/blob-tools/blob';
 import {changeBrushSize} from '../reducers/eraser-mode';
 import {clearSelectedItems} from '../reducers/selected-items';
--- a/src/containers/fill-color-indicator.jsx
+++ b/src/containers/fill-color-indicator.jsx
@ -4,7 +4,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeFillColor} from '../reducers/fill-color';
 import {openFillColor, closeFillColor} from '../reducers/modals';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import FillColorIndicatorComponent from '../components/fill-color-indicator.jsx';
 import {applyFillColorToSelection} from '../helper/style-path';
--- a/src/containers/line-mode.jsx
+++ b/src/containers/line-mode.jsx
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import {clearSelection} from '../helper/selection';
 import {endPointHit, touching} from '../helper/snapping';
 import {drawHitPoint, removeHitPoint} from '../helper/guides';
--- a/src/containers/oval-mode.jsx
+++ b/src/containers/oval-mode.jsx
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';

 import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
--- a/src/containers/paint-editor.jsx
+++ b/src/containers/paint-editor.jsx
@ -14,7 +14,7 @@ import {groupSelection, ungroupSelection} from '../helper/group';
 import {clearSelection, getSelectedLeafItems, getSelectedRootItems} from '../helper/selection';
 import {resetZoom, zoomOnSelection} from '../helper/view';

-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import paper from '@scratch/paper';
--- a/src/containers/paper-canvas.css
+++ b/src/containers/paper-canvas.css
@ -1,6 +1,6 @@
 .paper-canvas {
-    width: 500px;
-    height: 400px;
+    width: 480px;
+    height: 360px;
    margin: auto;  
    position: relative;
    background-color: #fff;
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import paper from '@scratch/paper';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import {performSnapshot} from '../helper/undo';
 import {undoSnapshot, clearUndoState} from '../reducers/undo';
@ -150,9 +150,9 @@ class PaperCanvas extends React.Component {
        return (
            <canvas
                className={styles.paperCanvas}
-                height="400px"
+                height="360px"
                ref={this.setCanvas}
-                width="500px"
+                width="480px"
                onWheel={this.handleWheel}
            />
        );
--- a/src/containers/rect-mode.jsx
+++ b/src/containers/rect-mode.jsx
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';

 import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
--- a/src/containers/reshape-mode.jsx
+++ b/src/containers/reshape-mode.jsx
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import {changeMode} from '../reducers/modes';
 import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
--- a/src/containers/rounded-rect-mode.jsx
+++ b/src/containers/rounded-rect-mode.jsx
@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import {changeMode} from '../reducers/modes';
 import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
--- a/src/containers/select-mode.jsx
+++ b/src/containers/select-mode.jsx
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import {changeMode} from '../reducers/modes';
 import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
--- a/src/containers/stroke-color-indicator.jsx
+++ b/src/containers/stroke-color-indicator.jsx
@ -4,7 +4,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeStrokeColor} from '../reducers/stroke-color';
 import {openStrokeColor, closeStrokeColor} from '../reducers/modals';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import StrokeColorIndicatorComponent from '../components/stroke-color-indicator.jsx';
 import {applyStrokeColorToSelection} from '../helper/style-path';
--- a/src/containers/stroke-width-indicator.jsx
+++ b/src/containers/stroke-width-indicator.jsx
@ -5,7 +5,7 @@ import bindAll from 'lodash.bindall';
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import StrokeWidthIndicatorComponent from '../components/stroke-width-indicator.jsx';
 import {applyStrokeWidthToSelection} from '../helper/style-path';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 class StrokeWidthIndicator extends React.Component {
    constructor (props) {
--- a/src/css/units.css
+++ b/src/css/units.css
@ -4,7 +4,9 @@ See https://github.com/LLK/scratch-paint/issues/13 */

 /* ACTUALLY, THIS IS EDITED ;)
 THIS WAS CHANGED ON 10/25/2017 BY @mewtaylor TO ADD A VARIABLE FOR THE SMALLEST
-GRID UNITS.*/
+GRID UNITS.
+
+ALSO EDITED ON 11/13/2017 TO ADD IN CONTANTS FOR LAYOUT FROM `layout-contents.js`*/

 $space: 0.5rem;
 $grid-unit: .25rem;
@ -18,3 +20,7 @@ $stage-menu-height: 2.75rem;
 $library-header-height: 4.375rem;

 $form-radius: calc($space / 2);
+
+/* layout contants from `layout-constants.js`, minus 1px */
+$full-size: 1095px;
+$full-size-paint: 1249px;
--- a/src/helper/selection-tools/move-tool.js
+++ b/src/helper/selection-tools/move-tool.js
@ -1,4 +1,4 @@
-import Modes from '../../modes/modes';
+import Modes from '../../lib/modes';
 import {isGroup} from '../group';
 import {isCompoundPathItem, getRootItem} from '../item';
 import {snapDeltaToAngle} from '../math';
--- a/src/helper/selection-tools/reshape-tool.js
+++ b/src/helper/selection-tools/reshape-tool.js
@ -2,7 +2,7 @@ import paper from '@scratch/paper';
 import log from '../../log/log';
 import keyMirror from 'keymirror';

-import Modes from '../../modes/modes';
+import Modes from '../../lib/modes';
 import {getHoveredItem} from '../hover';
 import {getRootItem, isPGTextItem} from '../item';
 import MoveTool from './move-tool';
--- a/src/helper/selection-tools/select-tool.js
+++ b/src/helper/selection-tools/select-tool.js
@ -1,4 +1,4 @@
-import Modes from '../../modes/modes';
+import Modes from '../../lib/modes';

 import {getHoveredItem} from '../hover';
 import {selectRootItem} from '../selection';
--- a/src/helper/selection.js
+++ b/src/helper/selection.js
@ -1,5 +1,5 @@
 import paper from '@scratch/paper';
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';

 import {getItemsGroup, isGroup} from './group';
 import {getRootItem, isCompoundPathItem, isBoundsItem, isPathItem, isPGTextItem} from './item';
--- a/src/helper/tools/oval-tool.js
+++ b/src/helper/tools/oval-tool.js
@ -1,5 +1,5 @@
 import paper from '@scratch/paper';
-import Modes from '../../modes/modes';
+import Modes from '../../lib/modes';
 import {styleShape} from '../style-path';
 import {clearSelection} from '../selection';
 import BoundingBoxTool from '../selection-tools/bounding-box-tool';
--- a/src/helper/tools/rect-tool.js
+++ b/src/helper/tools/rect-tool.js
@ -1,5 +1,5 @@
 import paper from '@scratch/paper';
-import Modes from '../../modes/modes';
+import Modes from '../../lib/modes';
 import {styleShape} from '../style-path';
 import {clearSelection} from '../selection';
 import BoundingBoxTool from '../selection-tools/bounding-box-tool';
--- a/src/lib/layout-constants.js
+++ b/src/lib/layout-constants.js
@ -0,0 +1,3 @@
+export default {
+    fullSizeEditorMinWidth: 1250
+};
--- a/src/modes/modes.js
+++ b/src/modes/modes.js
--- a/src/reducers/modes.js
+++ b/src/reducers/modes.js
@ -1,4 +1,4 @@
-import Modes from '../modes/modes';
+import Modes from '../lib/modes';
 import log from '../log/log';

 const CHANGE_MODE = 'scratch-paint/modes/CHANGE_MODE';
--- a/test/unit/modes-reducer.test.js
+++ b/test/unit/modes-reducer.test.js
@ -1,5 +1,5 @@
 /* eslint-env jest */
-import Modes from '../../src/modes/modes';
+import Modes from '../../src/lib/modes';
 import reducer from '../../src/reducers/modes';
 import {changeMode} from '../../src/reducers/modes';