From edec88f0ab31bc9bae08e52d9c93152ae8646587 Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Tue, 18 Dec 2018 10:33:43 -0500
Subject: [PATCH] added author username to moderation info area

---
 src/views/preview/mod-info.jsx     |  9 +++++++++
 src/views/preview/mod-info.scss    | 21 +++++++++++++++++++++
 src/views/preview/presentation.jsx |  3 +++
 src/views/preview/project-view.jsx |  1 +
 static/svgs/project/username.svg   |  1 +
 5 files changed, 35 insertions(+)
 create mode 100644 static/svgs/project/username.svg

diff --git a/src/views/preview/mod-info.jsx b/src/views/preview/mod-info.jsx
index 97e38b165..f2f64db09 100644
--- a/src/views/preview/mod-info.jsx
+++ b/src/views/preview/mod-info.jsx
@@ -14,6 +14,14 @@ const ModInfo = props => (
             <FormattedMessage id="project.moderationInfoLabel" />
         </div>
         <FlexRow className="mod-info">
+            {props.authorUsername &&
+                <div className="mod-username">
+                    {/* @todo: these profile links should be made into a shared library function */}
+                    <a href={`/users/${props.authorUsername}/`}>
+                        {props.authorUsername}
+                    </a>
+                </div>
+            }
             {/*  eslint-disable react/jsx-sort-props */}
             {props.revisedDate &&
                 <div className="mod-date">
@@ -54,6 +62,7 @@ const ModInfo = props => (
 );
 
 ModInfo.propTypes = {
+    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     revisedDate: PropTypes.string,
     scripts: PropTypes.number,
     sprites: PropTypes.number
diff --git a/src/views/preview/mod-info.scss b/src/views/preview/mod-info.scss
index a03518013..0b3d1ced7 100644
--- a/src/views/preview/mod-info.scss
+++ b/src/views/preview/mod-info.scss
@@ -24,6 +24,27 @@
     }
 }
 
+.mod-username {
+
+    display: inline;
+    padding-right: 2rem;
+    font-size: .875rem;
+
+    &:before {
+        display: inline-block;
+        margin-right: .5rem;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+        width: 1.5rem;
+        height: 1.5rem;
+        vertical-align: -.35rem;
+        content: "";
+        opacity: .5;
+        background-image: url("/svgs/project/username.svg");
+    }
+}
+
 .mod-date,
 .mod-sprites,
 .mod-scripts {
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 7e08ac84d..c09dff80f 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -49,6 +49,7 @@ const PreviewPresentation = ({
     adminModalOpen,
     adminPanelOpen,
     assetHost,
+    authorUsername,
     backpackHost,
     canAddToStudio,
     canDeleteComments,
@@ -477,6 +478,7 @@ const PreviewPresentation = ({
                         {showModInfo &&
                             <FlexRow className="preview-row">
                                 <ModInfo
+                                    authorUsername={authorUsername}
                                     revisedDate={revisedDate}
                                     scripts={modInfo.scriptCount}
                                     sprites={modInfo.spriteCount}
@@ -586,6 +588,7 @@ PreviewPresentation.propTypes = {
     adminModalOpen: PropTypes.bool,
     adminPanelOpen: PropTypes.bool,
     assetHost: PropTypes.string,
+    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     backpackHost: PropTypes.string,
     canAddToStudio: PropTypes.bool,
     canDeleteComments: PropTypes.bool,
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index dfb63e60b..8ad7090d0 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -572,6 +572,7 @@ class Preview extends React.Component {
                             adminModalOpen={this.state.adminModalOpen}
                             adminPanelOpen={this.state.adminPanelOpen}
                             assetHost={this.props.assetHost}
+                            authorUsername={this.props.authorUsername}
                             backpackHost={this.props.backpackHost}
                             canAddToStudio={this.props.canAddToStudio}
                             canDeleteComments={this.props.isAdmin || this.props.userOwnsProject}
diff --git a/static/svgs/project/username.svg b/static/svgs/project/username.svg
new file mode 100644
index 000000000..2ddcfa4f7
--- /dev/null
+++ b/static/svgs/project/username.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><g transform="translate(3 3)" fill="#575E75" fill-rule="evenodd"><path d="M3.37 9h7.088a3.105 3.105 0 0 1 3.046 2.5l.259 1.305A1 1 0 0 1 12.782 14H1.18a1 1 0 0 1-.986-1.165L.418 11.5A2.993 2.993 0 0 1 3.37 9z"/><circle cx="7" cy="4" r="4"/></g></svg>
\ No newline at end of file