wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-08-13 12:40:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add more sort options and improve styling

Browse Source
This commit is contained in:
Chi Vinh Le
2017-08-25 20:15:07 +07:00
parent 9e2f6f1f63
commit e51e8c543f
32 changed files with 314 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/talk-plugin-viewing-options/client/components/ViewingOptions.js
+8 -21
View File
@@ -4,16 +4,10 @@ import styles from './ViewingOptions.css';
import {t} from 'plugin-api/beta/client/services';
import {Icon} from 'plugin-api/beta/client/components/ui';
import {ClickOutside} from 'plugin-api/beta/client/components';
import {capitalize} from 'plugin-api/beta/client/utils';
import Category from './Category';
import Menu from './Menu';
class ViewingOptions extends React.Component {
categories = {
sort: t('talk-plugin-viewing-options.sort'),
filter: t('talk-plugin-viewing-options.filter'),
};
toggleOpen = () => {
const {open, openMenu, closeMenu} = this.props;
if (!open) {
@@ -37,22 +31,15 @@ class ViewingOptions extends React.Component {
<div className={cn([styles.root, 'talk-plugin-viewing-options'])}>
<div>
<button className={styles.button} onClick={this.toggleOpen}>
<Icon className={styles.filterIcon} name="filter_list" />
<span className={styles.filterText}>{t('talk-plugin-viewing-options.viewing_options')}</span>
{open ? <Icon name="arrow_drop_up" className={styles.icon}/> : <Icon name="arrow_drop_down" className={styles.icon}/>}
<Icon className={styles.icon} name="filter_list" />
<span className={styles.label}>{t('talk-plugin-viewing-options.viewing_options')}</span>
{open
? <Icon name="arrow_drop_up" className={styles.arrowIcon}/>
: <Icon name="arrow_drop_down" className={styles.arrowIcon}/>
}
</button>
</div>
{
open ? (
<div className={cn([styles.menu, 'talk-plugin-viewing-options-menu'])}>
{
Object.keys(this.categories).map((category) =>
<Category key={category} slot={`viewingOptions${capitalize(category)}`} title={this.categories[category]} />
)
}
</div>
) : null
}
{open && <Menu />}
</div>
</ClickOutside>
);