Settings on right drawer

package.json

@@ -87,7 +87,7 @@
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "quran-components": "^0.0.52",
+    "quran-components": "^0.0.62",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",

src/components/FontSizeDropdown/index.js

@@ -1,8 +1,5 @@
 import React, { Component, PropTypes } from 'react';
 
-import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
-import Popover from 'react-bootstrap/lib/Popover';
-
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
 const style = require('./style.scss');
@@ -32,78 +29,63 @@ export default class FontSizeDropdown extends Component {
   }
 
   renderPopup() {
-    const title = (
-      <LocaleFormattedMessage
-        id="setting.fontSize"
-        defaultMessage="Font size"
-      />
-    );
-
     return (
-      <Popover id="FontSizeDropdown" title={title} className={style.popover}>
-        <div className="row">
-          <div className="col-xs-3">
+      <div>
+        <ul className={style.list}>
+          <li className={`text-center ${style.item}`}>
             <a
               tabIndex="-1"
               onClick={() => this.handleOptionSelected('arabic', -1)}
               className="pointer"
             >
               <i className="ss-icon ss-hyphen" />
             </a>
-          </div>
-          <div className="col-xs-6 text-center">
+          </li>
+          <li className={`text-center ${style.item}`}>
             <LocaleFormattedMessage id="setting.fontSize.arabic" defaultMessage="Arabic" />
-          </div>
-          <div className="col-xs-3 text-center">
+          </li>
+          <li className={`text-center ${style.item}`}>
             <a
               tabIndex="-1"
               onClick={() => this.handleOptionSelected('arabic', 1)}
               className="pointer"
             >
               <i className="ss-icon ss-plus" />
             </a>
-          </div>
-        </div>
+          </li>
+        </ul>
         <br />
-        <div className="row">
-          <div className="col-xs-3">
+        <ul className={style.list}>
+          <li className={`text-center ${style.item}`}>
             <a
               tabIndex="-1"
               onClick={() => this.handleOptionSelected('translation', -1)}
               className="pointer"
             >
               <i className="ss-icon ss-hyphen" />
             </a>
-          </div>
-          <div className="col-xs-6 text-center">
+          </li>
+          <li className={`text-center ${style.item}`}>
             <LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />
-          </div>
-          <div className="col-xs-3 text-right">
+          </li>
+          <li className={`text-center ${style.item}`}>
             <a
               tabIndex="-1"
               onClick={() => this.handleOptionSelected('translation', 1)}
               className="pointer"
             >
               <i className="ss-icon ss-plus" />
             </a>
-          </div>
-        </div>
-      </Popover>
+          </li>
+        </ul>
+      </div>
     );
   }
 
   render() {
     return (
       <li className={style.link}>
-        <OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose>
-          <a
-            tabIndex="-1"
-            data-metrics-event-name="FontSizeDropdown"
-          >
-            <i className="ss-icon ss-font vertical-align-middle" />
-            {' '}<LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font Size" className="visible-xs-inline-block" />
-          </a>
-        </OverlayTrigger>
+        {this.renderPopup()}
       </li>
     );
   }

src/components/FontSizeDropdown/style.scss

@@ -1,24 +1,20 @@
 @import '../../styles/variables.scss';
 
