Merge pull request #1746 from weseek/support/apply-custom-switch

Support/apply custom switch

src/client/js/components/Admin/App/PluginSetting.jsx

@@ -43,7 +43,7 @@ class PluginSetting extends React.Component {
 
         <div className="row form-group mb-5">
           <div className="offset-3 col-6 text-left">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isEnabledPlugins"
                 className="custom-control-input"

src/client/js/components/Admin/Customize/CustomizeFunctionOption.jsx

@@ -7,7 +7,7 @@ class CustomizeFunctionOption extends React.PureComponent {
   render() {
     return (
       <React.Fragment>
-        <div className="custom-control custom-switch checkbox-success">
+        <div className="custom-control custom-switch custom-checkbox-success">
           <input
             className="custom-control-input"
             type="checkbox"

src/client/js/components/Admin/Customize/CustomizeHighlightSetting.jsx

@@ -114,7 +114,7 @@ class CustomizeHighlightSetting extends React.Component {
 
             <div className="form-group row">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

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

@@ -46,7 +46,7 @@ class LineBreakForm extends React.Component {
     return (
       <div className="form-group text-left my-3">
         <div className="col-8 offset-4">
-          <div className="custom-control custom-switch checkbox-success">
+          <div className="custom-control custom-switch custom-checkbox-success">
             <input
               type="checkbox"
               className="custom-control-input"
@@ -73,7 +73,7 @@ class LineBreakForm extends React.Component {
     return (
       <div className="form-group text-left my-3">
         <div className="col-8 offset-4">
-          <div className="custom-control custom-switch checkbox-success">
+          <div className="custom-control custom-switch custom-checkbox-success">
             <input
               type="checkbox"
               className="custom-control-input"

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

@@ -133,7 +133,7 @@ class XssForm extends React.Component {
         <fieldset className="col-12">
           <div className="form-group">
             <div className="col-8 offset-4 my-3">
-              <div className="custom-control custom-switch checkbox-success">
+              <div className="custom-control custom-switch custom-checkbox-success">
                 <input
                   type="checkbox"
                   className="custom-control-input"

src/client/js/components/Admin/Notification/GlobalNotificationList.jsx

@@ -76,7 +76,7 @@ class GlobalNotificationList extends React.Component {
           return (
             <tr key={notification._id}>
               <td className="align-middle td-abs-center">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -200,6 +200,7 @@ class ManageGlobalNotification extends React.Component {
             <div className="form-group">
               <h3>{t('notification_setting.trigger_events')}</h3>
               <TriggerEventCheckBox
+                checkbox="success"
                 event="pageCreate"
                 checked={this.state.triggerEvents.has('pageCreate')}
                 onChange={() => this.onChangeTriggerEvents('pageCreate')}
@@ -209,6 +210,7 @@ class ManageGlobalNotification extends React.Component {
                 </span>
               </TriggerEventCheckBox>
               <TriggerEventCheckBox
+                checkbox="warning"
                 event="pageEdit"
                 checked={this.state.triggerEvents.has('pageEdit')}
                 onChange={() => this.onChangeTriggerEvents('pageEdit')}
@@ -218,6 +220,7 @@ class ManageGlobalNotification extends React.Component {
                 </span>
               </TriggerEventCheckBox>
               <TriggerEventCheckBox
+                checkbox="warning"
                 event="pageMove"
                 checked={this.state.triggerEvents.has('pageMove')}
                 onChange={() => this.onChangeTriggerEvents('pageMove')}
@@ -227,6 +230,7 @@ class ManageGlobalNotification extends React.Component {
                 </span>
               </TriggerEventCheckBox>
               <TriggerEventCheckBox
+                checkbox="danger"
                 event="pageDelete"
                 checked={this.state.triggerEvents.has('pageDelete')}
                 onChange={() => this.onChangeTriggerEvents('pageDelete')}
@@ -236,6 +240,7 @@ class ManageGlobalNotification extends React.Component {
                 </span>
               </TriggerEventCheckBox>
               <TriggerEventCheckBox
+                checkbox="info"
                 event="pageLike"
                 checked={this.state.triggerEvents.has('pageLike')}
                 onChange={() => this.onChangeTriggerEvents('pageLike')}
@@ -245,6 +250,7 @@ class ManageGlobalNotification extends React.Component {
                 </span>
               </TriggerEventCheckBox>
               <TriggerEventCheckBox
+                checkbox="secondary"
                 event="comment"
                 checked={this.state.triggerEvents.has('comment')}
                 onChange={() => this.onChangeTriggerEvents('comment')}

src/client/js/components/Admin/Notification/SlackAppConfiguration.jsx

@@ -77,7 +77,7 @@ class SlackAppConfiguration extends React.Component {
 
             <div className="row mb-3">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

src/client/js/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -6,14 +6,15 @@ const TriggerEventCheckBox = (props) => {
   const { t } = props;
 
   return (
-    <div className="checkbox">
+    <div className={`custom-control custom-checkbox custom-checkbox-${props.checkbox}`}>
       <input
+        className="custom-control-input"
         type="checkbox"
         id={`trigger-event-${props.event}`}
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label htmlFor={`trigger-event-${props.event}`}>
+      <label className="custom-control-label" htmlFor={`trigger-event-${props.event}`}>
         {props.children}{' '}
         {t(`notification_setting.event_${props.event}`)}
       </label>
@@ -25,6 +26,7 @@ const TriggerEventCheckBox = (props) => {
 TriggerEventCheckBox.propTypes = {
   t: PropTypes.func.isRequired, // i18next
 
+  checkbox: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   event: PropTypes.string.isRequired,

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

@@ -69,7 +69,7 @@ class BasicSecurityManagement extends React.Component {
 
         <div className="row mb-5">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isBasicEnabled"
                 className="custom-control-input"
@@ -96,7 +96,7 @@ class BasicSecurityManagement extends React.Component {
         <React.Fragment>
           <div className="row mb-5">
             <div className="offset-3 col-6">
-              <div className="custom-control custom-switch checkbox-success">
+              <div className="custom-control custom-switch custom-checkbox-success">
                 <input
                   id="bindByEmail-basic"
                   className="custom-control-input"

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

@@ -70,7 +70,7 @@ class GitHubSecurityManagement extends React.Component {
 
         <div className="row mb-5">
           <div className="offset-3 col-6 text-left">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGitHubEnabled"
                 className="custom-control-input"
@@ -149,7 +149,7 @@ class GitHubSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByUserNameGitHub"
                     className="custom-control-input"

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

@@ -70,7 +70,7 @@ class GoogleSecurityManagement extends React.Component {
 
         <div className="row mb-5">
           <div className="offset-3 col-6">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGoogleEnabled"
                 className="custom-control-input"
@@ -149,7 +149,7 @@ class GoogleSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByUserNameGoogle"
                     className="custom-control-input"

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

@@ -75,7 +75,7 @@ class LdapSecuritySetting extends React.Component {
 
         <div className="row mb-5">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isLdapEnabled"
                 className="custom-control-input"
@@ -275,7 +275,7 @@ class LdapSecuritySetting extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

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

@@ -76,7 +76,7 @@ class LocalSecuritySetting extends React.Component {
 
         <div className="row mb-5">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 type="checkbox"
                 className="custom-control-input"

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

@@ -65,7 +65,7 @@ class OidcSecurityManagement extends React.Component {
 
         <div className="row mb-5">
           <div className="offset-3 col-6">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isOidcEnabled"
                 className="custom-control-input"
@@ -262,7 +262,7 @@ class OidcSecurityManagement extends React.Component {
 
             <div className="row mb-3">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByUserName-oidc"
                     className="custom-control-input"
@@ -284,7 +284,7 @@ class OidcSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByEmail-oidc"
                     className="custom-control-input"

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

@@ -91,7 +91,7 @@ class SamlSecurityManagement extends React.Component {
 
         <div className="row mb-5">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isSamlEnabled"
                 className="custom-control-input"
@@ -422,7 +422,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByUserName-SAML"
                     className="custom-control-input"
@@ -444,7 +444,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByEmail-SAML"
                     className="custom-control-input"

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

@@ -104,7 +104,7 @@ class SecuritySetting extends React.Component {
         <div className="row mb-5">
           <strong className="col-3 text-right" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_1') }} />
           <div className="col-6">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 type="checkbox"
                 className="custom-control-input"
@@ -122,7 +122,7 @@ class SecuritySetting extends React.Component {
         <div className="row mb-5">
           <strong className="col-3 text-right" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_2') }} />
           <div className="col-6">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 type="checkbox"
                 className="custom-control-input"

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

@@ -70,7 +70,7 @@ class TwitterSecurityManagement extends React.Component {
 
         <div className="row mb-5">
           <div className="offset-3 col-6">
-            <div className="custom-control custom-switch checkbox-success">
+            <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isTwitterEnabled"
                 className="custom-control-input"
@@ -149,7 +149,7 @@ class TwitterSecurityManagement extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-switch checkbox-success">
+                <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     id="bindByUserNameTwitter"
                     className="custom-control-input"

src/client/js/components/Admin/Users/UserInviteModal.jsx

@@ -78,9 +78,9 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <div className="checkbox checkbox-success text-left" onChange={this.handleCheckBox} style={{ flex: 0.95 }}>
-          <input type="checkbox" id="sendEmail" className="form-check-input" name="sendEmail" defaultChecked={this.state.sendEmail} />
-          <label htmlFor="sendEmail">
+        <div className="ccustom-control custom-switch custom-checkbox-info text-left" onChange={this.handleCheckBox} style={{ flex: 0.95 }}>
+          <input type="checkbox" id="sendEmail" className="custom-control-input" name="sendEmail" defaultChecked={this.state.sendEmail} />
+          <label className="custom-control-label" htmlFor="sendEmail">
             {t('admin:user_management.invite_modal.invite_thru_email')}
           </label>
         </div>

src/client/js/components/PageHistory/PageRevisionList.jsx

@@ -95,7 +95,7 @@ export default class PageRevisionList extends React.Component {
 
     return (
       <React.Fragment>
-        <div className="custom-control custom-switch float-right">
+        <div className="custom-control custom-checkbox custom-checkbox-info float-right">
           <input
             type="checkbox"
             id="cbCompactize"

src/server/views/modal/delete.html

@@ -23,18 +23,18 @@
           <hr>
 
           {% if page.grant != 2 %}
-          <div class="checkbox checkbox-warning">
-            <input name="recursively" id="cbDeleteRecursively" value="1" type="checkbox" checked>
-            <label for="cbDeleteRecursively">
+          <div class="custom-control custom-checkbox custom-checkbox-warning">
+            <input class="custom-control-input" name="recursively" id="cbDeleteRecursively" value="1" type="checkbox" checked>
+            <label class="custom-control-label" for="cbDeleteRecursively">
               {{ t('modal_delete.delete_recursively') }}
               <p class="help-block mt-0"> {{ t('modal_delete.recursively', page.path) }}</p>
             </label>
           </div>
           {% endif %}
           {% if not page.isDeleted() %}
-          <div class="checkbox checkbox-danger">
-            <input name="completely" id="cbDeleteCompletely" {% if !user.canDeleteCompletely(page.creator._id) %} disabled="disabled" {% endif %} value="1"  type="checkbox">
-            <label for="cbDeleteCompletely" class="text-danger">
+          <div class="custom-control custom-checkbox custom-checkbox-danger">
+            <input class="custom-control-input" name="completely" id="cbDeleteCompletely" {% if !user.canDeleteCompletely(page.creator._id) %} disabled="disabled" {% endif %} value="1"  type="checkbox">
+            <label class="custom-control-label" for="cbDeleteCompletely" class="text-danger">
               {{ t('modal_delete.delete_completely') }}
               <p class="help-block mt-0"> {{ t('modal_delete.completely') }}</p>
             </label>

src/server/views/modal/rename.html

@@ -27,25 +27,25 @@
 
           <hr>
 
-          <div class="checkbox checkbox-warning">
-            <input name="recursively" id="cbRenameRecursively" value="1" type="checkbox" checked>
-            <label for="cbRenameRecursively">
+          <div class="custom-control custom-checkbox custom-checkbox-warning">
+            <input class="custom-control-input" name="recursively" id="cbRenameRecursively" value="1" type="checkbox" checked　>
+            <label class="custom-control-label" for="cbRenameRecursively">
               {{ t('modal_rename.label.Recursively') }}
               <p class="help-block mt-0">{{ t('modal_rename.help.recursive', page.path) }}</p>
             </label>
           </div>
 
-          <div class="checkbox checkbox-success">
-            <input name="create_redirect" id="cbRenameRedirect" value="1" type="checkbox">
-            <label for="cbRenameRedirect">
+          <div class="custom-control custom-checkbox custom-checkbox-success">
+            <input class="custom-control-input" name="create_redirect" id="cbRenameRedirect" value="1" type="checkbox">
+            <label class="custom-control-label" for="cbRenameRedirect">
               {{ t('modal_rename.label.Redirect') }}
               <p class="help-block mt-0">{{ t('modal_rename.help.redirect', page.path) }}</p>
             </label>
           </div>
 
-          <div class="checkbox checkbox-inverse">
-            <input name="remain_metadata" id="cbRenameMetadata" value="1" type="checkbox">
-            <label for="cbRenameMetadata">
+          <div class="custom-control custom-checkbox custom-checkbox-primary">
+            <input class="custom-control-input" name="remain_metadata" id="cbRenameMetadata" value="1" type="checkbox">
+            <label class="custom-control-label" for="cbRenameMetadata">
               {{ t('modal_rename.label.Do not update metadata') }}
               <p class="help-block mt-0">{{ t('modal_rename.help.metadata') }}</p>
             </label>