Merging #555 and componentifying checkboxes

src/js/App.js

@@ -1,4 +1,4 @@
-import React, { Profiler } from 'react';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { Route, Switch } from 'react-router-dom';
 import { connect } from 'react-redux';
@@ -251,6 +251,7 @@ export class App extends React.Component {
       sidebar_open,
       slim_mode,
       wide_scrollbar_enabled,
+      hide_scrollbars,
       smooth_scrolling_enabled,
       hotkeys_enabled,
     } = this.props;
@@ -281,6 +282,9 @@ export class App extends React.Component {
     if (smooth_scrolling_enabled) {
       className += ' smooth-scrolling-enabled';
     }
+    if (hide_scrollbars) {
+      className += ' hide-scrollbars';
+    }
     if (isTouchDevice()) {
       className += ' touch';
     } else {
@@ -442,6 +446,7 @@ const mapStateToProps = (state) => {
       language,
       theme,
       wide_scrollbar_enabled,
+      hide_scrollbars,
       smooth_scrolling_enabled,
       hotkeys_enabled,
       allow_reporting,
@@ -468,6 +473,7 @@ const mapStateToProps = (state) => {
     language,
     theme,
     wide_scrollbar_enabled,
+    hide_scrollbars,
     smooth_scrolling_enabled,
     hotkeys_enabled,
     allow_reporting,

src/js/locale/en.yaml

@@ -363,12 +363,15 @@ settings:
       clear_tracklist: Clear tracklist on play of URI(s)
       clear_tracklist_tooltip: Playing one or more URIs will clear the current play queue first
       hotkeys: Enable hotkeys
-      smooth_scrolling: Enable smooth scrolling
       touch_events: Enable touch events on play controls
       touch_events_tooltip: Allows left- and right-swipe to change tracks
-      wide_scrollbars: Use wide scrollbars
       grid_glow: Thumbnail glow effect
       grid_glow_tooltip: Disable effect for lower-power devices or older browsers
+    scrolling:
+      label: Scrolling
+      wide: Wide scrollbars
+      hidden: Hidden scrollbars
+      smooth_scrolling: Smooth scroll
     sources_priority:
       label: Sources priority
       description: Drag-and-drop to prioritize search providers and results

src/js/store/index.js

@@ -47,6 +47,7 @@ let initialState = {
     playback_controls_touch_enabled: true,
     allow_reporting: true,
     wide_scrollbar_enabled: false,
+    hide_scrollbars: false,
     window_focus: true,
     slim_mode: false,
     selected_tracks: [],

src/js/views/Settings.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Route, Link } from 'react-router-dom';
 import localForage from 'localforage';
@@ -23,6 +23,33 @@ import { isHosted } from '../util/helpers';
 import { i18n, I18n, languagesAvailable } from '../locale';
 import Button from '../components/Button';
 
+const CheckboxSetting = ({
+  name,
+  checked,
+  label,
+  tooltip,
+}) => {
+  const dispatch = useDispatch();
+  return (
+    <label>
+      <input
+        type="checkbox"
+        name={name}
+        checked={checked}
+        onChange={() => dispatch(uiActions.set({ [name]: !checked }))}
+      />
+      <span className={`label ${tooltip ? 'tooltip' :''}`}>
+        {label}
+        {tooltip && (
+          <span className="tooltip__content">
+            {tooltip}
+          </span>
+        )}
+      </span>
+    </label>
+  );
+};
+
 class Settings extends React.Component {
   constructor(props) {
     super(props);
@@ -255,81 +282,50 @@ class Settings extends React.Component {
           <div className="field checkbox">
             <div className="name"><I18n path="settings.interface.behavior.label" /></div>
             <div className="input">
-              <label>
-                <input
-                  type="checkbox"
-                  name="log_actions"
-                  checked={ui.clear_tracklist_on_play}
-                  onChange={() => uiActions.set({ clear_tracklist_on_play: !ui.clear_tracklist_on_play })}
-                />
-                <span className="label tooltip">
-                  <I18n path="settings.interface.behavior.clear_tracklist" />
-                  <span className="tooltip__content">
-                    <I18n path="settings.interface.behavior.clear_tracklist_tooltip" />
-                  </span>
-                </span>
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  name="hotkeys_enabled"
-                  checked={ui.hotkeys_enabled}
-                  onChange={() => uiActions.set({ hotkeys_enabled: !ui.hotkeys_enabled })}
-                />
-                <span className="label">
-                  <I18n path="settings.interface.behavior.hotkeys" />
-                </span>
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  name="smooth_scrolling_enabled"
-                  checked={ui.smooth_scrolling_enabled}
-                  onChange={(e) => uiActions.set({ smooth_scrolling_enabled: !ui.smooth_scrolling_enabled })}
-                />
-                <span className="label">
-                  <I18n path="settings.interface.behavior.smooth_scrolling" />
-                </span>
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  name="playback_controls_touch_enabled"
-                  checked={ui.playback_controls_touch_enabled}
-                  onChange={(e) => uiActions.set({ playback_controls_touch_enabled: !ui.playback_controls_touch_enabled })}
-                />
-                <span className="label tooltip">
-                  <I18n path="settings.interface.behavior.touch_events" />
-                  <span className="tooltip__content">
-                    <I18n path="settings.interface.behavior.touch_events_tooltip" />
-                  </span>
-                </span>
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  name="wide_scrollbar_enabled"
-                  checked={ui.wide_scrollbar_enabled}
-                  onChange={() => uiActions.set({ wide_scrollbar_enabled: !ui.wide_scrollbar_enabled })}
-                />
-                <span className="label">
-                  <I18n path="settings.interface.behavior.wide_scrollbars" />
-                </span>
-              </label>
-              <label>
-                <input
-                  type="checkbox"
-                  name="grid_glow_enabled"
-                  checked={ui.grid_glow_enabled}
-                  onChange={() => uiActions.set({ grid_glow_enabled: !ui.grid_glow_enabled })}
-                />
-                <span className="label tooltip">
-                  <I18n path="settings.interface.behavior.grid_glow" />
-                  <span className="tooltip__content">
-                    <I18n path="settings.interface.behavior.grid_glow_tooltip" />
-                  </span>
-                </span>
-              </label>
+              <CheckboxSetting
+                name="clear_tracklist_on_play"
+                checked={ui.clear_tracklist_on_play}
+                label={i18n('settings.interface.behavior.clear_tracklist')}
+                tooltip={i18n('settings.interface.behavior.clear_tracklist_tooltip')}
+              />
+              <CheckboxSetting
+                name="hotkeys_enabled"
+                checked={ui.hotkeys_enabled}
+                label={i18n('settings.interface.behavior.hotkeys')}
+              />
+              <CheckboxSetting
+                name="playback_controls_touch_enabled"
+                checked={ui.playback_controls_touch_enabled}
+                label={i18n('settings.interface.behavior.touch_events')}
+                tooltip={i18n('settings.interface.behavior.touch_events_tooltip')}
+              />
+              <CheckboxSetting
+                name="grid_glow_enabled"
+                checked={ui.grid_glow_enabled}
+                label={i18n('settings.interface.behavior.grid_glow')}
+                tooltip={i18n('settings.interface.behavior.grid_glow_tooltip')}
+              />
+            </div>
+          </div>
+
+          <div className="field checkbox">
+            <div className="name"><I18n path="settings.interface.scrolling.label" /></div>
+            <div className="input">
+              <CheckboxSetting
+                name="smooth_scrolling_enabled"
+                checked={ui.smooth_scrolling_enabled}
+                label={i18n('settings.interface.scrolling.smooth_scrolling')}
+              />
+              <CheckboxSetting
+                name="wide_scrollbar_enabled"
+                checked={ui.wide_scrollbar_enabled}
+                label={i18n('settings.interface.scrolling.wide')}
+              />
+              <CheckboxSetting
+                name="hide_scrollbars"
+                checked={ui.hide_scrollbars}
+                label={i18n('settings.interface.scrolling.hidden')}
+              />
             </div>
           </div>
 
@@ -355,17 +351,11 @@ class Settings extends React.Component {
                 <I18n path="settings.interface.reporting.label" />
               </div>
               <div className="input">
-                <label>
-                  <input
-                    type="checkbox"
-                    name="allow_reporting"
-                    checked={ui.allow_reporting}
-                    onChange={() => uiActions.set({ allow_reporting: !ui.allow_reporting })}
-                  />
-                  <span className="label">
-                    <I18n path="settings.interface.reporting.sublabel" />
-                  </span>
-                </label>
+                <CheckboxSetting
+                  name="allow_reporting"
+                  checked={ui.allow_reporting}
+                  label={i18n('settings.interface.reporting.sublabel')}
+                />
                 <div className="description">
                   <I18n path="settings.interface.reporting.description" />
                   <a href="https://github.com/jaedb/Iris/wiki/Terms-of-use#privacy-policy" target="_blank"><I18n path="settings.interface.reporting.privacy_policy" /></a>

src/scss/global/_core.scss

@@ -162,6 +162,13 @@ main {
     }
   }
 
+  .hide-scrollbars & {
+    &::-webkit-scrollbar {
+      display: none;
+      scrollbar-width: none;
+    }
+  }
+
   .modal-open & {
     left: 0;
     bottom: 0;