Skip to content
This repository has been archived by the owner on Jun 28, 2021. It is now read-only.

Settings on right drawer #719

Merged
merged 4 commits into from Apr 8, 2017
Merged

Settings on right drawer #719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f08b802
Settings on right drawer
mmahalwy Apr 7, 2017
e2f7be2
Settings looking good
mmahalwy Apr 7, 2017
bc19531
Fixed cutting text and pr comments
mmahalwy Apr 8, 2017
f300ab9
Merge branch 'master' into settings-right
mmahalwy Apr 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -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",
Expand Down
86 changes: 37 additions & 49 deletions src/components/ContentDropdown/index.js
View file
Open in desktop
@@ -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';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a beautiful sight :D

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1


const style = require('./style.scss');

Expand All @@ -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() {
Expand All @@ -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;

Expand All @@ -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>
);
});
}
Expand All @@ -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>
);
}
}
Expand Down
56 changes: 19 additions & 37 deletions src/components/FontSizeDropdown/index.js
View file
Open in desktop
@@ -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');
Expand Down Expand Up @@ -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>
);
}
Expand Down
24 changes: 10 additions & 14 deletions src/components/FontSizeDropdown/style.scss
View file
Open in desktop
@@ -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;
}