Merge branch 'dev/4.0.x' into improve/chenge-helloween-theme

resource/locales/en-US/sandbox.md

@@ -252,12 +252,12 @@ This is the most flexible linker.
 Both the page description and link address can be displayed on the page.
 
 ```
-[[./Bootstrap3]]
-Example of Bootstrap3 is[[here>./Bootstrap3]]
+[[./Bootstrap4]]
+Example of Bootstrap4 is[[here>./Bootstrap4]]
 ```
 
 [[../user]]
-Example of Bootstrap3 is[[here>./Bootstrap3]]
+Example of Bootstrap4 is[[here>./Bootstrap4]]
 
 # :pencil: Lists
 
@@ -449,8 +449,8 @@ See [emojione](https://www.emojione.com/)
 
 # :heavy_plus_sign: More..
 
-- Try to attach Bootstrap3 Tags?
-    - :arrow_right: [/Sandbox/Bootstrap3]
+- Try to attach Bootstrap4 Tags?
+    - :arrow_right: [/Sandbox/Bootstrap4]
 - Try to draw Diagrams?
     - :arrow_right: [/Sandbox/Diagrams]
 - Try to write Math Formulas?

resource/locales/ja/sandbox.md

@@ -251,12 +251,12 @@ ___
 記述中のページを基点とした相対リンクと、表示テキストに対するリンクを同時に実現できます。
 
 ```
-[[./Bootstrap3]]
-Bootstrap3のExampleは[[こちら>./Bootstrap3]]
+[[./Bootstrap4]]
+Bootstrap4のExampleは[[こちら>./Bootstrap4]]
 ```
 
 [[../user]]
-Bootstrap3のExampleは[[こちら>./Bootstrap3]]
+Bootstrap4のExampleは[[こちら>./Bootstrap4]]
 
 # :pencil: Lists
 
@@ -449,8 +449,8 @@ See [emojione](https://www.emojione.com/)
 
 # :heavy_plus_sign: 更に…
 
-- Bootstrap3 のタグを使う
-    - :arrow_right: [/Sandbox/Bootstrap3]
+- Bootstrap4 のタグを使う
+    - :arrow_right: [/Sandbox/Bootstrap4]
 - 図表を書く
     - :arrow_right: [/Sandbox/Diagrams]
 - 数式を書く

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

@@ -160,10 +160,11 @@ class UserManagement extends React.Component {
         <div className="border-top border-bottom">
 
           <div className="row d-flex justify-content-start align-items-center my-2">
-            <div className="col-md-4 d-flex align-items-center my-2">
+            <div className="col-md-3 d-flex align-items-center my-2">
               <i className="icon-magnifier mr-1"></i>
               <span className="search-typeahead">
                 <input
+                  className="w-100"
                   type="text"
                   ref={(searchUserElement) => { this.searchUserElement = searchUserElement }}
                   onChange={this.handleChangeSearchText}
@@ -172,7 +173,7 @@ class UserManagement extends React.Component {
               </span>
             </div>
 
-            <div className="col-md-6 my-2">
+            <div className="offset-md-1 col-md-6 my-2">
               <div className="form-inline">
                 {this.renderCheckbox('all', 'All', 'secondary')}
                 {this.renderCheckbox('registered', 'Approval Pending', 'info')}

src/client/js/components/PageHistory/Revision.jsx

@@ -16,7 +16,8 @@ export default class Revision extends React.Component {
   componentDidMount() {
   }
 
-  _onDiffOpenClicked() {
+  _onDiffOpenClicked(e) {
+    e.preventDefault();
     this.props.onDiffOpenClicked(this.props.revision);
   }
 
@@ -35,7 +36,7 @@ export default class Revision extends React.Component {
         <div className="picture-container">
           {pic}
         </div>
-        <div className="m-l-10">
+        <div className="ml-3">
           <div className="revision-history-meta">
             <span className="text-muted small">
               <UserDate dateTime={revision.createdAt} /> ({ t('No diff') })
@@ -56,13 +57,13 @@ export default class Revision extends React.Component {
       pic = <UserPicture user={author} size="lg" />;
     }
 
-    const iconClass = this.props.revisionDiffOpened ? 'caret caret-opened' : 'caret';
+    const iconClass = this.props.revisionDiffOpened ? 'fa fa-caret-down caret caret-opened' : 'fa fa-caret-down caret';
     return (
       <div className="revision-history-main d-flex mt-3">
         <div className="mt-2">
           {pic}
         </div>
-        <div className="m-l-10">
+        <div className="ml-2">
           <div className="revision-history-author">
             <strong><Username user={author}></Username></strong>
           </div>
@@ -77,13 +78,14 @@ export default class Revision extends React.Component {
                 }
                 { this.props.hasDiff
                   && (
-                  <a className="diff-view" onClick={this._onDiffOpenClicked}>
-                    <i className={iconClass}></i> { t('View diff') }
+                  // use dummy href attr (with preventDefault()), because don't apply style by a:not([href])
+                  <a className="diff-view" href="" onClick={this._onDiffOpenClicked}>
+                    <i className={iconClass}></i> {t('View diff')}
                   </a>
                   )
                 }
               </span>
-              <a href={`?revision=${revision._id}`} className="m-l-10">
+              <a href={`?revision=${revision._id}`} className="ml-2">
                 <i className="icon-login"></i> { t('Go to this version') }
               </a>
             </p>

src/client/styles/scss/_search.scss

@@ -20,7 +20,7 @@
 
   .search-clear {
     position: absolute;
-    top: 4px;
+    top: 5px;
     right: 4px;
     z-index: 3;
     width: 24px;

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

@@ -1,12 +1,9 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
 
+$primary: #00b5b7;
 $themecolor: #16282d;
-$themelight: rgba(11, 79, 104, 0.616);
-$accentcolor: #66eddf;
-
-$primary: $themelight;
-$dark: darken($themecolor, 5%);
+$accentcolor: #00fff5;
 
 html[light],
 html[dark] {
@@ -16,16 +13,16 @@ html[dark] {
   $bgcolor-card: darken($themecolor, 5%);
 
   // Font colors
-  $color-global: lighten($themecolor, 35%);
-  $color-reversal: #eeeeee;
-  $color-header: #d9a364;
-  $color-link: lighten($primary, 20%);
+  $color-global: #95abba;
+  $color-reversal: $accentcolor;
+  $color-header: #95abba;
+  $color-link: $accentcolor;
   $color-link-hover: lighten($color-link, 20%);
-  $color-link-wiki: darken($themecolor, 5%);
+  $color-link-wiki: $accentcolor;
   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-  $color-link-nabvar: $color-reversal;
+  $color-link-nabvar: #a7a7a7;
   $color-inline-code: #c7254e; // optional
-  $color-search: #050a0b;
+  $color-search: $primary;
 
   // List Group colors
   $color-list: $color-global;
@@ -35,18 +32,31 @@ html[dark] {
   $color-list-hover: $color-reversal;
 
   // Navbar
-  $bgcolor-navbar: #011414;
-  $border-color-navbar-gradient-left: #545fff;
-  $border-color-navbar-gradient-right: #00a6e5;
+  $bgcolor-navbar: #01181a;
+  $bgcolor-search-top-dropdown: #00c2c4;
+  $border-image-navbar: linear-gradient(90deg, #6cfff9 0%, #0034c1 45%, #6cfff9 100%);
 
   // Logo colors
   $bgcolor-logo: darken($themecolor, 10%);
-  $fillcolor-logo-mark: lighten($accentcolor, 15%);
+  $fillcolor-logo-mark: #dedede;
 
   // Sidebar
-  $bgcolor-sidebar: $bgcolor-navbar;
-  $color-sidebar-context: $color-reversal;
-  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+  $bgcolor-sidebar: #052e2f;
+  $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #969494; // optional
+
+  // Sidebar contents
+  $color-sidebar-context: #00c2c4;
+  $bgcolor-sidebar-context: #020b0b;
+
+  // Sidebar list group
+  $bgcolor-sidebar-list-group: #162126; // optional
+
+  // Sidebar resize button
+  $color-resize-button: #0E2329;
+  $bgcolor-resize-button: #00C2C4;
+  $color-resize-button-hover: #0E2329;
+  $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
   $color-editor-icons: $color-global;
@@ -79,31 +89,8 @@ html[dark] {
     }
   }
 
-  // Navs {
-  .nav-tabs {
-    border-bottom: $border-color-theme 1px solid;
-    .nav-link {
-      &:hover {
-        border-color: darken($border-color-theme, 10%);
-        border-bottom: none;
-      }
-      &.active {
-        color: $color-link;
-        background-color: transparent;
-        border-color: $border-color-theme;
-      }
-    }
-  }
-
-  // Search Top
-  .search-top {
-    .input-group-prepend .dropdown-toggle {
-      color: #5193a5;
-      background-color: $color-search;
-      border-color: $color-search;
-      &:hover {
-        background-color: darken($color-search, 10%);
-      }
-    }
+  pre {
+    color: #95abba;
+    background-color: #1f1f22;
   }
 }

src/server/routes/installer.js

@@ -38,7 +38,7 @@ module.exports = function(crowi, app) {
 
     // create /Sandbox/*
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox.md'), '/Sandbox', owner, lang));
-    promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-bootstrap4.md'), '/Sandbox/Bootstrap3', owner, lang));
+    promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-bootstrap4.md'), '/Sandbox/Bootstrap4', owner, lang));
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-diagrams.md'), '/Sandbox/Diagrams', owner, lang));
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-math.md'), '/Sandbox/Math', owner, lang));