diff --git a/package.json b/package.json index e8720bc28..044377b8e 100644 --- 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 index 4cc5951f2..648e227eb 100644 --- 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 ( -
  • - + this.handleOptionSelected(translation.id)} + name="translation" checked={checked} - /> - - -
    • + + ); }); } @@ -110,33 +97,34 @@ class ContentDropdown extends Component { } render() { - const { className, translations } = this.props; + const { translations, translationOptions } = this.props; return ( - - - { - translations && translations.length && - - + } + menu={ + translationOptions.length ? + + { + translations && translations.length && + + + + } + + + + {this.renderEnglishList()} + + - } - - - - {this.renderEnglishList()} - - - - - {this.renderLanguagesList()} - - + {this.renderLanguagesList()} + : + + } + > + + ); } } diff --git a/src/components/FontSizeDropdown/index.js b/src/components/FontSizeDropdown/index.js index cd011c61d..6435c63ee 100644 --- 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,17 +29,10 @@ export default class FontSizeDropdown extends Component { } renderPopup() { - const title = ( - - ); - return ( - - ); } render() { return (
  • - - - - {' '} - - + {this.renderPopup()}
    • ); } diff --git a/src/components/FontSizeDropdown/style.scss b/src/components/FontSizeDropdown/style.scss index 4f19f8725..eedffe1ab 100644 --- 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; } diff --git a/src/components/GlobalNav/Surah/index.js b/src/components/GlobalNav/Surah/index.js index 5d002191c..746e47d24 100644 --- a/src/components/GlobalNav/Surah/index.js +++ b/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 from 'quran-components/lib/Menu'; import { surahType, optionsType } from 'types'; import * as OptionsActions from 'redux/actions/options.js'; @@ -10,87 +11,149 @@ 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 }) => ( - , - } - > - - - - - , -
    - -
    , -
  • - - - +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(visibleXs) { + return ( +
  • + this.handleDrawerToggle(true)} + > + + +
    • - ]} - rightControls={[ - , - , - , - - ]} - /> -); + ); + } + + 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 ( + , +
    + +
    , +
  • + + + +
    • , + this.renderDrawerToggle(true), + } + > +
    +

    +
    + + + + +
    + + + +
    +
    + +
    + +     +     + ]} + rightControls={[ + this.renderDrawerToggle() + ]} + /> + ); + } +} 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); diff --git a/src/components/GlobalNav/index.js b/src/components/GlobalNav/index.js index 60aeaa33e..5723d105c 100644 --- a/src/components/GlobalNav/index.js +++ b/src/components/GlobalNav/index.js @@ -112,7 +112,7 @@ class GlobalNav extends Component { leftControls.map(((control, index) => React.cloneElement(control, { key: index }))) } -