Custom dark Checkbox and radio

adsabs · May 18, 2021 · 04b988b · 04b988b
1 parent 6d4985a
commit 04b988b
Show file tree

Hide file tree

Showing 22 changed files with 191 additions and 57 deletions.
diff --git a/src/js/widgets/author_affiliation_tool/components/AffiliationRow.jsx.js b/src/js/widgets/author_affiliation_tool/components/AffiliationRow.jsx.js
@@ -5,7 +5,7 @@ define(['react'], function(React) {
   const AffiliationRow = ({ years, name, selected, onChange }) => (
     <div>
       <div className="col-xs-8">
-        <label className={selected ? '' : 'auth-aff-label'}>
+        <label className={(selected ? '' : 'auth-aff-label ') + 'custom-checkbox'}>
           <input type="checkbox" checked={selected} onChange={onChange} />{' '}
           {name === '-' ? '(None)' : name}
         </label>

diff --git a/src/js/widgets/author_affiliation_tool/components/Row.jsx.js b/src/js/widgets/author_affiliation_tool/components/Row.jsx.js
@@ -12,7 +12,9 @@ define([
     return (
       <div className="row">
         <div className="col-xs-2">
-          <label className={selected ? '' : 'auth-aff-label'}>
+          <label
+            className={(selected ? '' : 'auth-aff-label') + 'custom-checkbox'}
+          >
             <input
               checked={selected}
               type="checkbox"

diff --git a/src/js/widgets/base/templates/item-checkbox.html b/src/js/widgets/base/templates/item-checkbox.html
@@ -1,3 +1,3 @@
-<label>
+<label class="custom-checkbox">
     <input type="checkbox" class="widget-item" value="{{value}}">{{title}} {{#if count}} ({{count}}){{/if}}
 </label>
diff --git a/src/js/widgets/base/templates/item-tree.html b/src/js/widgets/base/templates/item-tree.html
@@ -1,4 +1,4 @@
-<label
+<label class="custom-checkbox"
   ><input
     type="checkbox"
     class="widget-item item-leaf"

diff --git a/src/js/widgets/citation_helper/templates/citation_helper_template.html b/src/js/widgets/citation_helper/templates/citation_helper_template.html
@@ -30,7 +30,9 @@ <h4>Suggested Articles</h4>
         <div class="col-sm-10">
             <div class="row s-top-row">
                 <div class="col-xs-1 ch-selectbox-col s-top-row-col">
-                    <input type="checkbox" value="{{bibcode}}" name="identifier" aria-label="select {{bibcode}}">
+                    <label class="custom-checkbox">
+                        <input type="checkbox" value="{{bibcode}}" name="identifier" aria-label="select {{bibcode}}">
+                    </label>
                 </div>
                 <div class="col=sm-3 col-xs-4 s-top-row-col">{{bibcode}}</div>
                 <div class="col-sm-2 s-top-row-col"><b>score: {{score}}</b></div>

diff --git a/src/js/widgets/classic_form/form.html b/src/js/widgets/classic_form/form.html
@@ -10,22 +10,22 @@
   </div>
 
   <div data-field="database">
-    <b>Limit query to: </b>&nbsp;<label>
+    <b>Limit query to: </b>&nbsp;<label class="custom-checkbox">
       <input type="checkbox" checked="true" name="astronomy" />
       Astronomy </label
     >&nbsp;&nbsp;
-    <label> <input type="checkbox" name="physics" /> Physics </label
+    <label class="custom-checkbox"> <input type="checkbox" name="physics" /> Physics </label
     >&nbsp;&nbsp;
-    <label> <input type="checkbox" name="general" /> General </label>
+    <label class="custom-checkbox"> <input type="checkbox" name="general" /> General </label>
   </div>
   <div class="clearfix">
     <div class="col-sm-6" data-field="author" data-textInput="true">
       <div class="classic-form__logic-group logic-group">
-        <label>
+        <label class="custom-radio">
           <input type="radio" name="author-logic" value="AND" checked="true" />
           and
         </label>
-        <label>
+        <label class="custom-radio">
           <input type="radio" name="author-logic" value="OR" /> or
         </label>
       </div>
@@ -44,7 +44,7 @@
     <div class="col-sm-6" data-field="object" data-textInput="true">
       <div class="pull-right-sm">
         <div class="classic-form__logic-group logic-group">
-          <label>
+          <label class="custom-radio">
             <input
               type="radio"
               name="object-logic"
@@ -53,7 +53,7 @@
             />
             and
           </label>
-          <label>
+          <label class="custom-radio">
             <input type="radio" name="object-logic" value="OR" /> or
           </label>
         </div>
@@ -117,11 +117,11 @@
   </div>
   <div data-field="title" data-textInput="true">
     <div class="classic-form__logic-group logic-group pull-right">
-      <label>
+      <label class="custom-radio">
         <input type="radio" name="title-logic" value="AND" checked="true" /> and
       </label>
-      <label> <input type="radio" name="title-logic" value="OR" /> or </label>
-      <label>
+      <label class="custom-radio"> <input type="radio" name="title-logic" value="OR" /> or </label>
+      <label class="custom-radio">
         <input type="radio" name="title-logic" value="BOOLEAN" /> boolean
       </label>
     </div>
@@ -138,14 +138,14 @@
   </div>
   <div data-field="abs" data-textInput="true">
     <div class="classic-form__logic-group logic-group pull-right">
-      <label>
+      <label class="custom-radio">
         <input type="radio" name="abstract-logic" value="AND" checked="true" />
         and
       </label>
-      <label>
+      <label class="custom-radio">
         <input type="radio" name="abstract-logic" value="OR" /> or
       </label>
-      <label>
+      <label class="custom-radio">
         <input type="radio" name="abstract-logic" value="BOOLEAN" /> boolean
       </label>
     </div>
@@ -161,17 +161,19 @@
     </div>
   </div>
   <div data-field="property">
-    <label>
+    <label class="custom-checkbox">
       <input type="checkbox" name="refereed" />&nbsp;Refereed only&nbsp;
     </label>
     &nbsp;&nbsp;&nbsp;
-    <label>
+    <label class="custom-checkbox">
       <input type="checkbox" name="article" />&nbsp;Articles only&nbsp;
     </label>
   </div>
   <div data-field="bibstem" data-textInput="true">
     <div class="logic-group">
-      <input type="checkbox" class="hidden" value="OR" checked="true" />
+      <label class="custom-checkbox">
+        <input type="checkbox" class="hidden" value="OR" checked="true" />
+      </label>
     </div>
     <label for="classic-bibstem">Publication(s)</label>
     <p class="help-block small">Press Return Key To Add Publication</p>

diff --git a/src/js/widgets/facet/graph-facet/templates/h-index-graph-legend.html b/src/js/widgets/facet/graph-facet/templates/h-index-graph-legend.html
@@ -4,11 +4,11 @@
 </div>
 <div class="change-scale">
   Y-axis:
-  <label
+  <label class="custom-radio"
     >linear
     <input type="radio" name="{{yAxisTitle}}-scale" value="linear" checked
   /></label>
-  <label
+  <label class="custom-radio"
     >log <input type="radio" name="{{yAxisTitle}}-scale" value="log"
   /></label>
 </div>
diff --git a/src/js/widgets/facet/toggle_list.jsx.js b/src/js/widgets/facet/toggle_list.jsx.js
@@ -47,7 +47,7 @@ define(['react', 'd3', 'prop-types', 'react-redux'], function(
       hierarchical ? '' : 'child'
     }_${index}`;
     var checkbox = (
-      <label className="facet-label" htmlFor={`${label}__checkbox`}>
+      <label className="facet-label custom-checkbox" htmlFor={`${label}__checkbox`}>
         <input
           type="checkbox"
           id={`${label}__checkbox`}

diff --git a/src/js/widgets/library_list/templates/library-container.html b/src/js/widgets/library_list/templates/library-container.html
@@ -6,8 +6,12 @@ <h3 class="record-deleted"><i class="icon-success" aria-hidden="true" /> Record
       <div class="row" style="margin-left: 0">
         <div class="col-xs-1 col-sm-1" style="padding-left: 12.5px; text-align: right;">
         {{#unless public}}
-          <label for="select-all-docs" class="sr-only">Select All Docs</label>
-          <input type="checkbox" id="select-all-docs" name="select-all-docs" title="select all docs" {{#if allSelected}} checked {{/if}}>
+        <div class="select-all-docs">
+          <label class="custom-checkbox">
+            <input type="checkbox" id="select-all-docs-cb" name="select-all-docs-cb" title="select all docs" {{#if allSelected}} checked {{/if}}>
+          </label>
+          <label for="select-all-docs-cb" class="sr-only custom-checkbox">Select All Docs</label>
+        </div>
         {{/unless}}
         </div>
         <div class="col-xs-11 col-sm-6">

diff --git a/src/js/widgets/library_list/templates/library-item-edit.html b/src/js/widgets/library_list/templates/library-item-edit.html
@@ -5,7 +5,9 @@
         <div class="col-xs-1 col-sm-1 s-checkbox-col s-top-row-col">
           <span class="hidden-xs">{{indexToShow}}</span>
           {{#if showCheckbox}}
-            <input type="checkbox" value={{identifier}} name="identifier" aria-label="select item {{indexToShow}}" {{#if chosen}} checked {{/if}}>
+            <label class="custom-checkbox">
+                <input type="checkbox" value={{identifier}} name="identifier" aria-label="select item {{indexToShow}}" {{#if chosen}} checked {{/if}}>
+            </label>
           {{/if}}
         </div>
         <div class="col-xs-4 col-sm-4 s-top-row-col identifier s-identifier">

diff --git a/src/js/widgets/library_list/widget.js b/src/js/widgets/library_list/widget.js
@@ -99,7 +99,7 @@ define([
       'change #per-page-select': 'changePerPage',
       'click #bulk-delete': 'bulkDelete',
       'click #bulk-limit': 'bulkLimit',
-      'click #select-all-docs': 'toggleAll',
+      'click #select-all-docs-cb': 'toggleAll',
     },
 
     modelEvents: {

diff --git a/src/js/widgets/list_of_things/templates/expanding-item-template.html b/src/js/widgets/list_of_things/templates/expanding-item-template.html
@@ -1,7 +1,7 @@
 <div class="buffer">
     <div class="row ">
         <div class="col-md-1">
-            <label>
+            <label class="custom-checkbox">
                 <input type="checkbox" value={{identifier}} name="identifier"> {{orderNum}}
             </label>
         </div>

diff --git a/src/js/widgets/list_of_things/templates/item-template.html b/src/js/widgets/list_of_things/templates/item-template.html
@@ -4,7 +4,9 @@
         <label>
             <span class="hidden-xs">{{indexToShow}}</span>
             {{#if showCheckbox}}
-            <input type="checkbox" value={{identifier}} name="identifier" {{#if chosen}} checked {{/if}} aria-label="select item {{indexToShow}}">
+            <label class="custom-checkbox">
+                <input type="checkbox" value={{identifier}} name="identifier" {{#if chosen}} checked {{/if}} aria-label="select item {{indexToShow}}">
+            </label>
             {{/if}}
         </label>
     </div>

diff --git a/src/js/widgets/metrics/templates/graph_template.html b/src/js/widgets/metrics/templates/graph_template.html
@@ -22,10 +22,10 @@
     {{/if}}
     <div>
       <form action="" class="stacked-form">
-      <label> stacked
+      <label class="custom-radio"> stacked
         <input type="radio" name="bar-arrangement" value="stacked" checked/>
       </label>
-      <label> grouped
+      <label class="custom-radio"> grouped
         <input type="radio" name="bar-arrangement" value="grouped"/>
       </label>
       </form>

diff --git a/src/js/widgets/network_vis/templates/graph-container-template.html b/src/js/widgets/network_vis/templates/graph-container-template.html
@@ -13,7 +13,7 @@ <h4 style="display:inline-block">Size wedges based on:</h4>
         </label>
         </div>
         <br/>
-        <label>
+        <label class="custom-checkbox">
             <input type="checkbox" name="show-link" value="true"> View Link Overlay
         </label>
     </div>

diff --git a/src/js/widgets/preferences/templates/orcid.html b/src/js/widgets/preferences/templates/orcid.html
@@ -69,16 +69,18 @@ <h4 id="name-variant-header">2. Names Under Which You Have Published</h4>
     <div class="form-group">
         <h4> 3. Permission for ADS to Record and Publish Claims</h4>
 
-        <div class="checkbox">
-            <label class="emphasis-text">
-                <input type="checkbox"
-                       {{#if userSubmitted.authorizedUser}} checked {{/if}}
-                {{#compare userSubmitted.authorizedUser undefined}} checked  {{/compare}}
-                class="authorized-ads-user">
+        <!-- <div class="checkbox"> -->
+            <div class="emphasis-text">
+                <label class="custom-checkbox">
+                    <input type="checkbox"
+                        {{#if userSubmitted.authorizedUser}} checked {{/if}}
+                    {{#compare userSubmitted.authorizedUser undefined}} checked  {{/compare}}
+                    class="authorized-ads-user" />
+                </label>
                 I allow the ADS to record my claims and to make them available publically for auditing and indexing.
                 <br>This makes me an "ADS Verified User" and allows ADS to validate my name(s) against author lists in papers.
-            </label>
-        </div>
+            </div>
+        <!-- </div> -->
 
     </div>
 

diff --git a/src/js/widgets/results/templates/container-template.html b/src/js/widgets/results/templates/container-template.html
@@ -3,14 +3,18 @@
     <div class="s-results-border-bottom">
       <div class="col-xs-1 s-checkbox-col">
         {{#unless loading}}
-        <label for="select-all-docs" class="sr-only">
-          select all on this page
-        </label>
-        <input
-          title="select all on this page"
-          type="checkbox"
-          id="select-all-docs"
-        />
+        <div class="select-all-docs">
+          <label class="custom-checkbox">
+            <input
+              title="select all on this page"
+              type="checkbox"
+              id="select-all-docs-cb"
+            />
+          </label>
+          <label for="select-all-docs-cb" class="sr-only">
+            select all on this page
+          </label>
+        </div>
         {{/unless}}
       </div>
 

diff --git a/src/js/widgets/results/widget.js b/src/js/widgets/results/widget.js
@@ -57,7 +57,7 @@ define([
       };
 
       _.extend(this.view.events, {
-        'click input#select-all-docs': 'toggleAll',
+        'click input#select-all-docs-cb': 'toggleAll',
       });
 
       this.view.resultsWidget = true;
@@ -425,7 +425,7 @@ define([
       });
       if (this.collection.where({ chosen: true }).length == 0) {
         // make sure the "selectAll" button is unchecked
-        var $chk = this.view.$('input#select-all-docs');
+        var $chk = this.view.$('input#select-all-docs-cb');
         if ($chk.length > 0) {
           $chk[0].checked = false;
         }

diff --git a/src/shared b/src/shared