mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-27 01:25:52 -05:00
got copied result text working, closing in on final design
This commit is contained in:
Ben Wheeler
parent
67e7a54413
commit
2289584bbf
9 changed files with 260 additions and 115 deletions
|
|
@ -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) {
|
||||
console.log('selecting');
|
||||
this.embedTextarea.select();
|
||||
} else {
|
||||
console.log('NOT selecting');
|
||||
// if (this.embedTextarea) {
|
||||
// this.embedTextarea.select();
|
||||
// }
|
||||
}
|
||||
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}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.social-embed-row {
|
||||
justify-content: space-between;
|
||||
.social-row {
|
||||
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);
|
||||
height: 4rem;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
transition: all .2s ease;
|
||||
// border: 2px solid rgba(0, 0, 0, 0.2);
|
||||
border: 2px dashed $ui-blue-25percent;
|
||||
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 {
|
||||
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: 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");
|
||||
}
|
||||
// NOTE: should probably be put in a shared css location
|
||||
.social-hidden {
|
||||
opacity: 0.0;
|
||||
}
|
||||
|
||||
// .external-target-outer-scrollbox {
|
||||
|
|
|
|||
|
|
@ -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="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 className="modal-content social-modal-content">
|
||||
<FlexRow className="social-row social-spaced-row">
|
||||
<div>
|
||||
<div className="social-label">
|
||||
<FlexRow className="social-label-row">
|
||||
{intl.formatMessage({id: 'social.socialMediaLabel'})}
|
||||
</div>
|
||||
<FlexRow className="social-embed-row">
|
||||
</FlexRow>
|
||||
<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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
BIN
static/images/social/facebook.png
Normal file
BIN
static/images/social/facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
BIN
static/images/social/google-classroom.png
Normal file
BIN
static/images/social/google-classroom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1,023 B |
BIN
static/images/social/twitter.png
Normal file
BIN
static/images/social/twitter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 923 B |
BIN
static/images/social/wechat.png
Normal file
BIN
static/images/social/wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in a new issue