diff --git a/src/components/connection-modal/connection-modal.css b/src/components/connection-modal/connection-modal.css new file mode 100644 index 0000000000000000000000000000000000000000..34a8f5a21e3aea6ef4817aa6a2158232ca59d18d --- /dev/null +++ b/src/components/connection-modal/connection-modal.css @@ -0,0 +1,81 @@ +@import "../../css/colors.css"; +@import "../../css/units.css"; + +.modal-content { + width: 360px; +} + +.body { + background: $ui-white; + padding: 1.5rem 2.25rem; +} + +.label { + font-weight: 500; + margin: 0 0 0.75rem; +} + +.input { + margin-bottom: 1.5rem; + width: 100%; + border: 1px solid $ui-black-transparent; + border-radius: 5px; + padding: 0 1rem; + height: 3rem; + color: $text-primary-transparent; + font-size: .875rem; +} + +.button-row { + font-weight: bolder; + text-align: right; +} + +.button-row button { + padding: 0.75rem 1rem; + border-radius: 0.25rem; + background: white; + border: 1px solid $ui-black-transparent; + font-weight: 600; + font-size: 0.85rem; +} + +.button-row button.ok-button { + background: $motion-primary; + border: $motion-primary; + color: white; +} + +.button-row button + button { + margin-left: 0.5rem; +} + +.more-options { + border-top: 1px dashed hsla(0, 0%, 0%, .25); + overflow: visible; + padding: 1rem; + text-align: center; + margin: 0 0 1rem; +} + +.hide-more-options { + display: none; +} + +.more-options-accordion { + width: 60%; + margin: 0 auto; +} + +.more-options-text { + opacity: .5; +} + +.more-options-icon { + width: .75rem; + height: .75rem; + margin-left: .5rem; + vertical-align: middle; + padding-bottom: .2rem; + opacity: .5; +} diff --git a/src/components/connection-modal/connection-modal.jsx b/src/components/connection-modal/connection-modal.jsx new file mode 100644 index 0000000000000000000000000000000000000000..33ca819c27beea431b32d5b713b3e60bff0459e2 --- /dev/null +++ b/src/components/connection-modal/connection-modal.jsx @@ -0,0 +1,38 @@ +import {FormattedMessage} from 'react-intl'; +import PropTypes from 'prop-types'; +import React from 'react'; + +import Box from '../box/box.jsx'; +import Modal from '../modal/modal.jsx'; + +import styles from './connection-modal.css'; + +const ConnectionModalComponent = props => ( + <Modal + className={styles.modalContent} + contentLabel={props.title} + onRequestClose={props.onCancel} + > + <Box className={styles.body}> + <Box className={styles.buttonRow}> + <button + className={styles.cancelButton} + onClick={props.onCancel} + > + <FormattedMessage + defaultMessage="💩" + description="Button in prompt for cancelling the dialog" + id="gui.prompt.cancel" + /> + </button> + </Box> + </Box> + </Modal> +); + +ConnectionModalComponent.propTypes = { + onCancel: PropTypes.func.isRequired, + title: PropTypes.string.isRequired +}; + +export default ConnectionModalComponent; diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index 1b411d6336e9291efabdbca2959ef0f85a7f1d96..13d87d9d44268cb8d4d7b3aa0ac4a4b203929091 100644 --- a/src/containers/blocks.jsx +++ b/src/containers/blocks.jsx @@ -9,6 +9,7 @@ import VM from 'scratch-vm'; import analytics from '../lib/analytics'; import Prompt from './prompt.jsx'; +import ConnectionModal from './connection-modal.jsx'; import BlocksComponent from '../components/blocks/blocks.jsx'; import ExtensionLibrary from './extension-library.jsx'; import CustomProcedures from './custom-procedures.jsx'; @@ -365,13 +366,17 @@ class Blocks extends React.Component { {...props} /> {this.state.prompt ? ( - <Prompt - label={this.state.prompt.message} - placeholder={this.state.prompt.defaultValue} - showMoreOptions={this.state.prompt.showMoreOptions} - title={this.state.prompt.title} + // <Prompt + // label={this.state.prompt.message} + // placeholder={this.state.prompt.defaultValue} + // showMoreOptions={this.state.prompt.showMoreOptions} + // title={this.state.prompt.title} + // onCancel={this.handlePromptClose} + // onOk={this.handlePromptCallback} + // /> + <ConnectionModal + title={'OMG a modal 😲 🔥 💯'} onCancel={this.handlePromptClose} - onOk={this.handlePromptCallback} /> ) : null} {extensionLibraryVisible ? ( diff --git a/src/containers/connection-modal.jsx b/src/containers/connection-modal.jsx new file mode 100644 index 0000000000000000000000000000000000000000..460db8f9680356f50169c5747099bfc514cd8202 --- /dev/null +++ b/src/containers/connection-modal.jsx @@ -0,0 +1,31 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import bindAll from 'lodash.bindall'; +import ConnectionModalComponent from '../components/connection-modal/connection-modal.jsx'; + +class ConnectionModal extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleCancel' + ]); + } + handleCancel () { + this.props.onCancel(); + } + render () { + return ( + <ConnectionModalComponent + title={this.props.title} + onCancel={this.handleCancel} + /> + ); + } +} + +ConnectionModal.propTypes = { + onCancel: PropTypes.func.isRequired, + title: PropTypes.string.isRequired +}; + +export default ConnectionModal;