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

# Conflicts:
#	src/server/views/layout-crowi/page_list.html

config/webpack.common.js

@@ -34,16 +34,17 @@ module.exports = (options) => {
       'styles/style-presentation':    './src/client/styles/scss/style-presentation.scss',
       // themes
       'styles/theme-default':         './src/client/styles/scss/theme/default.scss',
-      // 'styles/theme-nature':          './src/client/styles/scss/theme/nature.scss',
-      // 'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
+      'styles/theme-nature':          './src/client/styles/scss/theme/nature.scss',
+      'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
       // 'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
       // 'styles/theme-blue-night':      './src/client/styles/scss/theme/blue-night.scss',
       'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
       'styles/theme-halloween':       './src/client/styles/scss/theme/halloween.scss',
-      // 'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
+      'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
       // 'styles/theme-christmas':          './src/client/styles/scss/theme/christmas.scss',
       // 'styles/theme-island':      './src/client/styles/scss/theme/island.scss',
       'styles/theme-antarctic':      './src/client/styles/scss/theme/antarctic.scss',
+      'styles/theme-spring':         './src/client/styles/scss/theme/spring.scss',
       // styles for external services
       'styles/style-hackmd':          './src/client/styles/hackmd/style.scss',
     }, options.entry || {}), // Merge with env dependent settings

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

@@ -97,11 +97,7 @@
       "kibela_title": "Easy Viewing Structure",
       "kibela_text1": "Center aligned contents",
       "kibela_text2": "Show and post comments at the bottom of the page",
-      "kibela_text3": "Affix Table-of-contents",
-      "crowi_title": "Separated Functions",
-      "crowi_text1": "Collapsible Sidebar",
-      "crowi_text2": "Show and post comments in Sidebar",
-      "crowi_text3": "Collapsible Table-of-contents"
+      "kibela_text3": "Affix Table-of-contents"
     },
     "function": "Function",
     "function_desc": "You can choose Valid/Invalid of the function",

resource/locales/ja/admin/admin.json

@@ -97,11 +97,7 @@
       "kibela_title": "閲覧重視の構造",
       "kibela_text1": "コンテンツが中心に表示されます。",
       "kibela_text2": "コメントはページの下部に表示されます。",
-      "kibela_text3": "ページ情報は下部に表示されます。",
-      "crowi_title": "ビュー・コントロールの分離",
-      "crowi_text1": "サイドバーを開くと情報が表示されます。",
-      "crowi_text2": "コメントはサイドバーに表示されます。",
-      "crowi_text3": "ページ情報はサイドバーに表示されます。"
+      "kibela_text3": "ページ情報は下部に表示されます。"
     },
     "function": "機能",
     "function_desc": "機能の有効/無効を選択できます。",

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

@@ -40,7 +40,7 @@ const GrowiSubNavigation = (props) => {
   );
 
   // Display only the RevisionPath
