Merge pull request #2815 from weseek/dev/4.2.x

Dev/4.2.x

resource/locales/en_US/admin/admin.json

@@ -90,19 +90,7 @@
     }
   },
   "customize_setting": {
-    "recommended": "Recommended",
-    "layout": "Layout",
     "theme": "Theme",
-    "layout_desc": {
-      "growi_title": "Simple and clear",
-      "growi_text1": "Full screen layout and thin margins/paddings",
-      "growi_text2": "Show and post comments at the bottom of the page",
-      "growi_text3": "Affix table-of-contents",
-      "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"
-    },
     "theme_desc": {
       "light_and_dark": "Light and dark modes",
       "unique": "Only one mode"

resource/locales/en_US/translation.json

@@ -1,5 +1,6 @@
 {
   "Help": "Help",
+  "view": "View",
   "Edit": "Edit",
   "Delete": "Delete",
   "delete_all": "Delete all",
@@ -432,6 +433,7 @@
     "open_sandbox": "Open Sandbox"
   },
   "hackmd": {
+    "hack_md": "HackMD",
     "not_set_up": "HackMD is not set up.",
     "start_to_edit": "Start to edit with HackMD",
     "clone_page_content": "Click to clone page content and start to edit.",

resource/locales/ja_JP/admin/admin.json

@@ -90,19 +90,7 @@
     }
   },
   "customize_setting": {
-    "recommended": "おすすめ",
-    "layout": "レイアウト",
     "theme": "テーマ",
-    "layout_desc": {
-      "growi_title": "シンプル・明瞭",
-      "growi_text1": "全画面レイアウトで、余白は少なくなります。",
-      "growi_text2": "コメントはページの下部に表示されます。",
-      "growi_text3": "ページ情報は下部に表示されます。",
-      "kibela_title": "閲覧重視の構造",
-      "kibela_text1": "コンテンツが中心に表示されます。",
-      "kibela_text2": "コメントはページの下部に表示されます。",
-      "kibela_text3": "ページ情報は下部に表示されます。"
-    },
     "theme_desc" : {
       "light_and_dark": "Light/Dark モード選択あり",
       "unique": "モード選択なし"

resource/locales/ja_JP/translation.json

@@ -1,5 +1,6 @@
 {
   "Help": "ヘルプ",
+  "view": "View",
   "Edit": "編集",
   "Delete": "削除",
   "delete_all": "全て削除",
@@ -434,6 +435,7 @@
     "open_sandbox": "Sandbox を開く"
   },
   "hackmd":{
+    "hack_md": "HackMD",
     "not_set_up": "HackMD はセットアップされていません",
     "start_to_edit": "HackMD を開始する",
     "clone_page_content": "ページを複製して編集を開始します",

resource/locales/zh_CN/admin/admin.json

@@ -91,23 +91,7 @@
 		}
 	},
 	"customize_setting": {
-		"recommended": "推荐",
-		"layout": "布局",
 		"theme": "主体",
-		"layout_desc": {
-			"growi_title": "简约",
-			"growi_text1": "全屏布局 窄边距/填充",
-			"growi_text2": "页面底部显示和发布评论",
-			"growi_text3": "附目录",
-			"kibela_title": "清晰",
-			"kibela_text1": "内容居中对齐",
-			"kibela_text2": "在页面底部显示和发布评论",
-			"kibela_text3": "附目录",
-			"crowi_title": "分栏",
-			"crowi_text1": "可折叠边栏",
-			"crowi_text2": "在侧边栏中显示和发布评论",
-			"crowi_text3": "可折叠目录"
-		},
 		"behavior": "行为",
 		"behavior_desc": {
 			"growi_text1": "<code>/page</code> and <code>/page/</code> 都显示同一页。",

resource/locales/zh_CN/translation.json

@@ -1,5 +1,6 @@
 {
-	"Help": "帮助",
+  "Help": "帮助",
+  "view": "View",
 	"Edit": "编辑",
 	"Delete": "删除",
 	"delete_all": "删除所有",
@@ -408,6 +409,7 @@
 		"open_sandbox": "开放式沙箱"
 	},
 	"hackmd": {
+    "hack_md": "HackMD",
 		"not_set_up": "HackMD is not set up.",
 		"start_to_edit": "Start to edit with HackMD",
 		"clone_page_content": "Click to clone page content and start to edit.",

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

@@ -10,7 +10,7 @@ import { toastError } from '../../../util/apiNotification';
 import toArrayIfNot from '../../../../../lib/util/toArrayIfNot';
 import { withLoadingSppiner } from '../../SuspenseUtils';
 
-import CustomizeLayoutSetting from './CustomizeLayoutSetting';
+import CustomizeLayoutSetting from './CustomizeThemeSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
 import CustomizeHighlightSetting from './CustomizeHighlightSetting';
 import CustomizeCssSetting from './CustomizeCssSetting';

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

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-class CustomizeLayoutOption extends React.Component {
-
-  render() {
-    const { layoutType } = this.props;
-
-    return (
-      <React.Fragment>
-        <h4>
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id={`radio-layout-${layoutType}`}
-              checked={this.props.isSelected}
-              onChange={this.props.onSelected}
-            />
-            <label className="custom-control-label" htmlFor={`radio-layout-${layoutType}`}>
-              {/* eslint-disable-next-line react/no-danger */}
-              <span dangerouslySetInnerHTML={{ __html: this.props.labelHtml }} />
-            </label>
-          </div>
-        </h4>
-        <a href={`/images/admin/customize/layout-${layoutType}.gif`} className="ss-container">
-          <img src={`/images/admin/customize/layout-${layoutType}-thumb.gif`} width="240px" />
-        </a>
-        {/* render layout description */}
-        {this.props.children}
-      </React.Fragment>
-    );
-  }
-
-}
-
-CustomizeLayoutOption.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-
-  layoutType: PropTypes.string.isRequired,
-  labelHtml: PropTypes.string.isRequired,
-  isSelected: PropTypes.bool.isRequired,
-  onSelected: PropTypes.func.isRequired,
-  children: PropTypes.array.isRequired,
-};
-
-export default withTranslation()(CustomizeLayoutOption);

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

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { withUnstatedContainers } from '../../UnstatedUtils';
-import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
-import AppContainer from '../../../services/AppContainer';
-
-import CustomizeLayoutOption from './CustomizeLayoutOption';
-
-class CustomizeLayoutOptions extends React.Component {
-
-  render() {
-    const { t, adminCustomizeContainer } = this.props;
-
-    return (
-      <div className="row row-cols-1 row-cols-md-2">
-        <div className="col text-center">
-          <CustomizeLayoutOption
-            layoutType="crowi-plus"
-            isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
-            onSelected={() => adminCustomizeContainer.switchLayoutType('growi')}
-            labelHtml={`GROWI enhanced layout <small class="text-success">${t('admin:customize_setting.recommended')}</small>`}
-          >
-            <h4>{t('admin:customize_setting.layout_desc.growi_title')}</h4>
-            <div className="text-justify d-inline-block">
-              <ul>
-                <li>{t('admin:customize_setting.layout_desc.growi_text1')}</li>
-                <li>{t('admin:customize_setting.layout_desc.growi_text2')}</li>
-                <li>{t('admin:customize_setting.layout_desc.growi_text3')}</li>
-              </ul>
-            </div>
-          </CustomizeLayoutOption>
-        </div>
-
-        <div className="col text-center">
-          <CustomizeLayoutOption
-            layoutType="kibela"
-            isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
-            onSelected={() => adminCustomizeContainer.switchLayoutType('kibela')}
-            labelHtml="Kibela like layout"
-          >
-            <h4>{t('admin:customize_setting.layout_desc.kibela_title')}</h4>
-            <div className="text-justify d-inline-block">
-              <ul>
-                <li>{t('admin:customize_setting.layout_desc.kibela_text1')}</li>
-                <li>{t('admin:customize_setting.layout_desc.kibela_text2')}</li>
-                <li>{t('admin:customize_setting.layout_desc.kibela_text3')}</li>
-              </ul>
-            </div>
-          </CustomizeLayoutOption>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-const CustomizeLayoutOptionsWrapper = withUnstatedContainers(CustomizeLayoutOptions, [AppContainer, AdminCustomizeContainer]);
-
-CustomizeLayoutOptions.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
-};
-
-export default withTranslation()(CustomizeLayoutOptionsWrapper);

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

@@ -38,6 +38,8 @@ class CustomizeThemeOptions extends React.Component {
       name: 'future',     bg: '#16282d', topbar: '#2a2929', sidebar: '#00b5b7', theme: '#00b5b7',
     }, {
       name: 'halloween',  bg: '#030003', topbar: '#aa4a04', sidebar: '#162b33', theme: '#e9af2b',
+    }, {
+      name: 'kibela',  bg: '#f4f5f6', topbar: '#1256a3', sidebar: '#5882fa', theme: '#b5cbf79c',
     }];
     /* eslint-enable no-multi-spaces */
 

src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx → src/client/js/components/Admin/Customize/CustomizeThemeSetting.jsx

@@ -7,12 +7,11 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 
-import CustomizeLayoutOptions from './CustomizeLayoutOptions';
 import CustomizeThemeOptions from './CustomizeThemeOptions';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
-class CustomizeLayoutSetting extends React.Component {
+class CustomizeThemeSetting extends React.Component {
 
   constructor(props) {
     super(props);
@@ -24,8 +23,8 @@ class CustomizeLayoutSetting extends React.Component {
     const { t, adminCustomizeContainer } = this.props;
 
     try {
-      await adminCustomizeContainer.updateCustomizeLayoutAndTheme();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.layout') }));
+      await adminCustomizeContainer.updateCustomizeTheme();
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_setting.theme') }));
     }
     catch (err) {
       toastError(err);
@@ -48,12 +47,6 @@ class CustomizeLayoutSetting extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="row">
-          <div className="col-12">
-            <h2 className="admin-setting-header">{t('admin:customize_setting.layout')}</h2>
-            <CustomizeLayoutOptions />
-          </div>
-        </div>
         <div className="row">
           <div className="col-12">
             <h2 className="admin-setting-header">{t('admin:customize_setting.theme')}</h2>
@@ -68,12 +61,12 @@ class CustomizeLayoutSetting extends React.Component {
 
 }
 
-const CustomizeLayoutSettingWrapper = withUnstatedContainers(CustomizeLayoutSetting, [AppContainer, AdminCustomizeContainer]);
+const CustomizeThemeSettingWrapper = withUnstatedContainers(CustomizeThemeSetting, [AppContainer, AdminCustomizeContainer]);
 
-CustomizeLayoutSetting.propTypes = {
+CustomizeThemeSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeLayoutSettingWrapper);
+export default withTranslation()(CustomizeThemeSettingWrapper);

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

@@ -18,6 +18,7 @@ import RevisionPathControls from '../Page/RevisionPathControls';
 import TagLabels from '../Page/TagLabels';
 import LikeButton from '../LikeButton';
 import BookmarkButton from '../BookmarkButton';
+import ThreeStrandedButton from './ThreeStrandedButton';
 
 import PageCreator from './PageCreator';
 import RevisionAuthor from './RevisionAuthor';
@@ -186,14 +187,9 @@ const GrowiSubNavigation = (props) => {
         <div className="d-flex flex-column align-items-end justify-content-center">
           <div className="d-flex">
             { !isPageInTrash && <PageReactionButtons appContainer={appContainer} pageContainer={pageContainer} /> }
-            <div className="mt-2">
-              {/* TODO: impl View / Edit / HackMD button group */}
-              {/* <div className="btn-group" role="group" aria-label="Basic example">
-              <button type="button" className="btn btn-outline-primary">Left</button>
-              <button type="button" className="btn btn-outline-primary">Middle</button>
-              <button type="button" className="btn btn-outline-primary">Right</button>
-            </div> */}
-            </div>
+          </div>
+          <div className="mt-2">
+            <ThreeStrandedButton />
           </div>
         </div>
 

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+const ThreeStrandedButton = (props) => {
+
+  const { t } = props;
+
+  function threeStrandedButtonClickedHandler(viewType) {
+    if (props.onThreeStrandedButtonClicked != null) {
+      props.onThreeStrandedButtonClicked(viewType);
+    }
+  }
+
+  return (
+    <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
+      <button type="button" className="btn btn-outline-primary view-button" onClick={() => { threeStrandedButtonClickedHandler('view') }}>
+        <i className="icon-control-play icon-fw" />
+        { t('view') }
+      </button>
+      <button type="button" className="btn btn-outline-primary edit-button" onClick={() => { threeStrandedButtonClickedHandler('edit') }}>
+        <i className="icon-note icon-fw" />
+        { t('Edit') }
+      </button>
+      <button type="button" className="btn btn-outline-primary hackmd-button" onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}>
+        <i className="fa fa-fw fa-file-text-o" />
+        { t('hackmd.hack_md') }
+      </button>
+    </div>
+  );
+
+};
+
+ThreeStrandedButton.propTypes = {
+  t: PropTypes.func.isRequired, //  i18next
+  onThreeStrandedButtonClicked: PropTypes.func,
+};
+
+export default withTranslation()(ThreeStrandedButton);

src/client/js/services/AdminCustomizeContainer.js

@@ -24,7 +24,6 @@ export default class AdminCustomizeContainer extends Container {
       retrieveError: null,
       // set dummy value tile for using suspense
       currentTheme: this.dummyCurrentTheme,
-      currentLayout: '',
       isEnabledTimeline: false,
       isSavedStatesOfTabChanges: false,
       isEnabledAttachTitleHeader: false,
@@ -72,7 +71,6 @@ export default class AdminCustomizeContainer extends Container {
 
       this.setState({
         currentTheme: customizeParams.themeType,
-        currentLayout: customizeParams.layoutType,
         isEnabledTimeline: customizeParams.isEnabledTimeline,
         isSavedStatesOfTabChanges: customizeParams.isSavedStatesOfTabChanges,
         isEnabledAttachTitleHeader: customizeParams.isEnabledAttachTitleHeader,
@@ -97,21 +95,10 @@ export default class AdminCustomizeContainer extends Container {
     }
   }
 
-  /**
-   * Switch layoutType
-   */
-  switchLayoutType(lauoutName) {
-    this.setState({ currentLayout: lauoutName });
-  }
-
   /**
    * Switch themeType
    */
   switchThemeType(themeName) {
-    // can't choose theme when kibela
-    if (this.state.currentLayout === 'kibela') {
-      return;
-    }
     this.setState({ currentTheme: themeName });
 
     // preview if production
@@ -216,7 +203,7 @@ export default class AdminCustomizeContainer extends Container {
   async previewTheme(themeName) {
     try {
       // get theme asset path
-      const response = await this.appContainer.apiv3.get('/customize-setting/layout-theme/asset-path', { themeName });
+      const response = await this.appContainer.apiv3.get('/customize-setting/theme/asset-path', { themeName });
       const { assetPath } = response.data;
 
       const themeLink = document.getElementById('grw-theme-link');
@@ -239,18 +226,16 @@ export default class AdminCustomizeContainer extends Container {
   }
 
   /**
-   * Update layout
+   * Update theme
    * @memberOf AdminCustomizeContainer
    */
-  async updateCustomizeLayoutAndTheme() {
+  async updateCustomizeTheme() {
     try {
-      const response = await this.appContainer.apiv3.put('/customize-setting/layout-theme', {
-        layoutType: this.state.currentLayout,
+      const response = await this.appContainer.apiv3.put('/customize-setting/theme', {
         themeType: this.state.currentTheme,
       });
       const { customizedParams } = response.data;
       this.setState({
-        layoutType: customizedParams.layoutType,
         themeType: customizedParams.themeType,
       });
     }

src/client/styles/scss/_comment_kibela.scss

@@ -1,169 +0,0 @@
-.kibela {
-  /* Comment section */
-  %comment-section {
-    position: relative;
-    padding: 1em;
-
-    // speech balloon
-    &:before {
-      position: absolute;
-      top: 1.5em;
-      left: -1em;
-      display: block;
-      width: 0;
-      height: 0;
-      content: '';
-      border-top: 20px solid transparent;
-      border-right: 20px solid $gray-200;
-      border-bottom: 20px solid transparent;
-      border-left: 20px solid transparent;
-      border-left-width: 0;
-
-      @include media-breakpoint-down(xs) {
-        top: 1em;
-      }
-    }
-  }
-
-  %picture {
-    float: left;
-    width: 3em;
-    height: 3em;
-    margin-top: 0.8em;
-
-    @include media-breakpoint-down(xs) {
-      width: 2em;
-      height: 2em;
-    }
-  }
-
-  .page-comments-row {
-    margin: 10px 0px;
-  }
-
-  .page-comments {
-    h4 {
-      margin-bottom: 1em;
-    }
-  }
-  .page-comment {
-    position: relative;
-
-    // ユーザー名
-    .page-comment-creator {
-      margin-top: -0.5em;
-      margin-bottom: 0.5em;
-      font-weight: bold;
-    }
-
-    // ユーザーアイコン
-    .picture {
-      @extend %picture;
-    }
-
-    // コメントセクション
-    .page-comment-main {
-      @extend %comment-section;
-      margin-left: 4.5em;
-      background: $gray-200;
-      border-radius: 0.35em;
-    }
-
-    // コメント本文
-    .page-comment-body {
-      margin-bottom: 0.5em;
-      word-wrap: break-word;
-    }
-  }
-
-  /*
-   * reply
-   */
-  .page-comment-reply {
-    margin-top: 1em;
-  }
-  // remove margin after hidden replies
-  .page-comments-hidden-replies + .page-comment-reply {
-    margin-top: 0;
-  }
-  .page-comment-reply,
-  .page-comment-reply-form {
-    margin-right: 15px;
-    margin-left: 6em;
-  }
-  // reply button
-  .btn.btn-comment-reply {
-    width: 120px;
-    margin-top: 0.5em;
-    margin-right: 15px;
-
-    border-top: none;
-    border-right: none;
-    border-left: none;
-  }
-
-  // display cheatsheet for comment form only
-  .comment-form {
-    .editor-cheatsheet {
-      display: none;
-    }
-
-    position: relative;
-    margin-top: 1em;
-
-    // user icon
-    .picture {
-      @extend %picture;
-    }
-
-    // seciton
-    .comment-form-main {
-      @extend %comment-section;
-      margin-left: 4.5em;
-      @include media-breakpoint-down(xs) {
-        margin-left: 3.5em;
-      }
-      background: #e6e9ec;
-      border-radius: 0.35em;
-      .CodeMirror {
-        border: 0px;
-      }
-    }
-
-    // textarea
-    .comment-write {
-      margin-bottom: 0.5em;
-    }
-    .comment-form-comment {
-      height: 80px;
-      &:focus,
-      &:not(:invalid) {
-        height: 180px;
-        transition: height 0.2s ease-out;
-      }
-    }
-    .CodeMirror {
-      border: 0px !important;
-    }
-
-    //// TODO: migrate to Bootstrap 4
-    // use @include media-breakpoint-*
-    // #page-editor {
-    //   @media (max-width: $screen-sm) {
-    //     .desc-long {
-    //       display: none;
-    //     }
-    //   }
-    // }
-    // @media screen and (max-width: 1400px) {
-    //   .desc-long {
-    //     display: none;
-    //   }
-    //   @media screen and (max-width: 570px) {
-    //     .gfm-cheatsheet {
-    //       display: none;
-    //     }
-    //   }
-    // }
-  }
-}

src/client/styles/scss/_layout_kibela.scss

@@ -1,170 +0,0 @@
-$navbar-height-adjustment: 10px;
-
-body.kibela {
-  .grw-pt-10px {
-    padding-top: 10px !important;
-  }
-
-  /* Logo */
-  .logo {
-    .logo-mark {
-      height: 50px;
-      box-shadow: none;
-
-      svg {
-        width: 60px;
-      }
-    }
-  }
-
-  /* header */
-  .authors {
-    padding-top: 10px;
-
-    li {
-      list-style: none !important;
-    }
-  }
-
-  .panel-heading {
-    border-radius: 0 !important;
-  }
-
-  /* page list */
-  .page-attachments-row {
-    border: 0px;
-  }
-
-  .round-corner {
-    border-radius: 0.35em;
-  }
-
-  .round-corner-top {
-    z-index: absolute;
-    border-radius: 0.35em;
-  }
-
-  .kibela-block {
-    position: relative;
-    top: 30px;
-    right: 100px;
-    bottom: 0px;
-    left: 0px;
-    z-index: absolute;
-    max-width: 1024px;
-    min-height: 8em;
-    margin: auto;
-    border-radius: 0.35em;
-    @include media-breakpoint-down(xs) {
-      top: 0px;
-    }
-  }
-
-  .grw-subnav {
-    position: relative;
-    border: none;
-
-    svg {
-      display: none;
-    }
-
-    &.grw-subnav-user-page {
-      min-height: 128px;
-    }
-
-    @media screen and (max-width: 765px) {
-      padding-top: 30px;
-    }
-
-    @include media-breakpoint-down(xs) {
-      padding-top: 0px;
-    }
-  }
-
-  .revision-toc {
-    position: sticky;
-    top: calc(60px + 5px);
-    right: 10rem;
-    min-width: 100%;
-    margin-top: 40px;
-
-    .revision-toc-content {
-      padding: 0;
-    }
-
-    @media screen and (max-width: 1400px) {
-      &.affix {
-        right: 0rem !important;
-        transition: 0.5s;
-      }
-    }
-  }
-
-  /* admin navigation */
-  .admin-navigation {
-    .list-group-item + .list-group-item.active {
-      margin-top: 2px;
-    }
-  }
-
-  /* Tabs */
-  .nav.nav-tabs {
-    > .nav-item {
-      cursor: pointer;
-
-      > .nav-link {
-        border: none;
-        border-radius: 3px;
-      }
-    }
-  }
-
-  /* edit */
-  .CodeMirror {
-    border-radius: 0.35em;
-  }
-
-  &.on-edit {
-    $header-plus-footer: 42px //  .nav height
-      + 5.5px //                  .kibela-block border-top
-      + 15px //                   .tab-content padding-top
-      + 1px //                    .page-editor-footer border-top
-      + 60px; //                  .page-editor-footer min-height
-
-    @include expand-editor($header-plus-footer, $navbar-height-adjustment);
-
-    .kibela-block {
-      top: 0px;
-      max-width: unset;
-      padding-top: 0px;
-      border: 0px;
-    }
-
-    .tab-content {
-      padding-top: 15px;
-
-      #edit {
-        margin-right: 1em;
-        margin-left: 1em;
-      }
-    }
-
-    .tab-pane {
-      .page-editor-editor-container {
-        margin: 0px;
-        border: none !important;
-      }
-    }
-
-    .page-editor-preview-container {
-      padding-right: 0px !important;
-      padding-left: 2em;
-    }
-
-    .page-editor-footer {
-      min-height: 60px;
-      padding: 13px;
-      margin: 0;
-    }
-  }
-}

src/client/styles/scss/_navbar_kibela.scss

@@ -1,36 +0,0 @@
-/* navbar */
-
-.kibela {
-  .grw-navbar {
-    height: 60px;
-    background: white;
-    border-bottom: solid 1px $gray-200;
-    .navbar-nav {
-      .confidential {
-        color: white;
-        background: #0d3e75;
-      }
-      & > li > a {
-        height: 40px !important;
-        margin-right: 1.5em;
-        color: #3c4a60;
-        border-radius: 0.35em;
-        &:hover {
-          color: #3c4a60;
-        }
-      }
-    }
-
-    .btn-create-page {
-      background: #5584e1;
-      border-radius: 0.35em;
-      &:hover {
-        background: rgb(124, 168, 255);
-      }
-      span,
-      i {
-        color: white;
-      }
-    }
-  }
-}

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

@@ -29,9 +29,7 @@
 @import 'attachments';
 @import 'comment';
 @import 'comment_growi';
-@import 'comment_kibela';
 @import 'drawio';
-@import 'navbar_kibela';
 @import 'create-page';
 @import 'draft';
 @import 'editor-attachment';
@@ -39,12 +37,10 @@
 @import 'handsontable';
 @import 'layout';
 @import 'layout_growi';
-@import 'layout_kibela';
 @import 'login';
 @import 'me';
 @import 'mirror_mode';
 @import 'navbar';
-@import 'navbar_kibela';
 @import 'on-edit';
 @import 'page_list';
 @import 'page-path';

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

@@ -214,6 +214,15 @@ ul.pagination {
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
+.grw-three-stranded-button {
+  .btn-outline-primary {
+    &:hover {
+      color: $primary;
+      background-color: $gray-700;
+    }
+  }
+}
+
 // Search drop down
 #search-typeahead-asynctypeahead {
   background-color: $bgcolor-global;

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

@@ -1,186 +0,0 @@
-body.kibela {
-  .growi:not(.login-page) {
-    .icon-link,
-    .CodeMirror-hint-active,
-    .grw-nav-main-left-tab,
-    .tav-pane,
-    .active {
-      color: $subthemecolor;
-    }
-
-    .bg-white {
-      background: #fefffe !important;
-    }
-
-    .bg-primary {
-      background-color: $primary !important;
-    }
-
-    .grw-subnav {
-      background-color: rgba(lighten($bgcolor-global, 50%), 1);
-    }
-
-    .grw-subnav-fixed-container .grw-subnav {
-      background-color: rgba(lighten($bgcolor-global, 50%), 0.85);
-    }
-
-    /* page wrapper */
-    #page-wrapper {
-      background-color: $bgcolor-global;
-    }
-
-    .search-input-group,
-    .search-typeahead {
-      .btn {
-        background-color: transparent;
-      }
-    }
-
-    .btn-open-dropzone {
-      background: $themelight;
-    }
-
-    /* page list */
-    .page-list {
-      background: white;
-    }
-
-    .page-attachments-row {
-      background-color: #e5ecf1;
-    }
-
-    /* round */
-    .round-corner-top {
-      border-top: solid 0.4em $thickborder;
-    }
-
-    /* admin navigation */
-    .admin-navigation {
-      .list-group-item {
-        background-color: transparent;
-
-        &:hover {
-          background: $gray-100;
-        }
-      }
-
-      .list-group-item.active {
-        color: white;
-        background: $bgcolor-navbar-active;
-      }
-    }
-
-    /* search page */
-    .search-result-list,
-    .page-list-li {
-      background: $themelight;
-    }
-
-    /* Tabs */
-    .nav.nav-tabs {
-      > .nav-item {
-        color: $color-link;
-        background: transparent;
-
-        &:hover,
-        &:focus {
-          > .nav-link {
-            color: $color-link-hover;
-          }
-        }
-
-        > .nav-link {
-          color: $color-link;
-        }
-
-        > .nav-link.active {
-          background: transparent !important;
-          border-bottom: solid 2.7px $thickborder;
-        }
-      }
-    }
-
-    /* wiki */
-    .wiki {
-      h1 {
-        border-bottom: solid 2px $thickborder !important;
-      }
-
-      h2 {
-        border-color: solid 1px $thickborder;
-      }
-
-      // change color of highlighted header in wiki (default: orange)
-      .code-line.revision-head.highlighted {
-        color: $themelight;
-        background-color: lighten($bgcolor-theme, 20%);
-
-        .icon-note,
-        .icon-link {
-          color: $themelight;
-        }
-      }
-    }
-
-    /* Modal */
-    .modal-title {
-      color: white; // override header colors
-    }
-    .modal-content {
-      background-color: $themelight;
-    }
-
-    /* Inline Code */
-    :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 */
-    .btn-primary {
-      background: $primary;
-      border: 1px solid $primary;
-    }
-
-    /* edit */
-    .CodeMirror {
-      border: solid 1.2px #d8d8d8;
-      border-top: solid 0.3em $thickborder !important;
-    }
-
-    &.on-edit {
-      .page-editor-preview-container {
-        background: white !important;
-      }
-    }
-
-    /* navbar */
-    .grw-navbar {
-      .nav-item > .nav-link {
-        &:hover {
-          color: $color-link-nabvar-hover;
-        }
-        &:focus {
-          color: $color-link-nabvar;
-        }
-      }
-      #personal-dropdown {
-        a.nav-link {
-          color: $color-global;
-        }
-      }
-    }
-
-    /* h */
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: $color-header;
-    }
-  }
-}

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

@@ -132,6 +132,15 @@ $table-hover-bg: $bgcolor-table-hover;
   background-color: rgba($bgcolor-subnav, 0.85);
 }
 
+.grw-three-stranded-button {
+  .btn-outline-primary {
+    &:hover {
+      color: $primary;
+      background-color: $gray-200;
+    }
+  }
+}
+
 .grw-drawer-toggler {
   @extend .btn-light;
   color: $gray-500;

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

@@ -6,6 +6,36 @@ $themelight: #f4f5f6;
 $subthemecolor: rgb(88, 130, 250);
 $lightthemecolor: rgba(181, 203, 247, 0.61);
 
+// change width only for pages with articles
+.growi:not(.on-edit):not(.admin-page):not(.user-settings-page) {
+  // layout
+  header,
+  #main {
+    max-width: 1024px;
+    margin: auto;
+  }
+  header {
+    margin-top: 30px;
+    margin-bottom: 42px;
+    background-color: $gray-100;
+  }
+}
+
+.grw-subnav {
+  padding: 20px 30px;
+  border-radius: 0.35em;
+}
+
+.grw-page-content-container {
+  padding-top: 10px;
+  background-color: #fff;
+  border-radius: 0.35em;
+}
+
+.page-attachments-row {
+  margin-top: 30px;
+}
+
 // Light Mode
 html[light],
 html[dark] {
@@ -78,5 +108,4 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
-  @import 'apply-colors-kibela';
 }

src/server/routes/apiv3/customize-setting.js

@@ -21,12 +21,10 @@ const ErrorV3 = require('../../models/vo/error-apiv3');
  *
  *  components:
  *    schemas:
- *      CustomizeLayoutTheme:
- *        description: CustomizeLayoutTheme
+ *      CustomizeTheme:
+ *        description: CustomizeTheme
  *        type: object
  *        properties:
- *          layoutType:
- *            type: string
  *          themeType:
  *            type: string
  *      CustomizeFunction:
@@ -92,10 +90,9 @@ module.exports = (crowi) => {
         'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'halloween', 'spring',
       ]),
     ],
-    layoutTheme: [
-      body('layoutType').isString().isIn(['growi', 'kibela']),
+    theme: [
       body('themeType').isString().isIn([
-        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'halloween', 'spring',
+        'default', 'nature', 'mono-blue', 'wood', 'island', 'christmas', 'antarctic', 'future', 'halloween', 'spring', 'kibela',
       ]),
     ],
     function: [
@@ -171,12 +168,12 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/layout-theme/asset-path:
+   *    /customize-setting/theme/asset-path:
    *      put:
    *        tags: [CustomizeSetting]
-   *        operationId: getLayoutThemeAssetPath
-   *        summary: /customize-setting/layout-theme/asset-path
-   *        description: Get layout theme asset path
+   *        operationId: getThemeAssetPath
+   *        summary: /customize-setting/theme/asset-path
+   *        description: Get theme asset path
    *        parameters:
    *          - name: themeName
    *            in: query
@@ -185,7 +182,7 @@ module.exports = (crowi) => {
    *              type: string
    *        responses:
    *          200:
-   *            description: Succeeded to update layout and theme
+   *            description: Succeeded to get theme asset path
    *            content:
    *              application/json:
    *                schema:
@@ -193,8 +190,8 @@ module.exports = (crowi) => {
    *                    assetPath:
    *                      type: string
    */
-  router.get('/layout-theme/asset-path', loginRequiredStrictly, adminRequired, validator.themeAssetPath, apiV3FormValidator, async(req, res) => {
-    const themeName = req.query.themeName;
+  router.get('/theme/asset-path', loginRequiredStrictly, adminRequired, validator.themeAssetPath, apiV3FormValidator, async(req, res) => {
+    const { themeName } = req.query;
 
     const webpackAssetKey = `styles/theme-${themeName}.css`;
     const assetPath = res.locals.webpack_asset(webpackAssetKey);
@@ -209,44 +206,42 @@ module.exports = (crowi) => {
   /**
    * @swagger
    *
-   *    /customize-setting/layout-theme:
+   *    /customize-setting/theme:
    *      put:
    *        tags: [CustomizeSetting]
-   *        operationId: updateLayoutThemeCustomizeSetting
-   *        summary: /customize-setting/layout-theme
-   *        description: Update layout and theme
+   *        operationId: updateThemeCustomizeSetting
+   *        summary: /customize-setting/theme
+   *        description: Update theme
    *        requestBody:
    *          required: true
    *          content:
    *            application/json:
    *              schema:
-   *                $ref: '#/components/schemas/CustomizeLayoutTheme'
+   *                $ref: '#/components/schemas/CustomizeTheme'
    *        responses:
    *          200:
-   *            description: Succeeded to update layout and theme
+   *            description: Succeeded to update theme
    *            content:
    *              application/json:
    *                schema:
-   *                  $ref: '#/components/schemas/CustomizeLayoutTheme'
+   *                  $ref: '#/components/schemas/CustomizeTheme'
    */
-  router.put('/layout-theme', loginRequiredStrictly, adminRequired, csrf, validator.layoutTheme, apiV3FormValidator, async(req, res) => {
+  router.put('/theme', loginRequiredStrictly, adminRequired, csrf, validator.theme, apiV3FormValidator, async(req, res) => {
     const requestParams = {
-      'customize:layout': req.body.layoutType,
       'customize:theme': req.body.themeType,
     };
 
     try {
       await crowi.configManager.updateConfigsInTheSameNamespace('crowi', requestParams);
       const customizedParams = {
-        layoutType: await crowi.configManager.getConfig('crowi', 'customize:layout'),
         themeType: await crowi.configManager.getConfig('crowi', 'customize:theme'),
       };
       return res.apiv3({ customizedParams });
     }
     catch (err) {
-      const msg = 'Error occurred in updating layout and theme';
+      const msg = 'Error occurred in updating theme';
       logger.error('Error', err);
-      return res.apiv3Err(new ErrorV3(msg, 'update-layoutTheme-failed'));
+      return res.apiv3Err(new ErrorV3(msg, 'update-theme-failed'));
     }
   });
 

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

@@ -1,49 +0,0 @@
-{% extends '../../layout/layout.html' %}
-
-{% block html_additional_headers %}
-  {% parent %}
-  {{ cdnScriptTag('highlight-addons') }}
-  {{ cdnScriptTag('drawio-viewer') }}
-{% endblock %}
-
-{% block layout_main %}
-<div class="container-fluid p-0">
-
-  <div id="grw-subnav-switcher-container" class="d-edit-none"></div>
-  <div id="grw-subnav-sticky-trigger" class="sticky-top"></div>
-  <div id="grw-fav-sticky-trigger" class="sticky-top"></div>
-
-  <div class="row body m-0 p-0 d-print-block">
-
-    <div id="main" class="main col-12 kibela-block round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
-      {% block content_header_wrapper %}
-        <header class="row mb-5 grw-subnav d-edit-none d-print-block round-corner">
-            <div class="col-12 px-0 mx-0">
-              {% block content_header %}
-                <div id="grw-subnav-container" class="d-edit-none"></div>
-              {% endblock %}
-            </div>
-          </header>
-        </header>
-      {% endblock %}
-
-      <!-- /.grw-subnav -->
-
-      {% block content_main_before %}
-      {% endblock %}
-
-      {% block content_main %}
-      {% endblock content_main %}
-
-      {% block content_main_after%}
-      {% endblock %}
-    </div>
-
-  </div>
-
-</div>
-<!-- /.container-fluid -->
-
-<footer class="footer">
-</footer>
-{% endblock %} {# layout_main #}

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

@@ -1,13 +0,0 @@
-{% extends './shared_page.html' %}
-
-{% block content_header %}
-{% endblock %}
-
-{% block content_page %}
-  <div class="col-md-12">
-    <h2 class="text-muted">
-      <i class="icon-ban" aria-hidden="true"></i>
-      Page is expired
-    </h2>
-  </div>
-{% endblock %}

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

@@ -1,19 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="row">
-    <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
-      {% include '../widget/forbidden_content.html' %}
-    </div>
-  </div>
-{% endblock %}
-
-{% block body_end %}
-  <div id="crowi-modals">
-  </div>
-{% endblock %}

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

@@ -1,19 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="row">
-    <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
-      {% include '../widget/not_creatable_content.html' %}
-    </div>
-  </div>
-{% endblock %}
-
-{% block body_end %}
-  <div id="crowi-modals">
-  </div>
-{% endblock %}

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

@@ -1,24 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="row">
-    <div class="col-12 col-xl-9 col-lg-8 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 %}
-
-{% block body_end %}
-  <div id="presentation-layer" class="fullscreen-layer">
-    <div id="presentation-container"></div>
-  </div>
-
-  <div id="crowi-modals">
-  </div>
-{% endblock %}

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

@@ -1,13 +0,0 @@
-{% extends './shared_page.html' %}
-
-{% block content_header %}
-{% endblock %}
-
-{% block content_page %}
-  <div class="col-md-12">
-    <h2 class="text-muted">
-      <i class="icon-info" aria-hidden="true"></i>
-      Page is not found
-    </h2>
-  </div>
-{% endblock %}

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

@@ -1,40 +0,0 @@
-{% extends 'base/layout.html' %}
-
-{% block content_main_before %}
-{% endblock %}
-
-
-{% block content_main %}
-<div class="row">
-
-  <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
-
-    {% include '../widget/page_content.html' %}
-
-  </div>
-
-  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
-    <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="80">
-      <div id="revision-toc-content" class="revision-toc-content"></div>
-    </div>
-  </div> {# /.col- #}
-
-</div>
-
-{% endblock %}
-
-
-{% block content_main_after %}
-  {% include 'widget/comments.html' %}
-
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
-{% endblock %}
-
-
-{% block body_end %}
-  <div id="presentation-layer" class="fullscreen-layer">
-    <div id="presentation-container"></div>
-  </div>
-{% endblock %}

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

@@ -1,43 +0,0 @@
-{% extends 'base/layout.html' %}
-
- {% block content_main_before%}
- {% endblock %}
-
- {% block content_main %}
-<div class="row page-content">
-
-
-  <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
-
-    {% include '../widget/page_content.html' %}
-
-  </div>
-
-  <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
-    <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="80">
-      <div id="revision-toc-content" class="revision-toc-content"></div>
-    </div>
-  </div>
-
-</div>
-
-  <div class="row page-list bg-white round-corner grw-pt-10px my-5 d-edit-none {% if page.isTopPage() %}mt-5{% endif %}">
-    <div class="col">
-      {% include '../widget/page_list_and_timeline_kibela.html' %}
-    </div>
-  </div>
-{% endblock %}
-
-
-{% block content_main_after %}
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif%}
-{% endblock %}
-
-
-{% block body_end %}
-<div id="presentation-layer" class="fullscreen-layer">
-  <div id="presentation-container"></div>
-</div>
-{% endblock %}

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

@@ -1,46 +0,0 @@
-{% extends 'base/layout.html' %}
-
-
-{% block content_header %}
-  <h1 class="p-3">{{ page.path | preventXss }}</h1>
-{% endblock %}
-
-
-{% block content_main_before %}
-{% endblock %}
-{% block search %}
-{% endblock %}
-{% block head_warn_alert_siteurl_undefined %}
-{% endblock %}
-
-{% block content_main %}
-  <div class="row" id="is-shared-page" data-share-link-expired-at="{% if sharelink.expiredAt %}{{ sharelink.expiredAt|datetz('Y/m/d H:i:s')}}{% endif %}" data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}">
-    {% block content_page %}
-      <div class="col-12 col-xl-9 col-lg-8 bg-white round-corner">
-        <div id="share-link-alert"></div>
-
-        {% include '../widget/page_content.html' %}
-        {# force remove #revision-toc from #content_main of parent #}
-        <script>
-          $('#revision-toc').remove();
-        </script>
-
-      </div>
-
-      {# relocate #revision-toc #}
-      <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
-        <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
-          <div id="revision-toc-content" class="revision-toc-content"></div>
-        </div>
-      </div>
-    {% endblock %}
-
-  </div>
-{% endblock %}
-
-
-{% block body_end %}
-  <div id="presentation-layer" class="fullscreen-layer">
-    <div id="presentation-container"></div>
-  </div>
-{% endblock %}

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

@@ -1,55 +0,0 @@
-{% extends 'page.html' %}
-
-{% block main_css_class %}
-  {% parent %}
-  user-page
-{% endblock %}
-
-
-{% block content_main %}
-  <div class="row pt-15">
-
-    <div class="col bg-white round-corner">
-
-      {#
-        # ensure to insert 'user_page_content' widget to here
-        #
-        #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
-        #   setting of 'revision-toc' (affix) is hindered.
-        #}
-      <div class="mb-5 user-page-content-container d-edit-none">
-        {% include '../widget/user_page_content.html' %}
-      </div>
-
-      {% block content_main_before %}
-        {% parent %}
-      {% endblock %}
-
-      {% include '../widget/page_content.html' %}
-
-    </div>
-
-    <div class="col-xl-3 col-lg-4 d-none d-lg-block revision-toc-container">
-      <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="75">
-        <div id="revision-toc-content" class="revision-toc-content"></div>
-      </div>
-    </div>
-
-  </div>
-
-  <div class="row page-list mt-5 d-edit-none">
-    <div class="col-12">
-      {% include '../widget/page_list_and_timeline_kibela.html' %}
-    </div>
-  </div>
-
-{% endblock %}
-
-
-{% block content_main_after %}
-  {% include 'widget/comments.html' %}
-
-  {% if page %}
-    {% include '../widget/page_attachments.html' %}
-  {% endif %}
-{% endblock %}

src/server/views/layout-kibela/widget/comments.html

@@ -1,15 +0,0 @@
-<div class="page-comments-row row d-edit-none">
-
-    <div class="page-comments col-12">
-
-      <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>
-
-      <div class="page-comments-list" id="page-comments-list"></div>
-
-      {% if page and not page.isDeleted() %}
-      <div id="page-comment-write"></div>
-      {% endif %}
-
-    </div>
-</div>
-

src/server/views/layout/layout.html

@@ -43,14 +43,10 @@
 
   <!-- styles -->
   {% include '../widget/headers/styles-for-app.html' %}
-  {% if 'kibela' === getConfig('crowi', 'customize:layout') %}
-    {% include '../widget/headers/styles-theme-kibela.html' %}
-  {% else %}
-    {% block theme_css_block %}
-      {% set themeName = getConfig('crowi', 'customize:theme') %}
-      {% include '../widget/headers/styles-theme.html' with {themeName: themeName} %}
-    {% endblock %}
-  {% endif %}
+  {% block theme_css_block %}
+    {% set themeName = getConfig('crowi', 'customize:theme') %}
+    {% include '../widget/headers/styles-theme.html' with {themeName: themeName} %}
+  {% endblock %}
 
   {{ cdnStyleTagsByGroup('basis') }}
   {{ cdnHighlightJsStyleTag(getConfig('crowi', 'customize:highlightJsStyle')) }}
@@ -65,8 +61,7 @@
 
 {% block html_body %}
 <body
-  class="{% block html_base_css %}{% endblock %}
-      {% if !getConfig('crowi', 'customize:layout') || 'crowi' === getConfig('crowi', 'customize:layout') %}crowi{% elseif !getConfig('crowi', 'customize:layout') || 'kibela' === getConfig('crowi', 'customize:layout') %}kibela{% else %}growi{% endif %}"
+  class="{% block html_base_css %}{% endblock %} growi"
   data-is-admin="{{ user.admin }}"
   data-plugin-enabled="{{ getConfig('crowi', 'plugin:isEnabledPlugins') }}"
   {% block html_base_attr %}{% endblock %}

src/server/views/widget/headers/styles-theme-kibela.html

@@ -1,5 +0,0 @@
-{% if env === 'development' %}
-  <script src="{{ webpack_asset('styles/theme-kibela.js') }}"></script>
-{% else %}
-  <link rel="stylesheet" href="{{ webpack_asset('styles/theme-kibela.css') }}">
-{% endif %}

src/server/views/widget/page_content.html

@@ -41,11 +41,7 @@
 
   {% include 'page_alerts.html' %}
 
-  {% if !getConfig('crowi', 'customize:layout') || 'kibela' === getConfig('crowi', 'customize:layout') %}
-    {% include 'page_tabs_kibela.html' %}
-  {% else %}
-    {% include 'page_tabs.html' %}
-  {% endif %}
+  {% include 'page_tabs.html' %}
 
   <div class="tab-content">
 

src/server/views/widget/page_tabs_kibela.html

@@ -1,69 +0,0 @@
-{% if page %}
-<ul class="nav nav-tabs d-print-none">
-
-  {#
-    Left Tabs
-  #}
-  <li class="nav-item active">
-    <a class="nav-link active" href="#revision-body" data-toggle="tab">
-      <i class="icon-control-play"></i> View
-    </a>
-  </li>
-
-  {% if !isTrashPage() %}
-    <li class="nav-item nav-tab-edit">
-      <a
-        {% if user %} href="#edit" data-toggle="tab" class="nav-link edit-button" {% endif %}
-        {% if not user %}
-          class="nav-link edit-button edit-button-disabled"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="icon-note"></i> {{ t('Edit') }}
-      </a>
-    </li>
-    {% if isHackmdSetup() %}
-    <li class="nav-item nav-tab-hackmd">
-      <a
-        {% if user %} href="#hackmd" data-toggle="tab" class="nav-link edit-button" {% endif %}
-        {% if not user %}
-          class="nav-link edit-button edit-button-disabled"
-          data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
-        {% endif %}
-      >
-        <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
-      </a>
-    </li>
-    {% endif %}
-
-    <div id="page-editor-path-nav" class="d-none d-edit-sm-block ml-2"></div>
-
-  {% endif %}
-
-  {#
-    Right Tabs
-  #}
-  {# to place right side #}
-  <div class="mr-auto"></div>
-
-  {% if not page.isTopPage() %}
-  <li class="nav-item">
-    <a href="?presentation=1" class="nav-link toggle-presentation">
-      <i class="icon-film"></i><span class="d-none d-sm-inline"> {{ t('Presentation Mode') }}</span>
-    </a>
-  </li>
-  {% endif %}
-
-  <li class="nav-item">
-    <a href="#revision-history" class="nav-link" data-toggle="tab">
-      <i class="icon-layers"></i><span class="d-none d-sm-inline"> {{ t('History') }}</span>
-    </a>
-  </li>
-
-  {% if !isTrashPage() %}
-    <li id="page-management" class="nav-item dropdown d-edit-none"></li>
-  {% endif %}
-
-</ul>
-
-{% endif %}