Feature settings overhaul

src/js/components/Checkboxes/Checkboxes.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface Collection {
+export interface Collection {
   options: any,
   action: () => {},
   label: string,

src/js/components/Controls.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import cx from 'classnames';
-import throttle from 'lodash.throttle';
 import ControlsSettings from "../components/ControlsSettings/ControlsSettings";
 
 import ShareButtons, { supportedMedia as _s } from './ShareButtons';
@@ -34,49 +33,50 @@ import {
   setVisraamStyle,
   changeFont,
   toggleCenterAlignOption,
+  closeSettingsPanel,
 } from '@/features/actions';
 
 
 export const supportedMedia = _s;
 
 class Controls extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.setRef = this.setRef.bind(this);
+    this.settingsRef = React.createRef();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
   state = {
     showBorder: false,
     showControls: true
-  };
+  };  
 
   static propTypes = {
     showSettingsPanel: PropTypes.bool,
   };
 
   componentDidMount() {
-    this.isChangeInControls = false;
+    this.isChangeInControls = false;  
+    //window.addEventListener('click', this.handleClickOutside)  
   }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.showAdvancedOptions !== this.props.showAdvancedOptions) {
-      this.isChangeInControls = true;
+  handleClickOutside(e) {    
+      console.log(this.wrapperRef, e.target, !this.wrapperRef.contains(e.target))
+    if ( this.wrapperRef && !this.wrapperRef.contains(e.target)) {
+      console.log('Clicked Outside')
+      console.log(closeSettingsPanel)
     }
   }
 
-  resetControlStyles = () => {
-    this.$wrapper.style.transform = '';
-    this.$wrapper.style.position = '';
-    this.$wrapper.style.opacity = '';
-  }
-
-  applyControlStyles = (isShowWrapper) => {
-
-    if (isShowWrapper) {
-      this.$wrapper.style.opacity = 1;
-    } else {
-      this.$wrapper.style.opacity = 0;
-    }
-
-    this.$wrapper.style.position = 'sticky';
+  componentDidUpdate(prevProps) {
+    if (prevProps.showAdvancedOptions !== this.props.showAdvancedOptions) {
+      this.isChangeInControls = true;
+    }    
   }
 
-  setRef = node => (this.$wrapper = node);
+  setRef = node => (this.wrapperRef = node);
 
   render() {
     const { showBorder, showControls } = this.state;
@@ -85,25 +85,18 @@ class Controls extends React.Component {
       'with-border': showBorder,
     });
 
-    const controlStyles = showControls ?
-      {
-        transform: '',
-      } :
-      {
-        transform: 'rotateX(90deg) perspective(500px)'
-      }
+    const controlStyles = showControls ? { transform: '' } : { transform: 'rotateX(90deg) perspective(500px)' }
 
     return (
       <>
-        <ShareButtons {...this.props} />
+        <ShareButtons settingIdRef={this.settingsRef} {...this.props} />
         <div
           style={controlStyles}
           id="controls-wrapper"
-          className={classNames}
-          ref={this.setRef}
+          className={classNames}          
         >
           <div className={`settings-panel ${this.props.showSettingsPanel ? 'settings-show' : 'settings-hide'}`}>
-            <ControlsSettings {...this.props} />
+            <ControlsSettings settingsRef={this.settingsRef} {...this.props} />
           </div>
         </div>
       </>
@@ -112,7 +105,7 @@ class Controls extends React.Component {
 }
 
 // TODO: Take exactly what we need.
-const mapStateToProps = state => state;
+const mapStateToProps = (state) => state
 
 const mapDispatchToProps = {
   setFontSize,
@@ -142,6 +135,7 @@ const mapDispatchToProps = {
   setVisraamStyle,
   changeFont,
   toggleCenterAlignOption,
+  closeSettingsPanel
 };
 
 // TODO: Connect individual components instead of all controls.

src/js/components/ControlsSettings/ControlSettings.ts

@@ -137,6 +137,40 @@ export const QUICK_SETTINGS = ({
   const isShowAutoScroll = isShowAutoScrollRoute(location.pathname);
 
   return [
+    {
+      type: 'label-options',
+      label: 'Text Align',
+      collections: [
+        {
+          label: 'Text Align Left',
+          options: "",
+          checked: !centerAlignGurbani,
+          action: toggleCenterAlignOption
+        },
+        {
+          label: 'Text Align Center',
+          options: "",
+          checked: centerAlignGurbani,
+          action: toggleCenterAlignOption
+        },
+      ]
+    },  
+    {
+      type: 'two-columns',
+      label: '',
+      collections: [
+        {
+          label: 'Larivaar',
+          checked: larivaar,
+          action: toggleLarivaarOption
+        },
+        {
+          label: 'Larivaar Assist',
+          checked: larivaarAssist,
+          action: toggleLarivaarAssistOption
+        },
+      ]
+    },     
     {
       type: 'toggle-option',
       label: 'Dark Mode',
@@ -167,47 +201,7 @@ export const QUICK_SETTINGS = ({
       label: 'Split',
       checked: splitView,
       action: toggleSplitViewOption,
-    },
-    {
-      type: 'collapsible_formatting_item',
-      label: 'Larivaar',
-      controlsList: [
-        {
-          label: 'larivaar',
-          action: () => {
-            toggleLarivaarOption();
-          },
-          value: larivaar,
-        },
-        {
-          label: 'larivaar Assist',
-          action: () => {
-            toggleLarivaarAssistOption();
-          },
-          value: larivaarAssist
-        }
-      ],
-    },
-    {
-      type: 'collapsible_formatting_item',
-      label: 'Text Align',
-      controlsList: [
-        {
-          label: 'align left',
-          action: () => {
-            centerAlignGurbani && toggleCenterAlignOption();
-          },
-          value: !centerAlignGurbani,
-        },
-        {
-          label: 'align center',
-          action: () => {
-            !centerAlignGurbani && toggleCenterAlignOption();
-          },
-          value: centerAlignGurbani,
-        },
-      ],
-    },
+    },          
     {
       type: 'collapsible_item',
       label: TEXTS.TRANSLITERATION,