mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 08:31:23 -05:00
share date is passed as a prop to subactions
This commit is contained in:
Linda
parent
79afc55f26
commit
8db5216f17
2 changed files with 295 additions and 296 deletions
|
|
@ -76,82 +76,197 @@ const PreviewPresentation = ({
|
||||||
onToggleStudio,
|
onToggleStudio,
|
||||||
onSeeInside,
|
onSeeInside,
|
||||||
onUpdate
|
onUpdate
|
||||||
}) => (
|
}) => {
|
||||||
<div className="preview">
|
const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
|
||||||
<ShareBanner shared={isShared} />
|
return (
|
||||||
{ projectInfo && projectInfo.author && projectInfo.author.id && (
|
<div className="preview">
|
||||||
<Formsy onKeyPress={onKeyPress}>
|
<ShareBanner shared={isShared} />
|
||||||
<div className="inner">
|
{ projectInfo && projectInfo.author && projectInfo.author.id && (
|
||||||
<FlexRow className="preview-row force-row">
|
<Formsy onKeyPress={onKeyPress}>
|
||||||
<FlexRow className="project-header">
|
<div className="inner">
|
||||||
<a href={`/users/${projectInfo.author.username}`}>
|
<FlexRow className="preview-row force-row">
|
||||||
<Avatar
|
<FlexRow className="project-header">
|
||||||
alt={projectInfo.author.username}
|
<a href={`/users/${projectInfo.author.username}`}>
|
||||||
src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
|
<Avatar
|
||||||
/>
|
alt={projectInfo.author.username}
|
||||||
</a>
|
src={`https://cdn2.scratch.mit.edu/get_image/user/${projectInfo.author.id}_48x48.png`}
|
||||||
<div className="title">
|
/>
|
||||||
{editable ?
|
</a>
|
||||||
<InplaceInput
|
<div className="title">
|
||||||
className="project-title"
|
{editable ?
|
||||||
handleUpdate={onUpdate}
|
<InplaceInput
|
||||||
name="title"
|
className="project-title"
|
||||||
validationErrors={{
|
handleUpdate={onUpdate}
|
||||||
maxLength: intl.formatMessage({
|
name="title"
|
||||||
id: 'preview.titleMaxLength'
|
validationErrors={{
|
||||||
})
|
maxLength: intl.formatMessage({
|
||||||
}}
|
id: 'preview.titleMaxLength'
|
||||||
validations={{
|
})
|
||||||
maxLength: 100
|
}}
|
||||||
}}
|
validations={{
|
||||||
value={projectInfo.title}
|
maxLength: 100
|
||||||
/> :
|
}}
|
||||||
<React.Fragment>
|
value={projectInfo.title}
|
||||||
<div
|
/> :
|
||||||
className="project-title no-edit"
|
<React.Fragment>
|
||||||
title={projectInfo.title}
|
<div
|
||||||
>{projectInfo.title}</div>
|
className="project-title no-edit"
|
||||||
{'by '}
|
title={projectInfo.title}
|
||||||
<a href={`/users/${projectInfo.author.username}`}>
|
>{projectInfo.title}</div>
|
||||||
{projectInfo.author.username}
|
{'by '}
|
||||||
</a>
|
<a href={`/users/${projectInfo.author.username}`}>
|
||||||
</React.Fragment>
|
{projectInfo.author.username}
|
||||||
}
|
</a>
|
||||||
</div>
|
</React.Fragment>
|
||||||
</FlexRow>
|
}
|
||||||
<MediaQuery minWidth={frameless.mobile}>
|
</div>
|
||||||
<div className="project-buttons">
|
</FlexRow>
|
||||||
{/* TODO: Hide Remix button for now until implemented */}
|
<MediaQuery minWidth={frameless.mobile}>
|
||||||
{(!userOwnsProject && false) &&
|
<div className="project-buttons">
|
||||||
<Button className="button remix-button">
|
{/* TODO: Hide Remix button for now until implemented */}
|
||||||
Remix
|
{(!userOwnsProject && false) &&
|
||||||
|
<Button className="button remix-button">
|
||||||
|
Remix
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
<Button
|
||||||
|
className="button see-inside-button"
|
||||||
|
onClick={onSeeInside}
|
||||||
|
>
|
||||||
|
See Inside
|
||||||
</Button>
|
</Button>
|
||||||
}
|
</div>
|
||||||
<Button
|
</MediaQuery>
|
||||||
className="button see-inside-button"
|
</FlexRow>
|
||||||
onClick={onSeeInside}
|
<FlexRow className="preview-row">
|
||||||
>
|
<div className="guiPlayer">
|
||||||
See Inside
|
<IntlGUI
|
||||||
</Button>
|
isPlayerOnly
|
||||||
|
assetHost={assetHost}
|
||||||
|
backpackOptions={backpackOptions}
|
||||||
|
basePath="/"
|
||||||
|
className="guiPlayer"
|
||||||
|
isFullScreen={isFullScreen}
|
||||||
|
previewInfoVisible="false"
|
||||||
|
projectHost={projectHost}
|
||||||
|
projectId={projectId}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</MediaQuery>
|
<MediaQuery maxWidth={frameless.tablet - 1}>
|
||||||
</FlexRow>
|
<FlexRow className="preview-row force-center">
|
||||||
<FlexRow className="preview-row">
|
<Stats
|
||||||
<div className="guiPlayer">
|
faved={faved}
|
||||||
<IntlGUI
|
favoriteCount={favoriteCount}
|
||||||
isPlayerOnly
|
loveCount={loveCount}
|
||||||
assetHost={assetHost}
|
loved={loved}
|
||||||
backpackOptions={backpackOptions}
|
projectInfo={projectInfo}
|
||||||
basePath="/"
|
onFavoriteClicked={onFavoriteClicked}
|
||||||
className="guiPlayer"
|
onLoveClicked={onLoveClicked}
|
||||||
isFullScreen={isFullScreen}
|
/>
|
||||||
previewInfoVisible="false"
|
<Subactions
|
||||||
projectHost={projectHost}
|
addToStudioOpen={addToStudioOpen}
|
||||||
projectId={projectId}
|
isLoggedIn={isLoggedIn}
|
||||||
/>
|
projectInfo={projectInfo}
|
||||||
</div>
|
reportOpen={reportOpen}
|
||||||
<MediaQuery maxWidth={frameless.tablet - 1}>
|
shareDate={shareDate}
|
||||||
<FlexRow className="preview-row force-center">
|
studios={studios}
|
||||||
|
userOwnsProject={userOwnsProject}
|
||||||
|
onAddToStudioClicked={onAddToStudioClicked}
|
||||||
|
onAddToStudioClosed={onAddToStudioClosed}
|
||||||
|
onReportClicked={onReportClicked}
|
||||||
|
onReportClose={onReportClose}
|
||||||
|
onReportSubmit={onReportSubmit}
|
||||||
|
onToggleStudio={onToggleStudio}
|
||||||
|
/>
|
||||||
|
</FlexRow>
|
||||||
|
</MediaQuery>
|
||||||
|
<FlexRow className="project-notes">
|
||||||
|
<RemixCredit projectInfo={parentInfo} />
|
||||||
|
<RemixCredit projectInfo={originalInfo} />
|
||||||
|
{/* eslint-disable max-len */}
|
||||||
|
<MediaQuery maxWidth={frameless.tablet - 1}>
|
||||||
|
<FlexRow className="preview-row">
|
||||||
|
<FlexRow className="extension-list">
|
||||||
|
{extensions && extensions.map(extension => (
|
||||||
|
<ExtensionChip
|
||||||
|
extensionL10n={extension.l10nId}
|
||||||
|
extensionName={extension.name}
|
||||||
|
hasStatus={extension.hasStatus}
|
||||||
|
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
|
||||||
|
key={extension.name || extension.l10nId}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
</MediaQuery>
|
||||||
|
<FlexRow className="description-block">
|
||||||
|
<div className="project-textlabel">
|
||||||
|
Instructions
|
||||||
|
</div>
|
||||||
|
{editable ?
|
||||||
|
<InplaceInput
|
||||||
|
className={classNames(
|
||||||
|
'project-description-edit',
|
||||||
|
{remixes: parentInfo && parentInfo.author}
|
||||||
|
)}
|
||||||
|
handleUpdate={onUpdate}
|
||||||
|
name="instructions"
|
||||||
|
placeholder="Tell people how to use your project (such as which keys to press)."
|
||||||
|
type="textarea"
|
||||||
|
validationErrors={{
|
||||||
|
maxLength: 'Sorry description is too long'
|
||||||
|
// maxLength: props.intl.formatMessage({
|
||||||
|
// id: 'project.descriptionMaxLength'
|
||||||
|
// })
|
||||||
|
}}
|
||||||
|
validations={{
|
||||||
|
// TODO: actual 5000
|
||||||
|
maxLength: 1000
|
||||||
|
}}
|
||||||
|
value={projectInfo.instructions}
|
||||||
|
/> :
|
||||||
|
<div className="project-description">
|
||||||
|
{decorateText(projectInfo.instructions)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow className="description-block">
|
||||||
|
<div className="project-textlabel">
|
||||||
|
Notes and Credits
|
||||||
|
</div>
|
||||||
|
{editable ?
|
||||||
|
<InplaceInput
|
||||||
|
className={classNames(
|
||||||
|
'project-description-edit',
|
||||||
|
'last',
|
||||||
|
{remixes: parentInfo && parentInfo.author}
|
||||||
|
)}
|
||||||
|
handleUpdate={onUpdate}
|
||||||
|
name="description"
|
||||||
|
placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
|
||||||
|
type="textarea"
|
||||||
|
validationErrors={{
|
||||||
|
maxLength: 'Sorry description is too long'
|
||||||
|
// maxLength: props.intl.formatMessage({
|
||||||
|
// id: 'project.descriptionMaxLength'
|
||||||
|
// })
|
||||||
|
}}
|
||||||
|
validations={{
|
||||||
|
// TODO: actual 5000
|
||||||
|
maxLength: 1000
|
||||||
|
}}
|
||||||
|
value={projectInfo.description}
|
||||||
|
/> :
|
||||||
|
<div className="project-description last">
|
||||||
|
{decorateText(projectInfo.description)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</FlexRow>
|
||||||
|
{/* eslint-enable max-len */}
|
||||||
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
<MediaQuery minWidth={frameless.tablet}>
|
||||||
|
<FlexRow className="preview-row">
|
||||||
<Stats
|
<Stats
|
||||||
faved={faved}
|
faved={faved}
|
||||||
favoriteCount={favoriteCount}
|
favoriteCount={favoriteCount}
|
||||||
|
|
@ -166,6 +281,7 @@ const PreviewPresentation = ({
|
||||||
isLoggedIn={isLoggedIn}
|
isLoggedIn={isLoggedIn}
|
||||||
projectInfo={projectInfo}
|
projectInfo={projectInfo}
|
||||||
reportOpen={reportOpen}
|
reportOpen={reportOpen}
|
||||||
|
shareDate={shareDate}
|
||||||
studios={studios}
|
studios={studios}
|
||||||
userOwnsProject={userOwnsProject}
|
userOwnsProject={userOwnsProject}
|
||||||
onAddToStudioClicked={onAddToStudioClicked}
|
onAddToStudioClicked={onAddToStudioClicked}
|
||||||
|
|
@ -177,179 +293,68 @@ const PreviewPresentation = ({
|
||||||
/>
|
/>
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
<FlexRow className="project-notes">
|
<MediaQuery minWidth={frameless.tablet}>
|
||||||
<RemixCredit projectInfo={parentInfo} />
|
<FlexRow className="preview-row">
|
||||||
<RemixCredit projectInfo={originalInfo} />
|
<FlexRow className="extension-list">
|
||||||
{/* eslint-disable max-len */}
|
{extensions && extensions.map(extension => (
|
||||||
<MediaQuery maxWidth={frameless.tablet - 1}>
|
<ExtensionChip
|
||||||
<FlexRow className="preview-row">
|
extensionL10n={extension.l10nId}
|
||||||
<FlexRow className="extension-list">
|
extensionName={extension.name}
|
||||||
{extensions && extensions.map(extension => (
|
hasStatus={extension.hasStatus}
|
||||||
<ExtensionChip
|
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
|
||||||
extensionL10n={extension.l10nId}
|
key={extension.name || extension.l10nId}
|
||||||
extensionName={extension.name}
|
|
||||||
hasStatus={extension.hasStatus}
|
|
||||||
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
|
|
||||||
key={extension.name || extension.l10nId}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</FlexRow>
|
|
||||||
</FlexRow>
|
|
||||||
</MediaQuery>
|
|
||||||
<FlexRow className="description-block">
|
|
||||||
<div className="project-textlabel">
|
|
||||||
Instructions
|
|
||||||
</div>
|
|
||||||
{editable ?
|
|
||||||
<InplaceInput
|
|
||||||
className={classNames(
|
|
||||||
'project-description-edit',
|
|
||||||
{remixes: parentInfo && parentInfo.author}
|
|
||||||
)}
|
|
||||||
handleUpdate={onUpdate}
|
|
||||||
name="instructions"
|
|
||||||
placeholder="Tell people how to use your project (such as which keys to press)."
|
|
||||||
type="textarea"
|
|
||||||
validationErrors={{
|
|
||||||
maxLength: 'Sorry description is too long'
|
|
||||||
// maxLength: props.intl.formatMessage({
|
|
||||||
// id: 'project.descriptionMaxLength'
|
|
||||||
// })
|
|
||||||
}}
|
|
||||||
validations={{
|
|
||||||
// TODO: actual 5000
|
|
||||||
maxLength: 1000
|
|
||||||
}}
|
|
||||||
value={projectInfo.instructions}
|
|
||||||
/> :
|
|
||||||
<div className="project-description">
|
|
||||||
{decorateText(projectInfo.instructions)}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</FlexRow>
|
|
||||||
<FlexRow className="description-block">
|
|
||||||
<div className="project-textlabel">
|
|
||||||
Notes and Credits
|
|
||||||
</div>
|
|
||||||
{editable ?
|
|
||||||
<InplaceInput
|
|
||||||
className={classNames(
|
|
||||||
'project-description-edit',
|
|
||||||
'last',
|
|
||||||
{remixes: parentInfo && parentInfo.author}
|
|
||||||
)}
|
|
||||||
handleUpdate={onUpdate}
|
|
||||||
name="description"
|
|
||||||
placeholder="How did you make this project? Did you use ideas scripts or artwork from other people? Thank them here."
|
|
||||||
type="textarea"
|
|
||||||
validationErrors={{
|
|
||||||
maxLength: 'Sorry description is too long'
|
|
||||||
// maxLength: props.intl.formatMessage({
|
|
||||||
// id: 'project.descriptionMaxLength'
|
|
||||||
// })
|
|
||||||
}}
|
|
||||||
validations={{
|
|
||||||
// TODO: actual 5000
|
|
||||||
maxLength: 1000
|
|
||||||
}}
|
|
||||||
value={projectInfo.description}
|
|
||||||
/> :
|
|
||||||
<div className="project-description last">
|
|
||||||
{decorateText(projectInfo.description)}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</FlexRow>
|
|
||||||
{/* eslint-enable max-len */}
|
|
||||||
</FlexRow>
|
|
||||||
</FlexRow>
|
|
||||||
<MediaQuery minWidth={frameless.tablet}>
|
|
||||||
<FlexRow className="preview-row">
|
|
||||||
<Stats
|
|
||||||
faved={faved}
|
|
||||||
favoriteCount={favoriteCount}
|
|
||||||
loveCount={loveCount}
|
|
||||||
loved={loved}
|
|
||||||
projectInfo={projectInfo}
|
|
||||||
onFavoriteClicked={onFavoriteClicked}
|
|
||||||
onLoveClicked={onLoveClicked}
|
|
||||||
/>
|
|
||||||
<Subactions
|
|
||||||
addToStudioOpen={addToStudioOpen}
|
|
||||||
isLoggedIn={isLoggedIn}
|
|
||||||
projectInfo={projectInfo}
|
|
||||||
reportOpen={reportOpen}
|
|
||||||
studios={studios}
|
|
||||||
userOwnsProject={userOwnsProject}
|
|
||||||
onAddToStudioClicked={onAddToStudioClicked}
|
|
||||||
onAddToStudioClosed={onAddToStudioClosed}
|
|
||||||
onReportClicked={onReportClicked}
|
|
||||||
onReportClose={onReportClose}
|
|
||||||
onReportSubmit={onReportSubmit}
|
|
||||||
onToggleStudio={onToggleStudio}
|
|
||||||
/>
|
|
||||||
</FlexRow>
|
|
||||||
</MediaQuery>
|
|
||||||
<MediaQuery minWidth={frameless.tablet}>
|
|
||||||
<FlexRow className="preview-row">
|
|
||||||
<FlexRow className="extension-list">
|
|
||||||
{extensions && extensions.map(extension => (
|
|
||||||
<ExtensionChip
|
|
||||||
extensionL10n={extension.l10nId}
|
|
||||||
extensionName={extension.name}
|
|
||||||
hasStatus={extension.hasStatus}
|
|
||||||
iconURI={extension.icon && `/svgs/project/${extension.icon}`}
|
|
||||||
key={extension.name || extension.l10nId}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</FlexRow>
|
|
||||||
</FlexRow>
|
|
||||||
</MediaQuery>
|
|
||||||
</div>
|
|
||||||
<div className="project-lower-container">
|
|
||||||
<div className="inner">
|
|
||||||
<FlexRow className="preview-row">
|
|
||||||
<div className="comments-container">
|
|
||||||
<FlexRow className="comments-header">
|
|
||||||
<h4>Comments</h4>
|
|
||||||
{/* TODO: Add toggle comments component and logic*/}
|
|
||||||
</FlexRow>
|
|
||||||
<FlexRow className="comments-list">
|
|
||||||
{comments.map(comment => (
|
|
||||||
<TopLevelComment
|
|
||||||
author={comment.author}
|
|
||||||
content={comment.content}
|
|
||||||
datetimeCreated={comment.datetime_created}
|
|
||||||
deletable={userOwnsProject}
|
|
||||||
deleted={comment.deleted}
|
|
||||||
id={comment.id}
|
|
||||||
key={comment.id}
|
|
||||||
parentId={comment.parent_id}
|
|
||||||
projectId={projectId}
|
|
||||||
replies={replies && replies[comment.id] ? replies[comment.id] : []}
|
|
||||||
onDelete={onDeleteComment}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{comments.length < projectInfo.stats.comments &&
|
</FlexRow>
|
||||||
|
</FlexRow>
|
||||||
|
</MediaQuery>
|
||||||
|
</div>
|
||||||
|
<div className="project-lower-container">
|
||||||
|
<div className="inner">
|
||||||
|
<FlexRow className="preview-row">
|
||||||
|
<div className="comments-container">
|
||||||
|
<FlexRow className="comments-header">
|
||||||
|
<h4>Comments</h4>
|
||||||
|
{/* TODO: Add toggle comments component and logic*/}
|
||||||
|
</FlexRow>
|
||||||
|
<FlexRow className="comments-list">
|
||||||
|
{comments.map(comment => (
|
||||||
|
<TopLevelComment
|
||||||
|
author={comment.author}
|
||||||
|
content={comment.content}
|
||||||
|
datetimeCreated={comment.datetime_created}
|
||||||
|
deletable={userOwnsProject}
|
||||||
|
deleted={comment.deleted}
|
||||||
|
id={comment.id}
|
||||||
|
key={comment.id}
|
||||||
|
parentId={comment.parent_id}
|
||||||
|
projectId={projectId}
|
||||||
|
replies={replies && replies[comment.id] ? replies[comment.id] : []}
|
||||||
|
onDelete={onDeleteComment}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{comments.length < projectInfo.stats.comments &&
|
||||||
<Button
|
<Button
|
||||||
className="button load-more-button"
|
className="button load-more-button"
|
||||||
onClick={onLoadMore}
|
onClick={onLoadMore}
|
||||||
>
|
>
|
||||||
Load More
|
Load More
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
|
</FlexRow>
|
||||||
|
</div>
|
||||||
|
<FlexRow className="column">
|
||||||
|
<RemixList remixes={remixes} />
|
||||||
|
<StudioList studios={projectStudios} />
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</div>
|
|
||||||
<FlexRow className="column">
|
|
||||||
<RemixList remixes={remixes} />
|
|
||||||
<StudioList studios={projectStudios} />
|
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
</FlexRow>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Formsy>
|
||||||
</Formsy>
|
)}
|
||||||
)}
|
</div>
|
||||||
</div>
|
);
|
||||||
);
|
};
|
||||||
|
|
||||||
PreviewPresentation.propTypes = {
|
PreviewPresentation.propTypes = {
|
||||||
addToStudioOpen: PropTypes.bool,
|
addToStudioOpen: PropTypes.bool,
|
||||||
|
|
|
||||||
|
|
@ -7,74 +7,68 @@ const Button = require('../../components/forms/button.jsx');
|
||||||
const AddToStudioModal = require('../../components/modal/addtostudio/container.jsx');
|
const AddToStudioModal = require('../../components/modal/addtostudio/container.jsx');
|
||||||
const ReportModal = require('../../components/modal/report/modal.jsx');
|
const ReportModal = require('../../components/modal/report/modal.jsx');
|
||||||
|
|
||||||
const projectShape = require('./projectshape.jsx').projectShape;
|
|
||||||
|
|
||||||
require('./subactions.scss');
|
require('./subactions.scss');
|
||||||
|
|
||||||
const Subactions = props => {
|
const Subactions = props => (
|
||||||
const shareDate = ((props.projectInfo.history && props.projectInfo.history.shared)) ?
|
<FlexRow className="subactions">
|
||||||
props.projectInfo.history.shared : '';
|
<div className="share-date">
|
||||||
return (
|
<div className="copyleft">©</div>
|
||||||
<FlexRow className="subactions">
|
{' '}
|
||||||
<div className="share-date">
|
{/* eslint-disable react/jsx-sort-props */}
|
||||||
<div className="copyleft">©</div>
|
{props.shareDate === null ?
|
||||||
{' '}
|
'Unshared' :
|
||||||
{/* eslint-disable react/jsx-sort-props */}
|
<FormattedDate
|
||||||
{shareDate === null ?
|
value={Date.parse(props.shareDate)}
|
||||||
'Unshared' :
|
day="2-digit"
|
||||||
<FormattedDate
|
month="short"
|
||||||
value={Date.parse(shareDate)}
|
year="numeric"
|
||||||
day="2-digit"
|
/>
|
||||||
month="short"
|
}
|
||||||
year="numeric"
|
{/* eslint-enable react/jsx-sort-props */}
|
||||||
/>
|
</div>
|
||||||
}
|
<FlexRow className="action-buttons">
|
||||||
{/* eslint-enable react/jsx-sort-props */}
|
{(props.isLoggedIn && props.userOwnsProject) &&
|
||||||
</div>
|
|
||||||
<FlexRow className="action-buttons">
|
|
||||||
{(props.isLoggedIn && props.userOwnsProject) &&
|
|
||||||
<React.Fragment>
|
|
||||||
<Button
|
|
||||||
className="action-button studio-button"
|
|
||||||
key="add-to-studio-button"
|
|
||||||
onClick={props.onAddToStudioClicked}
|
|
||||||
>
|
|
||||||
Add to Studio
|
|
||||||
</Button>,
|
|
||||||
<AddToStudioModal
|
|
||||||
isOpen={props.addToStudioOpen}
|
|
||||||
key="add-to-studio-modal"
|
|
||||||
studios={props.studios}
|
|
||||||
onRequestClose={props.onAddToStudioClosed}
|
|
||||||
onToggleStudio={props.onToggleStudio}
|
|
||||||
/>
|
|
||||||
</React.Fragment>
|
|
||||||
}
|
|
||||||
<Button className="action-button copy-link-button">
|
|
||||||
Copy Link
|
|
||||||
</Button>
|
|
||||||
{(props.isLoggedIn && !props.userOwnsProject) &&
|
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Button
|
<Button
|
||||||
className="action-button report-button"
|
className="action-button studio-button"
|
||||||
key="report-button"
|
key="add-to-studio-button"
|
||||||
onClick={props.onReportClicked}
|
onClick={props.onAddToStudioClicked}
|
||||||
>
|
>
|
||||||
Report
|
Add to Studio
|
||||||
</Button>,
|
</Button>,
|
||||||
<ReportModal
|
<AddToStudioModal
|
||||||
isOpen={props.reportOpen}
|
isOpen={props.addToStudioOpen}
|
||||||
key="report-modal"
|
key="add-to-studio-modal"
|
||||||
type="project"
|
studios={props.studios}
|
||||||
onReport={props.onReportSubmit}
|
onRequestClose={props.onAddToStudioClosed}
|
||||||
onRequestClose={props.onReportClose}
|
onToggleStudio={props.onToggleStudio}
|
||||||
/>
|
/>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
}
|
}
|
||||||
</FlexRow>
|
<Button className="action-button copy-link-button">
|
||||||
|
Copy Link
|
||||||
|
</Button>
|
||||||
|
{(props.isLoggedIn && !props.userOwnsProject) &&
|
||||||
|
<React.Fragment>
|
||||||
|
<Button
|
||||||
|
className="action-button report-button"
|
||||||
|
key="report-button"
|
||||||
|
onClick={props.onReportClicked}
|
||||||
|
>
|
||||||
|
Report
|
||||||
|
</Button>,
|
||||||
|
<ReportModal
|
||||||
|
isOpen={props.reportOpen}
|
||||||
|
key="report-modal"
|
||||||
|
type="project"
|
||||||
|
onReport={props.onReportSubmit}
|
||||||
|
onRequestClose={props.onReportClose}
|
||||||
|
/>
|
||||||
|
</React.Fragment>
|
||||||
|
}
|
||||||
</FlexRow>
|
</FlexRow>
|
||||||
);
|
</FlexRow>
|
||||||
};
|
);
|
||||||
|
|
||||||
Subactions.propTypes = {
|
Subactions.propTypes = {
|
||||||
addToStudioOpen: PropTypes.bool,
|
addToStudioOpen: PropTypes.bool,
|
||||||
|
|
@ -85,8 +79,8 @@ Subactions.propTypes = {
|
||||||
onReportClose: PropTypes.func.isRequired,
|
onReportClose: PropTypes.func.isRequired,
|
||||||
onReportSubmit: PropTypes.func.isRequired,
|
onReportSubmit: PropTypes.func.isRequired,
|
||||||
onToggleStudio: PropTypes.func,
|
onToggleStudio: PropTypes.func,
|
||||||
projectInfo: projectShape,
|
|
||||||
reportOpen: PropTypes.bool,
|
reportOpen: PropTypes.bool,
|
||||||
|
shareDate: PropTypes.string,
|
||||||
studios: PropTypes.arrayOf(PropTypes.object),
|
studios: PropTypes.arrayOf(PropTypes.object),
|
||||||
userOwnsProject: PropTypes.bool
|
userOwnsProject: PropTypes.bool
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue