diff --git a/package.json b/package.json index 785859ef3..56adbeddf 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "bowser": "1.9.4", "cheerio": "1.0.0-rc.2", "classnames": "2.2.5", + "clipboard-copy": "3.0.0", "cookie": "0.2.2", "copy-webpack-plugin": "0.2.0", "create-react-class": "15.6.2", diff --git a/src/components/modal/externalshare/container.jsx b/src/components/modal/externalshare/container.jsx index c1f2e615f..81425f33e 100644 --- a/src/components/modal/externalshare/container.jsx +++ b/src/components/modal/externalshare/container.jsx @@ -2,18 +2,47 @@ const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); const ExternalShareModalPresentation = require('./presentation.jsx'); +const clipboardCopy = require('clipboard-copy'); +const externalShare = require('../../../lib/external-share'); class ExternalShareModal extends React.Component { constructor (props) { super(props); + this.embedTextarea = {}; + bindAll(this, [ + 'handleClickCopyEmbed', + 'setEmbedTextarea' + ]); + } + // componentDidMount () { + // if (this.embedTextarea) this.embedTextarea.select(); + // } + componentDidUpdate () { + if (this.embedTextarea) { + console.log('selecting'); + this.embedTextarea.select(); + } else { + console.log('NOT selecting'); + } + } + handleClickCopyEmbed () { + if (this.embedTextarea) this.embedTextarea.select(); + clipboardCopy(this.embedTextarea.value); + } + setEmbedTextarea (textarea) { + this.embedTextarea = textarea; } - render () { + const projectId = this.props.projectId; return ( ); } @@ -21,7 +50,8 @@ class ExternalShareModal extends React.Component { ExternalShareModal.propTypes = { isOpen: PropTypes.bool, - onRequestClose: PropTypes.func + onRequestClose: PropTypes.func, + projectId: PropTypes.string }; module.exports = ExternalShareModal; diff --git a/src/components/modal/externalshare/modal.scss b/src/components/modal/externalshare/modal.scss index ca12a5042..0c2e43ffa 100644 --- a/src/components/modal/externalshare/modal.scss +++ b/src/components/modal/externalshare/modal.scss @@ -6,16 +6,17 @@ max-height: calc(100% - 8rem); /* Some value for height must be set for scrolling to work */ - height: 100%; + // height: 100%; - overflow: hidden; - - @media #{$small}, #{$small-height} { - overflow: hidden; - } + // overflow: hidden; + // + // @media #{$small}, #{$small-height} { + // overflow: hidden; + // } } .externalShare-modal-header { + border-radius: 1rem 1rem 0 0; box-shadow: inset 0 -1px 0 0 $ui-blue-dark; background-color: $ui-blue; } @@ -23,172 +24,85 @@ .externalShare-modal-content { margin: 0 auto; box-shadow: none; + width: 85%; + height: calc(100% - 0rem); + margin: 1rem auto; +} + +.externalShare-embed-row { + justify-content: space-between; width: 100%; - height: calc(100% - 3rem); + margin-top: .5rem; + margin-bottom: .5rem; } -.external-target-outer-scrollbox { - position: relative; - background-color: $ui-blue-10percent; - flex: 1; - height: calc(100% - 5rem); - - @media #{$small-height} { - min-height: 0; - } -} - -.external-target-inner-scrollbox { - margin-right: .5rem; +.externalShare-embed-textarea { + width: calc(100% - 3rem); + height: 4rem; + padding-left: .5rem; padding-right: .5rem; - height: 100%; - overflow: scroll; - overflow-x: hidden; - &::-webkit-scrollbar { - width: 8px; - } - - &::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: $active-dark-gray; - height: 92px; - } - - &::-webkit-scrollbar-track { - margin-top: 8px; - margin-bottom: 10px; + textarea { + min-height: 4rem; } } -.external-target-container { - display: flex; - padding: .40625rem 0 0 1.46875rem; - justify-content: flex-start; - flex-flow: row wrap; +.externalShare-copy-icon { + width: 2rem; + height: 2rem; + padding-left: .5rem; + padding-right: .5rem; + // &:before { + background-image: url("/svgs/forms/temp-copy.svg"); + background-repeat: no-repeat; + background-size: contain; + // } } + +// .external-target-outer-scrollbox { +// position: relative; +// background-color: $ui-blue-10percent; +// flex: 1; +// height: calc(100% - 0rem); +// +// @media #{$small-height} { +// min-height: 0; +// } +// } +// +// .external-target-inner-scrollbox { +// margin-right: .5rem; +// padding-right: .5rem; +// height: 100%; +// overflow: scroll; +// overflow-x: hidden; +// +// &::-webkit-scrollbar { +// width: 8px; +// } +// +// &::-webkit-scrollbar-thumb { +// border-radius: 4px; +// background-color: $active-dark-gray; +// height: 92px; +// } +// +// &::-webkit-scrollbar-track { +// margin-top: 8px; +// margin-bottom: 10px; +// } +// } +// +// .external-target-container { +// display: flex; +// padding: .40625rem 0 0 1.46875rem; +// justify-content: flex-start; +// flex-flow: row wrap; +// } /* NOTE: force scrolling: add to above: min-height: 30rem; */ -.external-target-bottom-gradient { - position: absolute; - right: 1rem; - bottom: 0; - left: 0; - background: linear-gradient( - $transparent-light-blue, - $ui-light-primary - ); - height: 32px; - pointer-events: none; /* pass clicks through to buttons underneath */ -} - -.studio-selector-button { - display: flex; - position: relative; - transition: all .5s; - margin: .21875rem; - border-radius: .5rem; - background-color: $ui-white; - cursor: pointer; - padding: 0; - width: 48%; - height: 2.5rem; - justify-content: space-between; - align-items: center; - - @media #{$small} { - min-width: 98%; - flex-shrink: 1; - } -} - -.studio-selector-button-text { - margin: auto 2.18375rem auto .6875rem; - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: .875rem; - font-weight: regular; - flex-shrink: 1; -} - -.studio-selector-button-selected { - background-color: $ui-mint-green; - color: $ui-white; -} - -.studio-selector-button-waiting { - background-color: $ui-light-mint; - color: $ui-white; -} - -.studio-selector-button-text-selected { - color: $ui-white; -} - -.studio-selector-button-text-unselected { - color: $type-gray; -} - -.studio-selector-button-enabled { - pointer-events: auto; -} - -.studio-selector-button-disabled { - pointer-events: none; -} - -.studio-status-icon { - position: absolute; - right: .625rem; - border-radius: .75rem; - padding: .0625rem .075rem; - width: 1.5rem; - height: 1.5rem; - color: $ui-white; - box-sizing: border-box; -} - -.studio-status-icon-unselected { - background-color: $ui-blue; -} - -.submit-button { - background-color: $ui-blue; -} - -.submit-button-waiting { - background-color: $ui-blue; -} - -.studio-status-icon-plus-img, -.studio-status-icon-checkmark-img { - animation-direction: normal; - width: 1.4rem; - height: 1.4rem; - transform-origin: center; -} - -.studio-status-icon-with-animation { - animation-name: bump; - animation-duration: .25s; - animation-timing-function: cubic-bezier(.3, -3, .6, 3); - animation-iteration-count: 1; -} - -@keyframes bump { - 0% { - transform: scale(0); - opacity: 0; - -webkit-transform: scale(0); - } - 100% { - transform: scale(1); - opacity: 1; - -webkit-transform: scale(1); - } +.externalShare-form { + width: 100%; } diff --git a/src/components/modal/externalshare/presentation.jsx b/src/components/modal/externalshare/presentation.jsx index 21109d126..f7321b6bf 100644 --- a/src/components/modal/externalshare/presentation.jsx +++ b/src/components/modal/externalshare/presentation.jsx @@ -1,27 +1,28 @@ +const bindAll = require('lodash.bindall'); const PropTypes = require('prop-types'); const React = require('react'); const FormattedMessage = require('react-intl').FormattedMessage; const injectIntl = require('react-intl').injectIntl; const intlShape = require('react-intl').intlShape; -const Modal = require('../base/modal.jsx'); -const Form = require('../../forms/form.jsx'); -const Button = require('../../forms/button.jsx'); +const Modal = require('../base/modal.jsx'); +// const Form = require('../../forms/form.jsx'); +// const Button = require('../../forms/button.jsx'); const FlexRow = require('../../flex-row/flex-row.jsx'); -const Input = require('../../components/forms/input.jsx'); -const TextArea = require('../../components/forms/textarea.jsx'); +// const Input = require('../../forms/input.jsx'); +// const TextArea = require('../../forms/textarea.jsx'); require('../../forms/button.scss'); require('./modal.scss'); const ExternalShareModalPresentation = ({ + fbUrl, + googUrl, intl, isOpen, - studios, - waitingToClose, - onToggleStudio, onRequestClose, - onSubmit + projectId, + twitterUrl }) => { const contentLabel = intl.formatMessage({id: 'externalshare.title'}); @@ -35,53 +36,63 @@ const ExternalShareModalPresentation = ({ >
- {contentLabel} + Send outside Scratch
+ {/*
-
{ - this.form = form; - }} - onValidSubmit={this.handleValidSubmit} - > -
-
- - {this.props.intl.formatMessage({id: 'registration.createUsername'})} - - {this.props.usernameHelp ? ( -

{this.props.usernameHelp}

- ) : ( - null - )} -
- -