fix admin page checkbox style (#7852)

frontend/src/pages/common-admin/web-settings/checkbox-item.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'reactstrap';
 import SettingItemBase from './setting-item-base';
@@ -11,7 +11,7 @@ const propTypes = {
   displayName: PropTypes.string.isRequired
 };
 
-class WebSettingCheckbox extends Component {
+class CheckboxItem extends Component {
 
   constructor(props) {
     super(props);
@@ -35,17 +35,18 @@ class WebSettingCheckbox extends Component {
     return (
       <SettingItemBase
         displayName={displayName}
+        mainClassName='d-flex'
         mainContent={
-          <Fragment>
+          <>
             <Input className="ml-0" checked={inputChecked} type='checkbox' onChange={this.onInputChange} />
-            <p className="ml-4">{helpTip}</p>
+            <p className="ml-2">{helpTip}</p>
-          </Fragment>
+          </>
         }
       />
     );
   }
 }
 
-WebSettingCheckbox.propTypes = propTypes;
+CheckboxItem.propTypes = propTypes;
 
-export default WebSettingCheckbox;
+export default CheckboxItem;

frontend/src/pages/common-admin/web-settings/file-item.js

@@ -0,0 +1,54 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import SettingItemBase from './setting-item-base';
+
+const propTypes = {
+  postFile: PropTypes.func.isRequired,
+  keyText: PropTypes.string.isRequired,
+  filePath: PropTypes.string.isRequired,
+  helpTip: PropTypes.string.isRequired,
+  fileWidth: PropTypes.number.isRequired,
+  fileHeight: PropTypes.number.isRequired,
+  displayName: PropTypes.string.isRequired
+};
+
+const WebSettingFile = (props) => {
+
+  const fileInput = useRef(null);
+
+  const uploadFile = () => {
+    if (!fileInput.current.files.length) {
+      return;
+    }
+    const file = fileInput.current.files[0];
+    props.postFile(file, props.keyText);
+  };
+
+  const openFileInput = () => {
+    fileInput.current.click();
+  };
+
+  const { helpTip, filePath, fileWidth, fileHeight, displayName } = props;
+
+  return (
+    <SettingItemBase
+      displayName={displayName}
+      helpTip={helpTip}
+      mainContent={
+        <img src={filePath + '?t=' + new Date().getTime()} alt={displayName} width={fileWidth} height={fileHeight} className="mb-1" />
+      }
+      extraContent={
+        <>
+          <Button color="secondary" onClick={openFileInput}>{gettext('Change')}</Button>
+          <input className="d-none" type="file" onChange={uploadFile} ref={fileInput} />
+        </>
+      }
+    />
+  );
+};
+
+WebSettingFile.propTypes = propTypes;
+
+export default WebSettingFile;

frontend/src/pages/common-admin/web-settings/section.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  headingText: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired
+};
+
+const Section = (props) => {
+  const { headingText, children } = props;
+  return (
+    <div className="mb-4">
+      <h4 className="border-bottom font-weight-normal mb-2 pb-1">{headingText}</h4>
+      {children}
+    </div>
+  );
+};
+
+Section.propTypes = propTypes;
+
+export default Section;

frontend/src/pages/common-admin/web-settings/setting-item-base.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col, Label } from 'reactstrap';
+
+const propTypes = {
+  displayName: PropTypes.string.isRequired,
+  helpTip: PropTypes.string,
+  mainContent: PropTypes.object.isRequired,
+  extraContent: PropTypes.object
+};
+
+function SettingItemBase(props) {
+  const { helpTip, displayName, mainContent, extraContent, mainClassName = '' } = props;
+  return (
+    <Row className="my-4">
+      <Col md="3">
+        <Label className="web-setting-label">{displayName}</Label>
+      </Col>
+      <Col md="5" className={mainClassName}>
+        {mainContent}
+        {helpTip && <p className="small text-secondary mt-1">{helpTip}</p>}
+      </Col>
+      <Col md="4">
+        {extraContent}
+      </Col>
+    </Row>
+  );
+}
+
+SettingItemBase.propTypes = propTypes;
+
+export default SettingItemBase;

frontend/src/pages/org-admin/web-settings/file-item.js

@@ -1,58 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import SettingItemBase from './setting-item-base';
-
-const propTypes = {
-  postFile: PropTypes.func.isRequired,
-  keyText: PropTypes.string.isRequired,
-  filePath: PropTypes.string.isRequired,
-  helpTip: PropTypes.string.isRequired,
-  fileWidth: PropTypes.number.isRequired,
-  fileHeight: PropTypes.number.isRequired,
-  displayName: PropTypes.string.isRequired
-};
-
-class WebSettingFile extends Component {
-
-  constructor(props) {
-    super(props);
-    this.fileInput = React.createRef();
-  }
-
-  uploadFile = () => {
-    if (!this.fileInput.current.files.length) {
-      return;
-    }
-    const file = this.fileInput.current.files[0];
-    this.props.postFile(file, this.props.keyText);
-  };
-
-  openFileInput = () => {
-    this.fileInput.current.click();
-  };
-
-  render() {
-    const { helpTip, filePath, fileWidth, fileHeight, displayName } = this.props;
-    return (
-      <SettingItemBase
-        displayName={displayName}
-        helpTip={helpTip}
-        mainContent={
-          <img src={filePath + '?t=' + new Date().getTime()} alt={displayName} width={fileWidth} height={fileHeight} className="mb-1" />
-        }
-        extraContent={
-          <Fragment>
-            <Button color="secondary" onClick={this.openFileInput}>{gettext('Change')}</Button>
-            <input className="d-none" type="file" onChange={this.uploadFile} ref={this.fileInput} />
-          </Fragment>
-        }
-      />
-    );
-  }
-}
-
-WebSettingFile.propTypes = propTypes;
-
-export default WebSettingFile;

frontend/src/pages/org-admin/web-settings/input-item.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Input, Button, InputGroup } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
-import SettingItemBase from './setting-item-base';
+import SettingItemBase from '../../common-admin/web-settings/setting-item-base';
 
 const propTypes = {
   inputType: PropTypes.string,

frontend/src/pages/org-admin/web-settings/section.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  headingText: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-class Section extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { headingText, children } = this.props;
-    return (
-      <div className="mb-4">
-        <h4 className="border-bottom font-weight-normal mb-2 pb-1">{headingText}</h4>
-        {children}
-      </div>
-    );
-  }
-}
-
-Section.propTypes = propTypes;
-
-export default Section;

