Merge pull request #1642 from weseek/bst4-admin-markdown2

Bst4 admin markdown2

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
-import { Button } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
@@ -12,6 +11,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 const logger = loggerFactory('growi:importer');
 
@@ -92,7 +92,7 @@ class LineBreakForm extends React.Component {
   }
 
   render() {
-    const { t, adminMarkDownContainer } = this.props;
+    const { adminMarkDownContainer } = this.props;
 
     return (
       <React.Fragment>
@@ -100,18 +100,7 @@ class LineBreakForm extends React.Component {
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>
-        <div className="form-group col-12 m-3">
-          <div className="offset-4 col-8">
-            <Button
-              type="submit"
-              color="primary"
-              onClick={this.onClickSubmit}
-              disabled={adminMarkDownContainer.state.retrieveError != null}
-            >
-              {t('Update')}
-            </Button>
-          </div>
-        </div>
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminMarkDownContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }

src/client/js/components/Admin/MarkdownSetting/MarkDownSetting.jsx

@@ -38,31 +38,25 @@ class MarkdownSetting extends React.Component {
     return (
       <React.Fragment>
         {/* Line Break Setting */}
-        <div className="row mb-5">
-          <h2 className="border-bottom col-12">{t('admin:markdown_setting.lineBreak_header') }</h2>
-          <Card className="card-well col-12">
-            <CardBody className="px-2 py-3">{ t('admin:markdown_setting.line_break_setting_desc') }</CardBody>
-          </Card>
-          <LineBreakForm />
-        </div>
+        <h2 className="admin-setting-header">{t('admin:markdown_setting.lineBreak_header')}</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.lineBreak_desc') }</CardBody>
+        </Card>
+        <LineBreakForm />
 
         {/* Presentation Setting */}
-        <div className="row mb-5">
-          <h2 className="border-bottom col-12">{ t('admin:markdown_setting.presentation_setting') }</h2>
-          <Card className="card-well col-12">
-            <CardBody className="px-2 py-3">{ t('admin:markdown_setting.presentation_setting_desc') }</CardBody>
-          </Card>
-          <PresentationForm />
-        </div>
+        <h2 className="admin-setting-header">{ t('admin:markdown_setting.presentation_header') }</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.presentation_desc') }</CardBody>
+        </Card>
+        <PresentationForm />
 
         {/* XSS Setting */}
-        <div className="row mb-5">
-          <h2 className="border-bottom col-12">{ t('admin:markdown_setting.XSS_setting') }</h2>
-          <Card className="card-well col-12">
-            <CardBody className="px-2 py-3">{ t('admin:markdown_setting.XSS_setting_desc') }</CardBody>
-          </Card>
-          <XssForm />
-        </div>
+        <h2 className="admin-setting-header">{ t('admin:markdown_setting.xss_header') }</h2>
+        <Card className="card well my-3">
+          <CardBody className="px-0 py-2">{ t('admin:markdown_setting.xss_desc') }</CardBody>
+        </Card>
+        <XssForm />
       </React.Fragment>
     );
   }

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
@@ -10,6 +9,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 const logger = loggerFactory('growi:markdown:presentation');
 
@@ -40,76 +40,75 @@ class PresentationForm extends React.Component {
     const { pageBreakSeparator, pageBreakCustomSeparator } = adminMarkDownContainer.state;
 
     return (
-      <fieldset className="form-group row my-2">
+      <fieldset className="form-group col-12 my-2">
 
-        <label className="col-xs-3 control-label text-right">
+        <label className="col-12 control-label font-weight-bold text-left mt-3">
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 
-        <div className="col-xs-3 radio radio-primary">
-          <input
-            type="radio"
-            id="pageBreakOption1"
-            checked={pageBreakSeparator === 1}
-            onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
-          />
-          <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.preset_one_separator')}</p>
-            <div className="mt-3">
-              {t('admin:markdown_setting.presentation_options.preset_one_separator_desc')}
-              <pre><code>{t('admin:markdown_setting.presentation_options.preset_one_separator_value')}</code></pre>
+        <div className="form-group form-check-inline col-12 my-3">
+          <div className="col-4 align-self-start">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="pageBreakOption1"
+                checked={pageBreakSeparator === 1}
+                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
+              />
+              <label className="custom-control-label" htmlFor="pageBreakOption1">
+                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
+                <div className="mt-3">
+                  { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
+                  <pre><code>{ t('admin:markdown_setting.presentation_options.preset_one_separator_value') }</code></pre>
+                </div>
+              </label>
             </div>
-          </label>
-        </div>
+          </div>
 
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption2"
-            checked={pageBreakSeparator === 2}
-            onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
-          />
-          <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.preset_two_separator')}</p>
-            <div className="mt-3">
-              {t('admin:markdown_setting.presentation_options.preset_two_separator_desc')}
-              <pre><code>{t('admin:markdown_setting.presentation_options.preset_two_separator_value')}</code></pre>
+          <div className="col-4 align-self-start">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="pageBreakOption2"
+                checked={pageBreakSeparator === 2}
+                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
+              />
+              <label className="custom-control-label" htmlFor="pageBreakOption2">
+                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
+                <div className="mt-3">
+                  { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
+                  <pre><code>{ t('admin:markdown_setting.presentation_options.preset_two_separator_value') }</code></pre>
+                </div>
+              </label>
             </div>
-          </label>
-        </div>
-
-        <div className="col-xs-3 radio radio-primary mt-3">
-          <input
-            type="radio"
-            id="pageBreakOption3"
-            checked={pageBreakSeparator === 3}
-            onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
-          />
-          <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{t('admin:markdown_setting.presentation_options.custom_separator')}</p>
-            <div className="mt-3">
-              {t('admin:markdown_setting.presentation_options.custom_separator_desc')}
+          </div>
+          <div className="col-4 align-self-start">
+            <div className="custom-control custom-radio">
               <input
-                className="form-control"
-                defaultValue={pageBreakCustomSeparator}
-                onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
+                type="radio"
+                id="pageBreakOption3"
+                className="custom-control-input"
+                checked={pageBreakSeparator === 3}
+                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
               />
+              <label className="custom-control-label" htmlFor="pageBreakOption3">
+                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
+                <div className="mt-3">
+                  { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
+                  <input
+                    className="form-control"
+                    defaultValue={pageBreakCustomSeparator}
+                    onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
+                  />
+                </div>
+              </label>
             </div>
-          </label>
-        </div>
-
-        <div className="form-group col-12 m-3">
-          <div className="offset-4 col-8">
-            <Button
-              type="submit"
-              color="primary"
-              onClick={this.onClickSubmit}
-              disabled={adminMarkDownContainer.state.retrieveError != null}
-            >
-              {t('Update')}
-            </Button>
           </div>
         </div>
+
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminMarkDownContainer.state.retrieveError != null} />
       </fieldset>
     );
   }

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from 'reactstrap';
 
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
@@ -11,6 +10,7 @@ import { tags, attrs } from '../../../../../lib/service/xss/recommended-whitelis
 
 import AppContainer from '../../../services/AppContainer';
 import AdminMarkDownContainer from '../../../services/AdminMarkDownContainer';
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
 
 import WhiteListInput from './WhiteListInput';
 
@@ -29,7 +29,7 @@ class XssForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updateXssSetting();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:markdown_setting.xss_desc') }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:markdown_setting.xss_header') }));
     }
     catch (err) {
       toastError(err);
@@ -62,46 +62,48 @@ class XssForm extends React.Component {
           </div>
         </div>
 
-        <div className="col-xs-4 radio radio-primary">
-          <input
-            type="radio"
-            id="xssOption2"
-            name="XssOption"
-            checked={xssOption === 2}
-            onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
-          />
-          <label htmlFor="xssOption2">
-            <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
-            <div className="m-t-15">
-              <div className="d-flex justify-content-between">
-                {t('admin:markdown_setting.xss_options.tag_names')}
+        <div className="col-4 align-self-start">
+          <div className="custom-control custom-radio">
+            <input
+              type="radio"
+              className="custom-control-input"
+              id="xssOption2"
+              name="XssOption"
+              checked={xssOption === 2}
+              onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
+            />
+            <label className="custom-control-label" htmlFor="xssOption2">
+              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
+              <div className="m-t-15">
+                <div className="d-flex justify-content-between">
+                  {t('admin:markdown_setting.xss_options.tag_names')}
+                </div>
+                <textarea
+                  className="form-control xss-list"
+                  name="recommendedTags"
+                  rows="6"
+                  cols="40"
+                  readOnly
+                  defaultValue={tags}
+                />
               </div>
-              <textarea
-                className="form-control xss-list"
-                name="recommendedTags"
-                rows="6"
-                cols="40"
-                readOnly
-                defaultValue={tags}
-              />
-            </div>
-            <div className="m-t-15">
-              <div className="d-flex justify-content-between">
-                {t('admin:markdown_setting.xss_options.tag_attributes')}
+              <div className="m-t-15">
+                <div className="d-flex justify-content-between">
+                  {t('admin:markdown_setting.xss_options.tag_attributes')}
+                </div>
+                <textarea
+                  className="form-control xss-list"
+                  name="recommendedAttrs"
+                  rows="6"
+                  cols="40"
+                  readOnly
+                  defaultValue={attrs}
+                />
               </div>
-              <textarea
-                className="form-control xss-list"
-                name="recommendedAttrs"
-                rows="6"
-                cols="40"
-                readOnly
-                defaultValue={attrs}
-              />
-            </div>
-          </label>
+            </label>
+          </div>
         </div>
 
-
         <div className="col-4 align-self-start">
           <div className="custom-control custom-radio">
             <input
@@ -151,18 +153,7 @@ class XssForm extends React.Component {
             {isEnabledXss && this.xssOptions()}
           </div>
         </fieldset>
-        <div className="form-group col-12 m-3">
-          <div className="offset-4 col-8">
-            <Button
-              type="submit"
-              color="primary"
-              onClick={this.onClickSubmit}
-              disabled={adminMarkDownContainer.state.retrieveError != null}
-            >
-              {t('Update')}
-            </Button>
-          </div>
-        </div>
+        <AdminUpdateButtonRow onClick={this.onClickSubmit} disabled={adminMarkDownContainer.state.retrieveError != null} />
       </React.Fragment>
     );
   }