Merge pull request #3304 from weseek/imprv/gw4863-jump-to-comment-area

Imprv/gw4863 jump to comment area

src/client/js/app.jsx

@@ -31,7 +31,6 @@ import BookmarkList from './components/PageList/BookmarkList';
 import LikerList from './components/User/LikerList';
 import Fab from './components/Fab';
 import PersonalSettings from './components/Me/PersonalSettings';
-import UserContentsLinks from './components/UserContentsLinks';
 import GrowiSubNavigation from './components/Navbar/GrowiSubNavigation';
 import GrowiSubNavigationSwitcher from './components/Navbar/GrowiSubNavigationSwitcher';
 
@@ -114,7 +113,6 @@ if (pageContainer.state.pageId != null) {
 
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-bookmark-icon': <BookmarkIcon />,
-    'grw-user-contents-links': <UserContentsLinks />,
   });
 }
 if (pageContainer.state.creator != null) {

src/client/js/components/ContentLinkButtons.jsx

@@ -0,0 +1,89 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+import NavigationContainer from '../services/NavigationContainer';
+import PageContainer from '../services/PageContainer';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+
+import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
+
+const WIKI_HEADER_LINK = 120;
+
+/**
+ * @author Yuki Takei <yuki@weseek.co.jp>
+ *
+ */
+const ContentLinkButtons = (props) => {
+
+  const { navigationContainer, pageContainer } = props;
+  const { pageUser } = pageContainer.state;
+  const { isPageExist } = pageContainer.state;
+
+  // get element for smoothScroll
+  const getCommentListDom = useMemo(() => { return document.getElementById('page-comments-list') }, []);
+  const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
+  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
+
+
+  const CommentLinkButton = () => {
+    return (
+      <div className="mt-3">
+        <button
+          type="button"
+          className="btn btn-outline-secondary btn-sm btn-block"
+          onClick={() => navigationContainer.smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
+        >
+          <i className="mr-2 icon-fw icon-bubbles"></i>
+          <span>Comments</span>
+        </button>
+      </div>
+    );
+  };
+
+  const BookMarkLinkButton = () => {
+    return (
+      <button
+        type="button"
+        className="btn btn-outline-secondary btn-sm px-2"
+        onClick={() => navigationContainer.smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
+      >
+        <i className="mr-2 icon-star"></i>
+        <span>Bookmarks</span>
+      </button>
+
+    );
+  };
+
+  const RecentlyCreatedLinkButton = () => {
+    return (
+      <button
+        type="button"
+        className="btn btn-outline-secondary btn-sm px-3"
+        onClick={() => navigationContainer.smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
+      >
+        <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
+        <span>Recently Created</span>
+      </button>
+
+    );
+  };
+
+  return (
+    <>
+      {isPageExist && <CommentLinkButton />}
+
+      <div className="mt-3 d-flex justify-content-between">
+        {pageUser && <><BookMarkLinkButton /><RecentlyCreatedLinkButton /></>}
+      </div>
+    </>
+  );
+
+};
+
+ContentLinkButtons.propTypes = {
+  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default withUnstatedContainers(ContentLinkButtons, [NavigationContainer, PageContainer]);

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -8,7 +8,7 @@ import Editor from '../PageEditor';
 import Page from '../Page';
 import UserInfo from '../User/UserInfo';
 import TableOfContents from '../TableOfContents';
-import UserContentsLinks from '../UserContentsLinks';
+import ContentLinkButtons from '../ContentLinkButtons';
 import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
@@ -37,7 +37,7 @@ const DisplaySwitcher = (props) => {
                   <div id="revision-toc" className="revision-toc">
                     <TableOfContents />
                   </div>
-                  {pageUser && <UserContentsLinks />}
+                  <ContentLinkButtons />
                 </div>
               </div>
             </div>

src/client/js/components/UserContentsLinks.jsx

@@ -1,54 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import loggerFactory from '@alias/logger';
-
-import NavigationContainer from '../services/NavigationContainer';
-
-import { withUnstatedContainers } from './UnstatedUtils';
-
-import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
-
-// eslint-disable-next-line no-unused-vars
-const logger = loggerFactory('growi:cli:UserContentsLinks');
-const WIKI_HEADER_LINK = 120;
-
-/**
- * @author Yuki Takei <yuki@weseek.co.jp>
- *
- */
-const UserContentsLinks = (props) => {
-
-  const { navigationContainer } = props;
-
-  // get element for smoothScroll
-  const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
-  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
-
-  return (
-    <div className="mt-3 d-flex justify-content-around">
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm"
-        onClick={() => navigationContainer.smoothScrollIntoView(getBookMarkListHeaderDom, WIKI_HEADER_LINK)}
-      >
-        <i className="mr-2 icon-star"></i>
-        <span>Bookmarks</span>
-      </button>
-      <button
-        type="button"
-        className="btn btn-outline-secondary btn-sm"
-        onClick={() => navigationContainer.smoothScrollIntoView(getRecentlyCreatedListHeaderDom, WIKI_HEADER_LINK)}
-      >
-        <i className="grw-icon-container-recently-created mr-2"><RecentlyCreatedIcon /></i>
-        <span>Recently Created</span>
-      </button>
-    </div>
-  );
-
-};
-
-UserContentsLinks.propTypes = {
-  navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
-};
-
-export default withUnstatedContainers(UserContentsLinks, [NavigationContainer]);

src/client/styles/scss/_toc.scss

@@ -25,11 +25,11 @@
       margin-left: 17px;
     }
   }
+}
 
-  .grw-icon-container-recently-created {
-    svg {
-      width: 14px;
-      height: 14px;
-    }
+.grw-icon-container-recently-created {
+  svg {
+    width: 14px;
+    height: 14px;
   }
 }