Merge branch 'master' into feat/3176-grid-edit-modal-for-master-merge

CHANGES.md

@@ -15,7 +15,12 @@
     * migrate-mongo
     * mongoose
 
-## v4.1.11-RC
+## v4.1.12
+
+* Fix: Adjust line-height for pre under li
+* Fix: Emptying trash process is broken
+
+## v4.1.11
 
 * Improvement: Generating draft DOM id strategy
 * Fix: GROWI version downgrade causes a validation error for user.lang

src/client/js/components/Admin/Common/AdminNavigation.jsx

@@ -81,6 +81,7 @@ const AdminNavigation = (props) => {
           className="btn btn-outline-primary btn-lg dropdown-toggle col-12 text-right"
           type="button"
           id="dropdown-admin-navigation"
+          data-display="static"
           data-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"

src/client/js/components/BookmarkButton.jsx

@@ -35,8 +35,8 @@ class BookmarkButton extends React.Component {
 
 
   render() {
-    const { pageContainer, t } = this.props;
-    const isGuestUser = pageContainer.state.isGuestUser;
+    const { appContainer, pageContainer, t } = this.props;
+    const { isGuestUser } = appContainer;
 
     return (
       <div>
@@ -45,8 +45,7 @@ class BookmarkButton extends React.Component {
           id="bookmark-button"
           onClick={this.handleClick}
           className={`btn btn-bookmark border-0
-          ${`btn-${this.props.size}`}
-          ${pageContainer.state.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+          ${`btn-${this.props.size}`} ${pageContainer.state.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
           <i className="icon-star mr-3"></i>
           <span className="total-bookmarks">
@@ -71,8 +70,8 @@ class BookmarkButton extends React.Component {
 const BookmarkButtonWrapper = withUnstatedContainers(BookmarkButton, [AppContainer, PageContainer]);
 
 BookmarkButton.propTypes = {
-  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  appContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  pageContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   pageId: PropTypes.string,
   t: PropTypes.func.isRequired,

src/client/js/components/LikeButton.jsx

@@ -35,8 +35,8 @@ class LikeButton extends React.Component {
 
 
   render() {
-    const { pageContainer, t } = this.props;
-    const isGuestUser = pageContainer.state.isGuestUser;
+    const { appContainer, pageContainer, t } = this.props;
+    const { isGuestUser } = appContainer;
 
     return (
       <div>

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

@@ -33,17 +33,30 @@ const GrowiNavbarBottom = (props) => {
 
         <ul className="navbar-nav w-100">
           <li className="nav-item">
-            <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.toggleDrawer()}>
+            <a
+              role="button"
+              className="nav-link btn-lg"
+              onClick={() => navigationContainer.toggleDrawer()}
+            >
               <i className="icon-menu"></i>
             </a>
           </li>
           <li className="nav-item mx-auto">
-            <a type="button" className="nav-link btn-lg" data-target="#grw-global-search-collapse" data-toggle="collapse">
+            <a
+              role="button"
+              className="nav-link btn-lg"
+              data-target="#grw-global-search-collapse"
+              data-toggle="collapse"
+            >
               <i className="icon-magnifier"></i>
             </a>
           </li>
           <li className="nav-item">
-            <a type="button" className="nav-link btn-lg" onClick={() => navigationContainer.openPageCreateModal()}>
+            <a
+              role="button"
+              className="nav-link btn-lg"
+              onClick={() => navigationContainer.openPageCreateModal()}
+            >
               <i className="icon-pencil"></i>
             </a>
           </li>

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

@@ -5,9 +5,9 @@ import { UncontrolledTooltip } from 'reactstrap';
 
 /* eslint-disable react/prop-types */
 const PageEditorModeButtonWrapper = React.memo(({
-  editorMode, isBtnDisabled, onClick, targetMode, children,
+  editorMode, isBtnDisabled, onClick, targetMode, icon, label,
 }) => {
-  const classNames = [`btn btn-outline-primary ${targetMode}-button`];
+  const classNames = [`btn btn-outline-primary ${targetMode}-button px-1`];
   if (editorMode === targetMode) {
     classNames.push('active');
   }
@@ -21,7 +21,10 @@ const PageEditorModeButtonWrapper = React.memo(({
       className={classNames.join(' ')}
       onClick={() => { onClick(targetMode) }}
     >
-      {children}
+      <span className="d-flex flex-column flex-md-row justify-content-center">
+        <span className="grw-page-editor-mode-manager-icon mr-md-1">{icon}</span>
+        <span className="grw-page-editor-mode-manager-label">{label}</span>
+      </span>
     </button>
   );
 });
@@ -56,10 +59,9 @@ function PageEditorModeManager(props) {
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
             targetMode="view"
-          >
-            <i className="icon-control-play icon-fw grw-page-editor-mode-manager-icon" />
-            { t('view') }
-          </PageEditorModeButtonWrapper>
+            icon={<i className="icon-control-play" />}
+            label={t('view')}
+          />
         )}
         {(!isDeviceSmallerThanMd || editorMode === 'view') && (
           <PageEditorModeButtonWrapper
@@ -67,10 +69,9 @@ function PageEditorModeManager(props) {
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
             targetMode="edit"
-          >
-            <i className="icon-note icon-fw grw-page-editor-mode-manager-icon" />
-            { t('Edit') }
-          </PageEditorModeButtonWrapper>
+            icon={<i className="icon-note" />}
+            label={t('Edit')}
+          />
         )}
         {(!isDeviceSmallerThanMd || editorMode === 'view') && (
           <PageEditorModeButtonWrapper
@@ -78,10 +79,9 @@ function PageEditorModeManager(props) {
             isBtnDisabled={isBtnDisabled}
             onClick={pageEditorModeButtonClickedHandler}
             targetMode="hackmd"
-          >
-            <i className="fa fa-fw fa-file-text-o grw-page-editor-mode-manager-icon" />
-            { t('hackmd.hack_md') }
-          </PageEditorModeButtonWrapper>
+            icon={<i className="fa fa-file-text-o" />}
+            label={t('hackmd.hack_md')}
+          />
         )}
       </div>
       {isBtnDisabled && (

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

@@ -13,11 +13,10 @@ import PageDeleteModal from '../PageDeleteModal';
 
 
 const TrashPageAlert = (props) => {
-  const { t, appContainer, pageContainer } = props;
+  const { t, pageContainer } = props;
   const {
-    path, isDeleted, lastUpdateUsername, updatedAt, hasChildren, isAbleToDeleteCompletely,
+    path, isDeleted, lastUpdateUsername, updatedAt, isAbleToDeleteCompletely,
   } = pageContainer.state;
-  const { currentUser } = appContainer;
   const [isEmptyTrashModalShown, setIsEmptyTrashModalShown] = useState(false);
   const [isPutbackPageModalShown, setIsPutbackPageModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
@@ -113,8 +112,8 @@ const TrashPageAlert = (props) => {
           This page is in the trash <i className="icon-trash" aria-hidden="true"></i>.
           {isDeleted && <span><br /><UserPicture user={{ username: lastUpdateUsername }} /> Deleted by {lastUpdateUsername} at {updatedAt}</span>}
         </div>
-        {(currentUser.admin && path === '/trash' && hasChildren) && renderEmptyButton()}
-        {(isDeleted && currentUser != null) && renderTrashPageManagementButtons()}
+        { pageContainer.isAbleToShowEmptyTrashButton && renderEmptyButton()}
+        { pageContainer.isAbleToShowTrashPageManagementButtons && renderTrashPageManagementButtons()}
       </div>
       {renderModals()}
     </>

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

@@ -73,7 +73,7 @@ class SidebarNav extends React.Component {
           {isAdmin && <SecondaryItem label="Admin" iconName="settings" href="/admin" />}
           {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" />}
+          <SecondaryItem label="Trash" iconName="delete" href="/trash" />
         </div>
       </div>
     );

src/client/js/services/PageContainer.js

@@ -180,10 +180,10 @@ export default class PageContainer extends Container {
    * ex.) duplicate, rename
    */
   get isAbleToShowPageManagement() {
-    const { isPageExist, isPageInTrash } = this.state;
+    const { isPageExist, isTrashPage } = this.state;
     const { isSharedUser } = this.appContainer;
 
-    return (isPageExist && !isPageInTrash && !isSharedUser);
+    return (isPageExist && !isTrashPage && !isSharedUser);
   }
 
   /**
@@ -191,10 +191,10 @@ export default class PageContainer extends Container {
    * ex.) view, edit, hackmd
    */
   get isAbleToShowPageEditorModeManager() {
-    const { isNotCreatable, isPageInTrash } = this.state;
+    const { isNotCreatable, isTrashPage } = this.state;
     const { isSharedUser } = this.appContainer;
 
-    return (!isNotCreatable && !isPageInTrash && !isSharedUser);
+    return (!isNotCreatable && !isTrashPage && !isSharedUser);
   }
 
   /**
@@ -218,6 +218,29 @@ export default class PageContainer extends Container {
     return (!isUserPage && !isSharedUser);
   }
 
+  /**
+   * whether to Empty Trash Page
+   * not displayed when guest user and not on trash page
+   */
+  get isAbleToShowEmptyTrashButton() {
+    const { currentUser } = this.appContainer;
+    const { path, hasChildren } = this.state;
+
+    return (currentUser != null && currentUser.admin && path === '/trash' && hasChildren);
+  }
+
+  /**
+   * whether to display trash management buttons
+   * ex.) undo, delete completly
+   * not displayed when guest user
+   */
+  get isAbleToShowTrashPageManagementButtons() {
+    const { currentUser } = this.appContainer;
+    const { isDeleted } = this.state;
+
+    return (isDeleted && currentUser != null);
+  }
+
   /**
    * initialize state for markdown data
    */

src/client/styles/scss/_mixins.scss

@@ -227,7 +227,7 @@
   transition-duration: 300ms;
 }
 
-@mixin border-vertical($beforeOrAfter, $borderColor, $borderLength, $zIndex: initial, $isBtnGroup: false) {
+@mixin border-vertical($beforeOrAfter, $borderLength, $zIndex: initial, $isBtnGroup: false) {
   position: relative;
   @if $isBtnGroup {
     &:not(:first-child) {
@@ -248,51 +248,8 @@
       height: $borderLength;
       margin-left: -0.5px;
       content: '';
-      border-left: 1px solid $borderColor;
+      border-left: 1px solid transparent;
       transition: border-color 0.15s ease-in-out;
     }
   }
 }
-
-@mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 70px;
-  padding-right: 0;
-  padding-left: 0;
-  color: $textColor;
-  white-space: nowrap;
-  background-color: $bgColor;
-  border-color: $borderColor;
-
-  @include border-vertical('before', $borderColor, 70%, 1, true);
-
-  &.view-button,
-  &.edit-button {
-    .grw-page-editor-mode-manager-icon {
-      margin-right: -0.25rem;
-    }
-  }
-  &.hackmd-button {
-    font-size: 12px;
-    letter-spacing: -0.6px;
-
-    .grw-page-editor-mode-manager-icon {
-      margin-right: -0.1rem;
-    }
-  }
-  &:hover,
-  &:active,
-  &.active {
-    color: $textColor;
-    background-color: $bgColorHoverAndActive;
-    border-color: $borderColor;
-    &::after {
-      border-color: $bgColorHoverAndActive;
-    }
-  }
-  &:not(:disabled):not(.disabled):focus {
-    box-shadow: none;
-  }
-}

src/client/styles/scss/molecules/page-editor-mode-manager.scss

@@ -0,0 +1,32 @@
+// @mixin page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+.grw-page-editor-mode-manager .btn {
+  width: 70px;
+  white-space: nowrap;
+
+  @include border-vertical('before', 70%, 1, true);
+
+  &.view-button,
+  &.edit-button {
+    line-height: 1.2rem;
+    .grw-page-editor-mode-manager-icon {
+      @include media-breakpoint-down(sm) {
+        font-size: 1.2rem;
+      }
+    }
+  }
+  &.hackmd-button {
+    line-height: 1.2rem;
+    .grw-page-editor-mode-manager-icon {
+      @include media-breakpoint-down(sm) {
+        font-size: 1.2rem;
+      }
+    }
+    .grw-page-editor-mode-manager-label {
+      font-size: 12px;
+      letter-spacing: -0.6px;
+    }
+  }
+  &:not(:disabled):not(.disabled):focus {
+    box-shadow: none;
+  }
+}

src/client/styles/scss/style-app.scss

@@ -23,6 +23,7 @@
 
 // molecules
 @import 'molecules/copy-dropdown';
+@import 'molecules/page-editor-mode-manager';
 @import 'molecules/slack-notification';
 
 // growi component

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

@@ -33,6 +33,7 @@ $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 @import '~bootstrap/scss/mixins';
 @import '../mixins';
 @import 'mixins/list-group';
+@import 'mixins/page-editor-mode-manager';
 @import 'mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';

src/client/styles/scss/theme/antarctic.scss

@@ -116,7 +116,7 @@ html[dark] {
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
+      @include btn-page-editor-mode-manager(darken($primary, 10%), lighten($primary, 55%), lighten($primary, 60%));
     }
   }
 

src/client/styles/scss/theme/christmas.scss

@@ -187,7 +187,7 @@ html[dark] {
   // Button
   .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
+      @include btn-page-editor-mode-manager(darken($subthemecolor, 15%), lighten($subthemecolor, 35%), lighten($subthemecolor, 45%));
     }
   }
 }

src/client/styles/scss/theme/default.scss

@@ -107,7 +107,7 @@ html[light] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -207,7 +207,7 @@ html[dark] {
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
+      @include btn-page-editor-mode-manager(lighten($primary, 30%), lighten($primary, 20%), $primary, darken($primary, 20%));
     }
   }
 }

src/client/styles/scss/theme/future.scss

@@ -92,7 +92,7 @@ html[dark] {
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
+      @include btn-page-editor-mode-manager(lighten($primary, 10%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
   }
 

src/client/styles/scss/theme/halloween.scss

@@ -110,7 +110,7 @@ html[dark] {
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
+      @include btn-page-editor-mode-manager(lighten($primary, 35%), $primary, lighten($primary, 5%), darken($primary, 20%));
     }
   }
 

src/client/styles/scss/theme/island.scss

@@ -112,7 +112,7 @@ html[dark] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
+      @include btn-page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), darken($primary, 5%));
     }
   }
 }

src/client/styles/scss/theme/kibela.scss

@@ -111,7 +111,7 @@ html[dark] {
   //Button
   .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
+      @include btn-page-editor-mode-manager(darken($primary, 15%), lighten($primary, 45%), lighten($primary, 50%));
     }
   }
 }

src/client/styles/scss/theme/mixins/_page-editor-mode-manager.scss

@@ -0,0 +1,22 @@
+@mixin btn-page-editor-mode-manager($textColor, $borderColor, $bgColorHoverAndActive, $bgColor: white) {
+  color: $textColor;
+  background-color: $bgColor;
+  border-color: $borderColor;
+
+  &:not(:first-child) {
+    &::before {
+      border-left-color: $borderColor;
+    }
+  }
+
+  &:hover,
+  &:active,
+  &.active {
+    color: $textColor;
+    background-color: $bgColorHoverAndActive;
+    border-color: $borderColor;
+    &::after {
+      border-color: $bgColorHoverAndActive;
+    }
+  }
+}

src/client/styles/scss/theme/mono-blue.scss

@@ -91,7 +91,7 @@ html[light] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -199,7 +199,7 @@ html[dark] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
+      @include btn-page-editor-mode-manager(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
   }
 }

src/client/styles/scss/theme/nature.scss

@@ -114,7 +114,7 @@ html[dark] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
+      @include btn-page-editor-mode-manager($bgcolor-navbar, lighten($bgcolor-navbar, 65%), lighten($bgcolor-navbar, 70%));
     }
   }
 }

src/client/styles/scss/theme/spring.scss

@@ -100,7 +100,7 @@ html[dark] {
   }
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
+      @include btn-page-editor-mode-manager(darken($primary, 50%), lighten($primary, 5%), lighten($primary, 10%));
     }
   }
 

src/client/styles/scss/theme/wood.scss

@@ -164,7 +164,7 @@ html[dark] {
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
+      @include btn-page-editor-mode-manager(darken($primary, 30%), lighten($primary, 15%), lighten($primary, 25%));
     }
   }
 }

src/server/routes/apiv3/pages.js

@@ -76,7 +76,7 @@ module.exports = (crowi) => {
   */
   router.delete('/empty-trash', loginRequired, adminRequired, csrf, async(req, res) => {
     try {
-      const pages = await Page.completelyDeletePageRecursively('/trash', req.user);
+      const pages = await Page.completelyDeletePageRecursively({ path: '/trash' }, req.user);
       return res.apiv3({ pages });
     }
     catch (err) {