Merge branch 'master' into feat/GW-4172-control-priority-of-config-about-file-uploader

resource/locales/zh_CN/translation.json

@@ -77,6 +77,7 @@
 	"Shrink versions that have no diffs": "收缩没有差异的版本",
 	"User ID": "用户ID",
 	"Home": "首页",
+	"My Drafts": "My Drafts",
 	"User Settings": "用户设置",
 	"User Information": "用户信息",
 	"Basic Info": "基础信息",

src/client/js/app.jsx

@@ -21,10 +21,14 @@ import NotFoundPage from './components/NotFoundPage';
 import NotFoundAlert from './components/Page/NotFoundAlert';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
-import MyBookmarkList from './components/MyBookmarkList/MyBookmarkList';
+import RecentlyCreatedIcon from './components/Icons/RecentlyCreatedIcon';
+import MyDraftList from './components/MyDraftList/MyDraftList';
+import BookmarkIcon from './components/Icons/BookmarkIcon';
+import BookmarkList from './components/PageList/BookmarkList';
 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';
@@ -90,6 +94,8 @@ Object.assign(componentMappings, {
 
   'personal-setting': <PersonalSettings crowi={personalContainer} />,
 
+  'my-drafts': <MyDraftList />,
+
   'grw-fab-container': <Fab />,
 });
 
@@ -103,9 +109,10 @@ if (pageContainer.state.pageId != null) {
     'seen-user-list': <SeenUserList />,
     'liker-list': <LikerList />,
 
-    'user-bookmark-list': <MyBookmarkList />,
-    'user-created-list': <RecentCreated />,
-    // 'user-draft-list': <MyDraftList />,
+    'recent-created-icon': <RecentlyCreatedIcon />,
+    'user-created-list': <RecentCreated userId={pageContainer.state.creator._id} />,
+    'user-bookmark-icon': <BookmarkIcon />,
+    'user-bookmark-list': <BookmarkList userId={pageContainer.state.creator._id} />,
   });
 }
 if (pageContainer.state.creator != null) {
@@ -119,6 +126,7 @@ if (pageContainer.state.path != null) {
     'page': <Page />,
     'grw-subnav-container': <GrowiSubNavigation />,
     'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
+    'user-info': <UserInfo />,
     'display-switcher': <DisplaySwitcher />,
   });
 }

src/client/js/components/Icons/BookmarkIcon.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const BookmarkIcon = () => (
+
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+  >
+
+    <g transform="translate(-925.888 168.873)">
+      <rect width="20" height="20" transform="translate(925.888 -168.873)" fill="none" />
+      <path d="M936.092-168.527a1.141,1.141,0,0,1,.205.039,1.685,1.685,0,0,1,.185.068c.058.026.116.056.175.088a1.038,1.038,0,0,1,
+        .166.117,1.826,1.826,0,0,1,.146.146c.045.052.088.1.127.156a.8.8,0,0,1,.1.175l2.26,4.7,5.2.76a1.424,1.424,0,0,1,.7.311,1.413,
+        1.413,0,0,1,.449.643,1.294,1.294,0,0,1-.351,1.423l-3.8,3.8.876,5.28a1.225,1.225,0,0,1-.088.76,1.451,1.451,0,0,1-.5.6,1.456,
+        1.456,0,0,1-.838.253,1.614,1.614,0,0,1-.351-.039,1.316,1.316,0,0,1-.35-.137l-4.52-2.435-4.54,2.435a1.37,1.37,0,0,1-.682.176h-.156a.525.525,
+        0,0,1-.146-.02l-.137-.039a1.117,1.117,0,0,1-.136-.049,1.231,1.231,0,0,1-.136-.068c-.046-.026-.088-.052-.127-.077a1.462,1.462,
+        0,0,1-.5-.6,1.232,1.232,0,0,1-.087-.76l.877-5.28-3.8-3.8a1.29,1.29,0,0,1-.35-1.423,1.4,1.4,0,0,1,.448-.643,1.423,1.423,0,0,1,
+        .7-.311l5.2-.76,2.26-4.7a1.351,1.351,0,0,1,.526-.584,1.467,1.467,0,0,1,.78-.215C935.953-168.537,936.02-168.533,936.092-168.527Zm-2.49,
+        5.9-.41.84-6.1.9,4.415,4.415-.136.879-.9,5.275,5.412-2.891,5.411,2.891-.9-5.275-.137-.879,4.415-4.415-6.115-.9-2.676-5.587Z"
+      />
+    </g>
+  </svg>
+
+);
+
+export default BookmarkIcon;

