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

Commit 8948a58

Browse files
mmahalwymmahalwy
authored
#568 UI improvements (#583)
* moved topoptions to navbar drawer * fix lint * fix tests * break eslint * fix eslint * fix test * verse dropdown max height * Global Nav * small bug * change again * placeholder for search * global nav edits and to merge so one pr * a ton of changes and i want to sleep now * fix test * remove unneeded * more delete * fix errors * fixes ##561 * console * delete that * minor style changes * pr comments * fixes audio * always close
1 parent 575227b commit 8948a58

File tree

76 files changed

+1994
-1196
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1994
-1196
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
"scripts": {
77
"test": "npm run test:dev:unit",
88
"test:ci:unit": "karma start --browsers PhantomJS --single-run",
9-
"posttest:ci:unit": "npm run test:ci:lint",
9+
"pretest:ci:unit": "npm run test:ci:lint",
1010
"test:ci:functional": "BROWSER=phantomjs ./tests/functional/test.sh start-ci",
1111
"posttest:ci:functional": "./tests/functional/test.sh stop",
1212
"test:dev:unit": "karma start",
13-
"test:ci:lint": "./node_modules/eslint/bin/eslint.js ./src/**/*.js",
13+
"test:ci:lint": "./node_modules/eslint/bin/eslint.js ./src",
1414
"test:dev:functional": "BROWSER=chrome ./tests/functional/test.sh start",
1515
"posttest:dev:functional": "./tests/functional/test.sh stop",
16-
"test:dev:lint": "eslint ./src/scripts/**/*.js",
16+
"test:dev:lint": "./node_modules/eslint/bin/eslint.js ./src",
1717
"test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
1818
"dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
1919
"start": "NODE_PATH='src' node ./start",

‎src/components/Ayah/index.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ import Word from 'components/Word';
99

1010
import debug from 'helpers/debug';
1111

12-
import bindTooltip from 'utils/bindTooltip';
13-
1412
const styles = require('./style.scss');
1513

1614
export default class Ayah extends Component {
@@ -48,10 +46,6 @@ export default class Ayah extends Component {
4846
isSearched: false
4947
};
5048

51-
componentDidMount() {
52-
bindTooltip();
53-
}
54-
5549
shouldComponentUpdate(nextProps) {
5650
const conditions = [
5751
this.props.ayah !== nextProps.ayah,
@@ -99,7 +93,7 @@ export default class Ayah extends Component {
9993
<h4 className="montserrat">{content.name || content.resource.name}</h4>
10094
<h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
10195
<small
102-
dangerouslySetInnerHTML={{__html: content.text}}
96+
dangerouslySetInnerHTML={{ __html: content.text }}
10397
className={`${lang || 'times-new'}`}
10498
/>
10599
</h2>
@@ -148,20 +142,22 @@ export default class Ayah extends Component {
148142
}
149143

150144
renderText() {
151-
const { ayah, tooltip, currentAyah, isPlaying, audioActions, isSearched} = this.props;
152-
153-
const text = ayah.words.map(word => {
154-
return(
155-
<Word
156-
word={word}
157-
currentAyah={currentAyah}
158-
tooltip={tooltip}
159-
isPlaying={isPlaying}
160-
audioActions={audioActions}
161-
isSearched={isSearched}
162-
/>
163-
)
164-
});
145+
const { ayah, tooltip, currentAyah, isPlaying, audioActions, isSearched } = this.props;
146+
// NOTE: Some 'word's are glyphs (jeem). Not words and should not be clicked for audio
147+
let wordAudioPosition = -1;
148+
149+
const text = ayah.words.map(word => ( // eslint-disable-line
150+
<Word
151+
word={word}
152+
key={`${word.position}-${word.code}-${word.lineNum}`}
153+
currentAyah={currentAyah}
154+
tooltip={tooltip}
155+
isPlaying={isPlaying}
156+
audioActions={audioActions}
157+
audioPosition={word.wordId ? wordAudioPosition += 1 : null}
158+
isSearched={isSearched}
159+
/>
160+
));
165161

166162
return (
167163
<h1 className={`${styles.font} text-right text-arabic`}>
@@ -187,7 +183,7 @@ export default class Ayah extends Component {
187183
onClick={() => this.handlePlay(ayah.ayahKey)}
188184
className="text-muted"
189185
>
190-
<i className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'}`} />
186+
<i className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'} vertical-align-middle`} />{' '}
191187
<LocaleFormattedMessage
192188
id={playing ? 'actions.pause' : 'actions.play'}
193189
defaultMessage={playing ? 'Pause' : 'Play'}
@@ -223,7 +219,8 @@ export default class Ayah extends Component {
223219
onClick={() => bookmarkActions.removeBookmark(ayah.ayahKey)}
224220
className="text-muted"
225221
>
226-
<strong><i className="ss-icon ss-bookmark" />
222+
<strong>
223+
<i className="ss-icon ss-bookmark vertical-align-middle" />{' '}
227224
<LocaleFormattedMessage
228225
id="ayah.bookmarked"
229226
defaultMessage="Bookmarked"
@@ -239,7 +236,7 @@ export default class Ayah extends Component {
239236
onClick={() => bookmarkActions.addBookmark(ayah.ayahKey)}
240237
className="text-muted"
241238
>
242-
<i className="ss-icon ss-bookmark" />
239+
<i className="ss-icon ss-bookmark vertical-align-middle" />{' '}
243240
<LocaleFormattedMessage
244241
id="ayah.bookmark"
245242
defaultMessage="Bookmark"

‎src/components/ContentDropdown/index.js‎

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { Component, PropTypes } from 'react';
22

3+
import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar';
34
import DropdownButton from 'react-bootstrap/lib/DropdownButton';
45
import MenuItem from 'react-bootstrap/lib/MenuItem';
56
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
6-
import { optionsType } from 'types';
77

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

@@ -450,26 +450,18 @@ export const slugs = [
450450
export default class ContentDropdown extends Component {
451451
static propTypes = {
452452
onOptionChange: PropTypes.func.isRequired,
453-
options: optionsType.isRequired,
453+
content: PropTypes.arrayOf(PropTypes.number).isRequired,
454454
className: PropTypes.string
455455
};
456456

457-
static defaultProps = {
458-
className: 'col-md-3'
459-
}
460-
461-
shouldComponentUpdate(nextProps) {
462-
return this.props.options !== nextProps.options;
463-
}
464-
465457
handleRemoveContent = () => {
466458
const { onOptionChange } = this.props;
467459

468460
onOptionChange({ content: [] });
469461
}
470462

471463
handleOptionSelected(id) {
472-
const { onOptionChange, options: { content } } = this.props;
464+
const { onOptionChange, content } = this.props;
473465

474466
if (content.find(option => option === id)) {
475467
onOptionChange({ content: content.filter(option => option !== id) });
@@ -479,7 +471,7 @@ export default class ContentDropdown extends Component {
479471
}
480472

481473
renderItems(items) {
482-
const { options: { content } } = this.props;
474+
const { content } = this.props;
483475

484476
return items.map((slug) => {
485477
const checked = content.find(option => option === slug.id);
@@ -515,29 +507,34 @@ export default class ContentDropdown extends Component {
515507
}
516508

517509
render() {
518-
const { className, options: { content } } = this.props;
510+
const { className, content } = this.props;
511+
const title = slugs.filter(slug => content.includes(slug.id)).map(slug => slug.name).join(', ');
519512

520513
return (
521-
<DropdownButton
522-
className={`dropdown ${className} ${style.dropdown}`}
523-
title={<LocaleFormattedMessage id="setting.translations.title" defaultMessage="Translations" />}
524-
>
525-
{
526-
content.length &&
527-
<MenuItem onClick={this.handleRemoveContent}>
528-
<LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
529-
</MenuItem>
530-
}
531-
<MenuItem header>
532-
<LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
533-
</MenuItem>
534-
{this.renderEnglishList()}
535-
<MenuItem divider />
536-
<MenuItem header>
537-
<LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
538-
</MenuItem>
539-
{this.renderLanguagesList()}
540-
</DropdownButton>
514+
<ButtonToolbar>
515+
<DropdownButton
516+
block
517+
id="content-dropdown"
518+
className={`dropdown ${className} ${style.dropdown}`}
519+
title={title}
520+
>
521+
{
522+
content.length &&
523+
<MenuItem onClick={this.handleRemoveContent}>
524+
<LocaleFormattedMessage id="setting.translations.removeAll" defaultMessage="Remove all" />
525+
</MenuItem>
526+
}
527+
<MenuItem header>
528+
<LocaleFormattedMessage id="setting.translations.english" defaultMessage="English" />
529+
</MenuItem>
530+
{this.renderEnglishList()}
531+
<MenuItem divider />
532+
<MenuItem header>
533+
<LocaleFormattedMessage id="setting.translations.other" defaultMessage="Other Languages" />
534+
</MenuItem>
535+
{this.renderLanguagesList()}
536+
</DropdownButton>
537+
</ButtonToolbar>
541538
);
542539
}
543540
}

‎src/components/ContentDropdown/spec.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ describe('<ContentDropdown />', () => {
1212
onOptionChange = sinon.stub();
1313
wrapper = mountWithIntl(
1414
<ContentDropdown
15-
options={{ content: [defaultOption] }}
15+
content={[defaultOption]}
1616
onOptionChange={onOptionChange}
1717
/>
1818
);

‎src/components/Copy/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default class Copy extends Component {
2828
className={!isCopied && 'text-muted'}
2929
data-metrics-event-name="Ayah:Copy"
3030
>
31-
<i className="ss-icon ss-attach" />
31+
<i className="ss-icon ss-attach vertical-align-middle" />{' '}
3232
<LocaleFormattedMessage
3333
id={isCopied ? 'actions.copied' : 'actions.copy'}
3434
defaultMessage={isCopied ? 'Copied!' : 'Copy'}

‎src/components/FontSizeDropdown/index.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ import Col from 'react-bootstrap/lib/Col';
66

77
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
88

9-
import { optionsType } from 'types';
10-
119
const style = require('./style.scss');
1210

1311
export default class FontSizeDropdown extends Component {
1412
static propTypes = {
1513
onOptionChange: PropTypes.func,
16-
options: optionsType
14+
fontSize: PropTypes.shape({
15+
arabic: PropTypes.number,
16+
translation: PropTypes.number
17+
}).isRequired
1718
}
1819

1920
handleOptionSelected = (type, direction) => {
20-
const { onOptionChange, options: { fontSize } } = this.props;
21+
const { onOptionChange, fontSize } = this.props;
2122
const changeFactor = {
2223
translation: 0.5,
2324
arabic: 0.5
@@ -94,15 +95,17 @@ export default class FontSizeDropdown extends Component {
9495

9596
render() {
9697
return (
97-
<OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose>
98-
<a
99-
tabIndex="-1"
100-
className="text-color"
101-
data-metrics-event-name="FontSizeDropdown"
102-
>
103-
<LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font size" />
104-
</a>
105-
</OverlayTrigger>
98+
<li className={style.link}>
99+
<OverlayTrigger trigger="click" placement="bottom" overlay={this.renderPopup()} rootClose>
100+
<a
101+
tabIndex="-1"
102+
data-metrics-event-name="FontSizeDropdown"
103+
>
104+
<i className="ss-icon ss-font vertical-align-middle" />
105+
{' '}<LocaleFormattedMessage id="setting.fontSize" defaultMessage="Font Size" className="visible-xs-inline-block" />
106+
</a>
107+
</OverlayTrigger>
108+
</li>
106109
);
107110
}
108111
}

‎src/components/FontSizeDropdown/style.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import '../../styles/variables.scss';
22

3-
:local .popover{
3+
.popover{
44
:global(.popover-title){
55
font-family: $font-montserrat;
66
text-transform: uppercase;
@@ -16,3 +16,9 @@
1616
}
1717
}
1818
}
19+
20+
.link{
21+
position: relative;
22+
display: block;
23+
cursor: pointer;
24+
}

‎src/components/Footer/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Grid from 'react-bootstrap/lib/Grid';
55
import Col from 'react-bootstrap/lib/Col';
66

77
import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
8-
import LocaleSwitcher from 'components/LocaleSwitcher';
98

109
const styles = require('./style.scss');
1110

@@ -144,7 +143,6 @@ const Footer = () => (
144143
</p>
145144

146145
<div className={styles.list}>
147-
<LocaleSwitcher />
148146
<p className="monserrat">
149147
<LocaleFormattedMessage
150148
id="nav.aboutQuranProject"

0 commit comments

Comments
 (0)