Merge pull request #1268 from weseek/reactify-admin/adjust-layout

Reactify admin/adjust layout

resource/locales/en-US/translation.json

@@ -718,11 +718,11 @@
     "current_users": "Current users:",
     "valid_email": "Valid email address is required",
     "existing_email": "The following emails already exist",
-    "give_user_admin": "Give {{username}} admin success",
-    "remove_user_admin": "Remove {{username}} admin success",
-    "activate_user_success": "Activating {{username}} success",
-    "deactivate_user_success": "Deactivating {{username}} success",
-    "remove_user_success": "Removing {{username}} success"
+    "give_user_admin": "Succeeded to give {{username}} admin",
+    "remove_user_admin": "Succeeded to remove {{username}} admin",
+    "activate_user_success": "Succeeded to activate {{username}} admin",
+    "deactivate_user_success": "Succeeded to deactive {{username}} admin",
+    "remove_user_success": "Succeeded to remove {{username}}"
   },
 
   "user_group_management": {

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-danger */
-/* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
@@ -35,42 +34,66 @@ class LineBreakForm extends React.Component {
     }
   }
 
-
-  render() {
+  renderLineBreakOption() {
     const { t, markDownSettingContainer } = this.props;
-    const { isEnabledLinebreaks, isEnabledLinebreaksInComments } = markDownSettingContainer.state;
+    const { isEnabledLinebreaks } = markDownSettingContainer.state;
 
     const helpLineBreak = { __html: t('markdown_setting.Enable Line Break desc') };
+
+    return (
+      <div className="form-group row">
+        <div className="col-xs-offset-4 col-xs-6 text-left">
+          <div className="checkbox checkbox-success">
+            <input
+              type="checkbox"
+              id="isEnabledLinebreaks"
+              checked={isEnabledLinebreaks}
+              onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
+            />
+            <label htmlFor="isEnabledLinebreaks">
+              { t('markdown_setting.Enable Line Break') }
+            </label>
+          </div>
+          <p className="help-block" dangerouslySetInnerHTML={helpLineBreak} />
+        </div>
+      </div>
+    );
+  }
+
+  renderLineBreakInCommentOption() {
+    const { t, markDownSettingContainer } = this.props;
+    const { isEnabledLinebreaksInComments } = markDownSettingContainer.state;
+
     const helpLineBreakInComment = { __html: t('markdown_setting.Enable Line Break for comment desc') };
 
     return (
-      // TODO GW-322 adjust layout
-      <React.Fragment>
-        <fieldset className="row">
-          <div className="form-group">
-            <div className="col-xs-4 text-right">
-              <div className="checkbox checkbox-success" onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}>
-                <input type="checkbox" name="isEnabledLinebreaks" checked={isEnabledLinebreaks} />
-                <label>
-                  { t('markdown_setting.Enable Line Break') }
-                </label>
-                <p className="help-block" dangerouslySetInnerHTML={helpLineBreak} />
-              </div>
-            </div>
+      <div className="form-group row">
+        <div className="col-xs-offset-4 col-xs-6 text-left">
+          <div className="checkbox checkbox-success">
+            <input
+              type="checkbox"
+              id="isEnabledLinebreaksInComments"
+              checked={isEnabledLinebreaksInComments}
+              onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
+            />
+            <label htmlFor="isEnabledLinebreaksInComments">
+              { t('markdown_setting.Enable Line Break') }
+            </label>
           </div>
-        </fieldset>
+          <p className="help-block" dangerouslySetInnerHTML={helpLineBreakInComment} />
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { t } = this.props;
+
+    return (
+      <React.Fragment>
         <fieldset className="row">
-          <div className="form-group my-3">
-            <div className="col-xs-4 text-right">
-              <div className="checkbox checkbox-success" onChange={() => { markDownSettingContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}>
-                <input type="checkbox" name="isEnabledLinebreaksInComments" checked={isEnabledLinebreaksInComments} />
-                <label>
-                  { t('markdown_setting.Enable Line Break for comment') }
-                </label>
-                <p className="help-block" dangerouslySetInnerHTML={helpLineBreakInComment} />
-              </div>
-            </div>
-          </div>
+          {this.renderLineBreakOption()}
+          {this.renderLineBreakInCommentOption()}
         </fieldset>
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">

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

@@ -15,7 +15,6 @@ class MarkdownSetting extends React.Component {
     const { t } = this.props;
 
     return (
-      // TODO GW-322 adjust layout
       <React.Fragment>
         {/* Line Break Setting */}
         <div className="row my-3">

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

@@ -95,7 +95,7 @@ class XssForm extends React.Component {
       <React.Fragment>
         <form className="row">
           <div className="form-group">
-            <div className="col-xs-4 text-right">
+            <div className="col-xs-offset-4 col-xs-4 text-left">
               <div className="checkbox checkbox-success">
                 <input
                   type="checkbox"

src/server/views/admin/markdown.html

@@ -6,7 +6,7 @@
 {% block content_header %}
 <div class="header-wrap">
   <header id="page-header">
-    <h1 id="admin-title" class="title">{{ t('Markdown settings') }}</h1>
+    <h1 id="admin-title" class="title">{{ t('Markdown Settings') }}</h1>
   </header>
 </div>
 {% endblock %}