Merge pull request #1537 from KhalisFoundation/dev

Release v1.14
KhalisFoundation · Jul 22, 2022 · e6eba94 · e6eba94
2 parents 3ee629c + 550a6fc
commit e6eba94
Show file tree

Hide file tree

Showing 33 changed files with 756 additions and 1,235 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/server/template.js b/server/template.js
@@ -79,50 +79,6 @@ export default ({ url, bodyClass, title, description, language }) => marinate`
 
   <div id="app-root"></div>
 
-  <footer>
-    <div class="footer row">
-      <ul class="version">
-        <li>
-          <!--v${process.env.npm_package_version}-->
-          <a href="https://github.com/KhalisFoundation/sttm-web/releases" target="_blank" rel="noopener noreferrer"></a>
-        </li>
-      </ul>
-      <ul class="menu footer-menu">
-        <li>
-          <a href="http://support.khalisfoundation.org/" target="_blank" rel="noopener noreferrer">Help</a>
-        </li>
-        <li>
-          <a href="/about">About Us</a>
-        </li>
-        <li>
-          <a href="http://support.khalisfoundation.org/support/tickets/new" target="_blank" rel="noopener noreferrer">Feedback</a>
-        </li>
-        <li>
-          <a href="/terms-of-service">Legal</a>
-        </li>
-        <li>
-          <a href="https://khalisfoundation.org/donate/" target="_blank" rel="noopener noreferrer">Donate</a>
-        </li>
-        <li>
-        <span class="footer-seperator">|</span>
-        </li>
-        <li>
-          <a class="download-icon" target="_blank" href="https://khalisfoundation.org/portfolio/sikhitothemax/"><img src="/assets/images/app-desktop.png" alt="Desktop icon"/></a>
-        </li>
-        <li>
-          <a class="download-icon" target="_blank" href="https://apps.apple.com/us/app/sikhitothemax/id1370303478"><img src="/assets/images/app-ios.png" alt="iOS icon"/></a>
-        </li>
-        <li>
-          <a class="download-icon" target="_blank" href="https://play.google.com/store/apps/details?id=com.nest.sttm&hl=en_US"><img src="/assets/images/app-android.png" alt="Android icon"/></a>
-        </li>
-      </ul>
-      <div class="copyright">
-        Copyright © <span id="year"></span> Khalis Foundation
-        <span>, SikhiToTheMax Trademark SHARE Charity, UK</span>
-      </div>
-    </div>
-  </footer>
-
   <!-- Google Analytics -->
   <script>
     var ga;

diff --git a/src/js/components/Accordion.js b/src/js/components/Accordion.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { PlusIcon, MinusIcon } from '@/components/Icons/CustomIcons'
+import Chevron from '@/components/Icons/Chevron';
 
 const Accordion = ({ title, index, content, defaultState, ariaLabel }) => {
   const [active, setActive] = useState(defaultState);
@@ -31,13 +31,25 @@ const Accordion = ({ title, index, content, defaultState, ariaLabel }) => {
           aria-controls={`accordion-panel-${index}`}
           id={`accordion-header-${index}`}
           onClick={toggleAccordion}
-          aria-label={ariaLabel ? ariaLabel : title}>
-          {title}{active ? <MinusIcon /> : <PlusIcon />}
+          aria-label={ariaLabel ? ariaLabel : title}
+        >
+          {title}
+          {active ? (
+            <Chevron
+              style={{ fontSize: 16 }}
+              direction={Chevron.DIRECTIONS.TOP}
+            />
+          ) : (
+            <Chevron
+              style={{ fontSize: 16 }}
+              direction={Chevron.DIRECTIONS.BOTTOM}
+            />
+          )}
         </button>
       </h4>
       {createContent()}
-    </div >
-  )
+    </div>
+  );
 }
 
 Accordion.propTypes = {

diff --git a/src/js/components/AddShabadButton.tsx b/src/js/components/AddShabadButton.tsx
@@ -1,15 +1,16 @@
 /* eslint-disable react/prop-types */
 import React from 'react'
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import { setMultipleShabads, setMultiViewPanel } from "@/features/actions";
+import { setMultipleShabads, setMultiViewPanel, closeSettingsPanel } from "@/features/actions";
 import { TEXTS } from '@/constants';
 import { showToast } from '@/util';
 import { IMultipleShabadsProps } from '@/types/multiple-shabads';
 import AddIcon from './Icons/AddIcon';
 
 interface IAddShabadButton {
   multipleShabads: IMultipleShabadsProps[],
-  showMultiViewPanel: boolean
+  showMultiViewPanel: boolean,
+  showPinSettings: boolean,
 }
 
 type FCProps = {
@@ -21,11 +22,14 @@ export const AddShabadButton: React.FC<FCProps> = ({ shabad: { verseId, shabadId
   const typedUseSelector: TypedUseSelectorHook<IAddShabadButton> = useSelector;
   const multipleShabads = typedUseSelector(state => state.multipleShabads)
   const showMultiViewPanel = typedUseSelector(state => state.showMultiViewPanel)
+  const showPinSettings = typedUseSelector(state => state.showPinSettings)
 
   const onClick = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     event.stopPropagation();
-
+    if (showPinSettings) {
+      dispatch(closeSettingsPanel());
+    }
     const { id, shabadid, verse, url } = event.currentTarget.dataset
 
     // If Shabad already added then dont add again.

diff --git a/src/js/components/Controls.js b/src/js/components/Controls.js
@@ -37,6 +37,7 @@ import {
   toggleCenterAlignOption,
   closeSettingsPanel,
   closeMultiViewPanel,
+  closePinSettings,
 } from '@/features/actions';
 
 export const supportedMedia = _s;
@@ -56,24 +57,25 @@ class Controls extends React.Component {
 
   static propTypes = {
     showSettingsPanel: PropTypes.bool,
+    showPinSettings: PropTypes.bool,
   };
 
   setRef = (node) => (this.wrapperRef = node);
 
   render() {
-    const { showSettingsPanel } = this.props;
+    const { showSettingsPanel, showPinSettings } = this.props;
 
     return (
       <>
         <ShareButtons {...this.props} />
         <div
-          ref={this.settingsRef}
+          ref={!showPinSettings && this.settingsRef}
           className={`settings-panel ${
             showSettingsPanel ? 'settings-show' : ''
           }`}
         >
           {showSettingsPanel && (
-            <ControlsSettings settingsRef={this.settingsRef} {...this.props} />
+            <ControlsSettings settingsRef={!showPinSettings && this.settingsRef} {...this.props} />
           )}
         </div>
       </>
@@ -117,6 +119,7 @@ const mapDispatchToProps = {
   toggleCenterAlignOption,
   closeSettingsPanel,
   closeMultiViewPanel,
+  closePinSettings,
 };
 
 // TODO: Connect individual components instead of all controls.

diff --git a/src/js/components/ControlsSettings/ControlSettings.ts b/src/js/components/ControlsSettings/ControlSettings.ts
@@ -46,6 +46,7 @@ export interface ISettingActions {
   toggleParagraphMode: () => {},
   toggleSehajPaathMode: () => {},
   toggleSettingsPanel: () => {},
+  closePinSettings: () => {},
   toggleKeyboardShortcutsPanel: () => {},
   setVisraamSource: () => {},
   setVisraamStyle: () => {},
@@ -86,114 +87,121 @@ export interface ISettingActions {
 
 export const HEADER_SETTINGS = ({
   toggleSettingsPanel,
+  closePinSettings,
   toggleKeyboardShortcutsPanel,
   showSettingsPanel,
   showKeyboardShortcutsPanel  
 }: ISettingActions) => {
   return [
     {
       type: 'header',
-      label: showKeyboardShortcutsPanel ? 'Shortcuts':'Settings',
+      label: showKeyboardShortcutsPanel ? 'Shortcuts' : 'Settings',
       value: showSettingsPanel,
-      action: showKeyboardShortcutsPanel ? ()=>{toggleKeyboardShortcutsPanel(),toggleSettingsPanel()} : toggleSettingsPanel
+      action: showKeyboardShortcutsPanel
+        ? () => {
+            toggleKeyboardShortcutsPanel(), toggleSettingsPanel();
+          }
+        : () => {
+            closePinSettings(), toggleSettingsPanel();
+          },
     },
-  ]
+  ];
 }
 
 export const KEYBOARD_SHORTCUTS = () =>{
   return [
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Larivar',
       shortcut: ['l'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Larivar Assist',
       shortcut: ['shift+l'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Vishraams',
       shortcut: ['v'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'AutoScroll Mode',
       shortcut: ['a'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Dark Mode',
       shortcut: ['o'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Split Mode',
       shortcut: ['/'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'FullScreen Mode',
       shortcut: ['f'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Reading Mode',
       shortcut: ['r'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Unicode',
       shortcut: ['u'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Center Align',
       shortcut: ['(cmd)ctrl+shift+c'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'English Translation',
       shortcut: ['e'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Punjabi Translation',
       shortcut: ['t'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Spanish Translation',
       shortcut: ['s'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'English Transliteration',
       shortcut: ['shift+e'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Shahmukhi Transliteration',
       shortcut: ['shift+s'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Hindi Transliteration',
       shortcut: ['shift+h'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Increase Font Size',
       shortcut: ['+'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Decrease Font Size',
       shortcut: ['-'],
     },
     {
-      type: 'label-options',
+      type: 'keyboard-shortcut-options',
       label: 'Search Bar',
       shortcut: ['(cmd)ctrl+/'],
     },