Merge pull request #2924 from weseek/imprv/3803-move-bookmark-list

Imprv/3803 move bookmark list

src/client/js/app.jsx

@@ -23,6 +23,7 @@ import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
 import RecentlyCreatedIcon from './components/Icons/RecentlyCreatedIcon';
 import MyDraftList from './components/MyDraftList/MyDraftList';
+import BookmarkIcon from './components/Icons/BookmarkIcon';
 import MyBookmarkList from './components/MyBookmarkList/MyBookmarkList';
 import SeenUserList from './components/User/SeenUserList';
 import LikerList from './components/User/LikerList';
@@ -100,6 +101,7 @@ if (pageContainer.state.pageId != null) {
 
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-created-list': <RecentCreated userId={pageContainer.state.creator._id} />,
+    'user-bookmark-icon': <BookmarkIcon />,
     'user-bookmark-list': <MyBookmarkList />,
     // 'user-draft-list': <MyDraftList />,
   });

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/MyBookmarkList/MyBookmarkList.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { withTranslation } from 'react-i18next';
 import loggerFactory from '@alias/logger';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -77,10 +77,14 @@ class MyBookmarkList extends React.Component {
     ));
   }
 
+  renderNoBookmarkList() {
+    const { t } = this.props;
+    return t('No bookmarks yet');
+  }
 
-  render() {
+  renderBookmarkList() {
     return (
-      <div className="page-list-container-create">
+      <>
         <ul className="page-list-ul page-list-ul-flat mb-3">
           {this.generatePageList(this.state.pages)}
         </ul>
@@ -90,7 +94,20 @@ class MyBookmarkList extends React.Component {
           totalItemsCount={this.state.totalPages}
           pagingLimit={this.state.pagingLimit}
         />
-      </div>
+      </>
+    );
+  }
+
+
+  render() {
+    return (
+      <>
+        <div className="page-list-container-create">
+          {/* TODO show a message in case of that there is no bookmark in user pages by gw4156 */}
+          {/* {this.state.totalPages === 0 ? this.renderNoBookmarkList() : this.renderBookmarkList()} */}
+          {this.renderBookmarkList()}
+        </div>
+      </>
     );
   }
 
@@ -102,8 +119,9 @@ class MyBookmarkList extends React.Component {
 const MyBookmarkListWrapper = withUnstatedContainers(MyBookmarkList, [AppContainer, PageContainer]);
 
 MyBookmarkList.propTypes = {
+  t: PropTypes.func.isRequired,
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
-export default MyBookmarkListWrapper;
+export default withTranslation()(MyBookmarkListWrapper);

src/client/styles/scss/_layout_growi.scss

@@ -36,8 +36,8 @@
   }
 }
 
-.grw-recently-created {
-  .recently-created-title {
+.grw-page-list-m {
+  .grw-page-list-title-m {
     svg {
       width: 35px;
       height: 35px;

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

@@ -314,8 +314,8 @@ body.on-edit {
 /*
  * GROWI user page
  */
-.grw-recently-created {
-  .recently-created-title {
+.grw-page-list-m {
+  .grw-page-list-title-m {
     svg {
       fill: $color-global;
     }

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

@@ -237,3 +237,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/server/views/layout-growi/user_page.html

@@ -16,13 +16,10 @@
     <div class="col grw-page-content-container">
 
       {#
-        # 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 %}
@@ -55,12 +52,23 @@
   {% include 'widget/comments.html' %}
 
   {% if page %}
-    <div class="grw-recently-created">
-      <h1 class="recently-created-title border-bottom pb-2">
+    <div class="grw-page-list-m">
+      <h1 class="grw-page-list-title-m border-bottom pb-2">
+        <i id="user-bookmark-icon"></i>
+        Bookmarks
+      </h2>
+      <div class="page-list" id="user-bookmark-list">
+        <div class="page-list-container">
+        </div>
+      </div>
+    </div>
+
+    <div class="grw-page-list-m">
+      <h1 class="grw-page-list-title-m border-bottom pb-2">
         <i id="recent-created-icon"></i>
         Recently Created
       </h2>
-      <div class="user-created-list page-list" id="user-created-list">
+      <div class="page-list" id="user-created-list">
         <div class="page-list-container">
         </div>
       </div>

src/server/views/widget/user_page_content.html

@@ -1,38 +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>
-</div>