scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
Implement GH-41: Add minimum width gui
This commit is contained in:
Matthew Taylor 2017-11-21 11:06:05 -05:00 committed by GitHub
commit 5ffdd14ff0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 319 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

12
src/components/dropdown/dropdown-caret.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 920 B

30
src/components/dropdown/dropdown.css Normal file
View file

@ -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;
}

67
src/components/dropdown/dropdown.jsx Normal file
View file

@ -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;

4
src/components/forms/live-input-hoc.jsx
View file

@ -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])
};

2
src/components/input-group/input-group.css
View file

@ -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 {

4
src/components/labeled-icon-button/labeled-icon-button.css
View file

@ -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;
}

2
src/components/mode-tools/mode-tools.jsx
View file

@ -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';

67
src/components/paint-editor/paint-editor.css
View file

@ -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;
}
}

75
src/components/paint-editor/paint-editor.jsx
View file

@ -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,6 +122,7 @@ class PaintEditorComponent extends React.Component {
<div className={styles.row}>
{/* Name field */}
<InputGroup>
<MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
<Label text={this.props.intl.formatMessage(messages.costume)}>
<BufferedInput
type="text"
@ -121,6 +130,14 @@ class PaintEditorComponent extends React.Component {
onSubmit={this.props.onUpdateName}
/>
</Label>
</MediaQuery>
<MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
<BufferedInput
type="text"
value={this.props.name}
onSubmit={this.props.onUpdateName}
/>
</MediaQuery>
</InputGroup>
{/* Undo/Redo */}
@ -197,7 +214,8 @@ class PaintEditorComponent extends React.Component {
/>
</InputGroup>
{/* Front/Back */}
<MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
<div className={styles.row}>
<InputGroup>
<LabeledIconButton
disabled={!shouldShowBringForward()}
@ -223,6 +241,61 @@ class PaintEditorComponent extends React.Component {
/>
</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 */}
<div className={styles.row}>

10
src/components/tool-select-base/tool-select-base.css
View file

@ -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;
}
}

2
src/containers/brush-mode.jsx
View file

@ -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';

2
src/containers/eraser-mode.jsx
View file

@ -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';

2
src/containers/fill-color-indicator.jsx
View file

@ -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';

2
src/containers/line-mode.jsx
View file

@ -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';

2
src/containers/oval-mode.jsx
View file

@ -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';

2
src/containers/paint-editor.jsx
View file

@ -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';

4
src/containers/paper-canvas.css
View file

@ -1,6 +1,6 @@
.paper-canvas {
width: 500px;
height: 400px;
width: 480px;
height: 360px;
margin: auto;
position: relative;
background-color: #fff;

6
src/containers/paper-canvas.jsx
View file

@ -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}
/>
);

2
src/containers/rect-mode.jsx
View file

@ -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';

2
src/containers/reshape-mode.jsx
View file

@ -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';

2
src/containers/rounded-rect-mode.jsx
View file

@ -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';

2
src/containers/select-mode.jsx
View file

@ -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';

2
src/containers/stroke-color-indicator.jsx
View file

@ -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';

2
src/containers/stroke-width-indicator.jsx
View file

@ -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) {

8
src/css/units.css
View file

@ -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;

2
src/helper/selection-tools/move-tool.js
View file

@ -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';

2
src/helper/selection-tools/reshape-tool.js
View file

@ -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';

2
src/helper/selection-tools/select-tool.js
View file

@ -1,4 +1,4 @@
import Modes from '../../modes/modes';
import Modes from '../../lib/modes';
import {getHoveredItem} from '../hover';
import {selectRootItem} from '../selection';

2
src/helper/selection.js
View file

@ -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';

2
src/helper/tools/oval-tool.js
View file

@ -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';

2
src/helper/tools/rect-tool.js
View file

@ -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';

3
src/lib/layout-constants.js Normal file
View file

@ -0,0 +1,3 @@
export default {
fullSizeEditorMinWidth: 1250
};

0
src/modes/modes.js → src/lib/modes.js
View file

2
src/reducers/modes.js
View file

@ -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';

2
test/unit/modes-reducer.test.js
View file

@ -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';