Settings on right drawer (#719)

* Settings on right drawer * Settings looking good * Fixed cutting text and pr comments
quran · Apr 8, 2017 · 90981fa · 90981fa
1 parent a45b7dd
commit 90981fa
Show file tree

Hide file tree

Showing 21 changed files with 326 additions and 598 deletions.
diff --git a/package.json b/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.66",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",

diff --git a/src/components/ContentDropdown/index.js b/src/components/ContentDropdown/index.js
@@ -1,11 +1,12 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
-import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
-import DropdownButton from 'react-bootstrap/lib/DropdownButton';
-import MenuItem from 'react-bootstrap/lib/MenuItem';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import { loadTranslations } from 'redux/actions/options';
 import { contentType } from 'types';
+import Menu, { MenuItem } from 'quran-components/lib/Menu';
+import Checkbox from 'quran-components/lib/Checkbox';
+import Loader from 'quran-components/lib/Loader';
+import Icon from 'quran-components/lib/Icon';
 
 const style = require('./style.scss');
 
@@ -31,8 +32,7 @@ class ContentDropdown extends Component {
     onOptionChange: PropTypes.func.isRequired,
     translations: PropTypes.arrayOf(PropTypes.number).isRequired,
     translationOptions: PropTypes.arrayOf(contentType),
-    loadTranslations: PropTypes.func.isRequired,
-    className: PropTypes.string
+    loadTranslations: PropTypes.func.isRequired
   };
 
   componentDidMount() {
@@ -43,16 +43,6 @@ class ContentDropdown extends Component {
     return false;
   }
 
-  getTitle() {
-    const { translationOptions, translations } = this.props;
-
-    return translationOptions.filter(slug => translations.includes(slug.id)).map((slug) => {
-      if (slug.languageName === 'English') return slug.authorName;
-
-      return slug.languageName;
-    }).join(', ');
-  }
-
   handleRemoveContent = () => {
     const { onOptionChange } = this.props;
 
@@ -76,19 +66,16 @@ class ContentDropdown extends Component {
       const checked = translations.find(option => option === translation.id);
 
       return (
-        <li key={translation.id} className={style.item}>
-          <input
-            type="checkbox"
-            className={style.checkbox}
+        <MenuItem key={translation.id} className={style.item}>
+          <Checkbox
             id={translation.id + translation.languageName}
-            onChange={() => this.handleOptionSelected(translation.id)}
+            name="translation"
             checked={checked}
-          />
-
-          <label htmlFor={translation.id + translation.languageName} className={style.label}>
+            handleChange={() => this.handleOptionSelected(translation.id)}
+          >
             {render(translation)}
-          </label>
-        </li>
+          </Checkbox>
+        </MenuItem>
       );
     });
   }
@@ -110,33 +97,34 @@ class ContentDropdown extends Component {
   }
 
   render() {
-    const { className, translations } = this.props;
+    const { translations, translationOptions } = this.props;
 
     return (
-      <ButtonToolbar>
-        <DropdownButton
-          block
-          id="content-dropdown"
-          className={`dropdown ${className} ${style.dropdown}`}
-          title={this.getTitle()}
-        >
-          {
-            translations && translations.length &&
-              <MenuItem onClick={this.handleRemoveContent}>
-                <LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
+      <MenuItem
+        icon={<Icon type="list" />}
+        menu={
+          translationOptions.length ?
+            <Menu>
+              {
+                translations && translations.length &&
+                  <MenuItem onClick={this.handleRemoveContent}>
+                    <LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
+                  </MenuItem>
+              }
+              <MenuItem divider>
+                <LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
+              </MenuItem>
+              {this.renderEnglishList()}
+              <MenuItem divider>
+                <LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
               </MenuItem>
-          }
-          <MenuItem header>
-            <LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
-          </MenuItem>
-          {this.renderEnglishList()}
-          <MenuItem divider />
-          <MenuItem header>
-            <LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
-          </MenuItem>
-          {this.renderLanguagesList()}
-        </DropdownButton>
-      </ButtonToolbar>
+              {this.renderLanguagesList()}
+            </Menu> :
+            <Loader isActive />
+        }
+      >
+        <LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />
+      </MenuItem>
     );
   }
 }

diff --git a/src/components/FontSizeDropdown/index.js b/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>
     );
   }

diff --git a/src/components/FontSizeDropdown/style.scss b/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;
 }