Merge branch 'dev/4.0.x' into support/reactify-pagemanagement-modal-for-merge

resource/cdn-manifests.js

@@ -130,6 +130,14 @@ module.exports = {
         integrity: '',
       },
     },
+    {
+      name: 'material-icons',
+      url: 'https://cdn.jsdelivr.net/npm/material-icons@0.3.1/iconfont/material-icons.min.css',
+      groups: ['basis'],
+      args: {
+        integrity: '',
+      },
+    },
     {
       name: 'emojione',
       url: 'https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css',

resource/locales/en-US/sandbox-bootstrap4.md

@@ -85,13 +85,13 @@
 
 ## Default well
 
-<div class="well">Look, I'm in a well! </div>
+<div class="card card-body bg-light">Look, I'm in a well! </div>
 
 ## Optional classes
 
-<div class="well well-lg">Look, I'm in a well! </div>
+<div class="card card-body bg-light p-5">Look, I'm in a well! </div>
 
-<div class="well well-sm">Look, I'm in a well! </div>
+<div class="card card-body bg-light p-2">Look, I'm in a well! </div>
 
 # Typography
 

resource/locales/ja/sandbox-bootstrap4.md

@@ -85,13 +85,13 @@
 
 ## Default well
 
-<div class="well">Look, I'm in a well! </div>
+<div class="card card-body bg-light">Look, I'm in a well! </div>
 
 ## Optional classes
 
-<div class="well well-lg">Look, I'm in a well! </div>
+<div class="card card-body bg-light p-5">Look, I'm in a well! </div>
 
-<div class="well well-sm">Look, I'm in a well! </div>
+<div class="card card-body bg-light p-2">Look, I'm in a well! </div>
 
 # Typography
 

src/client/js/components/PageEditorByHackmd.jsx

@@ -379,7 +379,7 @@ class PageEditorByHackmd extends React.Component {
             <div className="bg-box p-5 text-center">
               <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> {t('hackmd.integration_failed')}</h2>
               <h4>{this.state.errorMessage}</h4>
-              <p className="card well well-sm text-danger">
+              <p className="card well text-danger">
                 {this.state.errorReason}
               </p>
               {/* eslint-disable-next-line react/no-danger */}

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

@@ -91,7 +91,7 @@ class RecentChanges extends React.Component {
             <div className="grw-sidebar-header-container p-3 d-flex">
               <h3>{t('Recent Changes')}</h3>
               {/* <h3>{t('Recent Created')}</h3> */} {/* TODO: impl switching */}
-              <button type="button" className="btn btn-xs btn-outline-secondary ml-auto" onClick={this.reloadData}>
+              <button type="button" className="btn btn-sm btn-outline-secondary ml-auto" onClick={this.reloadData}>
                 <i className="icon icon-reload"></i>
               </button>
             </div>

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

@@ -28,7 +28,7 @@ class SidebarNav extends React.Component {
     }
   }
 
-  generatePrimaryItemObj(id, label, iconClassNames) {
+  generatePrimaryItemObj(id, label, iconName) {
     const isSelected = this.props.currentContentsId === id;
 
     return {
@@ -37,23 +37,23 @@ class SidebarNav extends React.Component {
         <div className={`${className} grw-global-item-container ${isSelected ? 'active' : ''}`}>
           <button
             type="button"
-            className="btn btn-primary btn-lg"
+            className={`btn btn-primary btn-lg ${isSelected ? 'active' : ''}`}
             onClick={() => this.itemSelectedHandler(id)}
           >
-            <i className={iconClassNames}></i>
+            <i className="material-icons">{iconName}</i>
           </button>
         </div>
       ),
     };
   }
 
-  generateSecondaryItemObj(id, label, iconClassNames, href, isBlank, isHiddenOnLargeDevice) {
+  generateSecondaryItemObj(id, label, iconName, href, isBlank) {
     return {
       id,
       component: ({ className }) => (
-        <div className={`${className} grw-global-item-container ${isHiddenOnLargeDevice ? 'd-block d-md-none' : ''}`}>
-          <a href={href} className="btn btn-primary btn-lg" target={`${isBlank ? '_blank' : ''}`}>
-            <i className={iconClassNames}></i>
+        <div className={`${className} grw-global-item-container`}>
+          <a href={href} className="btn btn-primary" target={`${isBlank ? '_blank' : ''}`}>
+            <i className="material-icons">{iconName}</i>
           </a>
         </div>
       ),
@@ -68,20 +68,20 @@ class SidebarNav extends React.Component {
     const { isAdmin, currentUsername } = this.props.appContainer;
 
     const primaryItems = [
-      this.generatePrimaryItemObj('custom', 'Custom Sidebar', 'fa fa-code'),
-      this.generatePrimaryItemObj('recent', 'Recent Changes', 'icon-clock'),
+      this.generatePrimaryItemObj('custom', 'Custom Sidebar', 'code'),
+      this.generatePrimaryItemObj('recent', 'Recent Changes', 'update'),
       // this.generatePrimaryItemObj('tag', 'Tags', 'icon-tag'),
       // this.generatePrimaryItemObj('favorite', 'Favorite', 'icon-star'),
     ];
 
     const secondaryItems = [
-      this.generateSecondaryItemObj('draft', 'Draft', 'icon-docs', `/user/${currentUsername}#user-draft-list`),
-      this.generateSecondaryItemObj('help', 'Help', 'icon-question', 'https://docs.growi.org', true),
-      this.generateSecondaryItemObj('trash', 'Trash', 'icon-trash', '/trash'),
+      this.generateSecondaryItemObj('draft', 'Draft', 'file_copy', `/user/${currentUsername}#user-draft-list`),
+      this.generateSecondaryItemObj('help', 'Help', 'help', 'https://docs.growi.org', true),
+      this.generateSecondaryItemObj('trash', 'Trash', 'delete', '/trash'),
     ];
     if (isAdmin) {
       secondaryItems.unshift( // add to the beginning
-        this.generateSecondaryItemObj('admin', 'Admin', 'icon-settings', '/admin', false, true),
+        this.generateSecondaryItemObj('admin', 'Admin', 'settings', '/admin'),
       );
     }
 

src/client/styles/scss/_navbar.scss

@@ -7,13 +7,9 @@
   }
 
   .grw-navbar-search {
-    left: $grw-logo-width + 19px;
-
-    @include media-breakpoint-up(lg) {
-      position: absolute;
-      left: 50%;
-      transform: translate(-50%, 0%);
-    }
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0%);
   }
 
   .nav-link,

src/client/styles/scss/_search.scss

@@ -111,7 +111,7 @@
       width: 300px;
     }
 
-    @include media-breakpoint-up(xl) {
+    @include media-breakpoint-up(md) {
       width: 300px;
     }
   }

src/client/styles/scss/_sidebar.scss

@@ -102,10 +102,10 @@
   div[class$='-PrimaryItemsList'] {
     .grw-global-item-container {
       .btn-lg {
-        height: $sidebar-nav-button-height;
-
+        padding: 0.8rem 1rem;
+        line-height: 1em;
         i {
-          font-size: 1.5em;
+          font-size: 1.7em;
         }
       }
 
@@ -116,6 +116,20 @@
       }
     }
   }
+  div[class$='-ScrollableTransitionGroup'] {
+    // remove horizontal line
+    > div > div {
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+  }
+  div[class$='-Outer'] {
+    div[class$='-Shadow'] {
+      background: linear-gradient(to left, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0.1) 1px, rgba(0, 0, 0, 0) 100%);
+    }
+  }
 }
 
 // Drawer Mode

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

@@ -3,8 +3,16 @@
 //
 
 // determine optional variables
+$color-list: $color-global !default;
+$bgcolor-list: $bgcolor-global !default;
+$color-list-hover: $color-reversal !default;
+$color-list-active: $color-reversal !default;
+$bgcolor-list-active: $primary !default;
 $border-image-navbar: linear-gradient(to right, #ccc 0%, #ccc 100%) !default;
 $bgcolor-search-top-dropdown: $secondary !default;
+$bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
+$text-shadow-sidebar-nav-item-active: 1px 1px 2px $primary !default;
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -18,6 +26,7 @@ $input-focus-color: $color-global;
 @import '~bootstrap/scss/mixins';
 @import '../mixins';
 @import 'mixins-for-tables';
+@import 'mixins/list-group';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
@@ -48,22 +57,7 @@ $input-focus-color: $color-global;
 }
 
 // List Group
-.list-group {
-  .list-group-item {
-    color: $color-list;
-    background-color: $bgcolor-list;
-
-    &.list-group-item-action {
-      &:hover {
-        background-color: $color-list-hover;
-      }
-      &.active {
-        color: $color-list-active;
-        background-color: $bgcolor-list-active;
-      }
-    }
-  }
-}
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $color-list-active, $bgcolor-list-active);
 
 // Form
 .form-control {
@@ -139,10 +133,25 @@ $input-focus-color: $color-global;
     }
   }
 
