Merge branch 'support/apply-bootstrap4-export-page' into support/apply-bootstrap4-admin-export-page

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

@@ -203,7 +203,7 @@ class ImportCollectionConfigurationModal extends React.Component {
         </ModalBody>
 
         <ModalFooter>
-          <button type="button" className="btn btn-sm page-link text-dark d-inline-block" onClick={this.props.onClose}>{t('Cancel')}</button>
+          <button type="button" className="btn btn-sm btn-light" onClick={this.props.onClose}>{t('Cancel')}</button>
           <button type="button" className="btn btn-sm btn-primary" onClick={this.updateOption}>{t('Update')}</button>
         </ModalFooter>
       </Modal>

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

@@ -149,7 +149,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <button
         type="button"
-        className="btn page-link text-dark d-inline-block btn-sm p-1 ml-2"
+        className="btn btn-light btn-sm p-1 ml-2"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >
@@ -201,8 +201,8 @@ export default class ImportCollectionItem extends React.Component {
     } = this.props;
 
     return (
-      <div className="card">
-        <div className="card-header">
+      <div className="card border-light">
+        <div className="card-header bg-light">
           <div className="d-flex justify-content-between align-items-center">
             {/* left */}
             <div className="pl-4">

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

@@ -347,7 +347,7 @@ class ImportForm extends React.Component {
         <div className="col-12">
           <legend>{groupName} Collections</legend>
           { wellContent != null && (
-            <div className="card card-well small" role="alert">
+            <div className="card well small" role="alert">
               <ul>
                 <li>{wellContent}</li>
               </ul>
@@ -455,33 +455,33 @@ class ImportForm extends React.Component {
       <>
         <form className="form-inline">
           <div className="form-group">
-            <button type="button" className="btn btn-sm page-link text-dark d-inline-block mr-2" onClick={this.checkAll}>
+            <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('export_management.check_all')}
             </button>
           </div>
           <div className="form-group">
-            <button type="button" className="btn btn-sm page-link text-dark d-inline-block mr-2" onClick={this.uncheckAll}>
+            <button type="button" className="btn btn-sm btn-light mr-2" onClick={this.uncheckAll}>
               <i className="fa fa-square-o"></i> {t('export_management.uncheck_all')}
             </button>
           </div>
         </form>
 
-        { this.renderGroups(GROUPS_PAGE, 'Page', warnForPageGroups, { wellContent: t('importer_management.growi_settings.overwrite_documents') }) }
-        { this.renderGroups(GROUPS_USER, 'User', warnForUserGroups) }
-        { this.renderGroups(GROUPS_CONFIG, 'Config', warnForConfigGroups) }
-        { this.renderOthers() }
+        {this.renderGroups(GROUPS_PAGE, 'Page', warnForPageGroups, { wellContent: t('importer_management.growi_settings.overwrite_documents') })}
+        {this.renderGroups(GROUPS_USER, 'User', warnForUserGroups)}
+        {this.renderGroups(GROUPS_CONFIG, 'Config', warnForConfigGroups)}
+        {this.renderOthers()}
 
         <div className="mt-4 text-center">
-          <button type="button" className="btn page-link text-dark d-inline-block mx-1" onClick={this.props.onDiscard}>
-            { t('importer_management.growi_settings.discard') }
+          <button type="button" className="btn btn-light mx-1" onClick={this.props.onDiscard}>
+            {t('importer_management.growi_settings.discard')}
           </button>
           <button type="button" className="btn btn-primary mx-1" onClick={this.import} disabled={!canImport || isImporting}>
-            { t('importer_management.import') }
+            {t('importer_management.import')}
           </button>
         </div>
 
-        { this.renderConfigurationModal() }
-        { this.renderErrorsViewer() }
+        {this.renderConfigurationModal()}
+        {this.renderErrorsViewer()}
       </>
     );
   }

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

@@ -171,7 +171,7 @@ class ImportDataPage extends React.Component {
               </tbody>
             </table>
 
-            <div className="card card-well mb-0 small">
+            <div className="card well mb-0 small">
               <ul>
                 <li>{ t('importer_management.page_skip') }</li>
               </ul>
@@ -216,7 +216,7 @@ class ImportDataPage extends React.Component {
                     name="Esa"
                     type="button"
                     id="importFromEsa"
-                    className="btn page-link text-dark d-inline-block btn-esa"
+                    className="btn btn-light btn-esa"
                     onClick={this.esaHandleSubmitTest}
                     value={t('importer_management.esa_settings.test_connection')}
                   />
@@ -265,7 +265,7 @@ class ImportDataPage extends React.Component {
                 </tr>
               </tbody>
             </table>
-            <div className="card card-well mb-0 small">
+            <div className="card well mb-0 small">
               <ul>
                 <li>{ t('importer_management.page_skip') }</li>
               </ul>
@@ -309,7 +309,7 @@ class ImportDataPage extends React.Component {
                     name="Qiita"
                     type="button"
                     id="importFromQiita"
-                    className="btn page-link text-dark d-inline-block btn-qiita"
+                    className="btn btn-light btn-qiita"
                     onClick={this.qiitaHandleSubmitTest}
                     value={t('importer_management.qiita_settings.test_connection')}
                   />

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -437,7 +437,7 @@ export default class HandsontableModal extends React.PureComponent {
         <ModalHeader toggle={this.cancel} close={buttons}>Edit Table</ModalHeader>
         <ModalBody className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar bg-light">
-            <Button className="mr-4 data-import-button" onClick={this.toggleDataImportArea}>
+            <Button className="mr-4 data-import-button bg-light" onClick={this.toggleDataImportArea}>
               <span className="mr-3">Data Import</span><i className={this.state.isDataImportAreaExpanded ? 'fa fa-angle-up' : 'fa fa-angle-down'}></i>
 
             </Button>

src/client/styles/scss/_handsontable.scss

@@ -43,7 +43,6 @@
 
   .data-import-form {
     color: $headingtext;
-    background-color: $navbar-default-bg;
 
     .btn + .btn {
       margin-left: 5px;

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -4,6 +4,14 @@
 
 //== Colors
 //
+$primary: #112744;
+$secondary: #6c757d;
+$info: #0d8ea5;
+$success: #00bb83;
+$warning: #ee773b;
+$danger: #ff0a54;
+$light: #dee2e6;
+$dark: #343a40;
 //## Gray and brand colors for use across Bootstrap.
 $gray-base:              #000 !default;
 $gray-darker:            lighten($gray-base, 13.5%); // #222
@@ -19,17 +27,16 @@ $brand-info:            $info;
 $brand-warning:         $warning;
 $brand-danger:          $danger;
 
-
-
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif:  Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace:   SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+$font-family-monospace: Osaka-Mono, 'MS Gothic', Monaco, Menlo, Consolas, 'Courier New', monospace;
 $font-family-base:        $font-family-sans-serif;
 
-
+$font-size-root: 14px;
+$line-height-base: 1.42857;
 
 //== Components
 //
@@ -44,13 +51,45 @@ $border-radius-small: 0;
 //## For each of Bootstrap's buttons, define text, background and border color.
 
 $btn-default-bg: $btn-default-bgcolor;
+$btn-border-radius: 0;
+$btn-border-radius-lg: 0;
+$btn-border-radius-sm: 0;
 
 
 
 //== Forms
 //
-//##
+$input-border-radius: 0;
+$input-border-radius-lg: 0;
+$input-border-radius-sm: 0;
+
+//== Navs
+
+$nav-link-padding-y: 0.75rem;
+$nav-link-padding-x: 1rem;
+$nav-tabs-border-radius: 0;
 
+//== Navbar
+$navbar-padding-y: 0;
+$navbar-brand-padding-y: 0;
+$navbar-nav-link-padding-x: 1rem;
+
+//== Dropdowns
+$dropdown-border-radius: 0;
+
+//== card
+$card-border-radius: 0;
+$card-spacer-y: 7px;
+$card-spacer-x: 15px;
+
+//== Modals
+$modal-content-border-width: 0;
+$modal-content-border-radius: 0;
+$modal-header-padding-y: 0.75rem;
+$modal-header-padding-x: 1rem;
+
+//== Alerts
+$alert-border-radius: 0;
 //** `<input>` background color
 $input-bg:                       $bodycolor;
 //** `<input disabled>` background color
@@ -58,3 +97,9 @@ $input-bg-disabled:              $btn-default-bgcolor;
 
 //** `<input>` border color
 $input-border:                   $border;
+
+//== Progress bar
+$progress-height: 4px;
+$progress-border-radius: 0;
+$progress-bg: #f0f0f0;
+$progress-box-shadow: none;

src/client/styles/scss/_override-bootstrap.scss

@@ -16,23 +16,24 @@
 // card (substitute panel of bootstrap3)
 .card {
   margin-bottom: 20px;
-  border-radius: 0;
+  border-radius: $card-border-radius;
 }
 
-.card-header:not(.card-well) {
-  padding: 7px 15px;
+.card-header {
   font-weight: 700;
   text-transform: none;
-  border-radius: 0;
+  border-radius: $card-border-radius;
 }
 
 .card-header:first-child {
-  border-radius: 0;
+  border-radius: $card-border-radius;
 }
 
-// card-well (substitute well of bootstrap3)
-.card.card-well {
-  padding: 7px 15px;
+// Well (substitute Well of bootstrap3)
+.card.well {
+  padding: $card-spacer-y $card-spacer-x;
+  min-height: 20px;
+  border-radius: 3px;
 }
 
 // Dropdowns
@@ -48,8 +49,6 @@
   margin-top: 0px;
   border: 1px solid $border;
   border-radius: $radius;
-  -webkit-box-shadow: 0px !important;
-  -moz-box-shadow: 0px !important;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -63,9 +62,9 @@
   background: $extralight;
 }
 
-// page-link (substitute for btn-default of bootstrap3)  (agile-admin style)
-.page-link.text-dark.d-inline-block,
-.page-link.text-dark.d-inline-block.disabled {
+// btn-light (substitute for btn-default of bootstrap3)  (agile-admin style)
+.btn-light,
+.btn-light.disabled {
   color: $bodytext;
   $this-color: $btn-default-bgcolor;
   background: $this-color;
@@ -78,14 +77,14 @@
     background: $this-color;
     border: 1px solid $this-color;
     opacity: 0.8;
-    box-shadow: none;
+    box-shadow: none !important;
   }
   &:active &.active {
     box-shadow: none;
   }
 }
 
-.page-link.text-dark.d-inline-block.btn-outline {
+.btn-light.btn-outline {
   background-color: transparent;
 
   &:hover,
@@ -118,7 +117,8 @@ label {
   font-weight: 700;
 }
 
-// disabled button (reproduction from bootstrap3)
+// disabled button (reproduction from bootstrap3.)
+// see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
 .btn.disabled,
 .btn[disabled],
 fieldset[disabled] .btn {
@@ -132,3 +132,9 @@ fieldset[disabled] .btn {
     box-shadow: none;
   }
 }
+
+// progress bar
+.progress {
+  margin-bottom: 18px;
+  overflow: hidden;
+}

src/client/styles/scss/_variables-bootstrap.scss

@@ -1,69 +0,0 @@
-//
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-$primary: #112744;
-$secondary: #6c757d;
-$info: #0d8ea5;
-$success: #00bb83;
-$warning: #ee773b;
-$danger: #ff0a54;
-$light: #dee2e6;
-$dark: #343a40;
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
-$font-family-serif: Georgia, 'Times New Roman', Times, serif;
-$font-family-monospace: Osaka-Mono, 'MS Gothic', Monaco, Menlo, Consolas, 'Courier New', monospace;
-$font-family-base: $font-family-sans-serif;
-
-$font-size-root: 14px;
-$line-height-base: 1.42857;
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-$border-radius-base: 0;
-$border-radius-large: 0;
-$border-radius-small: 0;
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-$btn-border-radius: 0;
-$btn-border-radius-lg: 0;
-$btn-border-radius-sm: 0;
-
-//== Forms
-
-$input-border-radius: 0;
-$input-border-radius-lg: 0;
-$input-border-radius-sm: 0;
-
-//== Navs
-
-$nav-link-padding-y: 0.75rem;
-$nav-link-padding-x: 1rem;
-$nav-tabs-border-radius: 0;
-
-//== Navbar
-$navbar-padding-y: 0;
-$navbar-brand-padding-y: 0;
-$navbar-nav-link-padding-x: 1rem;
-
-//== Dropdowns
-$dropdown-border-radius: 0;
-
-//== Modals
-$modal-content-border-width: 0;
-$modal-content-border-radius: 0;
-$modal-header-padding-y: 0.75rem;
-$modal-header-padding-x: 1rem;
-
-//== Alerts
-$alert-border-radius: 0;

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

@@ -1,9 +1,9 @@
 // import variables
 @import '../agile-admin/inverse/variables';
 @import 'variables';
-@import 'variables-bootstrap';
 
 @import 'mixins';
+@import 'override-bootstrap-variables';
 
 // vendor
 @import 'vendor';

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

@@ -8,7 +8,7 @@
 /*
  * Button
  */
-.page-link.text-dark.d-inline-block {
+.btn-light {
   &:hover,
   &:focus,
   &.active,
@@ -139,7 +139,7 @@ header.affix {
  */
 .search-page {
   .input-group-btn {
-    .page-link.text-dark.d-inline-block {
+    .btn-light {
       border: 1px solid darken($border, 30%); // fit to input.form-control
     }
   }

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

@@ -33,6 +33,10 @@
   }
 }
 
+// Border light
+.border-light {
+  border-color: $light !important;
+}
 // Link buttons
 .btn-link {
   color: $link-color;
@@ -152,37 +156,17 @@ legend {
   }
 }
 
-/*
- * progress bar
- */
-.progress {
-  height: 4px;
-  margin-bottom: 18px;
-  overflow: hidden;
-  background-color: #f0f0f0;
-  border-radius: 0;
-  -webkit-box-shadow: none !important;
-  box-shadow: none !important;
-}
-
 /*
  * cards
  */
-.card {
-  border: 1px solid #f0f0f0;
-}
-
 .card-header {
-  background-color: #f0f0f0;
-  border: 1px solid #f0f0f0;
+  border: 0;
 }
 
-.card.card-well {
-  min-height: 20px;
+.card.well {
   background-color: #f2f2f2;
   background-color: #f5f5f5;
   border-color: #f0f0f0;
-  border-radius: 3px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 

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

@@ -1,5 +1,4 @@
 @import '../variables';
-@import '../variables-bootstrap';
 
 // == Define colors
 //
@@ -11,7 +10,7 @@ $secondary: #ced4da;
 // $success: #;
 // $warning: #;
 // $danger: #;
-// $light: #;
+$light: #f0f0f0;
 // $dark: #;
 
 // Background colors