src/client/js/components/Icons/RecentlyCreatedIcon.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const RecentlyCreatedIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+  >
+
+    <g transform="translate(-921.906 192.966)">
+
+      <rect
+        width="20"
+        height="20"
+        transform="translate(921.906 -192.966)"
+        fill="none"
+      />
+      <path
+        d="M933.752-189.286l.022-.009a3.3,3.3,0,0,1,1.556.927,2.991,2.991,0,0,1,.505.679,3.659,3.659,0,0,1,
+        .265.572c.038.126.069.245.091.356l-.911.9a6.484,6.484,0,0,1,1.086-.1c.177,0,.35.013.523.027.573-.571.93-.928,1.043-1.047a2.94,
+        2.94,0,0,0,.959-2.086,2.854,2.854,0,0,0-1.008-1.986,3.3,3.3,0,0,0-.9-.629,2.344,2.344,0,0,0-.986-.215,
+        2.836,2.836,0,0,0-2.053.91q-.3.28-10.478,10.478a.656.656,0,0,0-.149.232q-.066.28-1.391,4.651a.529.529,0,0,0,
+        .149.546c.036.032.084.073.1.086a.937.937,0,0,0,.124.057.585.585,0,0,0,.3-.007q3.493-1.147,4.57-1.461a.549.549,0,0,0,.124-.048.517.517,
+        0,0,0,.108-.083q.958-.952,2.5-2.483a2.017,2.017,0,0,0,.035-.513,6.356,6.356,0,0,1,.107-1.143l-2.558,2.531a4.537,4.537,0,0,0-.91-1.357,
+        4.672,4.672,0,0,0-1.556-1.043Zm.975-.953.033-.032a2.254,2.254,0,0,1,.207-.183,2.379,2.379,0,0,1,.447-.248,1.51,1.51,0,0,1,.637-.149,
+        1.418,1.418,0,0,1,.587.133,1.937,1.937,0,0,1,.555.4,2.714,2.714,0,0,1,.5.629,1.266,1.266,0,0,1,.173.612,1.926,1.926,0,0,1-.661,1.289.052.052,
+        0,0,1-.016.033l-.033.032-.048.049a4.42,4.42,0,0,0-.96-1.507,4.709,4.709,0,0,0-1.473-1.011Zm-9.692,13.375-1.794.6q.148-.5.546-1.73t.511-1.648a3.4,
+        3.4,0,0,1,1.521.926,3.151,3.151,0,0,1,.8,1.324q-.333.118-1.582.53Z"
+      />
+      <path
+        d="M938.7-176.431a.5.5,0,0,1-.359-.151l-2.276-2.355a.5.5,0,0,1-.14-.347v-3.425a.5.5,0,0,1,.5-.5h0a.5.5,0,0,1,.5.5h0v3.225l2.135
+        ,2.209a.5.5,0,0,1-.011.7h0A.49.49,0,0,1,938.7-176.431Z"
+      />
+      <path
+        d="M936.422-185.009a5.49,5.49,0,0,0-5.484,5.484,5.487,5.487,0,0,0,5.484,5.484,5.491,5.491,0,0,0,5.484-5.484A5.491,5.491,0,0,0,
+        936.422-185.009Zm0,9.97a4.487,4.487,0,0,1-4.487-4.487,4.486,4.486,0,0,1,4.487-4.486,4.486,4.486,0,0,1,4.487,4.486A4.487,
+        4.487,0,0,1,936.422-175.039Z"
+      />
+    </g>
+  </svg>
+);
+
+export default RecentlyCreatedIcon;

src/client/js/components/MyBookmarkList/MyBookmarkList.jsx

