Merge branch 'develop' of github.com:LLK/scratch-gui into develop
This commit is contained in:
11 files changed
+668
-965
No files matched your search
Generated
+649
-478
File diff suppressed because it is too large.
Load diff
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>camera</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="camera" fill="#FFFFFF">
|
||||
<path d="M10,14.5 C8.3485,14.5 7,13.1515 7,11.5 C7,9.8365 8.3485,8.5 10,8.5 C11.6635,8.5 13,9.8365 13,11.5 C13,13.1515 11.6635,14.5 10,14.5 M16,6.25 L14.95,6.25 C14.6635,6.25 14.425,6.1 14.2885,5.86 L13.2835,4.0315 C13.015,3.55 12.52,3.25 11.965,3.25 L8.05,3.25 C7.495,3.25 7,3.55 6.7285,4.0315 L5.71,5.86 C5.575,6.1 5.335,6.25 5.065,6.25 L4,6.25 C3.175,6.25 2.5,6.925 2.5,7.75 L2.5,15.25 C2.5,16.0765 3.175,16.75 4,16.75 L16,16.75 C16.825,16.75 17.5,16.0765 17.5,15.25 L17.5,7.75 C17.5,6.925 16.825,6.25 16,6.25" id="camera-icon"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,160 +0,0 @@
|
||||
@import "../../css/colors.css";
|
||||
@import "../../css/units.css";
|
||||
|
||||
$main-button-size: 2.75rem;
|
||||
|
||||
.modal-content {
|
||||
width: 552px;
|
||||
}
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: $ui-white;
|
||||
padding: 1.5rem 2.25rem;
|
||||
}
|
||||
[theme="dark"] .body {
|
||||
background: $ui-secondary;
|
||||
}
|
||||
|
||||
.camera-feed-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
background: $ui-primary;
|
||||
border: 1px solid $ui-black-transparent;
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: absolute;
|
||||
width: 480px;
|
||||
height: 360px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
position: absolute;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: $text-primary-transparent;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin: 10px auto 0;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
color: $text-primary-transparent;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.capture-text {
|
||||
color: $motion-primary;
|
||||
}
|
||||
|
||||
.disabled-text {
|
||||
color: $text-primary;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.main-button-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Action Menu */
|
||||
.main-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: $motion-primary;
|
||||
outline: none;
|
||||
border: none;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
border-radius: 100%;
|
||||
width: $main-button-size;
|
||||
height: $main-button-size;
|
||||
box-shadow: 0 0 0 4px $motion-transparent;
|
||||
}
|
||||
|
||||
.main-button:hover {
|
||||
background: $extensions-primary;
|
||||
box-shadow: 0 0 0 6px $motion-transparent;
|
||||
}
|
||||
|
||||
.main-button:disabled {
|
||||
background: $text-primary;
|
||||
border-color: $ui-black-transparent;
|
||||
box-shadow: none;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.main-icon {
|
||||
width: calc($main-button-size - 1rem);
|
||||
height: calc($main-button-size - 1rem);
|
||||
}
|
||||
|
||||
.button-row {
|
||||
font-weight: bolder;
|
||||
text-align: right;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
.button-row button {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.25rem;
|
||||
background: $ui-white;
|
||||
border: 1px solid $ui-black-transparent;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
color: $motion-primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button-row button.ok-button {
|
||||
background: $motion-primary;
|
||||
border: $motion-primary;
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
[dir="rtl"] .retake-button img {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.flash-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: $ui-white;
|
||||
animation-name: flash;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards; /* Leave at 0 opacity after animation */
|
||||
}
|
||||
@@ -1,141 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import {defineMessages, injectIntl, intlShape} from 'react-intl';
|
||||
import Box from '../box/box.jsx';
|
||||
import Modal from '../../containers/modal.jsx';
|
||||
import styles from './camera-modal.css';
|
||||
import backIcon from './icon--back.svg';
|
||||
import cameraIcon from '../action-menu/icon--camera.svg';
|
||||
|
||||
const messages = defineMessages({
|
||||
cameraModalTitle: {
|
||||
defaultMessage: 'Take a Photo',
|
||||
description: 'Title for prompt to take a picture (to add as a new costume).',
|
||||
id: 'gui.cameraModal.cameraModalTitle'
|
||||
},
|
||||
loadingCameraMessage: {
|
||||
defaultMessage: 'Loading Camera...',
|
||||
description: 'Notification to the user that the camera is loading',
|
||||
id: 'gui.cameraModal.loadingCameraMessage'
|
||||
},
|
||||
permissionRequest: {
|
||||
defaultMessage: 'We need your permission to use your camera',
|
||||
description: 'Notification to the user that the app needs camera access',
|
||||
id: 'gui.cameraModal.permissionRequest'
|
||||
},
|
||||
retakePhoto: {
|
||||
defaultMessage: 'Retake Photo',
|
||||
description: 'A button that allows the user to take the picture again, replacing the old one',
|
||||
id: 'gui.cameraModal.retakePhoto'
|
||||
},
|
||||
save: {
|
||||
defaultMessage: 'Save',
|
||||
description: 'A button that allows the user to save the photo they took as a costume',
|
||||
id: 'gui.cameraModal.save'
|
||||
},
|
||||
takePhotoButton: {
|
||||
defaultMessage: 'Take Photo',
|
||||
description: 'A button to take a photo',
|
||||
id: 'gui.cameraModal.takePhoto'
|
||||
},
|
||||
loadingCaption: {
|
||||
defaultMessage: 'Loading...',
|
||||
description: 'A caption for a disabled button while the video from the camera is still loading',
|
||||
id: 'gui.cameraModal.loadingCaption'
|
||||
},
|
||||
enableCameraCaption: {
|
||||
defaultMessage: 'Enable Camera',
|
||||
description: 'A caption for a disabled button prompting the user to enable camera access',
|
||||
id: 'gui.cameraModal.enableCameraCaption'
|
||||
}
|
||||
});
|
||||
|
||||
const CameraModal = ({intl, ...props}) => (
|
||||
<Modal
|
||||
className={styles.modalContent}
|
||||
contentLabel={intl.formatMessage(messages.cameraModalTitle)}
|
||||
onRequestClose={props.onCancel}
|
||||
>
|
||||
<Box className={styles.body}>
|
||||
<Box className={styles.cameraFeedContainer}>
|
||||
<div className={styles.loadingText}>
|
||||
{props.access ? intl.formatMessage(messages.loadingCameraMessage) :
|
||||
`↖️ \u00A0${intl.formatMessage(messages.permissionRequest)}`}
|
||||
</div>
|
||||
<canvas
|
||||
className={styles.canvas}
|
||||
// height and (below) width of the actual image
|
||||
// double stage dimensions to avoid the need for
|
||||
// resizing the captured image when importing costume
|
||||
// to accommodate double resolution bitmaps
|
||||
height="720"
|
||||
ref={props.canvasRef}
|
||||
width="960"
|
||||
/>
|
||||
{props.capture ? (
|
||||
<div className={styles.flashOverlay} />
|
||||
) : null}
|
||||
</Box>
|
||||
{props.capture ?
|
||||
<Box className={styles.buttonRow}>
|
||||
<button
|
||||
className={styles.retakeButton}
|
||||
key="retake-button"
|
||||
onClick={props.onBack}
|
||||
>
|
||||
<img
|
||||
draggable={false}
|
||||
src={backIcon}
|
||||
/> {intl.formatMessage(messages.retakePhoto)}
|
||||
</button>
|
||||
<button
|
||||
className={styles.okButton}
|
||||
onClick={props.onSubmit}
|
||||
> {intl.formatMessage(messages.save)}
|
||||
</button>
|
||||
</Box> :
|
||||
<Box className={styles.mainButtonRow}>
|
||||
<button
|
||||
className={styles.mainButton}
|
||||
disabled={!props.loaded}
|
||||
key="capture-button"
|
||||
onClick={props.onCapture}
|
||||
>
|
||||
<img
|
||||
className={styles.mainIcon}
|
||||
draggable={false}
|
||||
src={cameraIcon}
|
||||
/>
|
||||
</button>
|
||||
<div className={styles.helpText}>
|
||||
{props.access ?
|
||||
<span className={props.loaded ? styles.captureText : styles.disabledText}>
|
||||
{props.loaded ?
|
||||
intl.formatMessage(messages.takePhotoButton) :
|
||||
intl.formatMessage(messages.loadingCaption)}
|
||||
</span> :
|
||||
<span className={styles.disabledText}>
|
||||
{intl.formatMessage(messages.enableCameraCaption)}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
</Box>
|
||||
}
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
CameraModal.propTypes = {
|
||||
access: PropTypes.bool,
|
||||
canvasRef: PropTypes.func.isRequired,
|
||||
capture: PropTypes.string,
|
||||
intl: intlShape.isRequired,
|
||||
loaded: PropTypes.bool,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
onCapture: PropTypes.func.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default injectIntl(CameraModal);
|
||||
@@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="8px" viewBox="0 0 18 8" 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>re-record</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Desktop---1280x720" transform="translate(-446.000000, -454.000000)" fill="#4C97FF">
|
||||
<g id="Step-4---Playing-Trim" transform="translate(0.000000, 42.000000)">
|
||||
<g id="Re-record" transform="translate(434.000000, 400.000000)">
|
||||
<path d="M23.6951773,18.0886272 L20.5085204,21.2806841 C20.2691162,21.5146883 19.9451104,21.6466907 19.6085044,21.6466907 C19.2730984,21.6466907 18.9490926,21.5146883 18.7084883,21.2806841 L15.5230315,18.0886272 C15.157025,17.7226207 15.049023,17.1766109 15.2470266,16.7026025 C15.4450301,16.228594 15.9010382,15.9225886 16.4170474,15.9225886 L17.5630679,15.9225886 C17.5330673,15.6465836 17.455066,15.3345781 17.3230636,15.0045722 C17.2816629,14.9085705 17.2390621,14.8125688 17.1910612,14.716567 C17.1250601,14.6085651 17.1316602,14.5785646 17.0410586,14.4465622 C16.897056,14.2305584 16.7650536,14.0685555 16.6084509,13.8825522 C16.2910452,13.5405461 15.9070383,13.2465408 15.4990311,13.030537 C15.0850237,12.8145331 14.653016,12.6825308 14.2690091,12.6105295 C13.8910024,12.5445283 13.5429962,12.5385282 13.3389925,12.5385282 C13.2369907,12.5325281 13.1049884,12.5565285 13.0389872,12.5625286 C12.9669859,12.5685287 12.9249852,12.5745288 12.9249852,12.5745288 C12.4989776,12.6165296 12.1149707,12.304524 12.07297,11.8785164 C12.0369693,11.51851 12.2469731,11.1945042 12.5649787,11.0745021 C12.5649787,11.0745021 12.6069795,11.0565018 12.6729807,11.0325013 C12.750982,11.0085009 12.8229833,10.9665001 12.9909863,10.9184993 C13.3269923,10.8164975 13.7529999,10.7084955 14.3110099,10.6544946 C14.8630197,10.6064937 15.5290316,10.6184939 16.2316441,10.7624965 C16.9330566,10.9124992 17.6710698,11.1945042 18.355082,11.6025115 C18.6790878,11.8125152 19.027094,12.0585196 19.2970988,12.2985239 C19.417101,12.3885255 19.6211046,12.5925292 19.7411067,12.7185314 C19.8791092,12.862534 20.0051114,13.0065365 20.1317137,13.1565392 C20.6171224,13.7565499 20.9771288,14.4045615 21.211133,14.992572 C21.3491354,15.328578 21.4451371,15.6465836 21.5171384,15.9225886 L22.8011613,15.9225886 C23.3171705,15.9225886 23.7731787,16.228594 23.9711822,16.7026025 C24.1691857,17.1766109 24.0611838,17.7226207 23.6951773,18.0886272" id="re-record" transform="translate(18.068963, 16.137926) scale(-1, 1) rotate(-45.000000) translate(-18.068963, -16.137926) "></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.8 KiB |
@@ -104,6 +104,8 @@ const TargetPane = ({
|
||||
|
||||
const spriteShape = PropTypes.shape({
|
||||
costume: PropTypes.shape({
|
||||
// asset is defined in scratch-storage's Asset.js
|
||||
asset: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
url: PropTypes.string,
|
||||
name: PropTypes.string.isRequired,
|
||||
// The following are optional because costumes uploaded from disk
|
||||
@@ -112,6 +114,7 @@ const spriteShape = PropTypes.shape({
|
||||
rotationCenterX: PropTypes.number,
|
||||
rotationCenterY: PropTypes.number
|
||||
}),
|
||||
costumeCount: PropTypes.number,
|
||||
direction: PropTypes.number,
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
|
||||
@@ -148,3 +148,16 @@ $ui-gray: hsla(0, 0%, 95%, 1);
|
||||
box-shadow: none;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 660px) {
|
||||
.modal-content {
|
||||
margin: 5vh auto;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 540px) {
|
||||
.illustration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
import bindAll from 'lodash.bindall';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
import CameraModalComponent from '../components/camera-modal/camera-modal.jsx';
|
||||
import ModalVideoManager from '../lib/video/modal-video-manager.js';
|
||||
|
||||
import {
|
||||
closeCameraCapture
|
||||
} from '../reducers/modals';
|
||||
|
||||
class CameraModal extends React.Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
bindAll(this, [
|
||||
'handleAccess',
|
||||
'handleBack',
|
||||
'handleCancel',
|
||||
'handleCapture',
|
||||
'handleLoaded',
|
||||
'handleSubmit',
|
||||
'setCanvas'
|
||||
]);
|
||||
|
||||
this.video = null;
|
||||
this.videoDevice = null;
|
||||
|
||||
this.state = {
|
||||
capture: null,
|
||||
access: false,
|
||||
loaded: false
|
||||
};
|
||||
}
|
||||
componentWillUnmount () {
|
||||
if (this.videoDevice) {
|
||||
this.videoDevice.disableVideo();
|
||||
}
|
||||
}
|
||||
handleAccess () {
|
||||
this.setState({access: true});
|
||||
}
|
||||
handleLoaded () {
|
||||
this.setState({loaded: true});
|
||||
}
|
||||
handleBack () {
|
||||
this.setState({capture: null});
|
||||
this.videoDevice.clearSnapshot();
|
||||
}
|
||||
handleCapture () {
|
||||
if (this.state.loaded) {
|
||||
const capture = this.videoDevice.takeSnapshot();
|
||||
this.setState({capture: capture});
|
||||
}
|
||||
}
|
||||
setCanvas (canvas) {
|
||||
this.canvas = canvas;
|
||||
if (this.canvas) {
|
||||
this.videoDevice = new ModalVideoManager(this.canvas);
|
||||
this.videoDevice.enableVideo(this.handleAccess, this.handleLoaded);
|
||||
}
|
||||
}
|
||||
handleSubmit () {
|
||||
if (!this.state.capture) return;
|
||||
this.props.onNewCostume(this.state.capture);
|
||||
this.props.onClose();
|
||||
}
|
||||
handleCancel () {
|
||||
this.props.onClose();
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<CameraModalComponent
|
||||
access={this.state.access}
|
||||
canvasRef={this.setCanvas}
|
||||
capture={this.state.capture}
|
||||
loaded={this.state.loaded}
|
||||
onBack={this.handleBack}
|
||||
onCancel={this.handleCancel}
|
||||
onCapture={this.handleCapture}
|
||||
onSubmit={this.handleSubmit}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CameraModal.propTypes = {
|
||||
onClose: PropTypes.func,
|
||||
onNewCostume: PropTypes.func
|
||||
};
|
||||
|
||||
const mapStateToProps = () => ({});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onClose: () => {
|
||||
dispatch(closeCameraCapture());
|
||||
}
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(CameraModal);
|
||||
@@ -6,7 +6,6 @@ import VM from 'scratch-vm';
|
||||
|
||||
import AssetPanel from '../components/asset-panel/asset-panel.jsx';
|
||||
import PaintEditorWrapper from './paint-editor-wrapper.jsx';
|
||||
import CameraModal from './camera-modal.jsx';
|
||||
import {connect} from 'react-redux';
|
||||
import {handleFileUpload, costumeUpload} from '../lib/file-uploader.js';
|
||||
import errorBoundaryHOC from '../lib/error-boundary-hoc.jsx';
|
||||
@@ -16,8 +15,6 @@ import sharedMessages from '../lib/shared-messages';
|
||||
import downloadBlob from '../lib/download-blob';
|
||||
|
||||
import {
|
||||
closeCameraCapture,
|
||||
openCameraCapture,
|
||||
openCostumeLibrary,
|
||||
openBackdropLibrary
|
||||
} from '../reducers/modals';
|
||||
@@ -34,7 +31,6 @@ import addLibraryBackdropIcon from '../components/asset-panel/icon--add-backdrop
|
||||
import addLibraryCostumeIcon from '../components/asset-panel/icon--add-costume-lib.svg';
|
||||
import fileUploadIcon from '../components/action-menu/icon--file-upload.svg';
|
||||
import paintIcon from '../components/action-menu/icon--paint.svg';
|
||||
import cameraIcon from '../components/action-menu/icon--camera.svg';
|
||||
import surpriseIcon from '../components/action-menu/icon--surprise.svg';
|
||||
import searchIcon from '../components/action-menu/icon--search.svg';
|
||||
|
||||
@@ -70,11 +66,6 @@ let messages = defineMessages({
|
||||
defaultMessage: 'Upload Costume',
|
||||
description: 'Button to add a costume by uploading a file in the editor tab',
|
||||
id: 'gui.costumeTab.addFileCostume'
|
||||
},
|
||||
addCameraCostumeMsg: {
|
||||
defaultMessage: 'Camera',
|
||||
description: 'Button to use the camera to create a costume costume in the editor tab',
|
||||
id: 'gui.costumeTab.addCameraCostume'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -94,7 +85,6 @@ class CostumeTab extends React.Component {
|
||||
'handleSurpriseBackdrop',
|
||||
'handleFileUploadClick',
|
||||
'handleCostumeUpload',
|
||||
'handleCameraBuffer',
|
||||
'handleDrop',
|
||||
'setFileInput'
|
||||
]);
|
||||
@@ -219,14 +209,6 @@ class CostumeTab extends React.Component {
|
||||
}, this.props.onCloseImporting);
|
||||
}, this.props.onCloseImporting);
|
||||
}
|
||||
handleCameraBuffer (buffer) {
|
||||
const storage = this.props.vm.runtime.storage;
|
||||
const targetId = this.props.vm.editingTarget.id;
|
||||
costumeUpload(buffer, 'image/png', storage, vmCostumes => {
|
||||
vmCostumes[0].name = this.props.intl.formatMessage(messages.costume, {index: 1});
|
||||
this.handleNewCostume(vmCostumes, false, targetId);
|
||||
});
|
||||
}
|
||||
handleFileUploadClick () {
|
||||
this.fileInput.click();
|
||||
}
|
||||
@@ -265,11 +247,8 @@ class CostumeTab extends React.Component {
|
||||
dispatchUpdateRestore, // eslint-disable-line no-unused-vars
|
||||
intl,
|
||||
isRtl,
|
||||
onNewCostumeFromCameraClick,
|
||||
onNewLibraryBackdropClick,
|
||||
onNewLibraryCostumeClick,
|
||||
cameraModalVisible,
|
||||
onRequestCloseCameraModal,
|
||||
vm
|
||||
} = this.props;
|
||||
|
||||
@@ -300,11 +279,6 @@ class CostumeTab extends React.Component {
|
||||
img: addLibraryIcon,
|
||||
onClick: addLibraryFunc
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage(messages.addCameraCostumeMsg),
|
||||
img: cameraIcon,
|
||||
onClick: onNewCostumeFromCameraClick
|
||||
},
|
||||
{
|
||||
title: intl.formatMessage(addFileMessage),
|
||||
img: fileUploadIcon,
|
||||
@@ -347,29 +321,20 @@ class CostumeTab extends React.Component {
|
||||
/> :
|
||||
null
|
||||
}
|
||||
{cameraModalVisible ? (
|
||||
<CameraModal
|
||||
onClose={onRequestCloseCameraModal}
|
||||
onNewCostume={this.handleCameraBuffer}
|
||||
/>
|
||||
) : null}
|
||||
</AssetPanel>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CostumeTab.propTypes = {
|
||||
cameraModalVisible: PropTypes.bool,
|
||||
dispatchUpdateRestore: PropTypes.func,
|
||||
editingTarget: PropTypes.string,
|
||||
intl: intlShape,
|
||||
isRtl: PropTypes.bool,
|
||||
onActivateSoundsTab: PropTypes.func.isRequired,
|
||||
onCloseImporting: PropTypes.func.isRequired,
|
||||
onNewCostumeFromCameraClick: PropTypes.func.isRequired,
|
||||
onNewLibraryBackdropClick: PropTypes.func.isRequired,
|
||||
onNewLibraryCostumeClick: PropTypes.func.isRequired,
|
||||
onRequestCloseCameraModal: PropTypes.func.isRequired,
|
||||
onShowImporting: PropTypes.func.isRequired,
|
||||
sprites: PropTypes.shape({
|
||||
id: PropTypes.shape({
|
||||
@@ -393,8 +358,7 @@ const mapStateToProps = state => ({
|
||||
isRtl: state.locales.isRtl,
|
||||
sprites: state.scratchGui.targets.sprites,
|
||||
stage: state.scratchGui.targets.stage,
|
||||
dragging: state.scratchGui.assetDrag.dragging,
|
||||
cameraModalVisible: state.scratchGui.modals.cameraCapture
|
||||
dragging: state.scratchGui.assetDrag.dragging
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
@@ -407,12 +371,6 @@ const mapDispatchToProps = dispatch => ({
|
||||
e.preventDefault();
|
||||
dispatch(openCostumeLibrary());
|
||||
},
|
||||
onNewCostumeFromCameraClick: () => {
|
||||
dispatch(openCameraCapture());
|
||||
},
|
||||
onRequestCloseCameraModal: () => {
|
||||
dispatch(closeCameraCapture());
|
||||
},
|
||||
dispatchUpdateRestore: restoreState => {
|
||||
dispatch(setRestore(restoreState));
|
||||
},
|
||||
|
||||
@@ -241,8 +241,8 @@ Monitor.propTypes = {
|
||||
min: PropTypes.number,
|
||||
mode: PropTypes.oneOf(['default', 'slider', 'large', 'list']),
|
||||
monitorLayout: PropTypes.shape({
|
||||
monitors: PropTypes.object,
|
||||
savedMonitorPositions: PropTypes.object
|
||||
monitors: PropTypes.object, // eslint-disable-line react/forbid-prop-types
|
||||
savedMonitorPositions: PropTypes.object // eslint-disable-line react/forbid-prop-types
|
||||
}).isRequired,
|
||||
onDragEnd: PropTypes.func.isRequired,
|
||||
opcode: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
|
||||
|
||||
@@ -2,7 +2,6 @@ const OPEN_MODAL = 'scratch-gui/modals/OPEN_MODAL';
|
||||
const CLOSE_MODAL = 'scratch-gui/modals/CLOSE_MODAL';
|
||||
|
||||
const MODAL_BACKDROP_LIBRARY = 'backdropLibrary';
|
||||
const MODAL_CAMERA_CAPTURE = 'cameraCapture';
|
||||
const MODAL_COSTUME_LIBRARY = 'costumeLibrary';
|
||||
const MODAL_EXTENSION_LIBRARY = 'extensionLibrary';
|
||||
const MODAL_LOADING_PROJECT = 'loadingProject';
|
||||
@@ -17,7 +16,6 @@ const MODAL_SETTINGS = 'settingsModal';
|
||||
|
||||
const initialState = {
|
||||
[MODAL_BACKDROP_LIBRARY]: false,
|
||||
[MODAL_CAMERA_CAPTURE]: false,
|
||||
[MODAL_COSTUME_LIBRARY]: false,
|
||||
[MODAL_EXTENSION_LIBRARY]: false,
|
||||
[MODAL_LOADING_PROJECT]: false,
|
||||
@@ -61,9 +59,6 @@ const closeModal = function (modal) {
|
||||
const openBackdropLibrary = function () {
|
||||
return openModal(MODAL_BACKDROP_LIBRARY);
|
||||
};
|
||||
const openCameraCapture = function () {
|
||||
return openModal(MODAL_CAMERA_CAPTURE);
|
||||
};
|
||||
const openCostumeLibrary = function () {
|
||||
return openModal(MODAL_COSTUME_LIBRARY);
|
||||
};
|
||||
@@ -100,9 +95,6 @@ const openSettingsModal = function () {
|
||||
const closeBackdropLibrary = function () {
|
||||
return closeModal(MODAL_BACKDROP_LIBRARY);
|
||||
};
|
||||
const closeCameraCapture = function () {
|
||||
return closeModal(MODAL_CAMERA_CAPTURE);
|
||||
};
|
||||
const closeCostumeLibrary = function () {
|
||||
return closeModal(MODAL_COSTUME_LIBRARY);
|
||||
};
|
||||
@@ -140,7 +132,6 @@ export {
|
||||
reducer as default,
|
||||
initialState as modalsInitialState,
|
||||
openBackdropLibrary,
|
||||
openCameraCapture,
|
||||
openCostumeLibrary,
|
||||
openExtensionLibrary,
|
||||
openLoadingProject,
|
||||
@@ -153,7 +144,6 @@ export {
|
||||
openUsernameModal,
|
||||
openSettingsModal,
|
||||
closeBackdropLibrary,
|
||||
closeCameraCapture,
|
||||
closeCostumeLibrary,
|
||||
closeExtensionLibrary,
|
||||
closeLoadingProject,
|
||||
|
||||
Reference in new issue
Block a user