From 0e7a5135298ad559ea0b471c797f8115301a3b87 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Fri, 20 Nov 2020 15:32:36 -0500
Subject: [PATCH] Improve bootstrap3 checkbox theming

Standardizes our styling of checkboxes in boostrap markup to:
`<label class="form-control"><input type="checkbox"> <span>Title</span></label>`
---
 ang/api4Explorer/Explorer.html                | 20 +++++++++++-------
 css/api4-explorer.css                         | 21 -------------------
 ext/greenwich/scss/_tweaks.scss               |  8 +++++++
 ext/greenwich/scss/main.scss                  |  1 +
 .../displays/searchAdminDisplayList.html      | 12 ++++++++---
 .../displays/searchAdminDisplayTable.html     |  8 +++++--
 ext/search/css/search.css                     | 20 ------------------
 7 files changed, 36 insertions(+), 54 deletions(-)
 create mode 100644 ext/greenwich/scss/_tweaks.scss

diff --git a/ang/api4Explorer/Explorer.html b/ang/api4Explorer/Explorer.html
index 3dfb253a05..fc2cafc78d 100644
--- a/ang/api4Explorer/Explorer.html
+++ b/ang/api4Explorer/Explorer.html
@@ -22,14 +22,18 @@
         </div>
         <div class="panel-body">
           <div class="api4-input form-inline">
-            <label class="form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-class="{'api4-option-selected': params[name]}" ng-repeat="(name, param) in ::getGenericParams(['bool'], false)">
-              <input type="checkbox" id="api4-param-{{:: name }}" ng-model="params[name]"/>
-              {{:: name }}<span class="crm-marker" ng-if="::param.required"> *</span>
-            </label>
-            <label class="form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-class="{'api4-option-selected': isSelectRowCount()}" ng-if="::availableParams.select">
-              <input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
-              SelectRowCount
-            </label>
+            <div class="checkbox-inline form-control" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['bool'], false)">
+              <label>
+                <input type="checkbox" id="api4-param-{{:: name }}" ng-model="params[name]"/>
+                <span>{{:: name }}</span><span class="crm-marker" ng-if="::param.required"> *</span>
+              </label>
+            </div>
+            <div class="checkbox-inline form-control" ng-mouseenter="help('selectRowCount', availableParams.select)" ng-mouseleave="help()" ng-if="::availableParams.select">
+              <label>
+                <input type="checkbox" id="api4-param-selectRowCount" ng-checked="isSelectRowCount()" ng-click="selectRowCount()" />
+                <span>SelectRowCount</span>
+              </label>
+            </div>
           </div>
           <div class="api4-input form-inline" ng-mouseenter="help(name, param)" ng-mouseleave="help()" ng-repeat="(name, param) in ::getGenericParams(['bool'], true)">
             <label>{{ name }}<span class="crm-marker" ng-if="::param.required"> *</span></label>
diff --git a/css/api4-explorer.css b/css/api4-explorer.css
index 6106870c6b..af5cec80a7 100644
--- a/css/api4-explorer.css
+++ b/css/api4-explorer.css
@@ -103,27 +103,6 @@
   background-color: rgba(255, 255, 255, .9);
 }
 
-#bootstrap-theme.api4-explorer-page div.api4-input.form-inline label.form-control {
-  margin-right: 6px;
-}
-#bootstrap-theme.api4-explorer-page div.api4-input.form-inline label.form-control input[type=checkbox] {
-  margin: 0 2px 0 0;
-}
-
-#bootstrap-theme.api4-explorer-page div.api4-input.form-inline label.form-control:not(.api4-option-selected) {
-  transition: none;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  font-weight: normal;
-}
-
-#bootstrap-theme.api4-explorer-page div.api4-input.form-inline .form-control label {
-  font-weight: normal;
-  position: relative;
-  top: -2px;
-}
-
 #bootstrap-theme.api4-explorer-page .api4-clause-fieldset fieldset {
   float: right;
   width: calc(100% - 58px);
diff --git a/ext/greenwich/scss/_tweaks.scss b/ext/greenwich/scss/_tweaks.scss
new file mode 100644
index 0000000000..0bab3e6e4e
--- /dev/null
+++ b/ext/greenwich/scss/_tweaks.scss
@@ -0,0 +1,8 @@
+/* Supports adding form-control class to the checkbox-inline class to achieve an outer border around the checkbox&label */
+.form-control.checkbox-inline > label {
+  margin-left: 9px;
+}
+/* Adds a nice effect if you place the checkbox label text inside a <span> it will only be bold if the checkbox is checked */
+label input[type=checkbox]:not(:checked) + * {
+  font-weight: normal;
+}
diff --git a/ext/greenwich/scss/main.scss b/ext/greenwich/scss/main.scss
index 90da6210bb..1539237889 100644
--- a/ext/greenwich/scss/main.scss
+++ b/ext/greenwich/scss/main.scss
@@ -1,5 +1,6 @@
 #bootstrap-theme {
   @import "greenwich";
   @import "bootstrap";
