diff --git a/src/components/modal/social/container.jsx b/src/components/modal/social/container.jsx index 3125bf513..767415a7e 100644 --- a/src/components/modal/social/container.jsx +++ b/src/components/modal/social/container.jsx @@ -11,6 +11,7 @@ class SocialModal extends React.Component { this.embedTextarea = {}; this.embedCopyTimeoutId = null; this.linkCopyTimeoutId = null; + this.linkTextarea = {}; this.showCopyResultTimeout = 2000; this.state = { showEmbedResult: false, @@ -21,11 +22,14 @@ class SocialModal extends React.Component { 'handleCopyProjectLink', 'hideEmbedResult', 'hideLinkResult', - 'setEmbedTextarea' + 'linkUrl', + 'setEmbedTextarea', + 'setLinkTextarea' ]); } componentWillUnmount () { this.clearEmbedCopyResultTimeout(); + this.clearLinkCopyResultTimeout(); } handleCopyEmbed () { if (this.embedTextarea) { @@ -42,14 +46,17 @@ class SocialModal extends React.Component { } } handleCopyProjectLink () { - this.props.onCopyProjectLink(); - if (this.state.showLinkResult === false && this.linkCopyTimeoutId === null) { - this.setState({showLinkResult: true}, () => { - this.linkCopyTimeoutId = setTimeout( - this.hideLinkResult, - this.showCopyResultTimeout - ); - }); + if (this.linkTextarea) { + this.linkTextarea.select(); + clipboardCopy(this.linkTextarea.value); + if (this.state.showLinkResult === false && this.linkCopyTimeoutId === null) { + this.setState({showLinkResult: true}, () => { + this.linkCopyTimeoutId = setTimeout( + this.hideLinkResult, + this.showCopyResultTimeout + ); + }); + } } } hideEmbedResult () { @@ -60,16 +67,29 @@ class SocialModal extends React.Component { this.setState({showLinkResult: false}); this.linkCopyTimeoutId = null; } + linkUrl () { + return `${window.location.origin}${window.location.pathname}`; + } setEmbedTextarea (textarea) { this.embedTextarea = textarea; return textarea; } + setLinkTextarea (textarea) { + this.linkTextarea = textarea; + return textarea; + } clearEmbedCopyResultTimeout () { if (this.embedCopyTimeoutId !== null) { clearTimeout(this.embedCopyTimeoutId); this.embedCopyTimeoutId = null; } } + clearLinkCopyResultTimeout () { + if (this.linkCopyTimeoutId !== null) { + clearTimeout(this.linkCopyTimeoutId); + this.linkCopyTimeoutId = null; + } + } render () { const projectId = this.props.projectId; return ( @@ -78,7 +98,9 @@ class SocialModal extends React.Component { fbUrl={social.facebookIntentLink(projectId)} googleClassroomUrl={social.googleClassroomIntentLink(projectId)} isOpen={this.props.isOpen} + linkUrl={this.linkUrl()} setEmbedTextarea={this.setEmbedTextarea} + setLinkTextarea={this.setLinkTextarea} showEmbedResult={this.state.showEmbedResult} showLinkResult={this.state.showLinkResult} twitterUrl={social.twitterIntentLink(projectId)} @@ -93,7 +115,6 @@ class SocialModal extends React.Component { SocialModal.propTypes = { isOpen: PropTypes.bool, - onCopyProjectLink: PropTypes.func, onRequestClose: PropTypes.func, projectId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) }; diff --git a/src/components/modal/social/modal.scss b/src/components/modal/social/modal.scss index bc03a61da..ec1ce57ed 100644 --- a/src/components/modal/social/modal.scss +++ b/src/components/modal/social/modal.scss @@ -30,28 +30,39 @@ } .social-spaced-row { - width: 100%; + // width: 100%; justify-content: space-between; - align-items: start; + align-items: flex-end; +} + +.social-row-right { + margin-left: auto; } .social-label-row { + width: 100%; font-weight: bold; margin-bottom: .5rem; - justify-content: start; - align-items: start; + justify-content: space-between; + align-items: flex-end; } -.social-label { +.social-label-title { + font-size: 1rem; margin-right: 1.5rem; } +.social-label-item { + margin-left: 1.5rem; + margin-right: .25rem; +} + .social-label-result { color: $type-gray-75percent; transition: opacity 100ms linear; } -.embed-section { +.embed-section, .link-section { margin-top: 2rem; } @@ -115,7 +126,7 @@ // NOTE: copied from inplace-input.scss. We should refactor to put this style in // only one place. -.social-embed-textarea { +.social-embed-textarea, .social-link-textarea { transition: all .2s ease; border: 2px dashed $ui-blue-25percent; border-radius: 8px; @@ -128,6 +139,13 @@ resize: none; overflow: hidden; + width: 100%; + height: 6rem; + + textarea { + min-height: 4rem; + } + &:focus { transition: all .2s ease; outline: none; @@ -136,15 +154,6 @@ } } -.social-embed-textarea { - width: 100%; - height: 6rem; - - textarea { - min-height: 4rem; - } -} - // NOTE: should probably be put in a shared css location .social-hidden { opacity: 0.0; diff --git a/src/components/modal/social/presentation.jsx b/src/components/modal/social/presentation.jsx index e327fd6b8..1595a1b3d 100644 --- a/src/components/modal/social/presentation.jsx +++ b/src/components/modal/social/presentation.jsx @@ -14,18 +14,17 @@ require('./modal.scss'); const SocialModalPresentation = ({ embedHtml, - fbUrl, - googleClassroomUrl, intl, isOpen, + linkUrl, + onClickEmbedText, onCopyEmbed, onCopyProjectLink, onRequestClose, setEmbedTextarea, + setLinkTextarea, showEmbedResult, - showLinkResult, - twitterUrl, - weChatUrl + showLinkResult }) => { const title = intl.formatMessage({id: 'social.title'}); @@ -44,117 +43,68 @@ const SocialModalPresentation = ({
- {/* top row: social links and copy link button */} - - - {/* social links */} -
+ {/* top row: link */} +
+ - {intl.formatMessage({id: 'social.socialMediaLabel'})} - - - -
- - -
- - -
- - -
- - -
- - {/* copy link button */} -
- -
+
{intl.formatMessage({id: 'social.linkLabel'})}
-
- {intl.formatMessage({id: 'social.embedCopiedResultText'})} -
+ +
+ {intl.formatMessage({id: 'social.embedCopiedResultText'})} +
+ + - - - -
- - +