diff options
author | Dessalines <tyhou13@gmx.com> | 2020-03-06 14:18:40 -0500 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2020-03-06 14:18:40 -0500 |
commit | 0708a6d665ef81700ac61c32f1c3710db9493108 (patch) | |
tree | 172717b24b6b36d4f0068685b8892ea3a2c675b6 /ui/src/components/sort-select.tsx | |
parent | 970e0b5185de35bb7f27e7ee7a8f4efb949e5a1b (diff) |
Adding a sorting help. Fixes #532
Diffstat (limited to 'ui/src/components/sort-select.tsx')
-rw-r--r-- | ui/src/components/sort-select.tsx | 47 |
1 files changed, 30 insertions, 17 deletions
diff --git a/ui/src/components/sort-select.tsx b/ui/src/components/sort-select.tsx index 5515f746..a6ce2ea9 100644 --- a/ui/src/components/sort-select.tsx +++ b/ui/src/components/sort-select.tsx @@ -1,5 +1,6 @@ import { Component, linkEvent } from 'inferno'; import { SortType } from '../interfaces'; +import { sortingHelpUrl } from '../utils'; import { i18n } from '../i18next'; interface SortSelectProps { @@ -24,23 +25,35 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> { render() { return ( - <select - value={this.state.sort} - onChange={linkEvent(this, this.handleSortChange)} - class="custom-select custom-select-sm w-auto" - > - <option disabled>{i18n.t('sort_type')}</option> - {!this.props.hideHot && ( - <option value={SortType.Hot}>{i18n.t('hot')}</option> - )} - <option value={SortType.New}>{i18n.t('new')}</option> - <option disabled>─────</option> - <option value={SortType.TopDay}>{i18n.t('top_day')}</option> - <option value={SortType.TopWeek}>{i18n.t('week')}</option> - <option value={SortType.TopMonth}>{i18n.t('month')}</option> - <option value={SortType.TopYear}>{i18n.t('year')}</option> - <option value={SortType.TopAll}>{i18n.t('all')}</option> - </select> + <> + <select + value={this.state.sort} + onChange={linkEvent(this, this.handleSortChange)} + class="custom-select custom-select-sm w-auto mr-2" + > + <option disabled>{i18n.t('sort_type')}</option> + {!this.props.hideHot && ( + <option value={SortType.Hot}>{i18n.t('hot')}</option> + )} + <option value={SortType.New}>{i18n.t('new')}</option> + <option disabled>─────</option> + <option value={SortType.TopDay}>{i18n.t('top_day')}</option> + <option value={SortType.TopWeek}>{i18n.t('week')}</option> + <option value={SortType.TopMonth}>{i18n.t('month')}</option> + <option value={SortType.TopYear}>{i18n.t('year')}</option> + <option value={SortType.TopAll}>{i18n.t('all')}</option> + </select> + <a + className="text-muted" + href={sortingHelpUrl} + target="_blank" + title={i18n.t('sorting_help')} + > + <svg class={`icon icon-inline`}> + <use xlinkHref="#icon-help-circle"></use> + </svg> + </a> + </> ); } |