Merge branch 'dev/4.0.x' into imprv/profile-image-cache

resource/locales/en-US/admin/admin.json

@@ -125,7 +125,10 @@
     "code_highlight": "Code highlight",
     "nocdn_desc": "This function is disabled when the environment variable <code>NO_CDN=true</code>.<br>Github style has been forcibly applied.",
     "custom_title": "Custom title",
-    "custom_title_detail": "You can customize <code>&lt;title&gt;</code> tag.<br><code>&#123;&#123;sitename&#125;&#125;</code> will be automatically replaced with the app name, and <code>&#123;&#123;page&#125;&#125;</code> will be replaced with the page name/path.",
+    "custom_title_detail": "You can customize <code>&lt;title&gt;</code> tag. Following placeholders will be automatically replaced:",
+    "custom_title_detail_placeholder1": "<code>&#123;&#123;sitename&#125;&#125;</code> - The site name of this wiki.",
+    "custom_title_detail_placeholder2": "<code>&#123;&#123;pagename&#125;&#125;</code> - The page name of the current page.",
+    "custom_title_detail_placeholder3": "<code>&#123;&#123;pagepath&#125;&#125;</code> - The page path of the current page.",
     "custom_header": "Custom HTML header",
     "custom_header_detail": "You can customize HTML header that applies all pages. Your custom script will be inserted in <code>&lt;header&gt;</code> but above other <code>&lt;script&gt;</code> tags.<br>Relaod page to see changes.",
     "custom_css": "Custom CSS",

resource/locales/ja/admin/admin.json

@@ -125,7 +125,10 @@
     "code_highlight": "コードハイライト",
     "nocdn_desc": "この機能は、環境変数 <code>NO_CDN=true</code> の時は無効化されます。<br>GitHub スタイルが適用されています。",
     "custom_title": "カスタム Title",
-    "custom_title_detail": "<code>&lt;title&gt;</code>タグのコンテンツをカスタマイズできます。<br><code>&#123;&#123;sitename&#125;&#125;</code>がサイト名、<code>&#123;&#123;page&#125;&#125;</code>がページ名またはページパスに置換されます。",
+    "custom_title_detail": "<code>&lt;title&gt;</code>タグのコンテンツをカスタマイズできます。以下のプレースホルダーは自動的に置換されます:",
+    "custom_title_detail_placeholder1": "<code>&#123;&#123;sitename&#125;&#125;</code> - この Wiki のサイト名",
+    "custom_title_detail_placeholder2": "<code>&#123;&#123;pagename&#125;&#125;</code> - 現在表示中のページ名",
+    "custom_title_detail_placeholder3": "<code>&#123;&#123;pagepath&#125;&#125;</code> - 現在表示中のページパス",
     "custom_header": "カスタム HTML Header",
     "custom_header_detail": "システム全体に適用される HTML を記述できます。<code>&lt;header&gt;</code> タグ内の他の <code>&lt;script&gt;</code> タグ読み込み前に展開されます。<br>変更の反映はページの更新が必要です。",
     "custom_css": "カスタム CSS",

src/client/js/components/Admin/Customize/CustomizeTitle.jsx