@@ -1,109 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import loggerFactory from '@alias/logger';
-import { withUnstatedContainers } from '../UnstatedUtils';
-
-
-import AppContainer from '../../services/AppContainer';
-import PageContainer from '../../services/PageContainer';
-import { toastError } from '../../util/apiNotification';
-
-import PaginationWrapper from '../PaginationWrapper';
-
-import Page from '../PageList/Page';
-
-const logger = loggerFactory('growi:MyBookmarkList');
-class MyBookmarkList extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      pages: [],
-      activePage: 1,
-      totalPages: 0,
-      pagingLimit: null,
-    };
-
-    this.handlePage = this.handlePage.bind(this);
-  }
-
-  componentWillMount() {
-    this.getMyBookmarkList(1);
-  }
-
-  async handlePage(selectPageNumber) {
-    await this.getMyBookmarkList(selectPageNumber);
-  }
-
-  async getMyBookmarkList(selectPageNumber) {
-    const { appContainer } = this.props;
-    const userId = appContainer.currentUserId;
-    const page = selectPageNumber;
-
-    try {
-      const { data } = await this.props.appContainer.apiv3.get(`/bookmarks/${userId}`, { page });
-      if (data.paginationResult == null) {
-        throw new Error('data must conclude \'paginateResult\' property.');
-      }
-      const {
-        docs: pages, totalDocs: totalPages, limit: pagingLimit, page: activePage,
-      } = data.paginationResult;
-      this.setState({
-        pages,
-        totalPages,
-        pagingLimit,
-        activePage,
-      });
-    }
-    catch (error) {
-      logger.error('failed to fetch data', error);
-      toastError(error, 'Error occurred in bookmark page list');
-    }
-  }
-
-  /**
-   * generate Elements of Page
-   *
-   * @param {any} pages Array of pages Model Obj
-   *
-   */
-  generatePageList(pages) {
-    return pages.map(page => (
-      <li key={`my-bookmarks:${page._id}`}>
-        <Page page={page.page} />
-      </li>
-    ));
-  }
-
-
-  render() {
-    return (
-      <div className="page-list-container-create">
-        <ul className="page-list-ul page-list-ul-flat mb-3">
-          {this.generatePageList(this.state.pages)}
-        </ul>
-        <PaginationWrapper
-          activePage={this.state.activePage}
-          changePage={this.handlePage}
-          totalItemsCount={this.state.totalPages}
-          pagingLimit={this.state.pagingLimit}
-        />
-      </div>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const MyBookmarkListWrapper = withUnstatedContainers(MyBookmarkList, [AppContainer, PageContainer]);
-
-MyBookmarkList.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-};
-
-export default MyBookmarkListWrapper;

src/client/js/components/MyDraftList/Draft.jsx

@@ -82,20 +82,21 @@ class Draft extends React.Component {
 
   renderAccordionTitle(isExist) {
     const { isPanelExpanded } = this.state;
-
-    const iconClass = isPanelExpanded ? 'caret-opened' : '';
+    const { t } = this.props;
+    const iconClass = isPanelExpanded ? 'fa-rotate-90' : '';
 
     return (
       <span>
-        <i className={`caret ${iconClass}`}></i>
-        <span className="mx-2" onClick={() => this.setState({ isPanelExpanded: !isPanelExpanded })}>
+
+        <span className="mr-2 draft-path" onClick={() => this.setState({ isPanelExpanded: !isPanelExpanded })}>
+          <i className={`fa fa-fw fa-angle-right mr-2 ${iconClass}`}></i>
           {this.props.path}
         </span>
         { isExist && (
-          <span>({this.props.t('page exists')})</span>
+          <span className="badge badge-warning">{t('page exists')}</span>
         ) }
         { !isExist && (
-          <span className="badge badge-secondary">draft</span>
+          <span className="badge badge-info">draft</span>
         ) }
 
         <a className="ml-2" href={this.props.path}><i className="icon icon-login"></i></a>

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -68,8 +68,8 @@ class MyDraftList extends React.Component {
   }
 
   getCurrentDrafts(selectPageNumber) {
-    // TODO implement temporarily paging number only this component (this paging size is pageLimitationL).
-    const limit = this.state.pagingLimit;
+
+    const limit = 50; // implement only this component.(this default value is 50 (pageLimitationL))
 
     const totalDrafts = this.state.drafts.length;
     const activePage = selectPageNumber;
@@ -134,15 +134,16 @@ class MyDraftList extends React.Component {
     const totalCount = this.state.totalDrafts;
 
     return (
-      <div>
-
+      <div className="page-list-container-create ">
+        <h1>My Drafts</h1>
+        <hr />
         { totalCount === 0
-          && <span>No drafts yet.</span>
+          && <span className="mt-2">No drafts yet.</span>
         }
 
         { totalCount > 0 && (
           <React.Fragment>
-            <div className="d-flex justify-content-between">
+            <div className="d-flex justify-content-between mt-2">
               <h4>Total: {totalCount} drafts</h4>
               <div className="align-self-center">
                 <button type="button" className="btn btn-sm btn-outline-danger" onClick={this.clearAllDrafts}>
@@ -152,7 +153,7 @@ class MyDraftList extends React.Component {
               </div>
             </div>
 
-            <div className="tab-pane mt-5 accordion" id="draft-list">
+            <div className="tab-pane mt-2 accordion" id="draft-list">
               {draftList}
             </div>
             <PaginationWrapper
@@ -160,6 +161,7 @@ class MyDraftList extends React.Component {
               changePage={this.handlePage}
               totalItemsCount={this.state.totalDrafts}
               pagingLimit={this.state.pagingLimit}
+              align="center"
               size="sm"
             />
           </React.Fragment>

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

@@ -22,7 +22,6 @@ import ThreeStrandedButton from './ThreeStrandedButton';
 
 import AuthorInfo from './AuthorInfo';
 import DrawerToggler from './DrawerToggler';
-import UserPicture from '../User/UserPicture';
 
 import PageManagement from '../Page/PageManagement';
 
@@ -65,7 +64,8 @@ const PagePathNav = ({ pageId, pagePath, isPageForbidden }) => {
   );
 };
 
-// eslint-disable-next-line react/prop-types
+/* eslint-disable react/prop-types */
+// eslint-disable-next-line no-unused-vars
 const UserPagePathNav = ({ pageId, pagePath }) => {
   const linkedPagePath = new LinkedPagePath(pagePath);
   const latterLink = <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />;
@@ -85,10 +85,11 @@ const UserPagePathNav = ({ pageId, pagePath }) => {
   );
 };
 
-/* eslint-disable react/prop-types */
+// eslint-disable-next-line no-unused-vars
 const UserInfo = ({ pageUser }) => {
   return (
     <div className="grw-users-info d-flex align-items-center">
+      {/* eslint-disable-next-line react/jsx-no-undef */}
       <UserPicture user={pageUser} />
 
       <div className="users-meta">
@@ -170,18 +171,7 @@ const GrowiSubNavigation = (props) => {
               <TagLabels editorMode={editorMode} />
             </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/PageComments.jsx

@@ -170,7 +170,7 @@ class PageComments extends React.Component {
               className="btn-comment-reply"
               onClick={() => { return this.replyButtonClickedHandler(commentId) }}
             >
-              <i className="icon-fw icon-action-redo"></i> Reply
+              <i className="icon-fw icon-action-undo"></i> Reply
             </Button>
           </div>
         )}

src/client/js/components/PageList.jsx

@@ -15,7 +15,7 @@ const PageList = (props) => {
   const { appContainer, pageContainer, t } = props;
   const { path } = pageContainer.state;
   const [pages, setPages] = useState(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
 
   const [activePage, setActivePage] = useState(1);
   const [totalPages, setTotalPages] = useState(0);
@@ -30,7 +30,7 @@ const PageList = (props) => {
     const res = await appContainer.apiv3Get('/pages/list', { path, page });
 
     setPages(res.data.pages);
-    setIsLoading(true);
+    setIsLoading(false);
     setTotalPages(res.data.totalCount);
     setLimit(res.data.limit);
   }, [appContainer, path, activePage]);
@@ -40,7 +40,7 @@ const PageList = (props) => {
   }, [updatePageList]);
 
 
-  if (isLoading === false) {
+  if (isLoading) {
     return (
       <div className="wiki">
         <div className="text-muted test-center">

src/client/js/components/PageList/BookmarkList.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+
+import AppContainer from '../../services/AppContainer';
+import { toastError } from '../../util/apiNotification';
+
+import PaginationWrapper from '../PaginationWrapper';
+
+import Page from './Page';
+
+const logger = loggerFactory('growi:BookmarkList');
+
+const BookmarkList = (props) => {
+  const { t, appContainer, userId } = props;
+
+  const [pages, setPages] = useState([]);
+
+  const [activePage, setActivePage] = useState(1);
+  const [totalItemsCount, setTotalItemsCount] = useState(0);
+  const [pagingLimit, setPagingLimit] = useState(10);
+
+  const setPageNumber = (selectedPageNumber) => {
+    setActivePage(selectedPageNumber);
+  };
+
+  const getMyBookmarkList = useCallback(async() => {
+    const page = activePage;
+
+    try {
+      const res = await appContainer.apiv3Get(`/bookmarks/${userId}`, { page });
+      const { paginationResult } = res.data;
+
+      setPages(paginationResult.docs);
+      setTotalItemsCount(paginationResult.totalDocs);
+      setPagingLimit(paginationResult.limit);
+    }
+    catch (error) {
+      logger.error('failed to fetch data', error);
+      toastError(error, 'Error occurred in bookmark page list');
+    }
+  }, [appContainer, activePage, userId]);
+
+  useEffect(() => {
+    getMyBookmarkList();
+  }, [getMyBookmarkList]);
+
+  /**
+   * generate Elements of Page
+   *
+   * @param {any} pages Array of pages Model Obj
+   *
+   */
+  const generatePageList = pages.map(page => (
+    <li key={`my-bookmarks:${page._id}`}>
+      <Page page={page.page} />
+    </li>
+  ));
+
+  return (
+    <div className="page-list-container-create">
+      {pages.length === 0 ? t('No bookmarks yet') : (
+        <>
+          <ul className="page-list-ul page-list-ul-flat mb-3">
+            {generatePageList}
+          </ul>
+          <PaginationWrapper
+            activePage={activePage}
+            changePage={setPageNumber}
+            totalItemsCount={totalItemsCount}
+            pagingLimit={pagingLimit}
+            align="center"
+            size="sm"
+          />
+        </>
+      )}
+    </div>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const BookmarkListWrapper = withUnstatedContainers(BookmarkList, [AppContainer]);
+
+BookmarkList.propTypes = {
+  t: PropTypes.func.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  userId: PropTypes.string.isRequired,
+};
+
+export default withTranslation()(BookmarkListWrapper);

src/client/js/components/PaginationWrapper.jsx

@@ -5,9 +5,6 @@ import { withTranslation } from 'react-i18next';
 
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 
-import { withUnstatedContainers } from './UnstatedUtils';
-import AppContainer from '../services/AppContainer';
-
 class PaginationWrapper extends React.Component {
 
   constructor(props) {
@@ -181,22 +178,19 @@ class PaginationWrapper extends React.Component {
 
 }
 
-const PaginationWrappered = withUnstatedContainers(PaginationWrapper, [AppContainer]);
-
 PaginationWrapper.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   activePage: PropTypes.number.isRequired,
   changePage: PropTypes.func.isRequired,
   totalItemsCount: PropTypes.number.isRequired,
-  pagingLimit: PropTypes.number,
+  pagingLimit: PropTypes.number.isRequired,
   align: PropTypes.string,
   size: PropTypes.string,
 };
+
 PaginationWrapper.defaultProps = {
   align: 'left',
   size: 'md',
-  pagingLimit: PropTypes.number,
 };
 
-export default withTranslation()(PaginationWrappered);
+export default withTranslation()(PaginationWrapper);

src/client/js/components/RecentCreated/RecentCreated.jsx

@@ -4,9 +4,8 @@ import PropTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
-import PaginationWrapper from '../PaginationWrapper';
-
 import Page from '../PageList/Page';
+import PaginationWrapper from '../PaginationWrapper';
 
 class RecentCreated extends React.Component {
 
@@ -17,7 +16,7 @@ class RecentCreated extends React.Component {
       pages: [],
       activePage: 1,
       totalPages: 0,
-      pagingLimit: null,
+      pagingLimit: 10,
     };
 
     this.handlePage = this.handlePage.bind(this);
@@ -35,7 +34,6 @@ class RecentCreated extends React.Component {
   async getRecentCreatedList(selectedPage) {
     const { appContainer, userId } = this.props;
     const page = selectedPage;
-    // const userId = appContainer.currentUserId;
 
     // pagesList get and pagination calculate
     const res = await appContainer.apiv3Get(`/users/${userId}/recent`, { page });
@@ -68,11 +66,12 @@ class RecentCreated extends React.Component {
     const pageList = this.generatePageList(this.state.pages);
 
     return (
-      <div>
-        <ul className="page-list-ul page-list-ul-flat mb-3">
+      <div className="page-list-container-create">
+        <ul className="page-list-ul page-list-ul-flat">
           {pageList}
         </ul>
         <PaginationWrapper
+          align="center"
           activePage={this.state.activePage}
           changePage={this.handlePage}
           totalItemsCount={this.state.totalPages}

src/client/js/components/Sidebar/SidebarNav.jsx

@@ -71,7 +71,7 @@ class SidebarNav extends React.Component {
         </div>
         <div className="grw-sidebar-nav-secondary-container">
           {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
-          {isLoggedIn && <SecondaryItem label="Draft" iconName="file_copy" href={`/user/${currentUsername}#user-draft-list`} />}
+          {isLoggedIn && <SecondaryItem label="Draft" iconName="file_copy" href="/me/drafts" />}
           <SecondaryItem label="Help" iconName="help" href="https://docs.growi.org" isBlank />
           {isLoggedIn && <SecondaryItem label="Trash" iconName="delete" href="/trash" />}
         </div>

src/client/js/components/TableOfContents.jsx

@@ -11,6 +11,8 @@ import { withUnstatedContainers } from './UnstatedUtils';
 import TopOfTableContents from './TopOfTableContents';
 import StickyStretchableScroller from './StickyStretchableScroller';
 
+import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
+
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
 
@@ -21,6 +23,8 @@ const logger = loggerFactory('growi:TableOfContents');
 const TableOfContents = (props) => {
 
   const { pageContainer, navigationContainer, isGuestUserMode } = props;
+  const { pageUser } = pageContainer.state;
+  const isUserPage = pageUser != null;
 
   const calcViewHeight = useCallback(() => {
     // calculate absolute top of '#revision-toc' element
@@ -28,6 +32,9 @@ const TableOfContents = (props) => {
     const containerTop = containerElem.getBoundingClientRect().top;
 
     // window height - revisionToc top - .system-version - .grw-fab-container height - top-of-table-contents height
+    if (isUserPage) {
+      return window.innerHeight - containerTop - 20 - 155 - 26 - 40;
+    }
     return window.innerHeight - containerTop - 20 - 155 - 26;
   }, []);
 
@@ -50,13 +57,26 @@ const TableOfContents = (props) => {
       >
         <div
           id="revision-toc-content"
-          className="revision-toc-content"
-        // eslint-disable-next-line react/no-danger
+          className="revision-toc-content top-of-table-contents"
+         // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
           __html: tocHtml,
         }}
         />
       </StickyStretchableScroller>
+
+      { isUserPage && (
+      <div className="mt-3 d-flex justify-content-around">
+        <a className="btn btn-outline-secondary btn-sm" href="#">
+          <i className="mr-2 icon-star"></i>
+          <span>Bookmarks</span>
+        </a>
+        <a className="btn btn-outline-secondary btn-sm" href="#">
+          <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
+          <span>Recently Created</span>
+        </a>
+      </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/_comment_growi.scss

@@ -33,8 +33,8 @@
   }
 
   .page-comments-row {
-    margin: 30px 0px;
-    border-top: 5px solid;
+    // offset margin left to apply bg-color
+    margin: 30px 0px 30px -15px;
   }
 
   .page-comments {
@@ -98,13 +98,8 @@
   }
   // reply button
   .btn.btn-comment-reply {
-    width: 120px;
     margin-top: 0.5em;
-    margin-right: 15px;
-
-    border-top: none;
-    border-right: none;
-    border-left: none;
+    border: none;
   }
 
   // display cheatsheet for comment form only

src/client/styles/scss/_draft.scss

@@ -1,14 +1,5 @@
 .draft-list-item {
   .panel-heading {
-    .caret {
-      transition: 0.4s;
-      transform: rotate(-90deg);
-
-      &.caret-opened {
-        transform: rotate(0deg);
-      }
-    }
-
     .icon-container {
       a:hover {
         text-decoration: unset;
@@ -30,4 +21,7 @@
   .draft-copy {
     cursor: pointer;
   }
+  .draft-path {
+    cursor: pointer;
+  }
 }

src/client/styles/scss/_layout_growi.scss

@@ -27,7 +27,7 @@
     position: sticky;
     // growisubnavigation + grw-navbar-boder
     top: calc(100px + 4px);
-    min-width: 100%;
+    width: 250px;
     margin-top: 5px;
 
     .revision-toc-content {

src/client/styles/scss/_page_list.scss

@@ -9,7 +9,7 @@ body .page-list {
     margin: 0;
 
     > li {
-      margin: 0;
+      margin: 0.5rem;
       list-style: none;
 
       > a {
@@ -72,3 +72,13 @@ body .page-list {
     background-color: $gray-300;
   }
 }
+
+.grw-page-list-m {
+  .grw-page-list-title-m {
+    svg {
+      width: 35px;
+      height: 35px;
+      margin-bottom: 6px;
+    }
+  }
+}

src/client/styles/scss/_toc.scss

@@ -2,6 +2,8 @@
   flex-wrap: wrap;
 
   .grw-btn-top-of-table {
+    width: 35px;
+    height: 35px;
     svg {
       width: 16px;
       height: 16px;
@@ -30,7 +32,9 @@
 
   .revision-toc-content {
     padding: 10px;
-
+    li {
+      margin: 6px;
+    }
     > ul {
       padding-left: 0;
       ul {
@@ -41,7 +45,15 @@
     // first level of li
     > ul > li {
       padding: 5px;
-      margin: 4px 4px 4px 17px;
+      margin-right: 4px;
+      margin-left: 17px;
+    }
+  }
+
+  .grw-icon-container-recently-created {
+    svg {
+      width: 14px;
+      height: 14px;
     }
   }
 }

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/client/styles/scss/theme/_apply-colors-dark.scss

@@ -113,11 +113,6 @@ ul.pagination {
     button.page-link {
       @extend .btn-dark;
     }
-    &.active {
-      button {
-        @extend .active;
-      }
-    }
   }
 }
 
@@ -354,6 +349,12 @@ body.on-edit {
   }
 }
 
+.growi .main {
+  .page-comments-row {
+    background: $bgcolor-subnav;
+  }
+}
+
 /*
  * GROWI tags
  */
@@ -363,3 +364,14 @@ body.on-edit {
     background-color: $bgcolor-tags;
   }
 }
+
+/*
+ * GROWI user page
+ */
+.grw-page-list-m {
+  .grw-page-list-title-m {
+    svg {
+      fill: $color-global;
+    }
+  }
+}

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -279,6 +279,12 @@ $table-hover-bg: $bgcolor-table-hover;
   }
 }
 
+.growi .main {
+  .page-comments-row {
+    background: $bgcolor-subnav;
+  }
+}
+
 /*
  * GROWI tags
  */
@@ -288,3 +294,14 @@ $table-hover-bg: $bgcolor-table-hover;
     background-color: $bgcolor-tags;
   }
 }
+
+/*
+ * GROWI user page
+ */
+.grw-page-list-m {
+  .grw-page-list-title-m {
+    svg {
+      fill: $color-global;
+    }
+  }
+}

src/client/styles/scss/theme/_apply-colors.scss

@@ -118,6 +118,36 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
+// Pagination
+ul.pagination {
+  li.page-item.disabled {
+    button.page-link {
+      color: $gray-400;
+    }
+  }
+  li.page-item.active {
+    button.page-link {
+      color: color-yiq($primary);
+      background-color: $primary;
+      &:hover {
+        color: color-yiq($primary);
+        background-color: $primary;
+      }
+    }
+  }
+  li.page-item {
+    button.page-link {
+      color: $primary;
+      border-color: $secondary;
+      &:hover,
+      &:active,
+      &:focus {
+        color: $primary;
+      }
+    }
+  }
+}
+
 //
 //== Apply to Handsontable
 //
@@ -433,16 +463,12 @@ body.on-edit {
  * GROWI comment form
  */
 .growi .main {
-  .page-comments-row {
-    border-top-color: $border-color-theme;
-  }
-
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
-    background-color: darken($bgcolor-global, 4%);
+    background-color: $bgcolor-global;
 
     &:before {
-      border-right-color: darken($bgcolor-global, 4%);
+      border-right-color: $bgcolor-global;
     }
 
     .nav.nav-tabs {
@@ -465,7 +491,6 @@ body.on-edit {
         > li.nav-item > a.nav-link {
           color: inherit;
         }
-
         a {
           &.hover {
             background-color: darken($bgcolor-global, 4%);

src/server/routes/index.js

@@ -116,6 +116,8 @@ module.exports = function(crowi, app) {
   app.get('/me'                       , loginRequiredStrictly , me.index);
   // external-accounts
   app.get('/me/external-accounts'                         , loginRequiredStrictly , me.externalAccounts.list);
+  // my drafts
+  app.get('/me/drafts'                , loginRequiredStrictly, me.drafts.list);
 
   app.get('/:id([0-9a-z]{24})'       , loginRequired , page.redirector);
   app.get('/_r/:id([0-9a-z]{24})'    , loginRequired , page.redirector); // alias

src/server/routes/me.js

@@ -128,6 +128,11 @@ module.exports = function(crowi, app) {
       });
   };
 
+  actions.drafts = {};
+  actions.drafts.list = async function(req, res) {
+    return res.render('me/drafts');
+  };
+
   actions.updates = function(req, res) {
     res.render('me/update', {
     });

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

@@ -6,18 +6,18 @@
 
 
 {% block content_main %}
-  <div class="row">
+  <div class="d-flex justify-content-between">
 
-    <div class="col grw-page-content-container">
+    <div class="grw-page-content-container flex-grow-1">
 
       {% include '../widget/page_content.html' %}
 
     </div>
 
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
-        <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
-          <div id="revision-toc-content" class="revision-toc-content"></div>
-        </div>
+    <div class="d-none d-lg-block revision-toc-container">
+      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
+        <div id="revision-toc-content" class="revision-toc-content"></div>
+      </div>
     </div>
 
   </div>

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

@@ -6,15 +6,15 @@
 
 
 {% block content_main %}
-  <div class="row">
+  <div class="d-flex justify-content-between">
 
-    <div class="col grw-page-content-container">
+    <div class="grw-page-content-container flex-grow-1">
 
       {% include '../widget/page_content.html' %}
 
     </div>
 
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
+    <div class="d-none d-lg-block revision-toc-container">
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>

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

@@ -15,13 +15,13 @@
 
 {% block content_main %}
   <div
-    class="row"
+    class="d-flex justify-content-between"
     id="is-shared-page"
     data-share-link-expired-at="{% if sharelink.expiredAt %}{{ sharelink.expiredAt|datetz('Y/m/d H:i:s')}}{% endif %}"
     data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}"
   >
     {% block content_page %}
-      <div class="col grw-page-content-container">
+      <div class="grw-page-content-container flex-grow-1">
         <div id="share-link-alert"></div>
 
         {% include '../widget/page_content.html' %}
@@ -33,7 +33,7 @@
       </div>
 
       {# relocate #revision-toc #}
-      <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
+      <div class="d-none d-lg-block revision-toc-container">
         <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
           <div id="revision-toc-content" class="revision-toc-content"></div>
         </div>

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

@@ -6,18 +6,19 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="row">
+  <div class="border-bottom pb-2">
+    <div class="user-info" id="user-info">
+    </div>
+  </div>
 
-    <div class="col grw-page-content-container">
+  <div class="d-flex justify-content-between">
+    <div class="grw-page-content-container flex-grow-1">
 
       {#
-        # ensure to insert 'user_page_content' widget to here
-        #
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
       <div class="mb-5 user-page-content-container d-edit-none d-print-none">
-        {% include '../widget/user_page_content.html' %}
       </div>
 
       {% block content_main_before %}
@@ -34,7 +35,7 @@
     </div> {# /.col- #}
 
     {# relocate #revision-toc #}
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
+    <div class="d-none d-lg-block revision-toc-container">
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
@@ -49,6 +50,30 @@
 {% block content_main_after %}
   {% include 'widget/comments.html' %}
 
+  {% if page %}
+    <div class="grw-page-list-m my-5">
+      <h1 class="grw-page-list-title-m border-bottom pb-2 mb-3">
+        <i id="user-bookmark-icon"></i>
+        Bookmarks
+      </h1>
+      <div class="page-list" id="user-bookmark-list">
+        <div class="page-list-container">
+        </div>
+      </div>
+    </div>
+
+    <div class="grw-page-list-m my-5">
+      <h1 class="grw-page-list-title-m border-bottom pb-2 mb-3">
+        <i id="recent-created-icon"></i>
+        Recently Created
+      </h2>
+      <div class="page-list" id="user-created-list">
+        <div class="page-list-container">
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
   {% if page %}
     {% include '../widget/page_attachments.html' %}
   {% endif %}

src/server/views/layout-growi/widget/comments.html

@@ -1,8 +1,8 @@
 <div class="page-comments-row row d-edit-none d-print-none">
 
-  <div class="page-comments col-xl-7 col-lg-9">
+  <div class="page-comments col-lg-10 my-5">
 
-    <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>
+    <h1 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h1>
 
     <div class="page-comments-list" id="page-comments-list"></div>
 

src/server/views/me/drafts.html

@@ -0,0 +1,18 @@
+{% extends '../layout-growi/base/layout.html' %}
+
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('My Drafts')) }}{% endblock %}
+
+{% block content_header %}
+{% endblock %}
+
+{% block content_main %}
+<div id="content-main" class="content-main container">
+  <div id="my-drafts"></div>
+</div>
+{% endblock content_main %}
+
+{% block content_footer %}
+{% endblock content_footer %}
+
+{% block layout_footer %}
+{% endblock layout_footer %}

src/server/views/widget/user_page_content.html

@@ -1,65 +0,0 @@
-<div class="user-page-content mb-4">
-  <ul class="nav nav-tabs user-page-content-menu mb-4" role="tablist">
-    <li class="nav-item">
-      <a class="nav-link active" href="#user-bookmark-list" role="tab" data-toggle="tab">
-        <i class="icon-star"></i>
-        <span class="d-none d-sm-inline">Bookmarks</span>
-      </a>
-    </li>
-    <li class="nav-item">
-      <a class="nav-link" href="#user-created-list" role="tab" data-toggle="tab">
-        <i class="icon-clock"></i>
-        <span class="d-none d-sm-inline">Recently Created</span>
-      </a>
-    </li>
-
-    {% if user._id.toString() == pageUser._id.toString() %}
-    <li class="nav-item">
-      <a class="nav-link" href="/me" role="tab">
-        <i class="icon-wrench"></i>
-        <span class="d-none d-sm-inline">Settings</span>
-      </a>
-    </li>
-    {% endif %}
-  </ul>
-
-  <div class="user-page-content-tab tab-content">
-
-    <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
-      {% if bookmarkList.length == 0 %}
-        {{t('No bookmarks yet')}}.
-      {% else %}
-        <div class="page-list-container">
-          {# {% include 'page_list.html' with { pages: bookmarkList, pagePropertyName: 'page' } %} #}
-        </div>
-      {% endif %}
-    </div>
-
-    <div class="tab-pane user-created-list page-list" id="user-created-list">
-      <div class="page-list-container">
-      </div>
-    </div>
-
-    {% if user._id.toString() == pageUser._id.toString() %}
-    <div class="tab-pane user-draft-list page-list" id="user-draft-list">
-      <div class="page-list-container">
-      </div>
-    </div>
-    {% endif %}
-  </div>
-</div>
-
-<script>
-  function activateTab(tab){
-    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
-  };
-
-  window.addEventListener('load', function(e) {
-    // hash on page
-    if (location.hash) {
-      if (location.hash == '#user-draft-list') {
-        activateTab('user-draft-list');
-      }
-    }
-  });
-</script>