+  .grw-global-item-container {
+    .btn {
+      @include button-variant(
+        $bgcolor-sidebar,
+        $bgcolor-sidebar,
+        darken($bgcolor-sidebar, 7.5%),
+        darken($bgcolor-sidebar, 10%),
+        $bgcolor-sidebar-nav-item-active,
+        $bgcolor-sidebar-nav-item-active
+      );
+    }
+  }
   .grw-global-item-container.active {
-    button:after {
+    .btn:after {
       // fukidashi color
-      border-right-color: darken($bgcolor-global, 4%);
+      border-right-color: $bgcolor-sidebar-context;
+    }
+    i {
+      text-shadow: $text-shadow-sidebar-nav-item-active;
     }
   }
   div[data-testid='GlobalNavigation'] {
@@ -156,12 +165,9 @@ $input-focus-color: $color-global;
       background-color: $bgcolor-sidebar-context;
     }
   }
-  div[class$='-Outer'] {
-    div[class$='-Shadow'] {
-      background: unset;
-      border-right: 1px solid $gray-300;
-    }
-  }
+
+  // List
+  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $color-list-active, $bgcolor-list-active);
 }
 
 /*

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

@@ -34,11 +34,11 @@ html[light] {
   $color-inline-code: #c7254e;
 
   // List Group colors
-  $color-list: $color-global;
-  $bgcolor-list: $bgcolor-global;
-  $color-list-active: $color-reversal;
-  $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  // $color-list: $color-global; // optional
+  // $bgcolor-list: $bgcolor-global; // optional
+  // $color-list-hover: $color-reversal; // optional
+  // $color-list-active: $color-reversal; // optional
+  // $bgcolor-list-active: $primary; // optional
 
   // Navbar
   $bgcolor-navbar: #2a2929;
@@ -51,13 +51,18 @@ html[light] {
 
   // Sidebar
   $bgcolor-sidebar: #122c55;
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: #f4f6fc;
+  $bgcolor-sidebar-nav-item-active: rgba(#000000, 0.37); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-reversal;
   $bgcolor-resize-button: #209fd8;
   $color-resize-button-hover: $color-reversal;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  // Sidebar contents
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -105,11 +110,11 @@ html[dark] {
   $color-inline-code: #c7254e;
 
   // List Group colors
-  $color-list: $color-global;
-  $bgcolor-list: $bgcolor-global;
-  $color-list-active: $color-global;
-  $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  // $color-list: $color-global; // optional
+  // $bgcolor-list: $bgcolor-global; // optional
+  // $color-list-hover: $color-reversal; // optional
+  $color-list-active: white; // optional
+  // $bgcolor-list-active: $primary; // optional
 
   // Navbar
   $bgcolor-navbar: #2a2929;
@@ -122,13 +127,18 @@ html[dark] {
 
   // Sidebar
   $bgcolor-sidebar: #122c55;
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: #111d2f;
+  $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-global;
   $bgcolor-resize-button: $primary;
   $color-resize-button-hover: $color-global;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
+  // Sidebar contents
+  $bgcolor-sidebar-context: #111d2f;
+  $color-sidebar-context: $color-global;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;

src/client/styles/scss/theme/mixins/_list-group.scss

@@ -0,0 +1,18 @@
+@mixin override-list-group-item($color, $bgcolor, $color-hover: $color, $color-active: $color, $bgcolor-active: $bgcolor) {
+  .list-group {
+    .list-group-item {
+      color: $color;
+      background-color: $bgcolor;
+
+      &.list-group-item-action {
+        &:hover {
+          background-color: $color-hover;
+        }
+        &.active {
+          color: $color-active;
+          background-color: $bgcolor-active;
+        }
+      }
+    }
+  }
+}

src/server/views/layout/layout.html

@@ -87,7 +87,7 @@
     </div>
 
     {# Search #}
-    <ul class="navbar-nav grw-navbar-search d-none d-md-block position-absolute">
+    <ul class="navbar-nav grw-navbar-search d-none d-md-block">
       <li>
         {% if isSearchServiceConfigured() %}
         <div class="search-top" role="search" id="search-top"></div>
@@ -97,22 +97,8 @@
 
     {# Navbar Right #}
     <ul class="navbar-nav ml-auto">
-      {% if user and user.admin %}
-      <li class="nav-item d-none d-md-block">
-        <a class="nav-link" href="/admin">
-          <i class="icon-settings mr-2"></i>
-          {{ t('Admin') }}
-        </a>
-      </li>
-      {% endif %}
-
       {% if user %}
       <li id="create-page-button" class="nav-item d-none d-md-block"></li>
-      <li class="nav-item d-none d-md-block">
-        <a class="nav-link" href="https://docs.growi.org/" target="_blank">
-          <i class="icon-question mr-2"></i><span class="mr-2">{{ t('Help') }}</span><span class="small"><i class="icon-share-alt"></i></span>
-        </a>
-      </li>
       <li id="personal-dropdown" class="nav-item dropdown dropdown-toggle"></li>
       {% else %}
       <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>