-.popover{
-  :global(.popover-title){
-    font-family: $font-montserrat;
-    text-transform: uppercase;
-    color: $cream;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    font-size: 0.75em;
-  }
+.list{
+  display: table;
+  width: 100%;
+  padding: 15px 0px;
+}
 
-  :global(.popover-content){
-    :global(a){
-      font-size: 0.8em;
-    }
-  }
+.item{
+  list-style-type: none;
+  display: table-cell;
+  width: 33%;
 }
 
 .link{
   position: relative;
   display: block;
   cursor: pointer;
+  color: #777;
 }

src/components/GlobalNav/Surah/index.js

@@ -1,7 +1,8 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import { connect } from 'react-redux';
 import Link from 'react-router/lib/Link';
-import NavDropdown from 'react-bootstrap/lib/NavDropdown';
+import Drawer from 'quran-components/lib/Drawer';
+import Menu, { MenuItem } from 'quran-components/lib/Menu';
 
 import { surahType, optionsType } from 'types';
 import * as OptionsActions from 'redux/actions/options.js';
@@ -10,87 +11,145 @@ import SearchInput from 'components/SearchInput';
 import SurahsDropdown from 'components/SurahsDropdown';
 import ReadingModeToggle from 'components/ReadingModeToggle';
 import NightModeToggle from 'components/NightModeToggle';
+import InformationToggle from 'components/InformationToggle';
 import FontSizeDropdown from 'components/FontSizeDropdown';
+import ReciterDropdown from 'components/ReciterDropdown';
+import ContentDropdown from 'components/ContentDropdown';
+import TooltipDropdown from 'components/TooltipDropdown';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 // TODO: import VersesDropdown from 'components/VersesDropdown';
-import InformationToggle from 'components/InformationToggle';
+
+import { load } from 'redux/actions/verses.js';
+
 import GlobalNav from '../index';
 
-const styles = require('../style.scss');
-
-const GlobalNavSurah = ({ chapter, chapters, setOption, options, ...props }) => (
-  <GlobalNav
-    {...props}
-    leftControls={[
-      <SurahsDropdown title={chapter.nameSimple} chapters={chapters} />,
-      <NavDropdown
-        id="hidden-dropdown"
-        className={`visible-xs-inline-block ${styles.optionsDropdown}`}
-        title={<LocaleFormattedMessage id="settings.options" defaultMessage="Options" />}
-      >
-        <FontSizeDropdown
-          fontSize={options.fontSize}
-          onOptionChange={setOption}
-        />
-        <InformationToggle
-          onToggle={setOption}
-          isToggled={options.isShowingSurahInfo}
-        />
-        <ReadingModeToggle
-          isToggled={options.isReadingMode}
-          onToggle={setOption}
-        />
-        <NightModeToggle
-          isNightMode={options.isNightMode}
-          onToggle={setOption}
-        />
-      </NavDropdown>,
-      <div className="navbar-form navbar-left hidden-xs hidden-sm">
-        <SearchInput className="search-input" />
-      </div>,
-      <li className="visible-xs-inline-block visible-sm-inline-block">
-        <Link to="/search">
-          <i className="ss-icon ss-search" style={{ verticalAlign: 'sub' }} />
-        </Link>
+class GlobalNavSurah extends Component {
+  static propTypes = {
+    chapter: surahType.isRequired,
+    chapters: PropTypes.objectOf(surahType).isRequired,
+    options: optionsType.isRequired,
+    setOption: PropTypes.func.isRequired,
+    versesIds: PropTypes.instanceOf(Set),
+    load: PropTypes.func.isRequired
+  };
+
+  state = {
+    drawerOpen: false
+  }
+
+  handleOptionChange = (payload) => {
+    const { chapter, setOption, options, versesIds } = this.props;
+
+    setOption(payload);
+
+    if (chapter) {
+      const from = [...versesIds][0];
+      const to = [...versesIds][[...versesIds].length - 1];
+      const paging = { offset: from - 1, limit: (to - from) + 1 };
+      this.props.load(chapter.chapterNumber, paging, { ...options, ...payload });
+    }
+  };
+
+  handleDrawerToggle = (open) => {
+    this.setState({ drawerOpen: open });
+  }
+
+  renderDrawerToggle() {
+    return (
+      <li>
+        <a tabIndex="-1" className="pointer" onClick={() => this.handleDrawerToggle(true)}>
+          <i className="ss-icon ss-settings text-align" />
+          <LocaleFormattedMessage id="setting.title" defaultMessage="Settings" />
+        </a>
       </li>
-    ]}
-    rightControls={[
-      <FontSizeDropdown
-        fontSize={options.fontSize}
-        onOptionChange={setOption}
-      />,
-      <InformationToggle
-        onToggle={setOption}
-        isToggled={options.isShowingSurahInfo}
-      />,
-      <ReadingModeToggle
-        isToggled={options.isReadingMode}
-        onToggle={setOption}
-      />,
-      <NightModeToggle
-        isNightMode={options.isNightMode}
-        onToggle={setOption}
-      />
-    ]}
-  />
-);
+    );
+  }
+
+  render() {
+    const { chapter, chapters, setOption, options, ...props } = this.props;
 
-GlobalNavSurah.propTypes = {
-  chapter: surahType.isRequired,
-  chapters: PropTypes.objectOf(surahType).isRequired,
-  options: optionsType.isRequired,
-  setOption: PropTypes.func.isRequired,
-};
+    return (
+      <GlobalNav
+        {...props}
+        leftControls={[
+          <SurahsDropdown title={chapter.nameSimple} chapters={chapters} />,
+          <div className="navbar-form navbar-left hidden-xs hidden-sm">
+            <SearchInput className="search-input" />
+          </div>,
+          <li className="visible-xs-inline-block visible-sm-inline-block">
+            <Link to="/search">
+              <i className="ss-icon ss-search" style={{ verticalAlign: 'sub' }} />
+            </Link>
+          </li>
+        ]}
+        rightControls={[
+          this.renderDrawerToggle(),
+          <Drawer
+            right
+            drawerClickClose={false}
+            open={this.state.drawerOpen}
+            handleOpen={this.handleDrawerToggle}
+            toggle={<noscript />}
+          >
+            <Menu>
+              <InformationToggle
+                onToggle={setOption}
+                isToggled={options.isShowingSurahInfo}
+              />
+              <ReadingModeToggle
+                isToggled={options.isReadingMode}
+                onToggle={setOption}
+              />
+              <NightModeToggle
+                isNightMode={options.isNightMode}
+                onToggle={setOption}
+              />
+              <MenuItem divider />
+              <FontSizeDropdown
+                fontSize={options.fontSize}
+                onOptionChange={setOption}
+              />
+              <MenuItem divider />
+              <div style={{ paddingLeft: 15, paddingRight: 15 }}>
+                <LocaleFormattedMessage id="setting.reciters.title" defaultMessage="Reciters" />
+                <ReciterDropdown
+                  onOptionChange={this.handleOptionChange}
+                />
+                <br />
+                <LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />
+                <ContentDropdown
+                  onOptionChange={this.handleOptionChange}
+                />
+              </div>
+              <MenuItem divider />
+              <div style={{ paddingLeft: 15, paddingRight: 15 }}>
+                <LocaleFormattedMessage id="setting.tooltip.title" defaultMessage="Tooltip Content" />
+              </div>
+              <TooltipDropdown
+                tooltip={options.tooltip}
+                onOptionChange={setOption}
+              />
+            </Menu>
+          </Drawer>
+        ]}
+      />
+    );
+  }
+}
 
 function mapStateToProps(state, ownProps) {
   const chapterId = parseInt(ownProps.params.chapterId, 10);
   const chapter: Object = state.chapters.entities[chapterId];
+  const verses: Object = state.verses.entities[chapterId];
+  const versesArray = verses ? Object.keys(verses).map(key => parseInt(key.split(':')[1], 10)) : [];
+  const versesIds = new Set(versesArray);
 
   return {
     chapter,
     chapters: state.chapters.entities,
-    options: state.options
+    options: state.options,
+    versesIds
   };
 }
 
-export default connect(mapStateToProps, OptionsActions)(GlobalNavSurah);
+export default connect(mapStateToProps, { ...OptionsActions, load })(GlobalNavSurah);

src/components/GlobalNav/index.js

@@ -112,7 +112,7 @@ class GlobalNav extends Component {
             leftControls.map(((control, index) => React.cloneElement(control, { key: index })))
           }
         </Nav>
-        <Nav pullRight className="hidden-xs">
+        <Nav pullRight>
           {
             this.renderRightControls()
             .map(((control, index) => React.cloneElement(control, { key: index })))