got copied result text working, closing in on final design

src/components/modal/social/container.jsx

@@ -9,8 +9,18 @@ class SocialModal extends React.Component {
     constructor (props) {
         super(props);
         this.embedTextarea = {};
+        this.embedCopyTimeoutId = null;
+        this.linkCopyTimeoutId = null;
+        this.showCopyResultTimeout = 2000;
+        this.state = {
+            showEmbedResult: false,
+            showLinkResult: false
+        };
         bindAll(this, [
             'handleCopyEmbed',
+            'handleCopyProjectLink',
+            'hideEmbedResult',
+            'hideLinkResult',
             'setEmbedTextarea'
         ]);
     }
@@ -21,21 +31,56 @@ class SocialModal extends React.Component {
     //     }
     // }
     componentDidUpdate () {
-        if (this.embedTextarea) {
+        // if (this.embedTextarea) {
-            console.log('selecting');
+        //     this.embedTextarea.select();
-            this.embedTextarea.select();
+        // }
-        } else {
-            console.log('NOT selecting');
     }
+    componentWillUnmount () {
+        this.clearEmbedCopyResultTimeout();
     }
     handleCopyEmbed () {
-        if (this.embedTextarea) this.embedTextarea.select();
+        if (this.embedTextarea) {
+            this.embedTextarea.select();
             clipboardCopy(this.embedTextarea.value);
+            if (this.state.showEmbedResult === false && this.embedCopyTimeoutId === null) {
+                this.setState({showEmbedResult: true}, () => {
+                    this.embedCopyTimeoutId = setTimeout(
+                        this.hideEmbedResult,
+                        this.showCopyResultTimeout
+                    );
+                });
+            }
+        }
+    }
+    handleCopyProjectLink () {
+        this.props.onCopyProjectLink();
+        if (this.state.showLinkResult === false && this.linkCopyTimeoutId === null) {
+            this.setState({showLinkResult: true}, () => {
+                this.linkCopyTimeoutId = setTimeout(
+                    this.hideLinkResult,
+                    this.showCopyResultTimeout
+                );
+            });
+        }
+    }
+    hideEmbedResult () {
+        this.setState({showEmbedResult: false});
+        this.embedCopyTimeoutId = null;
+    }
+    hideLinkResult () {
+        this.setState({showLinkResult: false});
+        this.linkCopyTimeoutId = null;
     }
     setEmbedTextarea (textarea) {
         this.embedTextarea = textarea;
         return textarea;
     }
+    clearEmbedCopyResultTimeout () {
+        if (this.embedCopyTimeoutId !== null) {
+            clearTimeout(this.embedCopyTimeoutId);
+            this.embedCopyTimeoutId = null;
+        }
+    }
     render () {
         const projectId = this.props.projectId;
         return (
@@ -45,10 +90,12 @@ class SocialModal extends React.Component {
                 googleClassroomUrl={social.googleClassroomIntentLink(projectId)}
                 isOpen={this.props.isOpen}
                 setEmbedTextarea={this.setEmbedTextarea}
+                showEmbedResult={this.state.showEmbedResult}
+                showLinkResult={this.state.showLinkResult}
                 twitterUrl={social.twitterIntentLink(projectId)}
                 weChatUrl={social.weChatIntentLink(projectId)}
                 onCopyEmbed={this.handleCopyEmbed}
-                onCopyProjectLink={this.props.onCopyProjectLink}
+                onCopyProjectLink={this.handleCopyProjectLink}
                 onRequestClose={this.props.onRequestClose}
             />
         );

src/components/modal/social/modal.scss

@@ -4,6 +4,7 @@
 .mod-social {
     min-height: 15rem;
     max-height: calc(100% - 8rem);
+    overflow: hidden;
 
     /* Some value for height must be set for scrolling to work */
     // height: 100%;
@@ -24,99 +25,156 @@
 .social-modal-content {
     margin: 0 auto;
     box-shadow: none;
-    width: 85%;
+    width: 91%;
     height: calc(100% - 0rem);
-    margin: 1rem auto;
+    margin: 1rem auto 1.625rem;
+    font-size: .9375rem;
 }
 
-.social-label {
+.social-row {
-    font-weight: bold;
-    width: 100%;
-}
-
-.social-embed-row {
-    justify-content: space-between;
     width: 100%;
     margin-top: .5rem;
     margin-bottom: .5rem;
     align-items: start;
 }
 
+.social-spaced-row {
+    width: 100%;
+    justify-content: space-between;
+    align-items: start;
+}
+
+.social-label-row {
+    font-weight: bold;
+    margin-bottom: .5rem;
+    justify-content: start;
+    align-items: start;
+}
+
+.social-label {
+    margin-right: 1.5rem;
+}
+
+.social-label-result {
+    color: $type-gray-75percent;
+    // animation: fadeIn 1s infinite alternate;
+    transition: opacity 100ms linear;
+}
+
 .social-link-section {
 }
 
+.embed-section {
+    margin-top: 2rem;
+}
+
+//
+// .social-copy-icon {
+//     width: 2rem;
+//     height: 2rem;
+//     padding-left: .5rem;
+//     padding-right: .5rem;
+//     background-image: url("/svgs/forms/temp-copy.svg");
+//     background-repeat: no-repeat;
+//     background-size: contain;
+//     content: "";
+// }
+
+.social-social-icon {
+    width: 2.75rem;
+    height: 2.75rem;
+    margin-right: .75rem;
+    background-repeat: no-repeat;
+    background-size: contain;
+    // border-radius: .5rem;
+}
+
+.social-twitter-icon {
+    background-image: url("/images/social/twitter.png");
+}
+
+.social-facebook-icon {
+    background-image: url("/images/social/facebook.png");
+}
+
+.social-google-classroom-icon {
+    background-image: url("/images/social/google-classroom.png");
+}
+
+.social-wechat-icon {
+    background-image: url("/images/social/wechat.png");
+}
+
+// NOTE: copied from subactions.scss. We should refactor to put this style in
+// only one place.
+.social-copy-link-button {
+    background-color: $ui-blue;
+    height: 2rem;
+    text-decoration: none;
+    line-height: 1.1875rem;
+    font-weight: bold;
+
+    &:before {
+        display: inline-block;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+        vertical-align: bottom;
+        content: "";
+        background-image: url("/svgs/project/copy-link-white.svg");
+    }
+
+    &.social-copy-link-button-large {
+        padding: 0 1.125rem .125rem 1rem;
+        border-radius: 1.3125rem;
+        height: 2.625rem;
+        font-size: .9375rem;
+
+        &:before {
+            width: 1.0625rem;
+            height: 1.0625rem;
+            margin-right: .5rem;
+        }
+    }
+}
+
+// NOTE: copied from inplace-input.scss. We should refactor to put this style in
+// only one place.
 .social-embed-textarea {
-    width: calc(100% - 3rem);
+    transition: all .2s ease;
-    height: 4rem;
+    // border: 2px solid rgba(0, 0, 0, 0.2);
-    padding-left: .5rem;
+    border: 2px dashed $ui-blue-25percent;
-    padding-right: .5rem;
+    border-radius: 8px;
+    background-color: $ui-light-gray;
+    padding: .75rem .875rem;
+    line-height: 1.25rem;
+    color: $type-gray;
+    font-size: .8125rem;
+    box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+
+    &:focus {
+        transition: all .2s ease;
+        outline: none;
+        border: 2px solid $ui-blue;
+        box-shadow: 0 0 0 4px $ui-blue-25percent;
+    }
+}
+
+.social-embed-textarea {
+    // width: calc(100% - 3rem);
+    width: 100%;
+    height: 6rem;
 
     textarea {
         min-height: 4rem;
     }
 }
 
-.social-copy-icon {
+// NOTE: should probably be put in a shared css location
-    width: 2rem;
+.social-hidden {
-    height: 2rem;
+    opacity: 0.0;
-    padding-left: .5rem;
-    padding-right: .5rem;
-    background-image: url("/svgs/forms/temp-copy.svg");
-    background-repeat: no-repeat;
-    background-size: contain;
-    content: "";
-}
-
-.social-social-icon {
-    width: 3rem;
-    height: 3rem;
-    margin-right: .75rem;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border-radius: .5rem;
-}
-
-.social-twitter-icon {
-    background-image: url("/svgs/social/twitter.svg");
-}
-
-.social-facebook-icon {
-    background-image: url("/svgs/social/facebook.svg");
-}
-
-.social-google-classroom-icon {
-    background-image: url("/svgs/social/google-classroom.svg");
-}
-
-.social-wechat-icon {
-    background-image: url("/svgs/social/wechat.svg");
-}
-
-// NOTE: copied from subactions.scss. We should refactor to put this style in
-// only one place.
-.social-copy-link-button {
-    margin: 0 0 0 .5rem;
-    border-radius: 19px;
-    background-color: $ui-blue;
-    padding: 0 .75rem;
-    height: 2rem;
-    text-decoration: none;
-    line-height: .875rem;
-    font-size: .75rem;
-    font-weight: bold;
-
-    &:before {
-        display: inline-block;
-        margin-right: .25rem;
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: contain;
-        width: .875rem;
-        height: .875rem;
-        vertical-align: bottom;
-        content: "";
-        background-image: url("/svgs/project/copy-link-white.svg");
-    }
 }
 
 // .external-target-outer-scrollbox {

src/components/modal/social/presentation.jsx

@@ -1,4 +1,3 @@
-const bindAll = require('lodash.bindall');
 const PropTypes = require('prop-types');
 const React = require('react');
 const FormattedMessage = require('react-intl').FormattedMessage;
@@ -13,6 +12,7 @@ const Modal = require('../base/modal.jsx');
 const FlexRow = require('../../flex-row/flex-row.jsx');
 // const Input = require('../../forms/input.jsx');
 // const TextArea = require('../../forms/textarea.jsx');
+// const InplaceInput = require('../../forms/inplace-input.jsx');
 
 require('../../forms/button.scss');
 require('./modal.scss');
@@ -27,6 +27,8 @@ const SocialModalPresentation = ({
     onCopyProjectLink,
     onRequestClose,
     setEmbedTextarea,
+    showEmbedResult,
+    showLinkResult,
     twitterUrl,
     weChatUrl
 }) => {
@@ -45,32 +47,13 @@ const SocialModalPresentation = ({
                     <FormattedMessage id="social.title" />
                 </div>
             </div>
-            <div className="social-modal-content modal-content">
+            <div className="modal-content social-modal-content">
-
+                <FlexRow className="social-row social-spaced-row">
-                <div className="social-label">
-                    {intl.formatMessage({id: 'social.embedHtmlLabel'})}
-                </div>
-                <FlexRow className="social-embed-row">
-                    <textarea
-                        readOnly
-                        className="social-embed-textarea"
-                        name="embed"
-                        ref={textarea => setEmbedTextarea(textarea)}
-                        value={embedHtml}
-                        onClick={onCopyEmbed}
-                    />
-                    <div
-                        className="social-copy-icon"
-                        onClick={onCopyEmbed}
-                    />
-                </FlexRow>
-
-                <FlexRow className="social-embed-row">
                     <div>
-                        <div className="social-label">
+                        <FlexRow className="social-label-row">
                             {intl.formatMessage({id: 'social.socialMediaLabel'})}
-                        </div>
+                        </FlexRow>
-                        <FlexRow className="social-embed-row">
+                        <FlexRow className="social-spaced-row">
                             <a
                                 alt="Google Classroom"
                                 href={googleClassroomUrl}
@@ -123,12 +106,23 @@ const SocialModalPresentation = ({
                     </div>
 
                     <div className="social-link-section">
+                        <FlexRow className="social-label-row">
                             <div className="social-label">
                                 {intl.formatMessage({id: 'social.linkLabel'})}
                             </div>
-                        <FlexRow className="social-embed-row">
+                            <div
+                                className={classNames(
+                                    'social-label',
+                                    'social-label-result',
+                                    {'social-hidden': !showLinkResult}
+                                )}
+                            >
+                                {intl.formatMessage({id: 'social.embedCopiedResultText'})}
+                            </div>
+                        </FlexRow>
+                        <FlexRow className="social-spaced-row">
                             <Button
-                                className="social-copy-link-button"
+                                className="social-copy-link-button social-copy-link-button-large"
                                 onClick={onCopyProjectLink}
                             >
                                 <FormattedMessage id="general.copyLink" />
@@ -137,6 +131,49 @@ const SocialModalPresentation = ({
                     </div>
                 </FlexRow>
 
+                <div className="embed-section">
+                    <FlexRow className="social-row social-spaced-row">
+                        <FlexRow className="social-label-row">
+                            <div className="social-label">
+                                {intl.formatMessage({id: 'social.embedHtmlLabel'})}
+                            </div>
+                            <div className="social-label">
+                                <a
+                                    onClick={onCopyEmbed}
+                                >
+                                    {intl.formatMessage({id: 'social.copyEmbedLinkText'})}
+                                </a>
+                            </div>
+                            <div
+                                className={classNames(
+                                    'social-label',
+                                    'social-label-result',
+                                    {'social-hidden': !showEmbedResult}
+                                )}
+                            >
+                                {intl.formatMessage({id: 'social.embedCopiedResultText'})}
+                            </div>
+                        </FlexRow>
+                        {/*
+                        <InplaceInput
+                            className={classNames('compose-input', 'compose-valid')}
+                            name="embed"
+                            type="textarea"
+                            value={embedHtml}
+                            onClick={onCopyEmbed}
+                        />
+                        */}
+
+                        <textarea
+                            readOnly
+                            className="social-embed-textarea"
+                            name="embed"
+                            ref={textarea => setEmbedTextarea(textarea)}
+                            value={embedHtml}
+                            onClick={onCopyEmbed}
+                        />
+                    </FlexRow>
+                </div>
             </div>
         </Modal>
     );
@@ -152,6 +189,8 @@ SocialModalPresentation.propTypes = {
     onCopyProjectLink: PropTypes.func,
     onRequestClose: PropTypes.func,
     setEmbedTextarea: PropTypes.func,
+    showEmbedResult: PropTypes.bool,
+    showLinkResult: PropTypes.bool,
     twitterUrl: PropTypes.string,
     weChatUrl: PropTypes.string
 };

src/l10n.json

@@ -261,6 +261,8 @@
 
     "social.title": "Social",
     "social.embedHtmlLabel": "Embed",
+    "social.copyEmbedLinkText": "Copy embed",
     "social.linkLabel": "Link",
-    "social.socialMediaLabel": "Share"
+    "social.socialMediaLabel": "Share",
+    "social.embedCopiedResultText": "Copied"
 }

static/svgs/forms/temp-copy.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="699.428" height="699.428"><path d="M502.714 0H240.428C194.178 0 153 42.425 153 87.429l-25.267.59c-46.228 0-84.019 41.834-84.019 86.838V612c0 45.004 41.179 87.428 87.429 87.428H459c46.249 0 87.428-42.424 87.428-87.428h21.857c46.25 0 87.429-42.424 87.429-87.428v-349.19L502.714 0zM459 655.715H131.143c-22.95 0-43.714-21.441-43.714-43.715V174.857c0-22.272 18.688-42.993 41.638-42.993l23.933-.721v393.429C153 569.576 194.178 612 240.428 612h262.286c0 22.273-20.765 43.715-43.714 43.715zm153-131.143c0 22.271-20.765 43.713-43.715 43.713H240.428c-22.95 0-43.714-21.441-43.714-43.713V87.429c0-22.272 20.764-43.714 43.714-43.714H459c-.351 50.337 0 87.975 0 87.975 0 45.419 40.872 86.882 87.428 86.882H612v306zm-65.572-349.715c-23.277 0-43.714-42.293-43.714-64.981V44.348L612 174.857h-65.572zm-43.714 131.537H306c-12.065 0-21.857 9.77-21.857 21.835 0 12.065 9.792 21.835 21.857 21.835h196.714c12.065 0 21.857-9.771 21.857-21.835 0-12.065-9.792-21.835-21.857-21.835zm0 109.176H306c-12.065 0-21.857 9.77-21.857 21.834 0 12.066 9.792 21.836 21.857 21.836h196.714c12.065 0 21.857-9.77 21.857-21.836 0-12.064-9.792-21.834-21.857-21.834z"/></svg>