+  @import "tweaks";
   @import "select2-bootstrap";
 }
diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
index 926a595e5d..f7f38823dd 100644
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayList.html
@@ -15,7 +15,9 @@
   </div>
     <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>
     <input id="crm-search-admin-display-limit" type="number" min="0" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
-    <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> {{:: ts('Use Pager') }}</label>
+    <div class="checkbox-inline form-control">
+      <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> <span>{{:: ts('Use Pager') }}</span></label>
+    </div>
   </div>
 </fieldset>
 <div class="crm-flex-box crm-search-admin-edit-columns-wrapper">
@@ -25,7 +27,9 @@
       <legend>{{ $ctrl.getFieldLabel(col.expr) }}</legend>
       <div class="form-inline">
         <label>{{:: ts('Label:') }}</label> <input class="form-control" type="text" ng-model="col.label" >
-        <label ng-show="col.label.length" title="{{:: ts('Show label for every record even when this field is blank') }}"><input type="checkbox" ng-model="col.forceLabel"> {{:: ts('Always show') }}</label>
+        <div class="form-control checkbox-inline" ng-show="col.label.length" title="{{:: ts('Show label for every record even when this field is blank') }}">
+          <label><input type="checkbox" ng-model="col.forceLabel"> <span>{{:: ts('Always show') }}</span></label>
+        </div>
         <button class="btn-xs pull-right" ng-click="$ctrl.removeCol($index)" title="{{:: ts('Hide') }}">
           <i class="crm-i fa-ban"></i>
         </button>
@@ -35,7 +39,9 @@
         <input class="form-control" ng-model="col.prefix" size="4">
         <label>{{:: ts('Suffix:') }}</label>
         <input class="form-control" ng-model="col.suffix" size="4">
-        <label><input type="checkbox" ng-model="col.break"> {{:: ts('New line') }}</label>
+        <div class="form-control checkbox-inline">
+          <label><input type="checkbox" ng-model="col.break"> <span>{{:: ts('New line') }}</span></label>
+        </div>
       </div>
       <div class="form-inline">
         <label>{{:: ts('Link:') }}</label>
diff --git a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
index 18e391633d..b6d5092ac5 100644
--- a/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
+++ b/ext/search/ang/crmSearchAdmin/displays/searchAdminDisplayTable.html
@@ -2,8 +2,12 @@
   <div class="form-inline">
     <label for="crm-search-admin-display-limit">{{:: ts('Results to display (0 for no limit):') }}</label>
     <input id="crm-search-admin-display-limit" type="number" min="0" step="1" class="form-control" ng-model="$ctrl.display.settings.limit">
-    <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> {{:: ts('Use Pager') }}</label>
-    <label><input type="checkbox" ng-model="$ctrl.display.settings.actions"> {{:: ts('Enable Actions') }}</label>
+    <div class="checkbox-inline form-control">
+      <label><input type="checkbox" ng-model="$ctrl.display.settings.pager"> <span>{{:: ts('Use Pager') }}</span></label>
+    </div>
+    <div class="checkbox-inline form-control">
+      <label><input type="checkbox" ng-model="$ctrl.display.settings.actions"> <span>{{:: ts('Enable Actions') }}</span></label>
+    </div>
   </div>
 </fieldset>
 <div class="crm-flex-box crm-search-admin-edit-columns-wrapper">
diff --git a/ext/search/css/search.css b/ext/search/css/search.css
index 9ade04fef8..c93f709622 100644
--- a/ext/search/css/search.css
+++ b/ext/search/css/search.css
@@ -77,26 +77,6 @@
   background-color: rgba(255, 255, 255, .9);
 }
 
-#bootstrap-theme.crm-search div.api4-input.form-inline label.form-control {
-  margin-right: 6px;
-}
-#bootstrap-theme.crm-search div.api4-input.form-inline label.form-control input[type=checkbox] {
-  margin: 0 2px 0 0;
-}
-
-#bootstrap-theme.crm-search div.api4-input.form-inline label.form-control:not(.api4-option-selected) {
-  transition: none;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  font-weight: normal;
-}
-
-#bootstrap-theme.crm-search div.api4-input.form-inline .form-control label {
-  font-weight: normal;
-  position: relative;
-  top: -2px;
-}
 #bootstrap-theme.crm-search .api4-clause-fieldset fieldset {
   float: right;
   width: calc(100% - 58px);
-- 
2.25.1