Merge pull request #2324 from benjiwheeler/remix-button

enable remix button; format remix, see inside button css

src/views/preview/presentation.jsx

@@ -43,10 +43,12 @@ const onKeyPress = e => {
 };
 
 const PreviewPresentation = ({
+    addToStudioOpen,
     assetHost,
     backpackHost,
     canAddToStudio,
     canDeleteComments,
+    canRemix,
     canReport,
     canRestoreComments,
     canShare,
@@ -61,39 +63,40 @@ const PreviewPresentation = ({
     isFullScreen,
     isLoggedIn,
     isShared,
-    loved,
     loveCount,
+    loved,
     moreCommentsToLoad,
-    originalInfo,
-    parentInfo,
-    projectHost,
-    projectId,
-    projectInfo,
-    projectNotAvailable,
-    remixes,
-    reportOpen,
-    replies,
-    addToStudioOpen,
-    projectStudios,
-    singleCommentId,
-    userOwnsProject,
     onAddComment,
+    onAddToStudioClicked,
+    onAddToStudioClosed,
     onDeleteComment,
     onFavoriteClicked,
     onLoadMore,
     onLoveClicked,
+    onRemix,
     onReportClicked,
     onReportClose,
     onReportComment,
     onReportSubmit,
     onRestoreComment,
-    onAddToStudioClicked,
-    onAddToStudioClosed,
-    onToggleStudio,
-    onToggleComments,
     onSeeInside,
     onShare,
-    onUpdate
+    onToggleComments,
+    onToggleStudio,
+    onUpdate,
+    onUpdateProjectId,
+    originalInfo,
+    parentInfo,
+    projectHost,
+    projectId,
+    projectInfo,
+    projectNotAvailable,
+    projectStudios,
+    remixes,
+    replies,
+    reportOpen,
+    singleCommentId,
+    userOwnsProject
 }) => {
     const shareDate = ((projectInfo.history && projectInfo.history.shared)) ? projectInfo.history.shared : '';
 
@@ -154,9 +157,11 @@ const PreviewPresentation = ({
                             </FlexRow>
                             <MediaQuery minWidth={frameless.mobile}>
                                 <div className="project-buttons">
-                                    {/* TODO: Hide Remix button for now until implemented */}
-                                    {(!userOwnsProject && false) &&
-                                        <Button className="button remix-button">
+                                    {canRemix &&
+                                        <Button
+                                            className="button remix-button"
+                                            onClick={onRemix}
+                                        >
                                             <FormattedMessage id="project.remixButton" />
                                         </Button>
                                     }
@@ -177,12 +182,14 @@ const PreviewPresentation = ({
                                     backpackHost={backpackHost}
                                     backpackVisible={canUseBackpack}
                                     basePath="/"
+                                    canRemix={canRemix}
                                     className="guiPlayer"
                                     cloudHost={cloudHost}
                                     isFullScreen={isFullScreen}
                                     previewInfoVisible="false"
                                     projectHost={projectHost}
                                     projectId={projectId}
+                                    onUpdateProjectId={onUpdateProjectId}
                                 />
                             </div>
                             <MediaQuery maxWidth={frameless.tablet - 1}>
@@ -449,6 +456,7 @@ PreviewPresentation.propTypes = {
     backpackHost: PropTypes.string,
     canAddToStudio: PropTypes.bool,
     canDeleteComments: PropTypes.bool,
+    canRemix: PropTypes.bool,
     canReport: PropTypes.bool,
     canRestoreComments: PropTypes.bool,
     canShare: PropTypes.bool,
@@ -473,6 +481,7 @@ PreviewPresentation.propTypes = {
     onFavoriteClicked: PropTypes.func,
     onLoadMore: PropTypes.func,
     onLoveClicked: PropTypes.func,
+    onRemix: PropTypes.func,
     onReportClicked: PropTypes.func.isRequired,
     onReportClose: PropTypes.func.isRequired,
     onReportComment: PropTypes.func.isRequired,
@@ -483,6 +492,7 @@ PreviewPresentation.propTypes = {
     onToggleComments: PropTypes.func,
     onToggleStudio: PropTypes.func,
     onUpdate: PropTypes.func,
+    onUpdateProjectId: PropTypes.func,
     originalInfo: projectShape,
     parentInfo: projectShape,
     projectHost: PropTypes.string,

src/views/preview/preview.jsx

@@ -50,6 +50,7 @@ class Preview extends React.Component {
             'handleRestoreComment',
             'handleAddToStudioClick',
             'handleAddToStudioClose',
+            'handleRemix',
             'handleSeeInside',
             'handleShare',
             'handleUpdateProjectId',
@@ -73,13 +74,13 @@ class Preview extends React.Component {
             parseInt(window.location.hash.replace(commentHashPrefix, ''), 10);
 
         this.state = {
+            addToStudioOpen: false,
             extensions: [],
             favoriteCount: 0,
             loveCount: 0,
             projectId: parts[1] === 'editor' ? '0' : parts[1],
-            singleCommentId: singleCommentId,
-            addToStudioOpen: false,
-            reportOpen: false
+            reportOpen: false,
+            singleCommentId: singleCommentId
         };
         this.addEventListeners();
         /* In the beginning, if user is on mobile and landscape, go to fullscreen */
@@ -328,6 +329,9 @@ class Preview extends React.Component {
             }));
         }
     }
+    handleRemix () {
+        this.props.remixProject();
+    }
     handleSeeInside () {
         this.props.setPlayer(false);
     }
@@ -405,6 +409,7 @@ class Preview extends React.Component {
                         backpackHost={this.props.backpackHost}
                         canAddToStudio={this.props.canAddToStudio}
                         canDeleteComments={this.props.isAdmin || this.props.userOwnsProject}
+                        canRemix={this.props.canRemix}
                         canReport={this.props.canReport}
                         canRestoreComments={this.props.isAdmin}
                         canShare={this.props.canShare}
@@ -440,6 +445,7 @@ class Preview extends React.Component {
                         onFavoriteClicked={this.handleFavoriteToggle}
                         onLoadMore={this.handleLoadMore}
                         onLoveClicked={this.handleLoveToggle}
+                        onRemix={this.handleRemix}
                         onReportClicked={this.handleReportClick}
                         onReportClose={this.handleReportClose}
                         onReportComment={this.handleReportComment}
@@ -450,11 +456,11 @@ class Preview extends React.Component {
                         onToggleComments={this.handleToggleComments}
                         onToggleStudio={this.handleToggleStudio}
                         onUpdate={this.handleUpdate}
+                        onUpdateProjectId={this.handleUpdateProjectId}
                     />
                 </Page> :
                 <React.Fragment>
                     <IntlGUI
-                        hideIntro
                         assetHost={this.props.assetHost}
                         authorId={this.props.authorId}
                         authorThumbnailUrl={this.props.authorThumbnailUrl}
@@ -544,6 +550,7 @@ Preview.propTypes = {
     projectInfo: projectShape,
     projectNotAvailable: PropTypes.bool,
     projectStudios: PropTypes.arrayOf(PropTypes.object),
+    remixProject: PropTypes.func,
     remixes: PropTypes.arrayOf(PropTypes.object),
     replies: PropTypes.objectOf(PropTypes.array),
     reportProject: PropTypes.func,
@@ -728,6 +735,9 @@ const mapDispatchToProps = dispatch => ({
     updateProject: (id, formData, username, token) => {
         dispatch(previewActions.updateProject(id, formData, username, token));
     },
+    remixProject: () => {
+        dispatch(GUI.remixProject());
+    },
     setPlayer: player => {
         dispatch(GUI.setPlayer(player));
     },

src/views/preview/preview.scss

@@ -163,6 +163,7 @@ $stage-width: 480px;
     }
 
     .project-buttons {
+        font-weight: bold;
         flex-shrink: 0;
     }
 
@@ -206,17 +207,23 @@ $stage-width: 480px;
     .remix-button,
     .see-inside-button {
         margin-top: 0;
+        border-radius: .25rem;
+        padding-top: .6875rem;
+        padding-right: .9375rem;
+        padding-bottom: .6875rem;
+        padding-left: .875rem;
+        height: 2.5rem;
         font-size: .875rem;
-        font-weight: normal;
 
         &:before {
             display: inline-block;
-            margin-right: .5rem;
+            margin-top: -2px;
+            margin-right: .4375rem;
             background-repeat: no-repeat;
             background-position: center center;
             background-size: contain;
-            width: 1.25rem;
-            height: 1.25rem;
+            width: 1.125rem;
+            height: 1.125rem;
             vertical-align: middle;
             content: "";
         }

src/views/preview/subactions.scss

@@ -54,7 +54,7 @@
             text-decoration: none;
             line-height: .875rem;
             font-size: .75rem;
-            font-weight: normal;
+            font-weight: bold;
 
             &.studio-button,
             &.copy-link-button,