Merge pull request #2810 from weseek/feat/gw-3757

gw-3757

src/client/js/app.jsx

@@ -26,6 +26,7 @@ import MyDraftList from './components/MyDraftList/MyDraftList';
 import SeenUserList from './components/User/SeenUserList';
 import LikerList from './components/User/LikerList';
 import TableOfContents from './components/TableOfContents';
+import UserInfo from './components/User/UserInfo';
 import Fab from './components/Fab';
 
 import PersonalSettings from './components/Me/PersonalSettings';
@@ -105,6 +106,7 @@ if (pageContainer.state.path != null) {
     'page': <Page />,
     'grw-subnav-container': <GrowiSubNavigation />,
     'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
+    'user-info': <UserInfo />,
   });
 }
 // additional definitions if user is logged in

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -23,7 +23,6 @@ import ThreeStrandedButton from './ThreeStrandedButton';
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
 import DrawerToggler from './DrawerToggler';
-import UserPicture from '../User/UserPicture';
 
 
 // eslint-disable-next-line react/prop-types
@@ -62,47 +61,7 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
   );
 };
 
-// eslint-disable-next-line react/prop-types
-const UserPagePathNav = ({ pageId, pagePath }) => {
-  const linkedPagePath = new LinkedPagePath(pagePath);
-  const latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
-
-  return (
-    <div className="grw-page-path-nav">
-      <span className="d-flex align-items-center flex-wrap">
-        <h4 className="grw-user-page-path">{latterLink}</h4>
-        <RevisionPathControls
-          pageId={pageId}
-          pagePath={pagePath}
-        />
-      </span>
-    </div>
-  );
-};
 
-/* eslint-disable react/prop-types */
-const UserInfo = ({ pageUser }) => {
-  return (
-    <div className="grw-users-info d-flex align-items-center d-edit-none">
-      <UserPicture user={pageUser} />
-
-      <div className="users-meta">
-        <h1 className="user-page-name">
-          {pageUser.name}
-        </h1>
-        <div className="user-page-meta mt-1 mb-0">
-          <span className="user-page-username mr-2"><i className="icon-user mr-1"></i>{pageUser.username}</span>
-          <span className="user-page-email mr-2">
-            <i className="icon-envelope mr-1"></i>
-            {pageUser.isEmailPublished ? pageUser.email : '*****'}
-          </span>
-          {pageUser.introduction && <span className="user-page-introduction">{pageUser.introduction}</span>}
-        </div>
-      </div>
-
-    </div>
-  );
-};
 /* eslint-enable react/prop-types */
 
 /* eslint-disable react/prop-types */
@@ -165,18 +124,7 @@ const GrowiSubNavigation = (props) => {
               <TagLabels />
             </div>
           ) }
-
-          { isUserPage
-            ? (
-              <>
-                <UserPagePathNav pageId={pageId} pagePath={path} />
-                <UserInfo pageUser={pageUser} />
-              </>
-            )
-            : (
-              <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
-            )
-          }
+          <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
 
         </div>
       </div>

src/client/js/components/User/UserInfo.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PageContainer from '../../services/PageContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import UserPicture from './UserPicture';
+
+const UserInfo = (props) => {
+
+  const { pageContainer } = props;
+  const pageUser = pageContainer.state.pageUser;
+
+  return (
+    <div className="grw-users-info d-flex align-items-center d-edit-none">
+      <UserPicture user={pageUser} />
+
+      <div className="users-meta">
+        <h1 className="user-page-name">
+          {pageUser.name}
+        </h1>
+        <div className="user-page-meta mt-3 mb-0">
+          <span className="user-page-username mr-4"><i className="icon-user mr-1"></i>{pageUser.username}</span>
+          <span className="user-page-email mr-2">
+            <i className="icon-envelope mr-1"></i>
+            {pageUser.isEmailPublished ? pageUser.email : '*****'}
+          </span>
+          {pageUser.introduction && <span className="user-page-introduction">{pageUser.introduction}</span>}
+        </div>
+      </div>
+
+    </div>
+  );
+};
+
+
+UserInfo.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+const UserInfoWrapper = withUnstatedContainers(UserInfo, [PageContainer]);
+
+export default UserInfoWrapper;

src/client/styles/scss/_user.scss

@@ -20,8 +20,8 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
   }
 
   .picture {
-    width: 72px;
-    height: 72px;
+    width: 120px;
+    height: 120px;
   }
 
   div.user-page-meta {

src/server/views/layout-growi/user_page.html

@@ -6,6 +6,11 @@
 {% endblock %}
 
 {% block content_main %}
+  <div class="border-bottom pb-2">
+    <div class="user-info" id="user-info">
+    </div>
+  </div>
+
   <div class="row">
 
     <div class="col grw-page-content-container">