frontend/src/pages/org-admin/web-settings/setting-item-base.js

@@ -1,41 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, Label } from 'reactstrap';
-
-const propTypes = {
-  displayName: PropTypes.string.isRequired,
-  helpTip: PropTypes.string,
-  mainContent: PropTypes.object.isRequired,
-  extraContent: PropTypes.object
-};
-
-class SettingItemBase extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { helpTip, displayName, mainContent, extraContent } = this.props;
-    return (
-      <Fragment>
-        <Row className="my-4">
-          <Col md="3">
-            <Label className="web-setting-label">{displayName}</Label>
-          </Col>
-          <Col md="5">
-            {mainContent}
-            {helpTip && <p className="small text-secondary mt-1">{helpTip}</p>}
-          </Col>
-          <Col md="4">
-            {extraContent}
-          </Col>
-        </Row>
-      </Fragment>
-    );
-  }
-}
-
-SettingItemBase.propTypes = propTypes;
-
-export default SettingItemBase;

frontend/src/pages/org-admin/web-settings/web-settings.js

@@ -6,10 +6,10 @@ import { gettext, mediaUrl, logoPath, orgID, orgEnableAdminCustomLogo, orgEnable
 import Loading from '../../../components/loading';
 import toaster from '../../../components/toast';
 import MainPanelTopbar from '../main-panel-topbar';
-import Section from './section';
+import Section from '../../common-admin/web-settings/section';
+import CheckboxItem from '../../common-admin/web-settings/checkbox-item';
+import FileItem from '../../common-admin/web-settings/file-item';
 import InputItem from './input-item';
-import FileItem from './file-item';
-import CheckboxItem from '../../sys-admin/web-settings/checkbox-item';
 
 import '../../../css/system-admin-web-settings.css';
 
@@ -133,7 +133,8 @@ class OrgWebSettings extends Component {
                       helpTip={''}
                       disabled={!orgEnableAdminCustomName}
                     />
-                    { orgEnableAdminCustomLogo && <FileItem
+                    {orgEnableAdminCustomLogo &&
+                      <FileItem
                         postFile={this.updateLogo}
                         displayName='Logo'
                         keyText='Logo'

frontend/src/pages/sys-admin/web-settings/checkbox-item.js

@@ -1,51 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Input } from 'reactstrap';
-import SettingItemBase from './setting-item-base';
-
-const propTypes = {
-  saveSetting: PropTypes.func.isRequired,
-  keyText: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
-  helpTip: PropTypes.string.isRequired,
-  displayName: PropTypes.string.isRequired
-};
-
-class WebSettingCheckbox extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      inputChecked: this.props.value
-    };
-  }
-
-  onInputChange = (e) => {
-    const checked = e.target.checked;
-    const valueToNum = checked ? 1 : 0;
-    this.setState({
-      inputChecked: checked
-    });
-    this.props.saveSetting(this.props.keyText, valueToNum);
-  };
-
-  render() {
-    const { inputChecked } = this.state;
-    const { helpTip, displayName } = this.props;
-    return (
-      <SettingItemBase
-        displayName={displayName}
-        mainContent={
-          <Fragment>
-            <Input className="ml-0" checked={inputChecked} type='checkbox' onChange={this.onInputChange} />
-            <p className="ml-4">{helpTip}</p>
-          </Fragment>
-        }
-      />
-    );
-  }
-}
-
-WebSettingCheckbox.propTypes = propTypes;
-
-export default WebSettingCheckbox;

