Merge branch 'support/apply-bootstrap4' into imprv/23-24-change-staff-credit-to-on-bootstrap-modal-for-bootstra4

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

@@ -69,7 +69,7 @@ class GitHubSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6 text-left">
+          <div className="col-12 offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGitHubEnabled"
@@ -88,8 +88,8 @@ class GitHubSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-12 col-md-6">
             <input
               className="form-control"
               type="text"

src/client/js/components/BookmarkButton.jsx

@@ -64,7 +64,9 @@ class BookmarkButton extends React.Component {
         href="#"
         title="Bookmark"
         onClick={this.handleClick}
-        className={`btn rounded-circle btn-outline-warning btn-bookmark border-0 ${`btn-${this.props.size}`} ${this.state.isBookmarked && 'active'}`}
+        className={`btn rounded-circle btn-bookmark border-0 d-edit-none
+          ${`btn-${this.props.size}`}
+          ${this.state.isBookmarked ? 'btn-warning active' : 'btn-outline-warning'}`}
       >
         <i className="icon-star"></i>
       </button>

src/client/js/components/LikeButton.jsx

@@ -43,7 +43,8 @@ class LikeButton extends React.Component {
       <button
         type="button"
         onClick={this.handleClick}
-        className={`btn rounded-circle btn-outline-info btn-like border-0 ${this.state.isLiked ? 'active' : ''}`}
+        className={`btn rounded-circle btn-like border-0 d-edit-none
+        ${this.state.isLiked ? 'btn-info active' : 'btn-outline-info'}`}
       >
         <i className="icon-like"></i>
       </button>

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

@@ -78,7 +78,7 @@ const GrowiSubNavigation = (props) => {
         </div>
 
         {/* Page Authors */}
-        <ul className="authors text-nowrap d-none d-lg-block">
+        <ul className="authors text-nowrap d-none d-lg-block d-edit-none">
           { creator != null && (
             <li>
               <PageCreator creator={creator} createdAt={createdAt} isCompactMode={isSubnavCompact} />

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

@@ -38,7 +38,7 @@ const GrowiSubNavigationForUserPage = (props) => {
 
       <div className="d-flex align-items-center justify-content-between">
 
-        <div className="users-info d-flex align-items-center">
+        <div className="users-info d-flex align-items-center d-edit-none">
           <UserPicture user={pageUser} />
 
           <div className="users-meta">

src/client/js/components/Page/RevisionPath.jsx

@@ -153,7 +153,7 @@ class RevisionPath extends React.Component {
         <CopyDropdown t={this.props.t} pagePath={this.props.pagePath} pageId={this.props.pageId} buttonStyle={buttonStyle}></CopyDropdown>
 
         { !isPageInTrash && !isPageForbidden && (
-          <a href="#edit" className="d-block text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
+          <a href="#edit" className="d-block d-edit-none text-muted btn btn-secondary bg-transparent btn-edit border-0" style={buttonStyle}>
             <i className="icon-note" />
           </a>
         ) }

src/client/styles/scss/_layout_kibela.scss

@@ -121,13 +121,8 @@ body.kibela {
 
     @include expand-editor($header-plus-footer);
 
-    .main {
-      > .row.page-content {
-        > .col-xs-12 {
-          width: 100%;
-          padding: 0;
-        }
-      }
+    .kibela-block {
+      max-width: unset;
     }
 
     .tab-content {

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

@@ -26,21 +26,8 @@ body.on-edit {
 
   // hide unnecessary elements
   header,
-  .grw-subnav,
-  .row.row-alerts,
-  .row.page-list,
-  .row.page-comments-row,
-  .row.page-attachments-row,
-  .row.not-found-message-row,
-  .users-info,
-  .user-page-content-container,
-  .portal-form-button,
-  .btn-like,
-  .btn-bookmark,
-  .btn-edit,
-  .authors,
-  .hide-on-edit,
-  footer {
+  footer,
+  .d-edit-none {
     display: none !important;
   }
 

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

@@ -64,6 +64,17 @@ textarea.form-control {
 /*
  * Table
  */
+.table {
+  @extend .table-dark;
+}
+
+/*
+ * Card
+ */
+.card:not([class*='bg-']) {
+  @extend .bg-dark;
+}
+
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,

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

@@ -11,6 +11,7 @@ $link-hover-color: $color-link-hover;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
@@ -117,6 +118,13 @@ $link-hover-color: $color-link-hover;
   }
 }
 
+/*
+ * Icon
+ */
+.editor-container .navbar-editor svg {
+  fill: $color-editor-icons;
+}
+
 /*
  * code color of inline-code
  */
@@ -151,10 +159,6 @@ $link-hover-color: $color-link-hover;
 /*
  * cards
  */
-.card-header {
-  border: 0;
-}
-
 .card.well {
   background-color: $bgcolor-card;
   border-color: $light;

src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -0,0 +1,34 @@
+//== Table
+$table-variants: (
+  'light': $light,
+  'dark': $dark,
+);
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $table-hover-bg-factor: 0.075 !default;
+    $table-striped-bg-factor: 0.05 !default;
+    $body-bg: $white !default;
+    $table-active-bg-factor: 0.1 !default;
+    $table-border-factor: 0.1 !default;
+
+    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+    $color: gray;
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+    --bs-table-bg: #{$background};
+    --bs-table-striped-bg: #{$striped-bg};
+    --bs-table-striped-color: #{color-contrast($striped-bg)};
+    --bs-table-active-bg: #{$active-bg};
+    --bs-table-active-color: #{color-contrast($active-bg)};
+    --bs-table-hover-bg: #{$hover-bg};
+    --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -63,3 +63,7 @@
     background: $color;
   }
 }
+
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
+}

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

@@ -74,6 +74,9 @@ html[light] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -127,6 +130,9 @@ html[dark] {
   $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;`
 

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

@@ -1,6 +1,5 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
-
 // == Define Bootstrap theme colors
 //
 
@@ -46,6 +45,9 @@ html[light] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -99,6 +101,9 @@ html[dark] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

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

@@ -12,9 +12,8 @@ html[light] {
   $bgcolor-navbar: white;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: $lightthemecolor;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
-
+  $bgcolor-card: $lightthemecolor;
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);
@@ -36,6 +35,9 @@ html[light] {
   $bgcolor-logo: transparent;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;
@@ -68,9 +70,8 @@ html[dark] {
   $bgcolor-navbar: transparent;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: #e3e5e7;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
-
+  $bgcolor-card: #e3e5e7;
   $color-header: $bgcolor-theme;
   $color-global: #3c4a60;
   $color-link: rgb(74, 109, 204);
@@ -92,6 +93,9 @@ html[dark] {
   $bgcolor-logo: red;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;

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

@@ -30,7 +30,7 @@
     {% include '../../widget/system-version.html' %}
   </aside>
 
-  <div class="row grw-subnav">
+  <div class="row grw-subnav d-edit-none">
     <div class="col-md-9">
       {% block content_header %}
       {% endblock %}

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

@@ -46,7 +46,7 @@
     {% include '../widget/page_content.html' %}
   </div>
 
-  <div class="row page-list d-print-none {% if page.isPortal() %}mt-5{% endif %}">
+  <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>

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

@@ -13,7 +13,7 @@
 
 
 {% block content_main_before %}
-  <div class="m-b-30 user-page-content-container hidden-print">
+  <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-growi/page.html

@@ -35,7 +35,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list d-print-none mt-5">
+  <div class="row page-list d-edit-none d-print-none mt-5">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -34,7 +34,7 @@
 
   </div>
 
-  <div class="row page-list d-print-none {% if page.isPortal() %}mt-5{% endif %}">
+  <div class="row page-list d-edit-none d-print-none {% if page.isPortal() %}mt-5{% endif %}">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -27,7 +27,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container hidden-print">
+      <div class="m-b-30 user-page-content-container d-edit-none hidden-print">
         {% include '../widget/user_page_content.html' %}
       </div>
 
@@ -61,7 +61,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list d-print-none mt-5">
+  <div class="row page-list d-edit-none d-print-none mt-5">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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

@@ -1,4 +1,4 @@
-<div class="page-comments-row row hidden-print">
+<div class="page-comments-row row d-edit-none d-print-none">
 
   <div class="page-comments col-xl-7 col-lg-9">
 

src/server/views/layout-growi/widget/header.html

@@ -1,4 +1,4 @@
-<div id="grw-subnav" class="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
+<div id="grw-subnav" class="grw-subnav d-edit-none" data-is-forbidden-page="{{ forbidden }}"></div>
 
 {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
   {% if '/' === path.slice(-1) %}

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

@@ -12,7 +12,7 @@
   <div class="row body m-0 p-0">
 
     <div id="main" class="main col-12 kibela-block bg-white round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
-      <div class="row grw-subnav">
+      <div class="row grw-subnav d-edit-none">
         <div class="col-12">
           {% block content_header %} {% endblock %}
         </div>

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

@@ -33,7 +33,7 @@
 </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list grw-pt-10px my-5 round-corner">
+  <div class="row page-list grw-pt-10px my-5 round-corner d-edit-none">
     <div class="col-md-10">
       {% include '../widget/page_list_and_timeline.html' %}
     </div>

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 {% if page.isPortal() %}mt-5{% endif %}">
+  <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="col">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

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

@@ -25,7 +25,7 @@
         #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
         #   setting of 'revision-toc' (affix) is hindered.
         #}
-      <div class="m-b-30 user-page-content-container">
+      <div class="m-b-30 user-page-content-container d-edit-none">
         {% include '../widget/user_page_content.html' %}
       </div>
 
@@ -52,7 +52,7 @@
   </div>
 
   {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
-  <div class="row page-list mt-5">
+  <div class="row page-list mt-5 d-edit-none">
     <div class="col-xs-12">
       {% include '../widget/page_list_and_timeline_kibela.html' %}
     </div>

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

@@ -1,4 +1,4 @@
-<div class="page-comments-row row">
+<div class="page-comments-row row d-edit-none">
 
     <div class="page-comments">
 

src/server/views/layout/layout.html

@@ -131,7 +131,6 @@
   {% include '../modal/create_page.html' %}
   {% endblock  %} {# layout_head_nav #}
 
-  {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
   {% block head_warn_breaking_changes %}{% include '../widget/alert_breaking_changes.html' %}{% endblock %}
 
   <div class="d-flex">
@@ -139,6 +138,7 @@
     <div id="grw-sidebar-wrapper"></div>
 
     <div id="page-wrapper" class="flex-grow-1">
+      {% block head_warn_alert_siteurl_undefined %}{% include '../widget/alert_siteurl_undefined.html' %}{% endblock %}
       {% block layout_main %}
       {% endblock %} {# layout_main #}
     </div>
@@ -146,7 +146,7 @@
 
 </div><!-- /#wrapper -->
 
-<div class="grw-fixed-controls-container d-md-none animated fadeInUp faster">
+<div class="grw-fixed-controls-container d-md-none d-edit-none animated fadeInUp faster">
   <div class="grw-fixed-controls-button-container rounded-circle">
     <button class="btn btn-lg btn-primary rounded-circle waves-effect waves-light" type="button" data-target="#create-page" data-toggle="modal">
       <i class="icon-pencil"></i>

src/server/views/modal/create_template.html

@@ -19,7 +19,7 @@
                   <p class="text-center"><code>_template</code></p>
                   <p class="form-text text-muted text-center"><small>{{ t('template.children.desc') }}</small></p>
                 </div>
-                <div class="card-footer text-center bg-white">
+                <div class="card-footer text-center">
                   <a href="{{templateParentPath}}_template#edit"
                       class="btn btn-sm btn-primary" id="template-button-children">
                       {{ t("Edit") }}
@@ -34,7 +34,7 @@
                   <p class="text-center"><code>__template</code></p>
                   <p class="form-text text-muted text-center"><small>{{ t('template.decendants.desc') }}</small></p>
                 </div>
-                <div class="card-footer text-center bg-white">
+                <div class="card-footer text-center">
                   <a href="{{templateParentPath}}__template#edit"
                       class="btn btn-sm btn-primary" id="template-button-decendants">
                       {{ t("Edit") }}

src/server/views/widget/create_portal.html

@@ -1,4 +1,4 @@
-<div class="portal-form-button">
+<div class="portal-form-button d-edit-none">
   <a class="btn btn-primary" id="create-portal-button" href="#edit" data-toggle="tab" {% if not user %}disabled{% endif %}>Create Portal</a>
   <p class="form-text text-muted"><a href="#" data-target="#help-portal" data-toggle="modal"><i class="icon-question"></i> What is Portal?</a></p>
 </div>

src/server/views/widget/forbidden_content.html

@@ -12,7 +12,7 @@
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
   >
 
-  <div class="row row-alerts">
+  <div class="row row-alerts d-edit-none">
     <div class="col-sm-12">
         <p class="alert alert-primary py-3 px-4">
           <i class="icon-fw icon-lock" aria-hidden="true"></i> Browsing of this page is restricted

src/server/views/widget/not_found_content.html

@@ -1,4 +1,4 @@
-<div class="row not-found-message-row mb-4">
+<div class="row not-found-message-row mb-4 d-edit-none">
   <div class="col-md-12">
     <h2 class="text-muted">
       <i class="icon-info" aria-hidden="true"></i>

src/server/views/widget/page_alerts.html

@@ -1,4 +1,4 @@
-<div class="row row-alerts">
+<div class="row row-alerts d-edit-none">
   <div class="col-sm-12">
     {% if page && page.grant && page.grant > 1 %}
 
@@ -29,7 +29,7 @@
     {% endif %}
 
     {% if redirectFrom or req.query.renamed or req.query.redirectFrom %}
-    <div class="alert alert-info hide-on-edit py-3 px-4 d-flex align-items-center justify-content-between">
+    <div class="alert alert-info d-edit-none py-3 px-4 d-flex align-items-center justify-content-between">
       <span>
         {% set fromPath = req.query.renamed or req.query.redirectFrom %}
         {% if redirectFrom or req.query.redirectFrom %}
@@ -61,7 +61,7 @@
     {% endif %}
 
     {% if req.query.unlinked %}
-    <div class="alert alert-info hide-on-edit py-3 px-4">
+    <div class="alert alert-info d-edit-none py-3 px-4">
       <strong>{{ t('Unlinked') }}: </strong> {{ t('page_page.notice.unlinked') }}
     </div>
     {% endif %}

src/server/views/widget/page_attachments.html

@@ -1,4 +1,4 @@
-<div class="row page-attachments-row hidden-print">
+<div class="row page-attachments-row d-edit-none d-print-none">
   <div class="col-12">
     <div class="mt-4 mb-4">
       <div class="page-attachments" id="page-attachment"></div>