scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

renamed externalShare to social

Browse source
This commit is contained in:
Ben Wheeler 2019-04-24 12:09:44 -04:00
parent 63baada567
commit 67e7a54413
9 changed files with 95 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/modal/externalshare/container.jsx → src/components/modal/social/container.jsx
View file

@ -1,11 +1,11 @@
const bindAll = require('lodash.bindall');
const PropTypes = require('prop-types');
const React = require('react');
const ExternalShareModalPresentation = require('./presentation.jsx');
const SocialModalPresentation = require('./presentation.jsx');
const clipboardCopy = require('clipboard-copy');
const externalShare = require('../../../lib/external-share');
const social = require('../../../lib/social');
class ExternalShareModal extends React.Component {
class SocialModal extends React.Component {
constructor (props) {
super(props);
this.embedTextarea = {};
@ -39,14 +39,14 @@ class ExternalShareModal extends React.Component {
render () {
const projectId = this.props.projectId;
return (
<ExternalShareModalPresentation
embedHtml={externalShare.embedHtml(projectId)}
fbUrl={externalShare.facebookIntentLink(projectId)}
googleClassroomUrl={externalShare.googleClassroomIntentLink(projectId)}
<SocialModalPresentation
embedHtml={social.embedHtml(projectId)}
fbUrl={social.facebookIntentLink(projectId)}
googleClassroomUrl={social.googleClassroomIntentLink(projectId)}
isOpen={this.props.isOpen}
setEmbedTextarea={this.setEmbedTextarea}
twitterUrl={externalShare.twitterIntentLink(projectId)}
weChatUrl={externalShare.weChatIntentLink(projectId)}
twitterUrl={social.twitterIntentLink(projectId)}
weChatUrl={social.weChatIntentLink(projectId)}
onCopyEmbed={this.handleCopyEmbed}
onCopyProjectLink={this.props.onCopyProjectLink}
onRequestClose={this.props.onRequestClose}
@ -55,11 +55,11 @@ class ExternalShareModal extends React.Component {
}
}
ExternalShareModal.propTypes = {
SocialModal.propTypes = {
isOpen: PropTypes.bool,
onCopyProjectLink: PropTypes.func,
onRequestClose: PropTypes.func,
projectId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};
module.exports = ExternalShareModal;
module.exports = SocialModal;

30
src/components/modal/externalshare/modal.scss → src/components/modal/social/modal.scss
View file

@ -1,7 +1,7 @@
@import "../../../colors";
@import "../../../frameless";
.mod-externalShare {
.mod-social {
min-height: 15rem;
max-height: calc(100% - 8rem);
@ -15,13 +15,13 @@
// }
}
.externalShare-modal-header {
.social-modal-header {
border-radius: 1rem 1rem 0 0;
box-shadow: inset 0 -1px 0 0 $ui-blue-dark;
background-color: $ui-blue;
}
.externalShare-modal-content {
.social-modal-content {
margin: 0 auto;
box-shadow: none;
width: 85%;
@ -29,12 +29,12 @@
margin: 1rem auto;
}
.externalShare-label {
.social-label {
font-weight: bold;
width: 100%;
}
.externalShare-embed-row {
.social-embed-row {
justify-content: space-between;
width: 100%;
margin-top: .5rem;
@ -42,10 +42,10 @@
align-items: start;
}
.externalShare-link-section {
.social-link-section {
}
.externalShare-embed-textarea {
.social-embed-textarea {
width: calc(100% - 3rem);
height: 4rem;
padding-left: .5rem;
@ -56,7 +56,7 @@
}
}
.externalShare-copy-icon {
.social-copy-icon {
width: 2rem;
height: 2rem;
padding-left: .5rem;
@ -67,7 +67,7 @@
content: "";
}
.externalShare-social-icon {
.social-social-icon {
width: 3rem;
height: 3rem;
margin-right: .75rem;
@ -76,25 +76,25 @@
border-radius: .5rem;
}
.externalShare-twitter-icon {
.social-twitter-icon {
background-image: url("/svgs/social/twitter.svg");
}
.externalShare-facebook-icon {
.social-facebook-icon {
background-image: url("/svgs/social/facebook.svg");
}
.externalShare-google-classroom-icon {
.social-google-classroom-icon {
background-image: url("/svgs/social/google-classroom.svg");
}
.externalShare-wechat-icon {
.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.
.externalShare-copy-link-button {
.social-copy-link-button {
margin: 0 0 0 .5rem;
border-radius: 19px;
background-color: $ui-blue;
@ -163,6 +163,6 @@
min-height: 30rem;
*/
.externalShare-form {
.social-form {
width: 100%;
}

62
src/components/modal/externalshare/presentation.jsx → src/components/modal/social/presentation.jsx
View file

@ -17,7 +17,7 @@ const FlexRow = require('../../flex-row/flex-row.jsx');
require('../../forms/button.scss');
require('./modal.scss');
const ExternalShareModalPresentation = ({
const SocialModalPresentation = ({
embedHtml,
fbUrl,
googleClassroomUrl,
@ -30,47 +30,47 @@ const ExternalShareModalPresentation = ({
twitterUrl,
weChatUrl
}) => {
const title = intl.formatMessage({id: 'externalshare.title'});
const title = intl.formatMessage({id: 'social.title'});
return (
<Modal
useStandardSizes
className="mod-externalShare"
className="mod-social"
contentLabel={title}
isOpen={isOpen}
onRequestClose={onRequestClose}
>
<div className="externalShare-modal-header modal-header">
<div className="externalShare-content-label content-label">
<FormattedMessage id="externalShare.title" />
<div className="social-modal-header modal-header">
<div className="social-content-label content-label">
<FormattedMessage id="social.title" />
</div>
</div>
<div className="externalShare-modal-content modal-content">
<div className="social-modal-content modal-content">
<div className="externalShare-label">
{intl.formatMessage({id: 'externalShare.embedHtmlLabel'})}
<div className="social-label">
{intl.formatMessage({id: 'social.embedHtmlLabel'})}
</div>
<FlexRow className="externalShare-embed-row">
<FlexRow className="social-embed-row">
<textarea
readOnly
className="externalShare-embed-textarea"
className="social-embed-textarea"
name="embed"
ref={textarea => setEmbedTextarea(textarea)}
value={embedHtml}
onClick={onCopyEmbed}
/>
<div
className="externalShare-copy-icon"
className="social-copy-icon"
onClick={onCopyEmbed}
/>
</FlexRow>
<FlexRow className="externalShare-embed-row">
<FlexRow className="social-embed-row">
<div>
<div className="externalShare-label">
{intl.formatMessage({id: 'externalShare.socialMediaLabel'})}
<div className="social-label">
{intl.formatMessage({id: 'social.socialMediaLabel'})}
</div>
<FlexRow className="externalShare-embed-row">
<FlexRow className="social-embed-row">
<a
alt="Google Classroom"
href={googleClassroomUrl}
@ -78,8 +78,8 @@ const ExternalShareModalPresentation = ({
>
<div
className={classNames(
'externalShare-social-icon',
'externalShare-google-classroom-icon'
'social-social-icon',
'social-google-classroom-icon'
)}
/>
</a>
@ -90,8 +90,8 @@ const ExternalShareModalPresentation = ({
>
<div
className={classNames(
'externalShare-social-icon',
'externalShare-wechat-icon'
'social-social-icon',
'social-wechat-icon'
)}
/>
</a>
@ -102,8 +102,8 @@ const ExternalShareModalPresentation = ({
>
<div
className={classNames(
'externalShare-social-icon',
'externalShare-facebook-icon'
'social-social-icon',
'social-facebook-icon'
)}
/>
</a>
@ -114,21 +114,21 @@ const ExternalShareModalPresentation = ({
>
<div
className={classNames(
'externalShare-social-icon',
'externalShare-twitter-icon'
'social-social-icon',
'social-twitter-icon'
)}
/>
</a>
</FlexRow>
</div>
<div className="externalShare-link-section">
<div className="externalShare-label">
{intl.formatMessage({id: 'externalShare.linkLabel'})}
<div className="social-link-section">
<div className="social-label">
{intl.formatMessage({id: 'social.linkLabel'})}
</div>
<FlexRow className="externalShare-embed-row">
<FlexRow className="social-embed-row">
<Button
className="externalShare-copy-link-button"
className="social-copy-link-button"
onClick={onCopyProjectLink}
>
<FormattedMessage id="general.copyLink" />
@ -142,7 +142,7 @@ const ExternalShareModalPresentation = ({
);
};
ExternalShareModalPresentation.propTypes = {
SocialModalPresentation.propTypes = {
embedHtml: PropTypes.string,
fbUrl: PropTypes.string,
googleClassroomUrl: PropTypes.string,
@ -156,4 +156,4 @@ ExternalShareModalPresentation.propTypes = {
weChatUrl: PropTypes.string
};
module.exports = injectIntl(ExternalShareModalPresentation);
module.exports = injectIntl(SocialModalPresentation);

10
src/l10n.json
View file

@ -91,7 +91,7 @@
"general.whatsHappening": "What's Happening?",
"general.wiki": "Scratch Wiki",
"general.copyLink": "Copy Link",
"general.externalShareButton": "Social",
"general.socialButton": "Social",
"general.report": "Report",
"general.notAvailableHeadline": "Whoops! Our server is Scratch'ing its head",
"general.notAvailableSubtitle": "We couldn't find the page you're looking for. Check to make sure you've typed the URL correctly.",
@ -259,8 +259,8 @@
"comments.status.deleted": "Deleted",
"comments.status.reported": "Reported",
"externalShare.title": "Social",
"externalShare.embedHtmlLabel": "Embed",
"externalShare.linkLabel": "Link",
"externalShare.socialMediaLabel": "Share"
"social.title": "Social",
"social.embedHtmlLabel": "Embed",
"social.linkLabel": "Link",
"social.socialMediaLabel": "Share"
}

0
src/lib/external-share.js → src/lib/social.js
View file

22
src/views/preview/presentation.jsx
View file

@ -67,7 +67,7 @@ const PreviewPresentation = ({
comments,
editable,
extensions,
externalShareOpen,
socialOpen,
faved,
favoriteCount,
intl,
@ -91,8 +91,8 @@ const PreviewPresentation = ({
onCloseAdminPanel,
onCopyProjectLink,
onDeleteComment,
onExternalShareClicked,
onExternalShareClosed,
onsocialClicked,
onsocialClosed,
onFavoriteClicked,
onGreenFlag,
onLoadMore,
@ -367,7 +367,7 @@ const PreviewPresentation = ({
<Subactions
addToStudioOpen={addToStudioOpen}
canReport={canReport}
externalShareOpen={externalShareOpen}
socialOpen={socialOpen}
isAdmin={isAdmin}
projectInfo={projectInfo}
reportOpen={reportOpen}
@ -376,8 +376,8 @@ const PreviewPresentation = ({
onAddToStudioClicked={onAddToStudioClicked}
onAddToStudioClosed={onAddToStudioClosed}
onCopyProjectLink={onCopyProjectLink}
onExternalShareClicked={onExternalShareClicked}
onExternalShareClosed={onExternalShareClosed}
onsocialClicked={onsocialClicked}
onsocialClosed={onsocialClosed}
onReportClicked={onReportClicked}
onReportClose={onReportClose}
onReportSubmit={onReportSubmit}
@ -516,7 +516,7 @@ const PreviewPresentation = ({
addToStudioOpen={addToStudioOpen}
canAddToStudio={canAddToStudio}
canReport={canReport}
externalShareOpen={externalShareOpen}
socialOpen={socialOpen}
isAdmin={isAdmin}
projectInfo={projectInfo}
reportOpen={reportOpen}
@ -525,8 +525,8 @@ const PreviewPresentation = ({
onAddToStudioClicked={onAddToStudioClicked}
onAddToStudioClosed={onAddToStudioClosed}
onCopyProjectLink={onCopyProjectLink}
onExternalShareClicked={onExternalShareClicked}
onExternalShareClosed={onExternalShareClosed}
onsocialClicked={onsocialClicked}
onsocialClosed={onsocialClosed}
onReportClicked={onReportClicked}
onReportClose={onReportClose}
onReportSubmit={onReportSubmit}
@ -704,8 +704,8 @@ PreviewPresentation.propTypes = {
onCloseAdminPanel: PropTypes.func,
onCopyProjectLink: PropTypes.func,
onDeleteComment: PropTypes.func,
onExternalShareClicked: PropTypes.func,
onExternalShareClosed: PropTypes.func,
onsocialClicked: PropTypes.func,
onsocialClosed: PropTypes.func,
onFavoriteClicked: PropTypes.func,
onGreenFlag: PropTypes.func,
onLoadMore: PropTypes.func,

20
src/views/preview/project-view.jsx
View file

@ -57,8 +57,8 @@ class Preview extends React.Component {
'handleClickLogo',
'handleCopyProjectLink',
'handleDeleteComment',
'handleExternalShareClick',
'handleExternalShareClose',
'handlesocialClick',
'handlesocialClose',
'handleToggleStudio',
'handleFavoriteToggle',
'handleLoadMore',
@ -111,7 +111,7 @@ class Preview extends React.Component {
clientFaved: false,
clientLoved: false,
extensions: [],
externalShareOpen: false,
socialOpen: false,
favoriteCount: 0,
isProjectLoaded: false,
isRemixing: false,
@ -587,11 +587,11 @@ class Preview extends React.Component {
// Also do not include hash or query params
copy(`${window.location.origin}${window.location.pathname}`);
}
handleExternalShareClick () {
this.setState({externalShareOpen: true});
handlesocialClick () {
this.setState({socialOpen: true});
}
handleExternalShareClose () {
this.setState({externalShareOpen: false});
handlesocialClose () {
this.setState({socialOpen: false});
}
initCounts (favorites, loves) {
this.setState({
@ -657,7 +657,7 @@ class Preview extends React.Component {
comments={this.props.comments}
editable={this.props.isEditable}
extensions={this.state.extensions}
externalShareOpen={this.state.externalShareOpen}
socialOpen={this.state.socialOpen}
faved={this.state.clientFaved}
favoriteCount={this.state.favoriteCount}
isAdmin={this.props.isAdmin}
@ -696,8 +696,8 @@ class Preview extends React.Component {
onCloseAdminPanel={this.handleCloseAdminPanel}
onCopyProjectLink={this.handleCopyProjectLink}
onDeleteComment={this.handleDeleteComment}
onExternalShareClicked={this.handleExternalShareClick}
onExternalShareClosed={this.handleExternalShareClose}
onsocialClicked={this.handlesocialClick}
onsocialClosed={this.handlesocialClose}
onFavoriteClicked={this.handleFavoriteToggle}
onGreenFlag={this.handleGreenFlag}
onLoadMore={this.handleLoadMore}

22
src/views/preview/subactions.jsx
View file

@ -6,7 +6,7 @@ const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Button = require('../../components/forms/button.jsx');
const AddToStudioModal = require('./add-to-studio.jsx');
const ExternalShareModal = require('../../components/modal/externalshare/container.jsx');
const SocialModal = require('../../components/modal/social/container.jsx');
const ReportModal = require('../../components/modal/report/modal.jsx');
const projectShape = require('./projectshape.jsx').projectShape;
@ -57,18 +57,18 @@ const Subactions = props => (
<FormattedMessage id="general.copyLink" />
</Button>
<Button
className="action-button external-share-button"
onClick={props.onExternalShareClicked}
className="action-button social-button"
onClick={props.onsocialClicked}
>
<FormattedMessage id="general.externalShareButton" />
<FormattedMessage id="general.socialButton" />
</Button>
{props.externalShareOpen && props.projectInfo && props.projectInfo.id && (
<ExternalShareModal
{props.socialOpen && props.projectInfo && props.projectInfo.id && (
<SocialModal
isOpen
key="external-share-modal"
key="social-modal"
projectId={props.projectInfo && props.projectInfo.id}
onCopyProjectLink={props.onCopyProjectLink}
onRequestClose={props.onExternalShareClosed}
onRequestClose={props.onsocialClosed}
/>
)}
{(props.canReport) &&
@ -99,13 +99,13 @@ Subactions.propTypes = {
addToStudioOpen: PropTypes.bool,
canAddToStudio: PropTypes.bool,
canReport: PropTypes.bool,
externalShareOpen: PropTypes.bool,
socialOpen: PropTypes.bool,
isAdmin: PropTypes.bool,
onAddToStudioClicked: PropTypes.func,
onAddToStudioClosed: PropTypes.func,
onCopyProjectLink: PropTypes.func,
onExternalShareClicked: PropTypes.func,
onExternalShareClosed: PropTypes.func,
onsocialClicked: PropTypes.func,
onsocialClosed: PropTypes.func,
onReportClicked: PropTypes.func.isRequired,
onReportClose: PropTypes.func.isRequired,
onReportSubmit: PropTypes.func.isRequired,

2
src/views/preview/subactions.scss
View file

@ -87,7 +87,7 @@
}
}
&.external-share-button {
&.social-button {
&:before {
background-image: url("/svgs/project/copy-link-white.svg");
}