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

add min width layout for tablet

Browse source
This commit is contained in:
Matthew Taylor 2017-11-07 14:08:26 -05:00
parent 250e3ea089
commit 018f9b28a6
8 changed files with 249 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -67,6 +67,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;
}

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

@ -0,0 +1,69 @@
import bindAll from 'lodash.bindall';
import classNames from 'classnames';
import Popover from 'react-popover';
import PropTypes from 'prop-types';
import React from 'react';
import Button from '../button/button.jsx';
import styles from './dropdown.css';
import dropdownIcon from './dropdown-caret.svg';
class Dropdown extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'closePopover',
'toggleOpenState'
]);
this.state = {
isOpen: false
};
}
closePopover () {
this.setState({
isOpen: false
});
}
toggleOpenState () {
this.setState({
isOpen: !this.state.isOpen
});
}
render () {
return (
<Popover
body={this.props.popoverContent}
isOpen={this.state.isOpen}
preferPlace="below"
onOuterAction={this.closePopover}
{...this.props}
>
<div
className={classNames(styles.dropdown, this.props.className, {
[styles.modOpen]: this.state.isOpen,
[styles.modClosed]: !this.state.isOpen
})}
onClick={this.toggleOpenState}
>
{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;

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

@ -33,6 +33,10 @@
padding-right: calc(3 * $grid-unit);
}
.mod-unselect {
user-select: none;
}
.mod-labeled-icon-height {
height: 2.85rem; /* for the second row so the dashed borders are equal in size */
}
@ -72,6 +76,42 @@ $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;
}
.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);
}
@ -89,7 +129,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 +141,10 @@ $border-radius: 0.25rem;
display: flex;
flex-direction: row-reverse;
}
@media only screen and (max-width: 1095px) {
.mode-selector {
flex-direction: column;
justify-content: flex-start;
}
}

114
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,10 +30,12 @@ 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';
import redoIcon from './icons/redo.svg';
import rotationPointIcon from './icons/rotation-point.svg';
import sendBackIcon from './icons/send-back.svg';
import sendBackwardIcon from './icons/send-backward.svg';
import sendForwardIcon from './icons/send-forward.svg';
@ -88,6 +92,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'
}
});
@ -197,31 +206,83 @@ 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.fullSizeMinWidth}>
<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}
/>
{/* 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> */}
</MediaQuery>
<MediaQuery maxWidth={layout.fullSizeMinWidth - 1}>
<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>
</MediaQuery>
</InputGroup>
</div>
{/* Second Row */}
@ -247,10 +308,7 @@ class PaintEditorComponent extends React.Component {
/>
</InputGroup>
<InputGroup className={styles.modModeTools}>
<ModeToolsComponent
onCopyToClipboard={this.props.onCopyToClipboard}
onPasteFromClipboard={this.props.onPasteFromClipboard}
/>
<ModeToolsComponent />
</InputGroup>
</div>
</div>
@ -342,9 +400,7 @@ PaintEditorComponent.propTypes = {
canUndo: PropTypes.func.isRequired,
intl: intlShape,
name: PropTypes.string,
onCopyToClipboard: PropTypes.func.isRequired,
onGroup: PropTypes.func.isRequired,
onPasteFromClipboard: PropTypes.func.isRequired,
onRedo: PropTypes.func.isRequired,
onSendBackward: PropTypes.func.isRequired,
onSendForward: PropTypes.func.isRequired,

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

@ -4,6 +4,7 @@ $border-radius: .25rem;
.mod-tool-select {
display: inline-block;
margin: .25rem;
border: none;
border-radius: $border-radius;
outline: none;

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

@ -0,0 +1,3 @@
export default {
fullSizeMinWidth: 1096
};