Merge pull request #3681 from benjiwheeler/show-creator

benjiwheeler · web-flow · commit ae0e2650604e · 2018-11-14T06:41:03.000-05:00
added author-info, user-avatar components
diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
@@ -1,4 +1,5 @@
 @import "../../css/colors.css";
+@import "../../css/units.css";
 @import "../../css/z-index.css";
 
 $main-button-size: 2.75rem;
@@ -153,7 +154,7 @@ button::-moz-focus-inner {
 
 .tooltip {
     border: 1px solid hsla(0, 0%, 0%, .1) !important;
-    border-radius: .25rem !important;
+    border-radius: $form-radius !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     z-index: $z-index-tooltip !important;
diff --git a/src/components/button/button.css b/src/components/button/button.css
@@ -1,6 +1,8 @@
+@import "../../css/units.css";
+
 .outlined-button {
     cursor: pointer;
-    border-radius: .25rem;
+    border-radius: $form-radius;
     font-weight: bold;
     display: flex;
     flex-direction: row;
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
@@ -5,12 +5,13 @@
  */
 
 @import "../../css/colors.css";
+@import "../../css/units.css";
 @import "../../css/z-index.css";
 
 .coming-soon {
     background-color: $data-primary !important;
     border: 1px solid $ui-black-transparent !important;
-    border-radius: .25rem !important;
+    border-radius: $form-radius !important;
     box-shadow: 0 0 .5rem $ui-black-transparent !important;
     padding: .75rem 1rem !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
@@ -25,7 +26,7 @@
     border-left: 0 !important;
     border-bottom: 0 !important;
     border-right: 1px solid $ui-black-transparent !important;
-    border-radius: .25rem;
+    border-radius: $form-radius;
     background-color: $data-primary !important;
     height: 1rem !important;
     width: 1rem !important;
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
@@ -58,13 +58,17 @@ const GUIComponent = props => {
         accountNavOpen,
         activeTabIndex,
         alertsVisible,
+        authorId,
+        authorThumbnailUrl,
+        authorUsername,
         basePath,
         backdropLibraryVisible,
         backpackHost,
         backpackVisible,
         blocksTabVisible,
         cardsVisible,
         canCreateNew,
+        canEditTitle,
         canRemix,
         canSave,
         canCreateCopy,
@@ -180,8 +184,12 @@ const GUIComponent = props => {
                 ) : null}
                 <MenuBar
                     accountNavOpen={accountNavOpen}
+                    authorId={authorId}
+                    authorThumbnailUrl={authorThumbnailUrl}
+                    authorUsername={authorUsername}
                     canCreateCopy={canCreateCopy}
                     canCreateNew={canCreateNew}
+                    canEditTitle={canEditTitle}
                     canRemix={canRemix}
                     canSave={canSave}
                     canShare={canShare}
@@ -324,13 +332,17 @@ const GUIComponent = props => {
 GUIComponent.propTypes = {
     accountNavOpen: PropTypes.bool,
     activeTabIndex: PropTypes.number,
+    authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
+    authorThumbnailUrl: PropTypes.string,
+    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), // can be false
     backdropLibraryVisible: PropTypes.bool,
     backpackHost: PropTypes.string,
     backpackVisible: PropTypes.bool,
     basePath: PropTypes.string,
     blocksTabVisible: PropTypes.bool,
     canCreateCopy: PropTypes.bool,
     canCreateNew: PropTypes.bool,
+    canEditTitle: PropTypes.bool,
     canRemix: PropTypes.bool,
     canSave: PropTypes.bool,
     canShare: PropTypes.bool,
@@ -374,6 +386,7 @@ GUIComponent.defaultProps = {
     backpackVisible: false,
     basePath: './',
     canCreateNew: false,
+    canEditTitle: false,
     canRemix: false,
     canSave: false,
     canCreateCopy: false,
diff --git a/src/components/menu-bar/account-nav.css b/src/components/menu-bar/account-nav.css
@@ -28,11 +28,8 @@
 }
 
 .user-info .avatar {
-    margin-right: calc($space * .8125);
-    border-radius: $form-radius;
     width: 2rem;
     height: 2rem;
-    vertical-align: middle;
 }
 
 [dir="ltr"] .user-info .dropdown-caret-position {
@@ -45,6 +42,12 @@
 
 .user-info .dropdown-caret-position {
   display: inline-block;
-  padding-bottom: .125rem;
+  padding-bottom: .0625rem;
   vertical-align: middle;
 }
+
+.user-info .profile-name {
+    font-size: .75rem;
+    line-height: .9375rem;
+    font-weight: bold;
+}
diff --git a/src/components/menu-bar/account-nav.jsx b/src/components/menu-bar/account-nav.jsx
@@ -12,6 +12,7 @@ import React from 'react';
 import MenuBarMenu from './menu-bar-menu.jsx';
 import {MenuSection} from '../menu/menu.jsx';
 import MenuItemContainer from '../../containers/menu-item.jsx';
+import UserAvatar from './user-avatar.jsx';
 import dropdownCaret from './dropdown-caret.svg';
 
 import styles from './account-nav.css';
@@ -40,9 +41,9 @@ const AccountNavComponent = ({
             onMouseUp={onClick}
         >
             {thumbnailUrl ? (
-                <img
+                <UserAvatar
                     className={styles.avatar}
-                    src={thumbnailUrl}
+                    imageUrl={thumbnailUrl}
                 />
             ) : null}
             <span className={styles.profileName}>
diff --git a/src/components/menu-bar/author-info.css b/src/components/menu-bar/author-info.css
@@ -0,0 +1,39 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.author-info {
+    color: $ui-white;
+    font-family: "Helvetica Neue";
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    cursor: default;
+}
+
+.avatar {
+    margin-right: .5625rem;
+}
+
+.project-title {
+    max-width: $menu-bar-item-max-width;
+    display: block;
+    overflow: hidden;
+    font-size: $menu-bar-large-font-size;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.username-line {
+    max-width: $menu-bar-item-max-width;
+    font-size: $menu-bar-standard-font-size;
+    display: block;
+    overflow: hidden;
+    font-weight: normal;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.username {
+    font-weight: bold;
+}
diff --git a/src/components/menu-bar/author-info.jsx b/src/components/menu-bar/author-info.jsx
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import {FormattedMessage, injectIntl} from 'react-intl';
+import UserAvatar from './user-avatar.jsx';
+
+import styles from './author-info.css';
+
+const AuthorInfo = ({
+    className,
+    imageUrl,
+    projectTitle,
+    // TODO: use userId to link to user's profile
+    userId, // eslint-disable-line no-unused-vars
+    username
+}) => (
+    <div
+        className={classNames(
+            className,
+            styles.authorInfo
+        )}
+    >
+        <UserAvatar
+            className={styles.avatar}
+            imageUrl={imageUrl}
+        />
+        <div className={styles.titleAuthor}>
+            <span className={styles.projectTitle}>
+                {projectTitle}
+            </span>
+            <div>
+                <span className={styles.usernameLine}>
+                    <FormattedMessage
+                        defaultMessage="by {username}"
+                        description="Shows that a project was created by this user"
+                        id="gui.authorInfo.byUser"
+                        values={{
+                            username: <span className={styles.username}>{username}</span>
+                        }}
+                    />
+                </span>
+            </div>
+        </div>
+    </div>
+);
+
+AuthorInfo.propTypes = {
+    className: PropTypes.string,
+    imageUrl: PropTypes.string,
+    projectTitle: PropTypes.string,
+    userId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+};
+
+export default injectIntl(AuthorInfo);
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
@@ -25,7 +25,7 @@
         width: 100%;
     */
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: .75rem;
+    font-size: $menu-bar-standard-font-size;
     font-weight: bold;
     background-color: $motion-primary;
     color: $ui-white;
@@ -83,7 +83,7 @@
 }
 
 .menu-bar-item.growable {
-    max-width: 12rem;
+    max-width: $menu-bar-item-max-width;
     flex: 1;
 }
 
@@ -126,8 +126,13 @@
     height: 34px;
 }
 
+.author-info {
+    margin-left: .25rem;
+    margin-right: .6875rem;
+}
+
 .menu-bar-button {
-    height: 2rem;
+    height: $menu-bar-button-size;
 }
 
 .remix-button {
@@ -170,8 +175,8 @@
 
 .profile-icon {
     margin: 0 .25rem;
-    width: 2rem;
-    border-radius: 0.25rem;
+    width: $menu-bar-button-size;
+    border-radius: $form-radius;
 }
 
 .dropdown-caret-icon {
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
@@ -17,6 +17,7 @@ import ProjectWatcher from '../../containers/project-watcher.jsx';
 import MenuBarMenu from './menu-bar-menu.jsx';
 import {MenuItem, MenuSection} from '../menu/menu.jsx';
 import ProjectTitleInput from './project-title-input.jsx';
+import AuthorInfo from './author-info.jsx';
 import AccountNav from '../../containers/account-nav.jsx';
 import LoginDropdown from './login-dropdown.jsx';
 import SB3Downloader from '../../containers/sb3-downloader.jsx';
@@ -448,17 +449,27 @@ class MenuBar extends React.Component {
                         <FormattedMessage {...ariaMessages.tutorials} />
                     </div>
                     <Divider className={classNames(styles.divider)} />
-                    <div className={classNames(styles.menuBarItem, styles.growable)}>
-                        <MenuBarItemTooltip
-                            enable
-                            id="title-field"
-                        >
-                            <ProjectTitleInput
-                                className={classNames(styles.titleFieldGrowable)}
-                                onUpdateProjectTitle={this.props.onUpdateProjectTitle}
-                            />
-                        </MenuBarItemTooltip>
-                    </div>
+                    {this.props.canEditTitle ? (
+                        <div className={classNames(styles.menuBarItem, styles.growable)}>
+                            <MenuBarItemTooltip
+                                enable
+                                id="title-field"
+                            >
+                                <ProjectTitleInput
+                                    className={classNames(styles.titleFieldGrowable)}
+                                    onUpdateProjectTitle={this.props.onUpdateProjectTitle}
+                                />
+                            </MenuBarItemTooltip>
+                        </div>
+                    ) : ((this.props.authorUsername && this.props.authorUsername !== this.props.username) ? (
+                        <AuthorInfo
+                            className={styles.authorInfo}
+                            imageUrl={this.props.authorThumbnailUrl}
+                            projectTitle={this.props.projectTitle}
+                            userId={this.props.authorId}
+                            username={this.props.authorUsername}
+                        />
+                    ) : null)}
                     <div className={classNames(styles.menuBarItem)}>
                         {this.props.canShare ? (
                             (this.props.isShowingProject || this.props.isUpdating) && (
@@ -667,8 +678,12 @@ class MenuBar extends React.Component {
 
 MenuBar.propTypes = {
     accountMenuOpen: PropTypes.bool,
+    authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    authorThumbnailUrl: PropTypes.string,
+    authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     canCreateCopy: PropTypes.bool,
     canCreateNew: PropTypes.bool,
+    canEditTitle: PropTypes.bool,
     canRemix: PropTypes.bool,
     canSave: PropTypes.bool,
     canShare: PropTypes.bool,
@@ -704,6 +719,7 @@ MenuBar.propTypes = {
     onShare: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
     onUpdateProjectTitle: PropTypes.func,
+    projectTitle: PropTypes.string,
     renderLogin: PropTypes.func,
     sessionExists: PropTypes.bool,
     showComingSoon: PropTypes.bool,
@@ -726,6 +742,7 @@ const mapStateToProps = state => {
         isShowingProject: getIsShowingProject(loadingState),
         languageMenuOpen: languageMenuOpen(state),
         loginMenuOpen: loginMenuOpen(state),
+        projectTitle: state.scratchGui.projectTitle,
         sessionExists: state.session && typeof state.session.session !== 'undefined',
         username: user ? user.username : null
     };
diff --git a/src/components/menu-bar/user-avatar.css b/src/components/menu-bar/user-avatar.css
@@ -0,0 +1,10 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.user-thumbnail {
+    width: $menu-bar-button-size;
+    height: $menu-bar-button-size;
+    border-radius: $form-radius;
+    vertical-align: middle;
+    box-shadow: 0 0 0 1px $ui-black-transparent;
+}
diff --git a/src/components/menu-bar/user-avatar.jsx b/src/components/menu-bar/user-avatar.jsx
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
diff --git a/src/css/units.css b/src/css/units.css
diff --git a/src/lib/titled-hoc.jsx b/src/lib/titled-hoc.jsx
