Merge pull request #524 from naveed-ahmad/night-mode

Night mode

package.json

@@ -113,7 +113,8 @@
     "url-loader": "0.5.7",
     "webpack": "2.1.0-beta.20",
     "webpack-isomorphic-tools": "2.5.7",
-    "winston": "1.1.2"
+    "winston": "1.1.2",
+    "react-inlinesvg": "0.5.4"
   },
   "devDependencies": {
     "babel-eslint": "6.0.4",

src/components/Audioplayer/style.scss

@@ -39,6 +39,7 @@
   .controlItem{
     vertical-align: middle;
     padding-right: 20px;
+    color: #939598;
   }
 }
 

src/components/Ayah/index.js

@@ -294,8 +294,7 @@ export default class Ayah extends Component {
 
   render() {
     const { ayah, currentAyah } = this.props;
-    const currentIndex = parseInt(currentAyah.split(":")[1], 10);
-    const className = ayah.ayahIndex === currentIndex ? styles.highlight : "";
+    const className = ayah.ayahKey === currentAyah ? 'highlight' : "";
     debug('component:Ayah', `Render ${this.props.ayah.ayahNum}`);
 
     return (

src/components/Ayah/style.scss

@@ -117,7 +117,7 @@
 
   b, a{
     font-weight: 100;
-    margin: 0px 2px;
+    padding: 0px 2px;
     color: #000;
     &:hover{
       color: $brand-primary;
@@ -162,7 +162,3 @@
   width: 100%;
   margin: 0px auto;
 }
-
-.highlight {
-  background-color: #fffed9;
-}

src/components/Line/index.js

@@ -6,24 +6,36 @@ const styles = require('../Ayah/style.scss');
 export default class Line extends React.Component {
   static propTypes = {
     line: PropTypes.array.isRequired,
-    tooltip: PropTypes.string
+    tooltip: PropTypes.string,
+    currentAyah: PropTypes.string.isRequired
   };
 
+  shouldComponentUpdate(nextProps, nextState) {
+    const conditions = [
+      this.props.currentAyah !== nextProps.currentAyah,
+      this.props.line !== nextProps.line
+    ];
+
+    return conditions.some(condition => condition);
+  }
+
   renderText() {
-    const { line, tooltip } = this.props;
+    const { line, tooltip, currentAyah } = this.props;
 
     if (!line[0].code) { // TODO shouldn't be possible, remove this clause
       return false;
     }
 
     let text = line.map(word => {
+      let highlight = currentAyah == word.ayahKey ? 'highlight' : '';
+
       if (word.translation) {
         let tooltipContent = word[tooltip];
 
         return (
           <b
             key={`${word.pageNum}${word.lineNum}${word.position}${word.code}`}
-            className={`${word.className} ${styles.Tooltip}`}
+            className={`${word.className} ${styles.Tooltip} ${highlight}`}
             data-ayah={word.ayahKey}
             data-line={word.lineNun}
             data-page={word.pageNum}
@@ -36,7 +48,7 @@ export default class Line extends React.Component {
 
       return (
         <b
-          className={`${word.className} pointer`}
+          className={`${word.className} ${highlight} pointer`}
           key={`${word.pageNum}${word.lineNum}${word.position}${word.code}`}
           data-line={word.lineNum}
           data-page={word.pageNum}

src/components/NightModeToggle/index.js

@@ -0,0 +1,42 @@
+import React, { Component, PropTypes } from 'react';
+
+import SwitchToggle from 'components/SwitchToggle';
+
+export default class NightModeToggle extends Component {
+  static propTypes = {
+    isNightMode: PropTypes.bool.isRequired,
+    onToggle: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    isNightMode: false
+  };
+
+  toggleNightMode = () => {
+    const { isNightMode } = this.props;
+
+    if(isNightMode)
+      document.body.classList.add('night-mode');
+    else
+      document.body.classList.remove('night-mode');
+
+    this.props.onToggle({isNightMode: !isNightMode});
+  }
+
+  render() {
+    const { isNightMode } = this.props;
+
+    return(
+    <div>
+      <a
+        title={isNightMode ? "Switch to day mode" : "Switch to night mode"}
+        className={`${isNightMode ? 'text-primary' : 'text-color'} pointer`}
+        onClick={this.toggleNightMode}
+      >
+        Night Mode:{' '}
+        <i className="ss-icon ss-lightbulb"/>
+      </a>
+    </div>
+    );
+  }
+}

src/components/Sidebar/index.js

@@ -36,7 +36,7 @@ class Sidebar extends Component {
     const { open, children } = this.props;
 
     return (
-      <div ref="container" className={`${styles.container} ${open && styles.open}`}>
+      <div ref="container" className={`${styles.container} sidebar ${open && styles.open}`}>
         {children}
       </div>
     );

src/components/SurahInfo/index.js

@@ -12,7 +12,7 @@ const SurahInfo = ({ surah, isShowingSurahInfo, onClose }) => {
   const html = require(`./htmls/${surah.id}.html.js`); // eslint-disable-line global-require
 
   return (
-    <Col xs={12} className={`${style.container} ${style.show}`}>
+    <Col xs={12} className={`${style.container} surah-info ${style.show}`}>
       <div
         className={`${style.close} ss-delete`}
         onClick={() => onClose({isShowingSurahInfo: !isShowingSurahInfo})}

src/components/TopOptions/index.js

@@ -6,15 +6,16 @@ import InformationToggle from 'components/InformationToggle';
 import FontSizeDropdown from 'components/FontSizeDropdown';
 import TooltipDropdown from 'components/TooltipDropdown';
 import ReadingModeToggle from 'components/ReadingModeToggle';
+import NightModeToggle from 'components/NightModeToggle'
 import Title from 'containers/Surah/Title';
 import Share from 'components/Share';
 
 const TopOptions = ({options, surah, actions}) => (
   <Row>
-    <Col md={6} className="hidden-xs hidden-sm">
+    <Col md={4} className="hidden-xs hidden-sm">
       <Title surah={surah} />
     </Col>
-    <Col md={6} className="text-right">
+    <Col md={8} className="text-right">
       <ul className="list-inline">
         <li>
           <InformationToggle
@@ -43,6 +44,13 @@ const TopOptions = ({options, surah, actions}) => (
             onReadingModeToggle={actions.options.toggleReadingMode}
           />
         </li>
+        <li>|</li>
+        <li>
+          <NightModeToggle
+            isNightMode={options.isNightMode}
+            onToggle={actions.options.setOption}
+          />
+        </li>
         <li><Share surah={surah} /></li>
       </ul>
     </Col>

src/containers/Surah/Header/index.js

@@ -30,11 +30,6 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
           <Col xs={10}>
             <ul className={`list-inline ${styles.container} text-center`}>
               <li className={styles.verticalAlign}>
-                {/* <img
-                  src={ornamentLeft}
-                  className={`${styles.ornament} pull-left hidden-xs hidden-sm`}
-                  alt="Ornament left"
-                /> */}
                 {
                   surah.id > 1 &&
                     <Link
@@ -46,7 +41,7 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
                         data-metrics-event-name="Title:PreviousSurah"
                         className="ss-icon ss-navigateleft"
                       />
-                      <span className="hidden-xs hidden-sm"> PREVIOUS SURAH</span>
+                      <span className="hidden-xs hidden-sm"> PREVIOUS SURAH </span>
                     </Link>
                 }
               </li>
@@ -66,15 +61,10 @@ const SurahHeader = ({ surah, handleToggleSidebar, children }) => {
                       className="navbar-text next-chapter"
                       to={`/${surah.id + 1}`}
                     >
-                      <span className="hidden-xs hidden-sm">NEXT SURAH </span>
+                      <span className="hidden-xs hidden-sm"> NEXT SURAH </span>
                       <i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
                     </Link>
                 }
-                {/* <img
-                  src={ornamentRight}
-                  className={`${styles.ornament} hidden-xs hidden-sm`}
-                  alt="Ornament right"
-                /> */}
               </li>
             </ul>
           </Col>

src/containers/Surah/Title/index.js

@@ -1,9 +1,7 @@
 import React, { PropTypes } from 'react';
-import Link from 'react-router/lib/Link';
+import Isvg from 'react-inlinesvg';
 
 const styles = require('./style.scss');
-const ornamentLeft = require('../../../../static/images/ornament-left.png');
-const ornamentRight = require('../../../../static/images/ornament-right.png');
 
 const zeroPad = (num, places) => {
   const zero = places - num.toString().length + 1;
@@ -17,72 +15,13 @@ const Title = ({ surah }) => {
   if (!surah) return <noscript />;
 
   return (
+  <Isvg src={title}>
     <img
       src={title}
       className={styles.title}
       alt={`${surah.name.simple} (${surah.name.english}) - سورة ${surah.name.arabic}`}
     />
-  );
-
-  return (
-    <div className={`row ${styles.container}`}>
-      <div className="col-md-3 col-xs-1 surah-title">
-        <img
-          src={ornamentLeft}
-          className="ornament hidden-xs hidden-sm"
-          alt="Ornament left"
-        />
-        {
-          surah.id > 1 &&
-            <Link
-              data-metrics-event-name="Title:PreviousSurah"
-              className="navbar-text previous-chapter"
-              to={`/${surah.id - 1}`}
-            >
-              <i
-                data-metrics-event-name="Title:PreviousSurah"
-                className="ss-icon ss-navigateleft"
-              />
-              <span className="hidden-xs hidden-sm"> PREVIOUS SURAH</span>
-            </Link>
-        }
-      </div>
-      <div className="col-md-6 col-xs-6 surah-title text-center">
-        {
-          surah &&
-            <img
-              src={title}
-              className="title hidden-xs"
-              alt={`${surah.name.simple} (${surah.name.english}) - سورة ${surah.name.arabic}`}
-            />
-        }
-        <br />
-        {
-          surah &&
-            <p className="navbar-text text-uppercase surah-name">
-              {surah.name.simple} ({surah.name.english}) - سورة {surah.name.arabic}
-            </p>
-        }
-      </div>
-      <div className="col-md-3 col-xs-1 surah-title text-right">
-        {
-          surah.id < 114 &&
-            <Link
-              data-metrics-event-name="Title:NextSurah"
-              className="navbar-text next-chapter"
-              to={`/${surah.id + 1}`}
-            >
-              <span className="hidden-xs hidden-sm">NEXT SURAH </span>
-              <i data-metrics-event-name="Title:NextSurah" className="ss-icon ss-navigateright" />
-            </Link>
-        }
-        <img
-          src={ornamentRight}
-          className="ornament hidden-xs hidden-sm"
-          alt="Ornament right"
-        />
-      </div>
-    </div>
+  </Isvg>
   );
 };
 

src/containers/Surah/index.js

@@ -332,7 +332,7 @@ class Surah extends Component {
   }
 
   renderLines() {
-    const { lines, options } = this.props;
+    const { lines, options, currentAyah } = this.props;
     const keys = Object.keys(lines);
 
     return keys.map((lineNum, index) => {
@@ -342,12 +342,12 @@ class Surah extends Component {
 
       if (index + 1 !== keys.length && pageNum !== nextNum.split('-')[0]) {
         return [
-          <Line line={line} key={lineNum} tooltip={options.tooltip} />,
+          <Line line={line} key={lineNum} currentAyah={currentAyah} tooltip={options.tooltip} />,
           <PageBreak pageNum={parseInt(pageNum, 10) + 1} />
         ];
       }
 
-      return <Line line={line} key={lineNum} tooltip={options.tooltip} />;
+      return <Line line={line} key={lineNum} currentAyah={currentAyah} tooltip={options.tooltip} />;
     });
   }
 
@@ -392,8 +392,6 @@ class Surah extends Component {
 
   render() {
     const { surah, surahs, ayahIds, options, actions, footer } = this.props;
-    const title = require(`../../../static/images/titles/${zeroPad(surah.id, 3)}.svg`); // eslint-disable-line global-require,max-len
-
     debug('component:Surah', 'Render');
 
     return (

src/containers/Surah/style.scss

@@ -27,9 +27,9 @@
 }
 
 :local .surah-container {
-  padding-top: 50px;
+  padding-top: 70px;
 
   @media(max-width: $screen-xs-max) {
-    padding-top: 50px;
+    padding-top: 70px;
   }
 }

src/redux/constants/options.js

@@ -1,2 +1,3 @@
 export const TOGGLE_READING_MODE = '@@quran/options/TOGGLE_READING_MODE';
 export const SET_OPTION = '@@quran/options/SET_OPTION';
+export const TOGGLE_NIGHT_MODE = '@@quran/options/TOGGLE_NIGHT_MODE';

src/redux/modules/options.js

@@ -4,6 +4,7 @@ import { TOGGLE_READING_MODE, SET_OPTION } from 'redux/constants/options.js';
 const initialState = {
   isReadingMode: false,
   isShowingSurahInfo: false,
+  isNightMode: false,
   audio: 8,
   quran: 1,
   content: [19],