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

src/client/js/app.jsx

@@ -126,7 +126,7 @@ if (pageContainer.state.path != null) {
     'page': <Page />,
     'grw-subnav-container': <GrowiSubNavigation />,
     'grw-subnav-switcher-container': <GrowiSubNavigationSwitcher />,
-    'user-info': <UserInfo />,
+    'user-info': <UserInfo pageUser={pageContainer.state.pageUser} />,
     'display-switcher': <DisplaySwitcher />,
   });
 }

src/client/js/components/CustomNavigation.jsx

@@ -76,10 +76,9 @@ export const CustomNav = (props) => {
             return (
               <NavItem
                 key={key}
-                type="button"
-                className={`p-0 grw-custom-navtab ${isActive && 'active'}}`}
+                className={`p-0 grw-custom-navtab ${isActive && 'active'}`}
               >
-                <NavLink key={key} innerRef={elm => registerNavLink(key, elm)} disabled={!isLinkEnabled} onClick={() => navLinkClickHandler(key)}>
+                <NavLink type="button" key={key} innerRef={elm => registerNavLink(key, elm)} disabled={!isLinkEnabled} onClick={() => navLinkClickHandler(key)}>
                   <Icon /> {i18n}
                 </NavLink>
               </NavItem>

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

@@ -172,7 +172,6 @@ const GrowiSubNavigation = (props) => {
             </div>
           ) }
           <PagePathNav pageId={pageId} pagePath={path} isPageForbidden={isPageForbidden} />
-
         </div>
       </div>
 
@@ -182,23 +181,22 @@ const GrowiSubNavigation = (props) => {
         <div className="d-flex flex-column align-items-end">
           <div className="d-flex">
             { !isPageInTrash && !isPageNotFound && !isPageForbidden && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
-            { !isPageNotFound && !isPageForbidden && <PageManagement /> }
+            { !isPageNotFound && !isPageForbidden && <PageManagement isCompactMode={isCompactMode} /> }
           </div>
           <div className="mt-2">
-            { !isCreatable && !isPageInTrash && !isPageForbidden
-            && (
-            <ThreeStrandedButton
-              onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
-              isBtnDisabled={currentUser == null}
-              editorMode={editorMode}
-            />
-)}
+            { !isCreatable && !isPageInTrash && !isPageForbidden && (
+              <ThreeStrandedButton
+                onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+                isBtnDisabled={currentUser == null}
+                editorMode={editorMode}
+              />
+            )}
           </div>
         </div>
 
         {/* Page Authors */}
         { (!isCompactMode && !isUserPage && !isPageNotFound && !isPageForbidden) && (
-          <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none">
+          <ul className="authors text-nowrap border-left d-none d-lg-block d-edit-none py-2 pl-4 mb-0 ml-3">
             <li className="pb-1">
               <AuthorInfo user={creator} date={createdAt} />
             </li>

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

@@ -17,7 +17,9 @@ import PresentationIcon from '../Icons/PresentationIcon';
 
 
 const PageManagement = (props) => {
-  const { t, appContainer, pageContainer } = props;
+  const {
+    t, appContainer, pageContainer, isCompactMode,
+  } = props;
   const { path, isDeletable, isAbleToDeleteCompletely } = pageContainer.state;
 
   const { currentUser } = appContainer;
@@ -193,7 +195,7 @@ const PageManagement = (props) => {
       <>
         <button
           type="button"
-          className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management"
+          className={`btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management ${isCompactMode && 'py-0'}`}
           data-toggle="dropdown"
         >
           <i className="icon-options"></i>
@@ -207,7 +209,7 @@ const PageManagement = (props) => {
       <>
         <button
           type="button"
-          className="btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled"
+          className={`btn nav-link bg-transparent dropdown-toggle dropdown-toggle-no-caret disabled ${isCompactMode && 'py-0'}`}
           id="icon-options-guest-tltips"
         >
           <i className="icon-options"></i>
@@ -245,6 +247,12 @@ PageManagement.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+
+  isCompactMode: PropTypes.bool,
+};
+
+PageManagement.defaultProps = {
+  isCompactMode: false,
 };
 
 export default withTranslation()(PageManagementWrapper);

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

@@ -55,13 +55,13 @@ const BookmarkList = (props) => {
    *
    */
   const generatePageList = pages.map(page => (
-    <li key={`my-bookmarks:${page._id}`}>
+    <li key={`my-bookmarks:${page._id}`} className="mt-4">
       <Page page={page.page} />
     </li>
   ));
 
   return (
-    <div className="page-list-container-create">
+    <div className="bookmarks-list-container">
       {pages.length === 0 ? t('No bookmarks yet') : (
         <>
           <ul className="page-list-ul page-list-ul-flat mb-3">

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

@@ -56,7 +56,7 @@ class RecentCreated extends React.Component {
    */
   generatePageList(pages) {
     return pages.map(page => (
-      <li key={`recent-created:list-view:${page._id}`}>
+      <li key={`recent-created:list-view:${page._id}`} className="mt-4">
         <Page page={page} />
       </li>
     ));

src/client/js/components/TableOfContents.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
@@ -15,6 +15,7 @@ import RecentlyCreatedIcon from './Icons/RecentlyCreatedIcon';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:TableOfContents');
+const WIKI_HEADER_LINK = 120;
 
 /**
  * @author Yuki Takei <yuki@weseek.co.jp>
@@ -36,7 +37,7 @@ const TableOfContents = (props) => {
       return window.innerHeight - containerTop - 20 - 155 - 26 - 40;
     }
     return window.innerHeight - containerTop - 20 - 155 - 26;
-  }, []);
+  }, [isUserPage]);
 
   const { tocHtml } = pageContainer.state;
 
@@ -47,6 +48,10 @@ const TableOfContents = (props) => {
     navigationContainer.addSmoothScrollEvent(anchorsInToc);
   }, [tocHtml, navigationContainer]);
 
+  // get element for smoothScroll
+  const getBookMarkListHeaderDom = useMemo(() => { return document.getElementById('bookmarks-list') }, []);
+  const getRecentlyCreatedListHeaderDom = useMemo(() => { return document.getElementById('recently-created-list') }, []);
+
   return (
     <>
       <TopOfTableContents isGuestUserMode={isGuestUserMode} />
@@ -67,14 +72,22 @@ const TableOfContents = (props) => {
 
       { isUserPage && (
       <div className="mt-3 d-flex justify-content-around">
-        <a className="btn btn-outline-secondary btn-sm" href="#">
+        <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>
-        </a>
-        <a className="btn btn-outline-secondary btn-sm" href="#">
+        </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>
-        </a>
+        </button>
       </div>
       )}
     </>

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

@@ -1,18 +1,18 @@
 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 { pageUser } = props;
 
-  const { pageContainer } = props;
-  const pageUser = pageContainer.state.pageUser;
+  // do not display when the user does not exist
+  if (pageUser == null) {
+    return null;
+  }
 
   return (
-    <div className="grw-users-info d-flex align-items-center d-edit-none">
+    <div className="grw-users-info d-flex align-items-center d-edit-none pb-2 border-bottom">
       <UserPicture user={pageUser} />
 
       <div className="users-meta">
@@ -35,9 +35,7 @@ const UserInfo = (props) => {
 
 
 UserInfo.propTypes = {
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  pageUser: PropTypes.object,
 };
 
-const UserInfoWrapper = withUnstatedContainers(UserInfo, [PageContainer]);
-
-export default UserInfoWrapper;
+export default UserInfo;

src/client/styles/scss/_comment_growi.scss

@@ -34,7 +34,7 @@
 
   .page-comments-row {
     // offset margin left to apply bg-color
-    margin: 30px 0px 30px -15px;
+    margin: 30px -15px 30px -15px;
   }
 
   .page-comments {

src/client/styles/scss/_subnav.scss

@@ -47,10 +47,6 @@
   }
 
   ul.authors {
-    padding: 0.7em 0 0.7em 1.5em;
-    margin-bottom: 0;
-    margin-left: 1em;
-
     li {
       font-size: 12px;
       list-style: none;

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -1,5 +1,64 @@
 $theme-colors: map-merge($theme-colors, $colors);
 
+@mixin button-svg-icon-variant($background, $hover-background: darken($background, 7.5%), $active-background: darken($background, 10%)) {
+  svg {
+    fill: color-yiq($background);
+  }
+
+  @include hover() {
+    svg {
+      fill: color-yiq($hover-background);
+    }
+  }
+
+  &:focus,
+  &.focus {
+    svg {
+      fill: color-yiq($hover-background);
+    }
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    svg {
+      color: color-yiq($background);
+    }
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    svg {
+      color: color-yiq($active-background);
+    }
+  }
+}
+
+@mixin button-outline-svg-icon-variant($value, $color-hover: $value) {
+  svg {
+    fill: $value;
+  }
+  @include hover() {
+    svg {
+      fill: $value;
+    }
+  }
+  &.disabled,
+  &:disabled {
+    svg {
+      fill: $value;
+    }
+  }
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active,
+  .show > &.dropdown-toggle {
+    svg {
+      fill: $value;
+    }
+  }
+}
+
 @each $color, $value in $theme-colors {
   @include bg-variant('.bg-#{$color}', $value);
 }
@@ -17,11 +76,14 @@ $theme-colors: map-merge($theme-colors, $colors);
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     @include button-variant($value, $value);
+    @include button-svg-icon-variant($value, $value);
   }
 }
+
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value, $color-hover: $value, $active-background: rgba($value, 0.1), $active-border: $value);
+    @include button-outline-svg-icon-variant($value, $color-hover: $value);
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active,
     .show > &.dropdown-toggle {

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

@@ -6,14 +6,13 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="border-bottom pb-2">
-    <div class="user-info" id="user-info">
-    </div>
-  </div>
 
   <div class="d-flex justify-content-between">
     <div class="grw-page-content-container flex-grow-1">
 
+      <div class="user-info" id="user-info">
+      </div>
+
       {#
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
@@ -51,19 +50,19 @@
   {% 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">
+    <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="bookmarks-list">
         <i id="user-bookmark-icon"></i>
         Bookmarks
-      </h1>
+      </h2>
       <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">
+    <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="recently-created-list">
         <i id="recent-created-icon"></i>
         Recently Created
       </h2>

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

@@ -2,7 +2,7 @@
 
   <div class="page-comments col-lg-10 my-5">
 
-    <h1 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h1>
+    <h2 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h2>
 
     <div class="page-comments-list" id="page-comments-list"></div>
 

src/server/views/widget/alert_siteurl_undefined.html

@@ -1,5 +1,5 @@
 {% if !getConfig('crowi', 'app:siteUrl') %}
-<div class="alert alert-danger mb-0 px-4 py-2">
+<div class="alert alert-danger d-edit-none mb-0 px-4 py-2">
   <i class="icon-exclamation"></i>
   {{ t("security_setting.alert_siteUrl_is_not_set", { link:t('App Settings')}) }}
 </div>