@@ -44,19 +44,29 @@ class CustomizeTitle extends React.Component {
           <div className="col-12">
             <Card className="card well">
               <CardBody className="px-0 py-2">
-                <span
-                  // eslint-disable-next-line react/no-danger
-                  dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.custom_title_detail') }}
-                />
+                {/* eslint-disable react/no-danger */}
+                <p dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.custom_title_detail') }} />
+                <ul>
+                  <li>
+                    <span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.custom_title_detail_placeholder1') }} />
+                  </li>
+                  <li>
+                    <span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.custom_title_detail_placeholder2') }} />
+                  </li>
+                  <li>
+                    <span dangerouslySetInnerHTML={{ __html: t('admin:customize_setting.custom_title_detail_placeholder3') }} />
+                  </li>
+                </ul>
+                {/* eslint-enable react/no-danger */}
               </CardBody>
             </Card>
           </div>
 
           {/* TODO i18n */}
           <div className="form-text text-muted col-12">
-            Default Value: <code>&#123;&#123;page&#125;&#125; - &#123;&#123;sitename&#125;&#125;</code>
+            Default Value: <code>&#123;&#123;pagename&#125;&#125; - &#123;&#123;sitename&#125;&#125;</code>
             <br />
-            Default Output: <code className="xml">&lt;title&gt;/Somewhere/Page - {'GROWI'}&lt;&#047;title&gt;</code>
+            Default Output Example: <code className="xml">&lt;title&gt;Page name - My GROWI&lt;&#047;title&gt;</code>
           </div>
           <div className="form-group col-12">
             <input

src/client/js/components/Admin/ExportArchiveData/ArchiveFilesTable.jsx

@@ -14,7 +14,7 @@ class ArchiveFilesTable extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="table-responsive text-nowrap">
+      <div className="table-responsive">
         <table className="table table-bordered">
           <thead>
             <tr>

src/client/js/components/Admin/ExportArchiveData/ArchiveFilesTableMenu.jsx

@@ -12,22 +12,18 @@ class ArchiveFilesTableMenu extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="btn-group admin-user-menu">
+      <div className="btn-group admin-user-menu dropdown">
         <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
           <i className="icon-settings"></i> <span className="caret"></span>
         </button>
         <ul className="dropdown-menu" role="menu">
           <li className="dropdown-header">{t('admin:export_management.export_menu')}</li>
-          <li>
-            <a type="button" href={`/admin/export/${this.props.fileName}`}>
-              <i className="icon-cloud-download" /> {t('admin:export_management.download')}
-            </a>
-          </li>
-          <li>
-            <a type="button" role="button" onClick={() => this.props.onZipFileStatRemove(this.props.fileName)}>
-              <span className="text-danger"><i className="icon-trash" /> {t('admin:export_management.delete')}</span>
-            </a>
-          </li>
+          <a type="button" className="dropdown-item" href={`/admin/export/${this.props.fileName}`}>
+            <i className="icon-cloud-download" /> {t('admin:export_management.download')}
+          </a>
+          <a type="button" className="dropdown-item" role="button" onClick={() => this.props.onZipFileStatRemove(this.props.fileName)}>
+            <span className="text-danger"><i className="icon-trash" /> {t('admin:export_management.delete')}</span>
+          </a>
         </ul>
       </div>
     );

src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx

