Merge pull request #2163 from shinyichen/darkmode

Dark Mode
adsabs · May 20, 2021 · 9f4c445 · 9f4c445
2 parents e978bdd + 50ab720
commit 9f4c445
Show file tree

Hide file tree

Showing 40 changed files with 1,956 additions and 94 deletions.
diff --git a/src/config/common.config.js b/src/config/common.config.js
@@ -47,6 +47,7 @@ define([], function() {
     'regenerator-runtime',
     'array-flat-polyfill',
     'polyfill',
+    'darkMode',
   ], function(config) {
     // rca: not sure why the ganalytics is loaded here instead of inside analytics.js
     //      perhaps it is because it is much/little sooner this way?

diff --git a/src/config/discovery.config.js b/src/config/discovery.config.js
@@ -323,6 +323,7 @@ require.config({
     '@xstate/react': 'libs/xstate-react/index',
     'array-flat-polyfill': 'libs/polyfills/array-flat-polyfill',
     polyfill: 'libs/polyfill/index',
+    darkMode: 'js/dark-mode-switch',
   },
 
   hbs: {

diff --git a/src/index.html b/src/index.html
@@ -107,6 +107,7 @@ <h3 id="basic-html-message">
         </article>
       </div>
     </div>
+    <div id="darkSwitch" class="darkmode-toggle" title="Turn on dark mode">🌓</div>
     <script type="application/ld+json">
       {
         "@context": "http://schema.org",

diff --git a/src/js/dark-mode-switch.js b/src/js/dark-mode-switch.js
@@ -0,0 +1,45 @@
+define([], function() {
+  let darkSwitch;
+
+  const turnOnDarkMode = (save) => {
+    document.body.setAttribute('data-theme', 'dark');
+    darkSwitch.classList.add('darkModeOn');
+    darkSwitch.setAttribute('title', 'Turn off dark mode');
+    if (save) localStorage.setItem('darkSwitch', 'on');
+  };
+
+  const turnOffDarkMode = (save) => {
+    document.body.removeAttribute('data-theme');
+    darkSwitch.classList.remove('darkModeOn');
+    darkSwitch.setAttribute('title', 'Turn on dark mode');
+    if (save) localStorage.setItem('darkSwitch', 'off');
+  };
+
+  const toggle = () =>
+    darkSwitch.classList.contains('darkModeOn')
+      ? turnOffDarkMode(true)
+      : turnOnDarkMode(true);
+
+  const init = () => {
+    darkSwitch = document.getElementById('darkSwitch');
+
+    // 1. check app setting
+    if (
+      localStorage.getItem('darkSwitch') !== null &&
+      localStorage.getItem('darkSwitch') === 'on'
+    ) {
+      turnOnDarkMode(false);
+    }
+    // 2. check system setting
+    else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      turnOnDarkMode(false);
+    } else {
+      turnOffDarkMode(false);
+    }
+    darkSwitch.addEventListener('click', function() {
+      toggle();
+    });
+  };
+
+  init();
+});
diff --git a/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js b/src/js/react/MyAdsDashboard/components/Dashboard.jsx.js
@@ -364,7 +364,10 @@ define([
 
                 return (
                   <tr
-                    className={activeItem === id ? 'info' : ''}
+                    className={
+                      (activeItem === id ? 'info ' : '') +
+                      (item.active ? '' : 'inactive')
+                    }
                     style={{
                       backgroundColor: item.active
                         ? 'inherit'

diff --git a/src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js b/src/js/react/MyAdsFreeform/components/CollapsePanel.jsx.js
@@ -35,32 +35,18 @@ define(['react', 'prop-types', 'react-bootstrap'], function(
       const caretDir = this.state.open ? 'down' : 'right';
       return (
         <Panel expanded={this.state.open} onToggle={this.toggle}>
-          <Panel.Heading style={{ backgroundColor: 'white', padding: '0' }}>
+          <Panel.Heading style={{ padding: '0' }}>
             <Panel.Title>
               <button
-                className="btn btn-link btn-block"
+                className="create-notification-title btn btn-link btn-block"
                 onMouseEnter={this.toggleHover}
                 onMouseLeave={this.toggleHover}
                 onFocus={this.onChangeFocus(true)}
                 onBlur={this.onChangeFocus(false)}
-                style={{
-                  color: '#5D5D5D',
-                  fontSize: '1.1em',
-                  backgroundColor:
-                    this.state.hovered || this.state.focused
-                      ? '#f2f2f2'
-                      : 'white',
-                  textDecoration: 'none',
-                }}
                 aria-expanded={this.state.open}
                 onClick={this.toggle}
               >
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                  }}
-                >
+                <div className="s-create-notification-title__title">
                   <span>
                     <i className="fa fa-bell" aria-hidden="true" /> Create email
                     notification

diff --git a/src/js/react/Recommender/components/SearchExamples.jsx.js b/src/js/react/Recommender/components/SearchExamples.jsx.js
@@ -25,12 +25,7 @@ define([
       <React.Fragment>
         <dt>{label}</dt>
         <dd>
-          <button
-            type="button"
-            onClick={onClick}
-            className="text-link"
-            style={{ border: 'dotted 1px rgba(0,0,0,0.3)', marginRight: '4px' }}
-          >
+          <button type="button" onClick={onClick} className="text-link">
             {text}
           </button>
           {tooltip && (

diff --git a/src/js/widgets/associated/components/app.jsx.js b/src/js/widgets/associated/components/app.jsx.js
@@ -1,11 +1,6 @@
 define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
   // component styles
   const styles = {
-    title: {
-      fontSize: '1.1em',
-      color: '#335baf',
-      textTransform: 'uppercase',
-    },
     list: {
       listStyleType: 'none',
       marginLeft: '-10px',
@@ -22,7 +17,7 @@ define(['underscore', 'react', 'prop-types'], function(_, React, PropTypes) {
 
   // create the title element
   const Title = ({ children }) => (
-    <div style={styles.title}>
+    <div className="associated__header__title">
       <i className="fa fa-folder-open" style={styles.icon} aria-hidden="true" />
       {children}
     </div>

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>
@@ -193,7 +195,7 @@
     </div>
   </div>
   <div class="pull-right">
-    <button class="btn" type="reset">
+    <button class="btn btn-default" type="reset">
       <i class="fa fa-times" aria-hidden="true"></i> Clear
     </button>
     <button class="btn btn-primary" type="submit">

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/list_of_things/templates/pagination-partial.html b/src/js/widgets/list_of_things/templates/pagination-partial.html
@@ -7,7 +7,7 @@
 </div>
 {{#unless query}}
 {{#unless error}}
-<div class="row">
+<div class="row" style="margin: 0;">
     {{#if pageData}}
     <div class="col-sm-12 pagination-controls s-pagination-controls">
         <div class="col-xs-5 per-page-container">