diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts index f9906ae..e1e7a99 100644 --- a/app/src/actions/Settings.ts +++ b/app/src/actions/Settings.ts @@ -54,6 +54,14 @@ export const setAutoExpandLimit = (autoExpandLimit: number = 0) => (dispatch: Di }) } +export const setTimeLocale = (timeLocale: string) => (dispatch: Dispatch) => { + dispatch({ + timeLocale, + type: ActionTypes.SETTINGS_SET_TIME_LOCALE, + }) + dispatch(storeSettings()) +} + export const selectTopicWithMouseOver = (doSelect: boolean) => (dispatch: Dispatch) => { dispatch({ selectTopicWithMouseOver: doSelect, diff --git a/app/src/components/SettingsDrawer/Settings.tsx b/app/src/components/SettingsDrawer/Settings.tsx index 5ba3f24..7c71bf6 100644 --- a/app/src/components/SettingsDrawer/Settings.tsx +++ b/app/src/components/SettingsDrawer/Settings.tsx @@ -21,6 +21,7 @@ import { Typography, Tooltip, } from '@material-ui/core' +import TimeLocale from './TimeLocale'; export const autoExpandLimitSet = [{ limit: 0, @@ -188,6 +189,7 @@ class Settings extends React.Component {
{this.renderAutoExpand()} {this.renderNodeOrder()} + {this.renderHighlightTopicUpdates()} {this.selectTopicsOnMouseOver()} {this.toggleTheme()} diff --git a/app/src/components/SettingsDrawer/TimeLocale.tsx b/app/src/components/SettingsDrawer/TimeLocale.tsx new file mode 100644 index 0000000..168a374 --- /dev/null +++ b/app/src/components/SettingsDrawer/TimeLocale.tsx @@ -0,0 +1,79 @@ +import * as React from 'react' +import DateFormatter from '../helper/DateFormatter' +import { AppState } from '../../reducers' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { + Input, + InputLabel, + MenuItem, + Select, + StyleRulesCallback + } from '@material-ui/core' +import { settingsActions } from '../../actions' +import { withStyles } from '@material-ui/styles' +const moment = require('moment/min/moment-with-locales') + +interface Props { + actions: { + settings: typeof settingsActions + }, + timeLocale: string + classes: any +} + +function TimeLocaleSettings(props: Props) { + const { classes, timeLocale, actions } = props + const locales = moment.locales() + const date = new Date() + const localeMenuItems = locales.map((l: string) => ( + +
Locale: {l}, Format:
+
+ )) + + return ( +
+ Time Locale + } + name="time-locale" + className={classes.input} + renderValue={(v) => {v}} + style={{ flex: '1' }} + > + {localeMenuItems} + +
+ ) +} + +const mapStateToProps = (state: AppState) => { + return { + timeLocale: state.settings.get('timeLocale'), + } +} + +const mapDispatchToProps = (dispatch: any) => { + return { + actions: { + settings: bindActionCreators(settingsActions, dispatch), + }, + } +} + +const styles: StyleRulesCallback = theme => ({ + input: { + minWidth: '150px', + margin: `auto ${theme.spacing(1)} auto ${theme.spacing(2)}px`, + }, + selected: { + '& div': { + display: 'none' + } + } +}) + +export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(TimeLocaleSettings)) diff --git a/app/src/components/helper/DateFormatter.tsx b/app/src/components/helper/DateFormatter.tsx index 12d91c8..a0c29f8 100644 --- a/app/src/components/helper/DateFormatter.tsx +++ b/app/src/components/helper/DateFormatter.tsx @@ -1,8 +1,12 @@ -import * as React from 'react' import * as moment from 'moment' +import * as React from 'react' +import { AppState } from '../../reducers' +import { connect } from 'react-redux' interface Props { date: Date + overrideLocale?: string + locale?: string intervalSince?: Date } @@ -13,7 +17,6 @@ const unitMapping = { } class DateFormatter extends React.Component { - private intervalSince(intervalSince: Date) { const interval = intervalSince.getTime() - this.props.date.getTime() const unit = this.unitForInterval(interval) @@ -28,22 +31,23 @@ class DateFormatter extends React.Component { return moment(this.props.date).locale(locale).format('L LTS') } - private unitForInterval(millis: number) { + private unitForInterval(milliseconds: number) { const oneMinute = 1000 * 60 const oneHour = oneMinute * 60 - if (millis > oneHour * 2) { + if (milliseconds > oneHour * 2) { return 'h' } - if (millis > oneMinute * 2) { + if (milliseconds > oneMinute * 2) { return 'm' } return 's' } + public render() { - const locale = window.navigator.language + const locale = this.props.overrideLocale || this.props.locale if (this.props.intervalSince) { return {this.intervalSince(this.props.intervalSince)} } @@ -51,4 +55,10 @@ class DateFormatter extends React.Component { } } -export default DateFormatter +const mapStateToProps = (state: AppState) => { + return { + locale: state.settings.get('timeLocale'), + } +} + +export default connect(mapStateToProps)(DateFormatter) diff --git a/app/src/reducers/Settings.ts b/app/src/reducers/Settings.ts index c19f1ac..c278d73 100644 --- a/app/src/reducers/Settings.ts +++ b/app/src/reducers/Settings.ts @@ -1,3 +1,4 @@ +import * as moment from 'moment' import { createReducer } from './lib' import { Record } from 'immutable' @@ -12,6 +13,7 @@ export type ValueRendererDisplayMode = 'diff' | 'raw' export interface SettingsState { autoExpandLimit: number + timeLocale: string topicOrder: TopicOrder topicFilter?: string highlightTopicUpdates: boolean @@ -28,6 +30,7 @@ export type Actions = SetAutoExpandLimitAction & SetValueRendererDisplayModeAction & SetTheme & SetSelectTopicWithMouseOverAction + & SetTimeLocale export enum ActionTypes { SETTINGS_SET_AUTO_EXPAND_LIMIT = 'SETTINGS_SET_AUTO_EXPAND_LIMIT', @@ -39,9 +42,11 @@ export enum ActionTypes { SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER = 'SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER', SETTINGS_SET_THEME_LIGHT = 'SETTINGS_SET_THEME_LIGHT', SETTINGS_SET_THEME_DARK = 'SETTINGS_SET_THEME_DARK', + SETTINGS_SET_TIME_LOCALE = 'SETTINGS_SET_TIME_LOCALE', } const initialState = Record({ + timeLocale: window.navigator.language, autoExpandLimit: 0, topicOrder: TopicOrder.none, highlightTopicUpdates: true, @@ -65,6 +70,7 @@ const reducerActions: {[s: string]: (state: Record, action: Actio SETTINGS_SET_SELECT_TOPIC_WITH_MOUSE_OVER: setSelectTopicWithMouseOver, SETTINGS_SET_THEME_LIGHT: setTheme('light'), SETTINGS_SET_THEME_DARK: setTheme('dark'), + SETTINGS_SET_TIME_LOCALE: setTimeLocale, } export const settingsReducer = createReducer(initialState(), reducerActions) @@ -92,6 +98,15 @@ export function setSelectTopicWithMouseOver(state: Record, action return state.set('selectTopicWithMouseOver', !state.get('selectTopicWithMouseOver')) } +export interface SetTimeLocale { + type: ActionTypes.SETTINGS_SET_TIME_LOCALE + timeLocale: string +} + +export function setTimeLocale(state: Record, action: SetTimeLocale): Record { + return state.set('timeLocale', action.timeLocale) +} + export interface SetValueRendererDisplayModeAction { type: ActionTypes.SETTINGS_SET_VALUE_RENDERER_DISPLAY_MODE valueRendererDisplayMode: ValueRendererDisplayMode