-  if (isPageNotFound || isPageForbidden || isPageInTrash) {
+  if (isPageNotFound || isPageForbidden) {
     return (
       <div className="px-3 py-3 grw-subnavbar">
         { renderFormerLink() }
@@ -83,13 +83,17 @@ const GrowiSubNavigation = (props) => {
       </div>
 
       <div className="d-flex align-items-center">
-        {/* Header Button */}
-        <div className="mr-2">
-          <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
-        </div>
-        <div>
-          <BookmarkButton pageId={pageId} crowi={appContainer} />
-        </div>
+        { !isPageInTrash && (
+          /* Header Button */
+          <div className="mr-2">
+            <LikeButton pageId={pageId} isLiked={pageContainer.state.isLiked} />
+          </div>
+        ) }
+        { !isPageInTrash && (
+          <div>
+            <BookmarkButton pageId={pageId} crowi={appContainer} />
+          </div>
+        ) }
 
         {/* Page Authors */}
         <ul className="authors text-nowrap d-none d-lg-block d-edit-none">

src/client/styles/scss/_comment_crowi.scss

@@ -1,5 +0,0 @@
-.crowi {
-  .page-comment-main {
-    margin-bottom: 0.5em;
-  }
-}

src/client/styles/scss/_layout_crowi.scss

@@ -1,38 +0,0 @@
-.crowi {
-  header {
-    #search-listpage-form {
-      .btn-sm {
-        line-height: 0.5em;
-      }
-    }
-  }
-
-  .revision-toc {
-    float: right;
-    max-width: 250px;
-    overflow: hidden;
-    border: solid 1px #aaa;
-    border-radius: 5px;
-
-    .revision-toc-head {
-      display: inline-block;
-      float: right;
-      padding: 3px 11px;
-      margin-bottom: 5px;
-      margin-left: 5px;
-      font-weight: bold;
-      background: $gray-200;
-      border-bottom: solid 1px #aaa;
-      border-left: solid 1px #aaa;
-      border-radius: 0 5px;
-
-      &.collapsed {
-        margin: 0;
-        border: none;
-      }
-    }
-    .revision-toc-content {
-      background: #fcfcfc;
-    }
-  }
-}

src/client/styles/scss/_layout_crowi_sidebar.scss

@@ -1,201 +0,0 @@
-.crowi-sidebar {
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100%;
-  padding: 65px 0 0 0;
-  overflow: auto;
-  border-left: solid 1px transparent;
-
-  transition: 0.3s ease;
-
-  .page-meta {
-    padding: 15px 15px 5px 15px;
-    font-size: 0.9em;
-
-    line-height: 1.4em;
-    border-bottom: solid 1px #ccc;
-    p {
-      line-height: 1.4em;
-    }
-
-    .creator-picture {
-      text-align: center;
-      img {
-        width: 48px;
-        height: 48px;
-        border: 1px solid #ccc;
-      }
-    }
-    .creator {
-      font-size: 1.3em;
-      font-weight: bold;
-    }
-    .created-at {
-    }
-
-    .like-box {
-      padding-bottom: 0;
-
-      .dl-horizontal {
-        margin-bottom: 0;
-
-        dt,
-        dd {
-          padding-top: 5px;
-          padding-bottom: 5px;
-          border-top: solid 1px #ccc;
-        }
-        dt {
-          width: 80px;
-        }
-        dd {
-          margin-left: 90px;
-          text-align: right;
-        }
-      }
-    }
-
-    .liker-user-count,
-    .seen-user-count {
-      margin-bottom: 5px;
-      font-size: 1.2em;
-      font-weight: bold;
-    }
-  }
-
-  .side-content {
-    padding: 15px;
-    margin-bottom: 100px;
-
-    h3 {
-      font-size: 1.1em;
-    }
-
-    ul.fitted-list {
-      padding-left: 0;
-      li {
-        margin-bottom: 2px;
-
-        .input-group-addon {
-          padding: 5px 6px;
-        }
-      }
-    }
-
-    .page-comments {
-      margin: 8px 0 0 0;
-
-      .page-comment-form {
-        margin-top: 16px;
-
-        .comment-form-main {
-          .navbar-editor button {
-            padding: 5px;
-            font-size: 12px;
-          }
-          .overlay-gfm-cheatsheet {
-            display: none; // hide cheatsheet
-          }
-          .CodeMirror {
-            height: 150px;
-          }
-          .comment-submit {
-            margin-top: 8px;
-          }
-        }
-      }
-
-      hr {
-        border-color: #ccc;
-      }
-
-      .page-comments-list {
-        .page-comment {
-          padding-top: 8px;
-          margin-top: 8px;
-
-          .picture {
-            float: left;
-            width: 24px;
-            height: 24px;
-          }
-
-          .page-comment-creator {
-            font-weight: bold;
-          }
-
-          .page-comment-main {
-            position: relative;
-            margin-left: 40px;
-
-            .page-comment-meta {
-              font-size: 0.9em;
-              color: #aaa;
-            }
-            .page-comment-body {
-              padding: 8px 0;
-              word-wrap: break-word;
-            }
-            .page-comment-control {
-              position: absolute;
-              top: 0;
-              right: 0;
-              display: none; // default hidden
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .portal-form-button {
-    text-align: center;
-  }
-
-  .system-version {
-    position: fixed;
-    right: 1.4em;
-    bottom: 0.1em;
-    z-index: 1;
-
-    display: flex;
-    justify-content: space-between;
-    width: calc(25% - 1.5em);
-    padding-right: 1em;
-    opacity: 1;
-
-    transition: 0.3s ease;
-  }
-}
-
-body:not(.aside-hidden) #toggle-crowi-sidebar {
-  i.ti-angle-left {
-    display: none;
-  }
-  i.ti-angle-right {
-    display: block;
-  }
-}
-
-.aside-hidden {
-  #toggle-crowi-sidebar {
-    right: 0;
-    i.ti-angle-right {
-      display: block;
-    }
-    i.ti-angle-right {
-      display: none;
-    }
-  }
-
-  .crowi-sidebar,
-  .system-version {
-    right: -25%;
-  }
-
-  .grw-subnav .col-md-9,
-  .main {
-    width: 100%;
-  }
-}

src/client/styles/scss/_on-edit.scss

@@ -36,12 +36,6 @@ body.on-edit {
     display: none !important;
   }
 
-  // hide unnecessary elements for crowi layout
-  #toggle-crowi-sidebar,
-  .crowi-sidebar {
-    display: none;
-  }
-
   // show only either Edit button or HackMD button
   &.hackmd .nav-tab-edit {
     display: none;

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

@@ -24,7 +24,6 @@
 @import 'admin';
 @import 'attachments';
 @import 'comment';
-@import 'comment_crowi';
 @import 'comment_growi';
 @import 'comment_kibela';
 @import 'drawio';
@@ -35,8 +34,6 @@
 @import 'editor-navbar';
 @import 'handsontable';
 @import 'layout';
-@import 'layout_crowi';
-@import 'layout_crowi_sidebar';
 @import 'layout_growi';
 @import 'layout_kibela';
 @import 'layout_variable';

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

@@ -7,6 +7,7 @@ $body-bg: $bgcolor-global;
 $body-color: $color-global;
 $link-color: $color-link;
 $link-hover-color: $color-link-hover;
+$input-focus-color: $color-global;
 
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';

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

@@ -1,8 +1,191 @@
-// import colors
-@import '../../agile-admin/inverse/colors/mono-blue';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
 
-// override
-@import 'override-agileadmin';
+
+html[light] {
+  // Theme colors
+  $themecolor: #00587a;
+  $themelight: #f7fbfd;
+  $accentcolor: #16617d;
+  $subthemecolor: #186718;
+
+  $primary: $themecolor;
+
+  // Background colors
+  $bgcolor-global: $themelight;
+  $bgcolor-navbar: $themecolor;
+  $bgcolor-inline-code: lighten($subthemecolor, 70%);
+  $bgcolor-card: darken($themelight, 5%);
+
+  // Font colors
+  $color-global: $themecolor;
+  $color-reversal: #eee;
+  $color-link: lighten($primary, 5%);
+  $color-link-hover: lighten($color-link, 12%);
+  $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-search: #c0d6df;
+
+
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: transparent;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
+  // Logo colors
+  $bgcolor-logo: $themecolor;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc;
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $primary;
+  $color-dropdown-link-active: $color-reversal;
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // 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';
+
+  // Navs {
+  .nav-tabs {
+    border-bottom: $border-color-theme 1px solid;
+    .nav-link {
+      &:hover {
+        border-color: lighten($border-color-theme, 10%);
+        border-bottom: none;
+      }
+      &.active {
+        background-color: transparent;
+      }
+    }
+  }
+
+  // Search Top
+  .search-top {
+    .input-group-prepend .dropdown-toggle {
+      color: $themecolor;
+      background-color: $color-search;
+      &:hover {
+        background-color: darken($color-search, 10%);
+      }
+    }
+  }
+}
+
+html[dark] {
+  // Theme colors
+  $themecolor: #0090c8;
+  $themedark: #061f2f;
+  $accentcolor: #16617d;
+  $subthemecolor: #c1f1f0;
+
+  $primary: $themecolor;
+  $dark: #031018;
+
+  // Background colors
+  $bgcolor-global: $themedark;
+  $bgcolor-navbar: #27343b;
+  $bgcolor-inline-code: #0a121b;
+  $bgcolor-card: darken($themedark, 5%);
+
+  // Font colors
+  $color-global: #d3d4d4;
+  $color-reversal: #eee;
+  $color-link: #97d1f0;
+  $color-link-hover: darken($color-link, 12%);
+  $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-search: #000102;
+
+
+  // List Group colors
+  $color-list: $color-global;
+  $bgcolor-list: transparent;
+  $color-list-active: $color-reversal;
+  $bgcolor-list-active: $primary;
+  $color-list-hover: $color-reversal;
+
+  // Logo colors
+  $bgcolor-logo: #13191c;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+  // $fillcolor-logo-mark: #4e5a60;
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #146aa0;
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $primary;
+  $color-dropdown-link-active: $color-reversal;
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // 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 {
+  .nav-tabs {
+    border-bottom: $border-color-theme 1px solid;
+    .nav-link {
+      &:hover {
+        border-color: lighten($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 {
+      background-color: $color-search;
+      border-color: $color-search;
+      &:hover {
+        background-color: darken($color-search, 10%);
+      }
+    }
+  }
+
+  // Table
+  .table {
+    color: white;
+  }
+}

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

@@ -1,8 +1,174 @@
-// import colors
-@import '../../agile-admin/inverse/colors/nature';
-
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
-
-// override
-@import 'override-agileadmin';
+@import '../variables';
+@import '../override-bootstrap-variables';
+
+// == Define Bootstrap theme colors
+//
+
+// colors for overriding bootstrap $theme-colors
+// $secondary: #;
+// $info: #;
+// $success: #;
+// $warning: #;
+// $danger: #;
+// $light: #;
+// $dark: #;
+
+.growi:not(.login-page) {
+  // add background-image
+  #page-wrapper,
+  .page-editor-preview-container {
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+.growi.login-page {
+  #page-wrapper {
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+$themecolor: #118050;
+$themelight: #fefffd;
+
+//== Light Mode
+//
+html[light],
+html[dark] {
+  $bgcolor-theme: #460039;
+
+  $bgcolor-navbar: #118050;
+  $bgcolor-global: #fefffd;
+
+  $color-header: #46694e;
+  $color-global: #333333;
+  $linktext: lighten($bgcolor-theme, 5%);
+  $linktext-hover: lighten($linktext, 12%);
+  $sidebar-text: #5c7253;
+
+  $primary: $bgcolor-theme;
+
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
+  $color-link-wiki: lighten($bgcolor-theme, 20%);
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+
+  // Background colors
+  $bgcolor-global: $themelight;
+  $bgcolor-navbar: $themecolor;
+  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-card: #f5f5f5;
+
+  // Font colors
+  $color-global: $bgcolor-theme;
+  $color-reversal: #eeeeee;
+  $color-link: lighten($color-global, 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;
+
+  // 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;
+
+  // Logo colors
+  $bgcolor-logo: $bgcolor-navbar;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc;
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+
+  .table {
+    background-color: $themelight;
+  }
+}
+
+//== Dark Mode
+//
+// html[dark] {
+//   $primary: #d65a31;
+
+//   $basecolor: #222831;
+
+//   // Background colors
+//   $bgcolor-global: $basecolor;
+//   $bgcolor-navbar: #151515;
+//   $bgcolor-inline-code: darken($basecolor, 5%);
+//   $bgcolor-card: darken($basecolor, 5%);
+
+//   // Font colors
+//   $color-global: #eeeeee;
+//   $color-reversal: #333333;
+//   // $color-header: desaturate($primary, 20%);
+//   $color-link: $primary;
+//   $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-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;
+
+//   // Logo colors
+//   $bgcolor-logo: $bgcolor-navbar;
+//   $fillcolor-logo-mark: #444;
+
+//   // Icon colors
+//   $color-editor-icons: darken($accentcolor, 15%);
+
+//   // Border colors
+//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+
+//   // Dropdown colors
+//   $bgcolor-dropdown-link-active: $primary;
+//   $color-dropdown-link-active: $color-global;
+//   $color-dropdown-link-hover: $color-reversal;
+
+//   // alert
+//   $color-alert: $color-global;
+
+//   // badge
+//   $color-badge: $color-global;
+
+//   // Sidebar
+//   $bgcolor-sidebar: $bgcolor-navbar;
+//   $color-sidebar-context: $color-global;
+//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
+//   @import 'apply-colors';
+//   @import 'apply-colors-dark';
+// }

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

@@ -1,8 +1,172 @@
-// import colors
-@import '../../agile-admin/inverse/colors/spring';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+// == Define Bootstrap theme colors
+//
 
-// override
-@import 'override-agileadmin';
+// colors for overriding bootstrap $theme-colors
+// $secondary: #;
+// $info: #;
+// $success: #;
+// $warning: #;
+// $danger: #;
+// $light: #;
+// $dark: #;
+
+.growi:not(.login-page) {
+  // add background-image
+  #page-wrapper,
+  .page-editor-preview-container {
+    background-image: url('/images/themes/spring/spring02.svg');
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+.growi.login-page {
+  #page-wrapper {
+    background-image: url('/images/themes/spring/spring.svg');
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+$themecolor: #ffb8c6;
+$themelight: #fff0f5;
+$subthemecolor: #67a856;
+$third-main-color: antiquewhite;
+$accentcolor: #e08dbc;
+
+.grw-navbar {
+  border-bottom: $accentcolor 4px solid;
+}
+
+//== Light Mode
+//
+html[light],
+html[dark] {
+  $primary: $themecolor;
+
+  // Background colors
+  $bgcolor-global: white;
+  $bgcolor-navbar: $themecolor;
+  $bgcolor-inline-code: #f9f2f4;
+  $bgcolor-card: #f5f5f5;
+
+  // Font colors
+  $color-global: black;
+  $color-reversal: #eeeeee;
+  // $color-header: #2b2b2b;
+  $color-link: lighten($color-global, 20%);
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-wiki: $subthemecolor;
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+  $color-link-nabvar: $color-reversal;
+  $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;
+
+  // Logo colors
+  $bgcolor-logo: $bgcolor-navbar;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-inline-code, 10%), 15%);
+
+  // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+
+  .table {
+    background-color: $bgcolor-global;
+  }
+  .card-timeline > .card-header {
+    background-color: $third-main-color;
+  }
+}
+
+//== Dark Mode
+//
+// html[dark] {
+//   $primary: #d65a31;
+
+//   $basecolor: #222831;
+
+//   // Background colors
+//   $bgcolor-global: $basecolor;
+//   $bgcolor-navbar: #151515;
+//   $bgcolor-inline-code: darken($basecolor, 5%);
+//   $bgcolor-card: darken($basecolor, 5%);
+
+//   // Font colors
+//   $color-global: #eeeeee;
+//   $color-reversal: #333333;
+//   // $color-header: desaturate($primary, 20%);
+//   $color-link: $primary;
+//   $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-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;
+
+//   // Logo colors
+//   $bgcolor-logo: $bgcolor-navbar;
+//   $fillcolor-logo-mark: #444;
+
+//   // Icon colors
+//   $color-editor-icons: darken($accentcolor, 15%);
+
+//   // Border colors
+//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+
+//   // Dropdown colors
+//   $bgcolor-dropdown-link-active: $primary;
+//   $color-dropdown-link-active: $color-global;
+//   $color-dropdown-link-hover: $color-reversal;
+
+//   // alert
+//   $color-alert: $color-global;
+
+//   // badge
+//   $color-badge: $color-global;
+
+//   // Sidebar
+//   $bgcolor-sidebar: $bgcolor-navbar;
+//   $color-sidebar-context: $color-global;
+//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
+//   @import 'apply-colors';
+//   @import 'apply-colors-dark';
+// }

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

@@ -1,8 +1,169 @@
-// import colors
-@import '../../agile-admin/inverse/colors/wood';
+@import '../variables';
+@import '../override-bootstrap-variables';
 
-// apply agile-admin theme
-@import '../../agile-admin/inverse/style';
+// == Define Bootstrap theme colors
+//
+// colors for overriding bootstrap $theme-colors
+// $secondary: #;
+// $success: #;
+// $warning: #;
+// $danger: #;
+// $light: #;
+// $dark: #;
 
-// override
-@import 'override-agileadmin';
+.growi:not(.login-page) {
+
+  // add background-image
+  #page-wrapper,
+  .page-editor-preview-container {
+    background-image: url('/images/themes/wood/wood.jpg');
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+.growi.login-page {
+  #page-wrapper {
+    background-image: url('/images/themes/wood/wood.jpg');
+    background-attachment: fixed;
+    background-position: center center;
+    background-size: cover;
+  }
+}
+
+$themecolor: #aaa45f;
+$themelight: #f5f3ee;
+$accentcolor: #577254;
+
+//== Light Mode
+//
+html[light],
+html[dark] {
+  $primary: $themecolor;
+
+  // Background colors
+  $bgcolor-global: $themelight;
+  $bgcolor-navbar: $themecolor;
+  $bgcolor-inline-code: darken($themecolor, 20%);
+  $bgcolor-card: #f5f5f5;
+
+  // Font colors
+  $color-global: black;
+  $color-reversal: #fffffc;
+  // $color-header: #2b2b2b;
+  $color-link: lighten($color-global, 20%);
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-wiki: lighten($themecolor, 5%);
+  $color-link-wiki-hover: lighten($color-link-wiki, 15%);
+  $color-link-nabvar: $color-reversal;
+  $color-inline-code: lighten($accentcolor, 70%);
+
+  // 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;
+
+  // Logo colors
+  $bgcolor-logo: darken($themecolor, 10%);
+  $fillcolor-logo-mark: lighten(desaturate($themecolor, 50%), 50%); // Icon colors
+  $color-editor-icons: $color-global;
+
+  // Border colors
+  $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
+
+  // Dropdown colors
+  $bgcolor-dropdown-link-active: $growi-blue;
+  $color-dropdown-link-active: $color-reversal;
+  $color-dropdown-link-hover: $color-global;
+
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
+  // Sidebar
+  $bgcolor-sidebar: $bgcolor-navbar;
+  $color-sidebar-context: $color-reversal;
+  $bgcolor-sidebar-context: lighten($bgcolor-navbar, 10%);
+
+  // portal
+  $info: lighten($themecolor, 10%);
+
+  @import 'apply-colors';
+  @import 'apply-colors-light';
+
+  .table {
+    background-color: $themelight;
+  }
+
+  .grw-navbar {
+    background-image: url('/images/themes/wood/wood-navbar.jpg');
+    border-bottom: $accentcolor 4px solid;
+
+  }
+}
+
+//== Dark Mode
+//
+// html[dark] {
+//   $primary: #d65a31;
+
+//   $basecolor: #222831;
+
+//   // Background colors
+//   $bgcolor-global: $basecolor;
+//   $bgcolor-navbar: #151515;
+//   $bgcolor-inline-code: darken($basecolor, 5%);
+//   $bgcolor-card: darken($basecolor, 5%);
+
+//   // Font colors
+//   $color-global: #eeeeee;
+//   $color-reversal: #333333;
+//   // $color-header: desaturate($primary, 20%);
+//   $color-link: $primary;
+//   $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-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;
+
+//   // Logo colors
+//   $bgcolor-logo: $bgcolor-navbar;
+//   $fillcolor-logo-mark: #444;
+
+//   // Icon colors
+//   $color-editor-icons: darken($accentcolor, 15%);
+
+//   // Border colors
+//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
+
+//   // Dropdown colors
+//   $bgcolor-dropdown-link-active: $primary;
+//   $color-dropdown-link-active: $color-global;
+//   $color-dropdown-link-hover: $color-reversal;
+
+//   // alert
+//   $color-alert: $color-global;
+
+//   // badge
+//   $color-badge: $color-global;
+
+//   // Sidebar
+//   $bgcolor-sidebar: $bgcolor-navbar;
+//   $color-sidebar-context: $color-global;
+//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
+
+//   @import 'apply-colors';
+//   @import 'apply-colors-dark';
+// }

src/server/views/layout-crowi/base/layout.html

@@ -1,58 +0,0 @@
-{% extends '../../layout/layout.html' %}
-
-{% block html_title %}{{ customizeService.generateCustomTitle(path) }}{% endblock %}
-
-{% block html_additional_headers %}
-  {% parent %}
-  {{ cdnScriptTag('highlight-addons') }}
-  {{ cdnScriptTag('drawio-viewer') }}
-{% endblock %}
-
-{% block layout_main %}
-<div class="container-fluid">
-
-  <a href="" class=" hidden-xs hidden-sm layout-control" id="toggle-crowi-sidebar">
-    <i class="ti-angle-right"></i><i class="ti-angle-left"></i> <span class="hide-on-affix-top"></span>
-  </a>
-  <aside class="crowi-sidebar col-md-3 hidden-xs hidden-sm hidden-print">
-
-    {% block side_header %}
-    {% endblock %}
-
-    <div class="side-content">
-      {% block side_content %}
-      {% endblock %}
-    </div>
-
-    {% block side_footer %}
-    {% endblock %}
-
-    {% include '../../widget/system-version.html' %}
-  </aside>
-
-  <div class="row grw-subnav d-edit-none">
-    <div class="col-md-9">
-      {% block content_header %}
-      {% endblock %}
-    </div>
-  </div><!-- /.grw-subnav -->
-
-  <div class="row">
-    <div id="main" class="main col-md-9 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">
-      {% block content_main_before %}
-      {% endblock %}
-
-      {% block content_main %}
-      {% endblock content_main %}
-
-      {% block content_main_after %}
-      {% endblock %}
-
-      {% block content_footer %}
-      {% endblock %}
-
-    </div>
-  </div>
-
-</div><!-- /.container-fluid -->
-{% endblock %} {# layout_main #}

src/server/views/layout-crowi/forbidden.html

@@ -1,40 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_header %}
-
-  {% block content_header_before %}
-  {% endblock %}
-
-  <header id="page-header">
-    <div>
-      <div>
-        <h1 class="title" id="revision-path"></h1>
-        {% if page and not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-    </div>
-  </header>
-
-  {% block content_header_after %}
-  {% endblock %}
-
-{% endblock %} {# /content_head #}
-
-
-{% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
-{% endblock %}
-
-
-{% block content_main %}
-  {% include '../widget/forbidden_content.html' %}
-{% endblock %}
-
-
-{% block content_main_after %}
-{% endblock %}
-
-
-{% block content_footer %}
-{% endblock %}

src/server/views/layout-crowi/not_creatable.html

@@ -1,40 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_header %}
-
-  {% block content_header_before %}
-  {% endblock %}
-
-  <header id="page-header">
-    <div>
-      <div>
-        <h1 class="title" id="revision-path"></h1>
-        {% if page and not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-    </div>
-  </header>
-
-  {% block content_header_after %}
-  {% endblock %}
-
-{% endblock %} {# /content_head #}
-
-
-{% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
-{% endblock %}
-
-
-{% block content_main %}
-  {% include '../widget/not_creatable_content.html' %}
-{% endblock %}
-
-
-{% block content_main_after %}
-{% endblock %}
-
-
-{% block content_footer %}
-{% endblock %}

src/server/views/layout-crowi/not_found.html

@@ -1,40 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_header %}
-
-  {% block content_header_before %}
-  {% endblock %}
-
-  <header id="page-header">
-    <div>
-      <div>
-        <h1 class="title" id="revision-path"></h1>
-        {% if not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-    </div>
-  </header>
-
-  {% block content_header_after %}
-  {% endblock %}
-
-{% endblock %} {# /content_head #}
-
-
-{% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
-{% endblock %}
-
-
-{% block content_main %}
-  {% include '../widget/not_found_content.html' %}
-{% endblock %}
-
-
-{% block content_main_after %}
-{% endblock %}
-
-
-{% block content_footer %}
-{% endblock %}

src/server/views/layout-crowi/page.html

@@ -1,69 +0,0 @@
-{% extends 'base/layout.html' %}
-
-
-{% block content_header %}
-
-  {% block content_header_before %}
-  {% endblock %}
-
-  <header id="page-header">
-    <div class="d-flex align-items-center">
-      <div class="title-container">
-        <h1 class="title" id="revision-path"></h1>
-        {% if page and not forbidden and not isTrashPage() %}
-          <div id="tag-label"></div>
-        {% endif %}
-      </div>
-    </div>
-  </header>
-
-  {% block content_header_after %}
-  {% endblock %}
-
-{% endblock %}
-
-
-{% block content_main_before %}
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="m-b-30">
-    {% include '../widget/page_content.html' %}
-  </div>
-{% endblock %}
-
-
-{% block content_main_after %}
-{% endblock %}
-
-
-{% block content_footer %}
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
-{% endblock %}
-
-{% block side_header %}
-  {% if page and not page.isDeleted() %}
-    {% include 'widget/page_side_header.html' %}
-  {% endif %}
-{% endblock %} {# side_header #}
-
-{% block side_content %}
-  {% if page and not page.isDeleted() %}
-    {% include 'widget/page_side_content.html' %}
-  {% endif %}
-{% endblock %}
-
-{% block layout_footer %}
-{% endblock %}
-
-{% block body_end %}
-  <div id="presentation-layer" class="fullscreen-layer">
-    <div id="presentation-container"></div>
-  </div>
-  <div id="crowi-modals">
-    {% include '../widget/page_modals.html' %}
-  </div>
-{% endblock %}

src/server/views/layout-crowi/page_list.html

@@ -1,82 +0,0 @@
-{% extends 'base/layout.html' %}
-
-
-{% block html_base_attr %}
-  data-spy="scroll"
-  data-target="#search-result-list"
-{% endblock %}
-
-{% block content_header %}
-
-{% block content_header_before %}
-{% endblock %}
-
-<header id="page-header" class="{% if page %}has-page{% endif %}">
-
-  <div class="d-flex align-items-center">
-    <div class="title-container">
-      <h1 class="title" id="revision-path"></h1>
-      {% if page and not forbidden and not isTrashPage() %}
-        <div id="tag-label"></div>
-      {% endif %}
-    </div>
-  </div>
-
-</header>
-
-{% endblock %}
-
-{% block content_main %}
-
-  {% block content_main_before %}
-  {% endblock %}
-
-  {# page-list-search should be fully managed by react.js,
-  # but now the header and page list content is rendered separately by the server,
-  # so now bind the values through the hidden fields.
-  #}
-  {% if false %} {# Disable temporaly -- 2018.03.08 Yuki Takei #}
-  {% if isSearchServiceConfigured() && !isTopPage() && !isTrashPage() %}
-  <div id="page-list-search">
-  </div>
-  {% endif %}
-  {% endif %}
-
-  <div>
-    {% include '../widget/page_content.html' %}
-  </div>
-
-  <div class="row page-list d-edit-none d-print-none {% if page.isPortal() %}mt-5{% endif %}">
-    <div class="col-md-12">
-      {% include '../widget/page_list_and_timeline.html' %}
-    </div>
-  </div>
-
-{% endblock %}
-
-
-{% block content_main_after %}
-{% endblock %}
-
-
-{% block content_footer %}
-<footer>
-</footer>
-{% endblock %}
-
-
-{% block side_header %}
-
-{% if not page and not isUserPageList(path) and !isTrashPage() %}
-  {% include '../widget/create_portal.html' %}
-{% else %}
-  {% include 'widget/page_side_header.html' %}
-{% endif %}
-
-{% endblock %} {# side_header #}
-
-{% block body_end %}
-<div id="crowi-modals">
-  {% include '../modal/unportalize.html' %}
-</div>
-{% endblock %} {# body_end #}

src/server/views/layout-crowi/user_page.html

@@ -1,19 +0,0 @@
-{% extends 'page.html' %}
-
-{% block main_css_class %}user-page{% endblock %}
-
-
-{% block content_header %}
-  {% if pageUser %}
-    {% include '../widget/user_page_header.html' %}
-  {% else %}
-    {% parent %}
-  {% endif %}
-{% endblock %}
-
-
-{% block content_main_before %}
-  <div class="m-b-30 user-page-content-container d-edit-none hidden-print">
-    {% include '../widget/user_page_content.html' %}
-  </div>
-{% endblock %}

src/server/views/layout-crowi/widget/page_side_content.html

@@ -1,23 +0,0 @@
-<h3><i class="icon-link"></i> {{ t('Share') }}</h3>
-<ul class="fitted-list">
-  <li class="input-group">
-    <span class="input-group-addon">{{ t('Share Link') }}</span>
-    <input readonly class="copy-link form-control" type="text" value="{{ appTitle }} {{ path }} {{ baseUrl }}/{{ page._id.toString() }}">
-  </li>
-  <li class="input-group">
-    <span class="input-group-addon">Markdown</span>
-    <input readonly class="copy-link form-control" type="text" value="[{{ path }}]({{ baseUrl }}/{{ page._id.toString() }})">
-  </li>
-</ul>
-
-<h3><i class="icon-bubble"></i> Comments</h3>
-<div class="page-comments">
-  {% if page and not page.isDeleted() %}
-  <div id="page-comment-write"></div>
-  <hr>
-  {% endif %}
-
-  <div id="page-comment-form-behavior"></div>
-
-  <div class="page-comments-list" id="page-comments-list"></div>
-</div>

src/server/views/layout-crowi/widget/page_side_header.html

@@ -1,43 +0,0 @@
-{% if page %} {# {{{ if page #}
-<div class="page-meta">
-  <div class="row">
-    {# default(author) としているのは、v1.1.1 以前に page.creator データが入ってないから。暫定として最新更新ユーザーを表示しちゃう。 #}
-    <div class="col-md-3 creator-picture">
-      <a href="{{ userPageRoot(page.creator) }}">
-        <img src="{{ page.creator|default(author)|picture }}" class="picture picture-lg rounded-circle"><br>
-      </a>
-    </div>
-    <div class="col-md-9">
-      <p class="creator">
-        <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a>
-      </p>
-      <p class="created-at">
-        {{ t('Created') }}: {{ page.createdAt|datetz('Y/m/d H:i:s') }}<br>
-        {{ t('Last updated') }}: {{ page.updatedAt|datetz('Y/m/d H:i:s') }} <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author|picture }}" class="picture picture-xs rounded-circle" alt="{{ page.revision.author.name }}"></a>
-      </p>
-    </div>
-  </div>
-
-  <span class="like-box">
-    <dl class="dl-horizontal">
-      <dt class="text-info">
-        <i class="icon-like"></i> {{ t('Like!') }}
-      </dt>
-      <dd>
-        <p class="liker-user-count">{{ page.liker.length|default(0) }}</p>
-        {% if page.liker.length > 15 %}<span class="text-muted">..</span>{% endif %}
-        <span id="liker-list" data-user-ids="{{ page.liker|slice(-15)|default([])|join(',') }}"></span>
-      </dd>
-
-      <dt class="text-danger">
-        <i class="fa fa-paw"></i> {{ t('Seen by') }}
-      </dt>
-      <dd>
-        <p class="seen-user-count">{{ page.seenUsers.length|default(0) }}</p>
-        {% if page.seenUsers.length > 15 %}<span class="text-muted">..</span>{% endif %}
-        <span id="seen-user-list" data-user-ids="{{ page.seenUsers|slice(-15)|default([])|join(',') }}"></span>
-      </dd>
-    </dl>
-  </div>
-</iv>
-{% endif %} {# if page }}} #}

src/server/views/layout-kibela/not_found.html

@@ -16,6 +16,7 @@
     <div class="col bg-white round-corner">
       {% include '../widget/not_found_content.html' %}
     </div>
+    <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

src/server/views/layout-kibela/page_list.html

@@ -32,7 +32,7 @@
 
 </div>
 
-  <div class="row page-list bg-white round-corner grw-pt-10px mb-5 d-edit-none {% if page.isPortal() %}mt-5{% endif %}">
+  <div class="row page-list bg-white round-corner grw-pt-10px my-5 d-edit-none {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

src/server/views/modal/create_page.html

@@ -62,10 +62,10 @@
                   </a>
                   <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                     <button class="dropdown-item" type="button" data-template-type="children">
-                      {{ t('template.children.label') }} (_template) <small class="text-muted">- {{ t('template.children.desc') }}</small>
+                      {{ t('template.children.label') }} (_template)<br class="d-block d-md-none" /><small class="text-muted text-wrap">- {{ t('template.children.desc') }}</small>
                     </button>
                     <button class="dropdown-item" type="button" data-template-type="decentants">
-                      {{ t('template.decendants.label') }} (__template) <small class="text-muted">- {{ t('template.decendants.desc') }}</small>
+                      {{ t('template.decendants.label') }} (__template) <br class="d-block d-md-none" /><small class="text-muted">- {{ t('template.decendants.desc') }}</small>
                     </button>
                   </div>
                 </div>