Merge branch 'dev/4.0.x' into support/apply-bootstrap4

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/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -51,7 +51,9 @@ class UploadForm extends React.Component {
       <form onSubmit={this.uploadZipFile}>
         <fieldset>
           <div className="form-group row">
-            <label htmlFor="file" className="col-md-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
+            <label htmlFor="file" className="col-md-3 col-form-label col-form-label-sm">
+              {t('admin:importer_management.growi_settings.growi_archive_file')}
+            </label>
             <div className="col-md-6">
               <input
                 type="file"

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -42,7 +42,7 @@ class PresentationForm extends React.Component {
     return (
       <fieldset className="form-group col-12 my-2">
 
-        <label className="col-8 offset-4 control-label font-weight-bold text-left mt-3">
+        <label className="col-8 offset-4 col-form-label font-weight-bold text-left mt-3">
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 

src/client/js/components/Admin/MarkdownSetting/PresentationLineBreakOptions.jsx

@@ -1,86 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-
-import AppContainer from '../../../services/AppContainer';
-import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
-
-class PresentationLineBreakOptions extends React.Component {
-
-  render() {
-    const { t, adminMarkDownContainer } = this.props;
-    const { pageBreakOption, customRegularExpression } = adminMarkDownContainer.state;
-
-    return (
-      <Fragment>
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakOption === 1}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 1 }) }}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset one separator desc') }
-              <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakOption === 2}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 2 }) }}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Preset two separator desc') }
-              <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
-            </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption3"
-            checked={pageBreakOption === 3}
-            onChange={() => { adminMarkDownContainer.setState({ pageBreakOption: 3 }) }}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
-            <div className="mt-3">
-              { t('markdown_setting.Custom separator desc') }
-              <input
-                className="form-control"
-                defaultValue={customRegularExpression}
-                onChange={(e) => { adminMarkDownContainer.setState({ customRegularExpression: e.target.value }) }}
-              />
-            </div>
-          </label>
-        </div>
-      </Fragment>
-    );
-  }
-
-}
-
-const PresentationLineBreakOptionsWrapper = (props) => {
-  return createSubscribedElement(PresentationLineBreakOptions, props, [AppContainer, AdminMarkDownContainer]);
-};
-
-PresentationLineBreakOptions.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminMarkDownContainer: PropTypes.instanceOf(AdminMarkDownContainer).isRequired,
-
-};
-
-export default withTranslation()(PresentationLineBreakOptionsWrapper);

src/client/js/components/Admin/Security/SamlSecuritySetting.jsx