@@ -131,7 +131,7 @@ export default class ImportCollectionItem extends React.Component {
             { modes.map((mode) => {
               return (
                 <li key={`buttonMode_${mode}`}>
-                  <a type="button" role="button" onClick={() => this.modeSelectedHandler(mode)}>
+                  <a type="button" className="dropdown-item" role="button" onClick={() => this.modeSelectedHandler(mode)}>
                     {this.renderModeLabel(mode, true)}
                   </a>
                 </li>

src/client/js/components/Admin/Notification/GlobalNotificationList.jsx

@@ -103,7 +103,7 @@ class GlobalNotificationList extends React.Component {
                   </li>
                 )}
                   {notification.triggerEvents.includes('pageMove') && (
-                  <li className="list-inline-item badge badge-pill badge-warning" data-toggle="tooltip" data-placement="top" title="Page Move">
+                  <li className="list-inline-item badge badge-pill badge-pink" data-toggle="tooltip" data-placement="top" title="Page Move">
                     <i className="icon-action-redo"></i> MOVE
                   </li>
                 )}
@@ -118,7 +118,7 @@ class GlobalNotificationList extends React.Component {
                   </li>
                 )}
                   {notification.triggerEvents.includes('comment') && (
-                  <li className="list-inline-item badge badge-pill badge-light" data-toggle="tooltip" data-placement="top" title="New Comment">
+                  <li className="list-inline-item badge badge-pill badge-secondary" data-toggle="tooltip" data-placement="top" title="New Comment">
                     <i className="icon-fw icon-bubble"></i> POST
                   </li>
                 )}

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -242,12 +242,12 @@ class ManageGlobalNotification extends React.Component {
               </div>
               <div className="my-1">
                 <TriggerEventCheckBox
-                  checkbox="warning"
+                  checkbox="pink"
                   event="pageMove"
                   checked={this.state.triggerEvents.has('pageMove')}
                   onChange={() => this.onChangeTriggerEvents('pageMove')}
                 >
-                  <span className="badge badge-pill badge-warning">
+                  <span className="badge badge-pill badge-pink">
                     <i className="icon-action-redo mr-1" />MOVE
                   </span>
                 </TriggerEventCheckBox>

src/client/js/components/Admin/UserManagement.jsx

@@ -99,7 +99,7 @@ class UserManagement extends React.Component {
           type="checkbox"
           id={`c_${status}`}
           checked={this.props.adminUsersContainer.isSelected(status)}
-          onClick={() => { this.handleClick(status) }}
+          onChange={() => { this.handleClick(status) }}
         />
         <label className="custom-control-label" htmlFor={`c_${status}`}>
           <span className={`badge badge-pill badge-${statusColor} d-inline-block vt mt-1`}>

src/client/js/components/Admin/Users/ExternalAccountTable.jsx

@@ -99,11 +99,9 @@ class ExternalAccountTable extends React.Component {
                       </button>
                       <ul className="dropdown-menu" role="menu">
                         <li className="dropdown-header">{t('admin:user_management.user_table.edit_menu')}</li>
-                        <li>
-                          <a role="button" onClick={() => { return this.removeExtenalAccount(ea._id) }}>
-                            <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
-                          </a>
-                        </li>
+                        <a className="dropdown-item" role="button" onClick={() => { return this.removeExtenalAccount(ea._id) }}>
+                          <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
+                        </a>
                       </ul>
                     </div>
                   </td>

src/client/js/components/Admin/Users/RemoveAdminButton.jsx

@@ -32,7 +32,7 @@ class RemoveAdminButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" href="" onClick={() => { this.onClickRemoveAdminBtn() }}>
+      <a className="dropdown-item" onClick={() => { this.onClickRemoveAdminBtn() }}>
         <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_management.user_table.remove_admin_access')}
       </a>
     );

src/client/js/components/Admin/Users/StatusActivateButton.jsx

@@ -31,7 +31,7 @@ class StatusActivateButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" href="" onClick={() => { this.onClickAcceptBtn() }}>
+      <a className="dropdown-item" onClick={() => { this.onClickAcceptBtn() }}>
         <i className="icon-fw icon-user-following"></i> {t('admin:user_management.user_table.accept')}
       </a>
     );

src/client/js/components/Admin/Users/StatusSuspendedButton.jsx

@@ -31,7 +31,7 @@ class StatusSuspendedButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" href="" onClick={() => { this.onClickDeactiveBtn() }}>
+      <a className="dropdown-item" onClick={() => { this.onClickDeactiveBtn() }}>
         <i className="icon-fw icon-ban"></i> {t('admin:user_management.user_table.deactivate_account')}
       </a>
     );

src/client/js/components/Admin/Users/UserRemoveButton.jsx

@@ -32,7 +32,7 @@ class UserRemoveButton extends React.Component {
     const { t } = this.props;
 
     return (
-      <a className="dropdown-item" href="" onClick={() => { this.onClickDeleteBtn() }}>
+      <a className="dropdown-item" onClick={() => { this.onClickDeleteBtn() }}>
         <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
       </a>
     );

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

@@ -131,6 +131,8 @@ body.kibela {
   :not(.hljs) > code:not(.hljs) {
     color: $color-inline-code;
     background-color: $bgcolor-inline-code;
+    border: solid 1px $bordercolor-inline-code;
+    border-radius: 0.35em;
   }
 
   /* button */

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

@@ -13,6 +13,9 @@ $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;
+$bgcolor-inline-code: #f0f0f0 !default;
+$color-inline-code: #c7254e !default;
+$bordercolor-inline-code: #ccc8c8 !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -182,6 +185,8 @@ $input-focus-color: $color-global;
 :not(.hljs) > code:not(.hljs) {
   color: $color-inline-code;
   background-color: $bgcolor-inline-code;
+  border: solid 1px $bordercolor-inline-code;
+  border-radius: 0.35em;
 }
 
 /*

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

@@ -49,19 +49,19 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
   $color-global: black;
   $color-reversal: #eeeeee;
   // $color-header: #2b2b2b;
-  $color-link: lighten($color-global, 20%);
+  $color-link: lighten($themecolor, 20%);
   $color-link-hover: lighten($color-link, 20%);
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -71,24 +71,34 @@ html[dark] {
   $color-list-hover: $color-reversal;
 
   // Navbar
-  $bgcolor-navbar: $themecolor;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
-
+  $bgcolor-navbar: #35393f;
+  $bgcolor-search-top-dropdown: #fa9913;
+  $border-image-navbar: linear-gradient(to right, #f6d02e 0%, #f87c00 47%, #f6d02e 100%);
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+  $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: #fa9913;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  // Sidebar contents
+  $color-sidebar-context: $themecolor;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -134,7 +144,7 @@ html[dark] {
 //   $color-link-wiki: lighten($basecolor, 50%);
 //   $color-link-wiki-hover: darken($color-link-wiki, 5%);
 //   $color-link-nabvar: $color-global;
-//   $color-inline-code: #c7254e;
+//   $color-inline-code: #c7254e; // optional
 
 //   // List Group colors
 //   $color-list: $color-global;

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

@@ -23,8 +23,6 @@ $sidebar-text: #ffffff;
 $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%);
 $color-link-wiki: lighten($themecolor, 5%);
 $color-link-wiki-hover: lighten($color-link-wiki, 15%);
-$color-inline-code: darken($subthemecolor, 5%);
-$bgcolor-inline-code: lighten($subthemecolor, 70%);
 $active-nav-tabs-bgcolor: white;
 
 .growi:not(.login-page) {
@@ -44,6 +42,7 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-card: #f5f5f5;
+  $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
   $color-global: $subthemecolor;
@@ -51,6 +50,7 @@ html[dark] {
   $color-link: lighten($color-global, 2%);
   $color-link-hover: lighten($color-link, 20%);
   $color-link-nabvar: $color-reversal;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -77,6 +77,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

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

@@ -19,7 +19,7 @@ html[light] {
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
@@ -31,7 +31,7 @@ html[light] {
   $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   // $color-list: $color-global; // optional
@@ -71,7 +71,8 @@ html[light] {
   $color-editor-icons: $color-global;
 
   // Border colors
-  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;@`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -98,7 +99,7 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: #131418;
-  $bgcolor-inline-code: darken($bgcolor-global, 5%);
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($bgcolor-global, 5%);
 
   // Font colors
@@ -110,7 +111,7 @@ html[dark] {
   $color-link-wiki: $color-link;
   $color-link-wiki-hover: lighten($color-link-wiki, 10%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   // $color-list: $color-global; // optional
@@ -151,6 +152,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

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

@@ -12,7 +12,7 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: $themecolor;
-  $bgcolor-inline-code: darken($themecolor, 5%);
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themecolor, 5%);
 
   // Font colors
@@ -24,7 +24,7 @@ html[dark] {
   $color-link-wiki: darken($themecolor, 5%);
   $color-link-wiki-hover: darken($color-link-wiki, 5%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
   $color-search: #050a0b;
 
   // List Group colors
@@ -53,6 +53,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #407483;
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

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

@@ -36,7 +36,7 @@ html[light],
 html[dark] {
   // Background colors
   $bgcolor-global: #050000;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
@@ -48,7 +48,7 @@ html[dark] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -76,6 +76,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

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

@@ -19,12 +19,14 @@ html[dark] {
   // Background colors
   $bgcolor-card: #f5f5f5;
   $bgcolor-global: lighten($color-themelight, 10%);
+  $bgcolor-inline-code: #f0f0f0; //optional
 
   // Font colors
   $color-reversal: #eeeeee;
   $color-link: lighten($color-global, 20%);
   $color-link-hover: lighten($color-link, 20%);
   $color-link-nabvar: $color-reversal;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -52,6 +54,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc;
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

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

@@ -7,7 +7,8 @@ $subthemecolor: rgb(88, 130, 250);
 $lightthemecolor: rgba(181, 203, 247, 0.61);
 
 // Light Mode
-html[light] {
+html[light],
+html[dark] {
   // Background colors
   $bgcolor-navbar: white;
   $bgcolor-navbar-active: $bgcolor-theme;
@@ -31,71 +32,8 @@ html[light] {
   $bgcolor-list-active: $primary;
   $color-list-hover: $color-reversal;
 
-  // Logo colors
-  $bgcolor-logo: transparent;
-  $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
-
-  // Icon colors
-  $color-editor-icons: $color-global;
-
-  $color-link-wiki: lighten($bgcolor-theme, 20%);
-  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
-  $color-link-nabvar: $color-global;
-  $color-link-nabvar-hover: $color-global;
-  $color-inline-code: $subthemecolor;
-
-  // border colors
-  $border-color-theme: $lightthemecolor;
-  $thickborder: #5584e1;
-
-  // dropdown colors
-  $bgcolor-dropdown-link-active: $growi-blue;
-  $color-dropdown-link-active: $color-reversal;
-  $color-dropdown-link-hover: $color-global;
-
-  // admin theme box
-  $color-theme-color-box: lighten($bgcolor-theme, 20%);
-
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
-  // Sidebar
-  $bgcolor-sidebar: $bgcolor-theme;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-theme, 10%);
-
-  @import 'apply-colors';
-  @import 'apply-colors-light';
-  @import 'apply-colors-kibela';
-}
-
-// Dark Mode ( same as Light Mode )
-html[dark] {
-  // Background colors
-  $bgcolor-navbar: white;
-  $bgcolor-navbar-active: $bgcolor-theme;
-  $bgcolor-global: $themelight;
-  $bgcolor-card: $lightthemecolor;
-  $bgcolor-inline-code: lighten($subthemecolor, 70%);
-  $color-header: $bgcolor-theme;
-  $color-global: #3c4a60;
-  $color-link: rgb(74, 109, 204);
-  $color-link-hover: lighten($color-link, 12%);
-  $sidebar-text: $bgcolor-theme;
-  $color-reversal: #eee;
-
-  $primary: $bgcolor-theme;
-  $info: lighten($bgcolor-theme, 20%);
-
-  // 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;
+  // navbar
+  $bgcolor-search-top-dropdown: $primary;
 
   // Logo colors
   $bgcolor-logo: transparent;
@@ -113,6 +51,7 @@ html[dark] {
   // border colors
   $border-color-theme: $lightthemecolor;
   $thickborder: #5584e1;
+  $bordercolor-inline-code: $lightthemecolor;
 
   // dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -131,7 +70,17 @@ html[dark] {
   // Sidebar
   $bgcolor-sidebar: $bgcolor-theme;
   $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-theme, 5%);
+  $bgcolor-sidebar-context: lighten($bgcolor-theme, 10%);
+  // 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
 
   @import 'apply-colors';
   @import 'apply-colors-light';

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

@@ -12,7 +12,7 @@ html[light] {
 
   // Background colors
   $bgcolor-global: $themelight;
-  $bgcolor-inline-code: lighten($subthemecolor, 70%);
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: darken($themelight, 5%);
 
   // Font colors
@@ -23,7 +23,7 @@ html[light] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
-  $color-inline-code: $subthemecolor;
+  $color-inline-code: #c7254e; // optional
   $color-search: #c0d6df;
 
   // List Group colors
@@ -62,6 +62,7 @@ html[light] {
 
   // Border colors
   $border-color-theme: #ccc;
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;
@@ -107,7 +108,7 @@ html[dark] {
   // Background colors
   $bgcolor-global: $themedark;
   $bgcolor-navbar: #27343b;
-  $bgcolor-inline-code: #0a121b;
+  $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themedark, 5%);
 
   // Font colors
@@ -119,6 +120,7 @@ html[dark] {
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-reversal;
   $color-inline-code: $subthemecolor;
+  $color-inline-code: #c7254e; // optional
   $color-search: #000102;
 
   // List Group colors
@@ -158,6 +160,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #146aa0;
+  $bordercolor-inline-code: #4d4d4d; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $primary;

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

@@ -39,13 +39,13 @@ html[light],
 html[dark] {
   $primary: #460039;
   $light: #f0f0f0;
-  
+
   // Background colors
   $bgcolor-global: #fdfdfd;
-  $bgcolor-inline-code: #eaeaea;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f1ffe4;
   $bgcolor-subnabvar: #fafafa;
-  
+
   // Font colors
   $color-global: #460039;
   $color-reversal: #eeeeee;
@@ -54,14 +54,14 @@ html[dark] {
   $color-link-wiki: lighten($primary, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #890000;
+  $color-inline-code: #c7254e; // optional
   $color-search: white;
-  
+
   // Navbar
   $bgcolor-navbar: #234136;
   $bgcolor-search-top-dropdown: $themecolor;
   $border-image-navbar: linear-gradient(to right, #5c78ef 0%, #16bc42 50%, #5c78ef 100%);
-  
+
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
@@ -80,6 +80,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc;
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

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

@@ -48,22 +48,22 @@ $accentcolor: #e08dbc;
 html[light],
 html[dark] {
   $primary: $themecolor;
+  $secondary: $accentcolor;
 
   // Background colors
   $bgcolor-global: white;
-  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #f5f5f5;
 
   // Font colors
   $color-global: black;
   $color-reversal: white;
-  // $color-header: #2b2b2b;
-  $color-link: lighten($color-global, 20%);
-  $color-link-hover: $subthemecolor;
+  $color-link: $subthemecolor;
+  $color-link-hover: lighten($subthemecolor, 10%);
   $color-link-wiki: $subthemecolor;
-  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+  $color-link-wiki-hover: lighten($color-link-wiki, 10%);
   $color-link-nabvar: $bgcolor-global;
-  $color-inline-code: #c7254e;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
   $color-list: $color-global;
@@ -73,24 +73,33 @@ html[dark] {
   $color-list-hover: lighten($accentcolor, 20%);
 
   // Navbar
-  $bgcolor-navbar: $themecolor;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-navbar: #d3687c;
+  $bgcolor-search-top-dropdown: $themecolor;
+  $border-image-navbar: linear-gradient(to right, #cbe682 0%, #4ad6e8 50%, #ea42f0 100%);
 
   // Logo colors
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+  $bgcolor-sidebar: $themecolor;
+  // Sidebar resize button
+  $color-resize-button: $color-reversal;
+  $bgcolor-resize-button: $subthemecolor;
+  $color-resize-button-hover: $color-reversal;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
+  // Sidebar contents
+  $color-sidebar-context: $subthemecolor;
+  $bgcolor-sidebar-context: #f4f6fc;
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #fafbff; // optional
 
   // Icon colors
   $color-editor-icons: $color-global;
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;

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

@@ -42,7 +42,7 @@ html[dark] {
 
   // Background colors
   $bgcolor-global: #ffffff;
-  $bgcolor-inline-code: #eaeaea;
+  $bgcolor-inline-code: #f0f0f0; //optional
   $bgcolor-card: #ece8de;
 
   // Font colors
@@ -54,7 +54,7 @@ html[dark] {
   $color-link-wiki: lighten($themecolor, 5%);
   $color-link-wiki-hover: lighten($color-link-wiki, 15%);
   $color-link-nabvar: #a7a7a7;
-  $color-inline-code: #890000;
+  $color-inline-code: #c7254e; // optional
   $color-search: white;
 
   // List Group colors
@@ -83,6 +83,7 @@ html[dark] {
 
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+  $bordercolor-inline-code: #ccc8c8; // optional
 
   // Dropdown colors
   $bgcolor-dropdown-link-active: $growi-blue;
@@ -123,7 +124,7 @@ html[dark] {
   }
 
   // Sidebar
-  .grw-sidebar div[data-testid='GlobalNavigation']{
+  .grw-sidebar div[data-testid='GlobalNavigation'] {
     * {
       background-image: url('/images/themes/wood/wood-navbar.jpg');
     }

src/lib/models/devided-page-path.js

@@ -1,11 +1,11 @@
-import { pathUtils } from 'growi-commons';
+const { pathUtils } = require('growi-commons');
 
 // https://regex101.com/r/BahpKX/2
 const PATTERN_INCLUDE_DATE = /^(.+\/[^/]+)\/(\d{4}|\d{4}\/\d{2}|\d{4}\/\d{2}\/\d{2})$/;
 // https://regex101.com/r/WVpPpY/1
 const PATTERN_DEFAULT = /^((.*)\/)?([^/]+)$/;
 
-export default class DevidedPagePath {
+class DevidedPagePath {
 
   constructor(path, skipNormalize = false, evalDatePath = false) {
 
@@ -43,3 +43,5 @@ export default class DevidedPagePath {
   }
 
 }
+
+module.exports = DevidedPagePath;

src/lib/models/linked-page-path.js

@@ -1,12 +1,12 @@
-import { pathUtils } from 'growi-commons';
-import { isTrashPage } from '@commons/util/path-utils';
+const { pathUtils } = require('growi-commons');
+const { isTrashPage } = require('@commons/util/path-utils');
 
-import DevidedPagePath from './devided-page-path';
+const DevidedPagePath = require('./devided-page-path');
 
 /**
  * Linked Array Structured PagePath Model
  */
-export default class LinkedPagePath {
+class LinkedPagePath {
 
   constructor(path, skipNormalize = false) {
 
@@ -34,3 +34,5 @@ export default class LinkedPagePath {
   }
 
 }
+
+module.exports = LinkedPagePath;

src/server/service/customize.js

@@ -1,4 +1,7 @@
-const logger = require('@alias/logger')('growi:service:CustomizeService'); // eslint-disable-line no-unused-vars
+// eslint-disable-next-line no-unused-vars
+const logger = require('@alias/logger')('growi:service:CustomizeService');
+
+const DevidedPagePath = require('@commons/models/devided-page-path');
 
 /**
  * the service class of CustomizeService
@@ -35,17 +38,32 @@ class CustomizeService {
     let configValue = this.configManager.getConfig('crowi', 'customize:title');
 
     if (configValue == null || configValue.trim().length === 0) {
-      configValue = '{{page}} - {{sitename}}';
+      configValue = '{{pagename}} - {{sitename}}';
     }
 
     this.customTitleTemplate = configValue;
   }
 
-  generateCustomTitle(page) {
+  generateCustomTitle(pageOrPath) {
+    const path = pageOrPath.path || pageOrPath;
+    const dPagePath = new DevidedPagePath(path, true, true);
+
+    const customTitle = this.customTitleTemplate
+      .replace('{{sitename}}', this.appService.getAppTitle())
+      .replace('{{pagepath}}', path)
+      .replace('{{page}}', dPagePath.latter) // for backward compatibility
+      .replace('{{pagename}}', dPagePath.latter);
+
+    return this.xssService.process(customTitle);
+  }
+
+  generateCustomTitleForFixedPageName(title) {
     // replace
     const customTitle = this.customTitleTemplate
       .replace('{{sitename}}', this.appService.getAppTitle())
-      .replace('{{page}}', page);
+      .replace('{{page}}', title)
+      .replace('{{pagepath}}', title)
+      .replace('{{pagename}}', title);
 
     return this.xssService.process(customTitle);
   }

src/server/views/admin/app.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('App Settings')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('App Settings')) }}{% endblock %}
 
 {% block head_warn_alert_siteurl_undefined %} {# remove including block for './widget/alert_siteurl_undefined.html' #}
 {% endblock %}

src/server/views/admin/customize.html

@@ -1,5 +1,5 @@
 {% extends '../layout/admin.html' %}
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Customize')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Customize')) }}{% endblock %}
 
 {% block html_additional_headers %}
 {% parent %}

src/server/views/admin/export.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Export Archive Data')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Export Archive Data')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('Export Archive Data') }}</h1>

src/server/views/admin/external-accounts.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('external_account_management')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('external_account_management')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('User_Management') }} / {{ t('external_account_management') }}</h1>

src/server/views/admin/global-notification-detail.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Notification Settings')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Notification Settings')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('Notification Settings') }}</h1>

src/server/views/admin/importer.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Import Data')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Import Data')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('Import Data') }}</h1>

src/server/views/admin/index.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Wiki Management Home Page')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Wiki Management Home Page')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title"> {{ t('Wiki Management Home Page') }}</h1>

src/server/views/admin/markdown.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Markdown Settings')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Markdown Settings')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('Markdown Settings') }}</h1>

src/server/views/admin/notification.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Notification Settings')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Notification Settings')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('Notification Settings') }}</h1>

src/server/views/admin/search.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Full Text Search Management')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Full Text Search Management')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('Full Text Search Management') }}</h1>

src/server/views/admin/security.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('security_settings')) }} · {% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('security_settings')) }} · {% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('security_settings') }}</h1>

src/server/views/admin/user-group-detail.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('UserGroup Management') + '/' + userGroup.name) | preventXss }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('UserGroup Management') + '/' + userGroup.name) | preventXss }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('UserGroup Management') + '/' + userGroup.name | preventXss }}</h1>

src/server/views/admin/user-groups.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('UserGroup Management')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('UserGroup Management')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('UserGroup Management') }}</h1>

src/server/views/admin/users.html

@@ -1,6 +1,6 @@
 {% extends '../layout/admin.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('User_Management')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('User_Management')) }}{% endblock %}
 
 {% block content_header %}
 <h1 class="title">{{ t('User_Management') }}</h1>

src/server/views/installer.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>{{ customizeService.generateCustomTitle(t('installer.setup')) }}</title>
+  <title>{{ customizeService.generateCustomTitleForFixedPageName(t('installer.setup')) }}</title>
   <meta name="description" content="">
   <meta name="author" content="">
 

src/server/views/invited.html

@@ -2,7 +2,7 @@
 
 {% block html_base_css %}invited nologin{% endblock %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle('Registration') }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName('Registration') }}{% endblock %}
 
 
 

src/server/views/layout/layout.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>{% block html_title %}{{ customizeService.generateCustomTitle(path) }}{% endblock %}</title>
+  <title>{% block html_title %}{{ customizeService.generateCustomTitle(page || path) }}{% endblock %}</title>
   <meta name="description" content="">
   <meta name="author" content="">
 

src/server/views/login.html

@@ -2,7 +2,7 @@
 
 {% block html_base_css %}login-page nologin{% endblock %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Sign in')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Sign in')) }}{% endblock %}
 
 
 

src/server/views/login/error.html

@@ -2,7 +2,7 @@
 
 {% block html_base_css %}error nologin{% endblock %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle('セットアップ') }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName('セットアップ') }}{% endblock %}
 
 
 

src/server/views/me/index.html

@@ -1,6 +1,6 @@
 {% extends '../layout-growi/base/layout.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('User Settings')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('User Settings')) }}{% endblock %}
 
 {% block html_base_css %}user-settings-page{% endblock %}
 

src/server/views/tags.html

@@ -1,6 +1,6 @@
 {% extends 'layout/layout.html' %}
 
-{% block html_title %}{{ customizeService.generateCustomTitle(t('Tags')) }}{% endblock %}
+{% block html_title %}{{ customizeService.generateCustomTitleForFixedPageName(t('Tags')) }}{% endblock %}
 
 {% block html_base_css %}tags-page{% endblock %}