frontend/src/pages/sys-admin/web-settings/file-item.js

@@ -1,58 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
-import { gettext } from '../../../utils/constants';
-import SettingItemBase from './setting-item-base';
-
-const propTypes = {
-  postFile: PropTypes.func.isRequired,
-  keyText: PropTypes.string.isRequired,
-  filePath: PropTypes.string.isRequired,
-  helpTip: PropTypes.string.isRequired,
-  fileWidth: PropTypes.number.isRequired,
-  fileHeight: PropTypes.number.isRequired,
-  displayName: PropTypes.string.isRequired
-};
-
-class WebSettingFile extends Component {
-
-  constructor(props) {
-    super(props);
-    this.fileInput = React.createRef();
-  }
-
-  uploadFile = () => {
-    if (!this.fileInput.current.files.length) {
-      return;
-    }
-    const file = this.fileInput.current.files[0];
-    this.props.postFile(file, this.props.keyText);
-  };
-
-  openFileInput = () => {
-    this.fileInput.current.click();
-  };
-
-  render() {
-    const { helpTip, filePath, fileWidth, fileHeight, displayName } = this.props;
-    return (
-      <SettingItemBase
-        displayName={displayName}
-        helpTip={helpTip}
-        mainContent={
-          <img src={filePath + '?t=' + new Date().getTime()} alt={displayName} width={fileWidth} height={fileHeight} className="mb-1" />
-        }
-        extraContent={
-          <Fragment>
-            <Button color="secondary" onClick={this.openFileInput}>{gettext('Change')}</Button>
-            <input className="d-none" type="file" onChange={this.uploadFile} ref={this.fileInput} />
-          </Fragment>
-        }
-      />
-    );
-  }
-}
-
-WebSettingFile.propTypes = propTypes;
-
-export default WebSettingFile;

frontend/src/pages/sys-admin/web-settings/input-item.js

@@ -2,7 +2,7 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'reactstrap';
 import { gettext } from '../../../utils/constants';
-import SettingItemBase from './setting-item-base';
+import SettingItemBase from '../../common-admin/web-settings/setting-item-base';
 
 const propTypes = {
   inputType: PropTypes.string,

frontend/src/pages/sys-admin/web-settings/section.js

@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  headingText: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired
-};
-
-class Section extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { headingText, children } = this.props;
-    return (
-      <div className="mb-4">
-        <h4 className="border-bottom font-weight-normal mb-2 pb-1">{headingText}</h4>
-        {children}
-      </div>
-    );
-  }
-}
-
-Section.propTypes = propTypes;
-
-export default Section;

frontend/src/pages/sys-admin/web-settings/setting-item-base.js

@@ -1,41 +0,0 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Row, Col, Label } from 'reactstrap';
-
-const propTypes = {
-  displayName: PropTypes.string.isRequired,
-  helpTip: PropTypes.string,
-  mainContent: PropTypes.object.isRequired,
-  extraContent: PropTypes.object
-};
-
-class SettingItemBase extends Component {
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { helpTip, displayName, mainContent, extraContent } = this.props;
-    return (
-      <Fragment>
-        <Row className="my-4">
-          <Col md="3">
-            <Label className="web-setting-label">{displayName}</Label>
-          </Col>
-          <Col md="5">
-            {mainContent}
-            {helpTip && <p className="small text-secondary mt-1">{helpTip}</p>}
-          </Col>
-          <Col md="4">
-            {extraContent}
-          </Col>
-        </Row>
-      </Fragment>
-    );
-  }
-}
-
-SettingItemBase.propTypes = propTypes;
-
-export default SettingItemBase;

frontend/src/pages/sys-admin/web-settings/web-settings.js

@@ -5,10 +5,10 @@ import { gettext, isPro, mediaUrl, logoPath, faviconPath, loginBGPath } from '..
 import Loading from '../../../components/loading';
 import toaster from '../../../components/toast';
 import MainPanelTopbar from '../main-panel-topbar';
-import Section from './section';
+import Section from '../../common-admin/web-settings/section';
+import CheckboxItem from '../../common-admin/web-settings/checkbox-item';
+import FileItem from '../../common-admin/web-settings/file-item';
 import InputItem from './input-item';
-import FileItem from './file-item';
-import CheckboxItem from './checkbox-item';
 
 import '../../../css/system-admin-web-settings.css';