@@ -213,7 +213,7 @@ class SamlSecurityManagement extends React.Component {
                   <th>{t('security_setting.form_item_name.cert')}</th>
                   <td>
                     <textarea
-                      className="form-control input-sm"
+                      className="form-control form-control-sm"
                       type="text"
                       rows="5"
                       name="samlCert"
@@ -243,7 +243,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                   </td>
                   <td>
                     <textarea
-                      className="form-control input-sm"
+                      className="form-control form-control-sm"
                       type="text"
                       rows="5"
                       readOnly

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -144,7 +144,7 @@ class SecuritySetting extends React.Component {
               </div>
             </div>
             {adminGeneralSecurityContainer.isWikiModeForced && (
-              <p className="alert alert-warning mt-2 text-left">
+              <p className="alert alert-warning mt-2 text-left offset-3 col-6">
                 <i className="icon-exclamation icon-fw">
                 </i><b>FIXED</b><br />
                 <b

src/client/js/components/Me/ProfileImageSettings.jsx

@@ -144,7 +144,7 @@ class ProfileImageSettings extends React.Component {
               </div>
             </h4>
             <div className="row mb-3">
-              <label className="col-sm-4 col-12 control-label">
+              <label className="col-sm-4 col-12 col-form-label text-left">
                 { t('Current Image') }
               </label>
               <div className="col-sm-8 col-12">
@@ -153,7 +153,7 @@ class ProfileImageSettings extends React.Component {
               </div>
             </div>
             <div className="row">
-              <label className="col-sm-4 col-12 control-label">
+              <label className="col-sm-4 col-12 col-form-label text-left">
                 {t('Upload new image')}
               </label>
               <div className="col-sm-8 col-12">

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

@@ -2,6 +2,18 @@
 //== Apply to Bootstrap
 //
 
+// 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;
 $body-color: $color-global;
@@ -14,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';
@@ -44,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 {
@@ -111,10 +109,16 @@ $input-focus-color: $color-global;
     color: $color-link-nabvar;
   }
 
-  border-image: linear-gradient(to right, #545fff 0%, #00a6e5 100%);
+  border-image: $border-image-navbar;
   border-image-slice: 1;
 }
 
+.search-top {
+  .btn-secondary.dropdown-toggle {
+    @include button-variant($bgcolor-search-top-dropdown, $bgcolor-search-top-dropdown);
+  }
+}
+
 .grw-sidebar {
   .ak-navigation-resize-button {
     $color-resize-button: $color-global !default;
@@ -129,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'] {
@@ -146,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

@@ -15,7 +15,7 @@
 //== Light Mode
 //
 html[light] {
-  $primary: #112744;
+  $primary: #122c55;
 
   // Background colors
   $bgcolor-global: white;
@@ -23,27 +23,27 @@ html[light] {
   $bgcolor-card: #f5f5f5;
 
   // Font colors
-  $color-global: #333333;
+  $color-global: #112744;
   $color-reversal: #eeeeee;
   // $color-header: #2b2b2b;
-  $color-link: lighten($primary, 20%);
+  $color-link: #1938ba;
   $color-link-hover: lighten($color-link, 20%);
-  $color-link-wiki: lighten($primary, 20%);
+  $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: $color-reversal;
+  $color-link-nabvar: #a7a7a7;
   $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;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-search-top-dropdown: #209fd8;
+  $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
@@ -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: #5587ec;
+  $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;
@@ -86,51 +91,54 @@ html[light] {
 //== Dark Mode
 //
 html[dark] {
-  $primary: #d65a31;
-
-  $basecolor: #222831;
+  $primary: #db00c2;
 
   // Background colors
-  $bgcolor-global: $basecolor;
-  $bgcolor-inline-code: darken($basecolor, 5%);
-  $bgcolor-card: darken($basecolor, 5%);
+  $bgcolor-global: #131418;
+  $bgcolor-inline-code: darken($bgcolor-global, 5%);
+  $bgcolor-card: darken($bgcolor-global, 5%);
 
   // Font colors
-  $color-global: #eeeeee;
+  $color-global: #a8a8a8;
   $color-reversal: #333333;
   // $color-header: desaturate($primary, 20%);
-  $color-link: $primary;
+  $color-link: #7b9ad5;
   $color-link-hover: lighten($color-link, 10%);
-  $color-link-wiki: lighten($basecolor, 50%);
-  $color-link-wiki-hover: darken($color-link-wiki, 5%);
-  $color-link-nabvar: $color-global;
+  $color-link-wiki: $color-link;
+  $color-link-wiki-hover: lighten($color-link-wiki, 10%);
+  $color-link-nabvar: #a7a7a7;
   $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;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-search-top-dropdown: $primary;
+  $border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-global;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+  $bgcolor-sidebar: #122c55;
+  $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: #5587ec;
+  $bgcolor-resize-button: $primary;
   $color-resize-button-hover: $color-global;
-  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  $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/client/styles/scss/theme/mono-blue.scss

@@ -12,7 +12,6 @@ html[light] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-navbar: $themecolor;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
   $bgcolor-card: darken($themelight, 5%);
 
@@ -32,11 +31,31 @@ html[light] {
   $bgcolor-list: transparent;
   $color-list-active: $color-reversal;
   $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  $color-list-hover: $color-search;
+
+  // Navbar
+  $bgcolor-navbar: #2a2929;
+  $bgcolor-search-top-dropdown: $primary;
+  $border-image-navbar: linear-gradient(to right, #54bafd 0%, #3d98a3 50%, #708b0b 100%);
 
   // Logo colors
   $bgcolor-logo: $themecolor;
-  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+
+  // Sidebar
+  $bgcolor-sidebar: $themecolor;
+  $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;
@@ -57,11 +76,6 @@ html[light] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-sidebar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -78,17 +92,6 @@ html[light] {
       }
     }
   }
-
-  // Search Top
-  .search-top {
-    .input-group-prepend .dropdown-toggle {
-      color: $themecolor;
-      background-color: $color-search;
-      &:hover {
-        background-color: darken($color-search, 10%);
-      }
-    }
-  }
 }
 
 html[dark] {
@@ -123,13 +126,33 @@ html[dark] {
   $bgcolor-list: transparent;
   $color-list-active: $color-reversal;
   $bgcolor-list-active: $primary;
-  $color-list-hover: $color-reversal;
+  $color-list-hover: $accentcolor;
+
+  // Navbar
+  $bgcolor-navbar: #2a2929;
+  $bgcolor-search-top-dropdown: $primary;
+  $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
 
   // Logo colors
   $bgcolor-logo: #13191c;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
   // $fillcolor-logo-mark: #4e5a60;
 
+  // Sidebar
+  $bgcolor-sidebar: $accentcolor;
+  $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;
 
@@ -138,7 +161,8 @@ html[dark] {
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;
-  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-active: $color-global;
+  $color-dropdown-link-hover: $color-reversal;
 
   // admin theme box
   $color-theme-color-box: $primary;
@@ -149,15 +173,10 @@ html[dark] {
   // badge
   $color-badge: $color-reversal;
 
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-sidebar, 10%);
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
-  // Navs {
+  // Navs
   .nav-tabs {
     border-bottom: $border-color-theme 1px solid;
     .nav-link {
@@ -173,17 +192,6 @@ html[dark] {
     }
   }
 
-  // Search Top
-  .search-top {
-    .input-group-prepend .dropdown-toggle {
-      background-color: $color-search;
-      border-color: $color-search;
-      &:hover {
-        background-color: darken($color-search, 10%);
-      }
-    }
-  }
-
   // Table
   .table {
     color: white;

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,15 +97,6 @@
 
     {# 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 %}
       <!-- TODO GW-79 enable after refactoring  <li id="create-page-button" class="nav-item d-none d-md-block"></li> -->
       <li class="nav-item d-none d-md-block">
@@ -114,11 +105,6 @@
           <span>{{ t('New') }}</span>
         </a>
       </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>

src/server/views/widget/passport/ldap-association-tester.html

@@ -1,103 +0,0 @@
-<form id="formTestLdapCredentials" method="post" class="form-horizontal" role="form">
-  <div class="alert-container"></div>
-  <fieldset>
-    <div class="form-group">
-      <label for="username" class="col-xs-3 control-label">{{ t('username') }}</label>
-      <div class="col-xs-6">
-        <input class="form-control" name="loginForm[username]">
-      </div>
-    </div>
-    <div class="form-group">
-      <label for="password" class="col-xs-3 control-label">{{ t('Password') }}</label>
-      <div class="col-xs-6">
-        <input class="form-control col-xs-4" type="password" name="loginForm[password]">
-      </div>
-    </div>
-
-
-  </fieldset>
-
-  {% if showLog %}
-  <fieldset>
-    <h5>Logs</h5>
-    <textarea id="taLogs" class="col-xs-12" rows="4" readonly></textarea>
-  </fieldset>
-  {% endif %}
-
-  <fieldset class="mt-4">
-    <button type="button" class="btn btn-default col-xs-offset-5 col-xs-2" onclick="testLdapCredentials()">{{ t('Test') }}</button>
-  </fieldset>
-
-  <script>
-    /**
-     * test association (ajax)
-     */
-    function testLdapCredentials() {
-      function showMessage(formId, msg, status) {
-        $('#' + formId + ' .alert-container .alert').remove();
-
-        var $message = $('<p class="alert"></p>');
-        $message.addClass('alert-' + status);
-        $message.html(msg.replace(/\n/g, '<br>'));
-        $message.appendTo('#' + formId + '> .alert-container');
-
-        if (status == 'success') {
-          setTimeout(function()
-          {
-            $message.fadeOut({
-              complete: function() {
-                $message.remove();
-              }
-            });
-          }, 5000);
-        }
-      }
-      /**
-       * add logs
-       */
-      function addLogs(formId, log) {
-        const textarea = $(`#${formId} #taLogs`);
-        const newLog = `${new Date()} - ${log}\n\n`;
-        textarea.val(`${newLog}${textarea.val()}`);
-      }
-
-      var $form = $('#formTestLdapCredentials');
-      var $action = '/_api/login/testLdap';
-      var $id = $form.attr('id');
-      var $button = $('button', this);
-      $button.attr('disabled', 'disabled');
-
-      var jqxhr = $.post($action, $form.serialize(), function(data)
-        {
-          if (!data.status) {
-            showMessage($id, 'data.status not found', 'danger');
-          }
-          else {
-            showMessage($id, data.message, data.status);
-          }
-
-          // add logs
-          if ('true' === '{{showLog}}') {
-            if (data.err) {
-              addLogs($id, JSON.stringify(data.err, null, 2));
-            }
-            if (data.ldapConfiguration) {
-              const prettified = JSON.stringify(data.ldapConfiguration.server, undefined, 4);
-              addLogs($id, `LDAP Configuration : ${prettified}`);
-            }
-            if (data.ldapAccountInfo) {
-              const prettified = JSON.stringify(data.ldapAccountInfo, undefined, 4);
-              addLogs($id, `Retrieved LDAP Account : ${prettified}`);
-            }
-          }
-        })
-        .fail(function() {
-          showMessage($id, 'エラーが発生しました', 'danger');
-        })
-        .always(function() {
-          $button.prop('disabled', false);
-        });
-        return false;
-    }
-  </script>
-</form>