diff options
8 files changed, 249 insertions, 26 deletions
diff --git a/app/javascript/flavours/glitch/features/getting_started/index.js b/app/javascript/flavours/glitch/features/getting_started/index.js index 47142fdd1..89c77b507 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.js +++ b/app/javascript/flavours/glitch/features/getting_started/index.js @@ -9,6 +9,8 @@ import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { me } from 'flavours/glitch/util/initial_state'; +import { createSelector } from 'reselect'; +import { fetchLists } from 'flavours/glitch/actions/lists'; const messages = defineMessages({ heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' }, @@ -23,23 +25,33 @@ const messages = defineMessages({ settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' }, follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, sign_out: { id: 'navigation_bar.logout', defaultMessage: 'Logout' }, - favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, - blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, - mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, - info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' }, - show_me_around: { id: 'getting_started.onboarding', defaultMessage: 'Show me around' }, - pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, + lists_subheading: { id: 'column_subheading.lists', defaultMessage: 'Lists' }, + misc: { id: 'navigation_bar.misc', defaultMessage: 'Misc' }, }); -const mapStateToProps = state => ({ - myAccount: state.getIn(['accounts', me]), - columns: state.getIn(['settings', 'columns']), -}); +const makeMapStateToProps = () => { + const getOrderedLists = createSelector([state => state.get('lists')], lists => { + if (!lists) { + return lists; + } + + return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title'))); + }); + + const mapStateToProps = state => ({ + lists: getOrderedLists(state), + myAccount: state.getIn(['accounts', me]), + columns: state.getIn(['settings', 'columns']), + }); + + return mapStateToProps; +}; -@connect(mapStateToProps) @injectIntl +@connect(makeMapStateToProps) export default class GettingStarted extends ImmutablePureComponent { static propTypes = { @@ -48,6 +60,7 @@ export default class GettingStarted extends ImmutablePureComponent { columns: ImmutablePropTypes.list, multiColumn: PropTypes.bool, dispatch: PropTypes.func.isRequired, + lists: ImmutablePropTypes.list, }; openSettings = () => { @@ -59,10 +72,15 @@ export default class GettingStarted extends ImmutablePureComponent { this.props.dispatch(openModal('ONBOARDING')); } + componentWillMount () { + this.props.dispatch(fetchLists()); + } + render () { - const { intl, myAccount, columns, multiColumn } = this.props; + const { intl, myAccount, columns, multiColumn, lists } = this.props; let navItems = []; + let listItems = []; if (multiColumn) { if (!columns.find(item => item.get('id') === 'HOME')) { @@ -86,19 +104,19 @@ export default class GettingStarted extends ImmutablePureComponent { navItems.push(<ColumnLink key='4' icon='envelope' text={intl.formatMessage(messages.direct)} to='/timelines/direct' />); } - navItems = navItems.concat([ - <ColumnLink key='5' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' />, - <ColumnLink key='6' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' />, - <ColumnLink key='10' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' />, - ]); - if (myAccount.get('locked')) { - navItems.push(<ColumnLink key='7' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />); + navItems.push(<ColumnLink key='5' icon='users' text={intl.formatMessage(messages.follow_requests)} to='/follow_requests' />); } - navItems = navItems.concat([ - <ColumnLink key='8' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' />, - <ColumnLink key='9' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' />, + navItems.push(<ColumnLink key='6' icon='ellipsis-h' text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />); + + listItems = listItems.concat([ + <div> + <ColumnLink key='7' icon='bars' text={intl.formatMessage(messages.lists)} to='/lists' /> + {lists.map(list => + <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} /> + )} + </div>, ]); return ( @@ -107,9 +125,9 @@ export default class GettingStarted extends ImmutablePureComponent { <div className='getting-started__wrapper'> <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} /> {navItems} + <ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} /> + {listItems} <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} /> - <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' /> - <ColumnLink icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} /> <ColumnLink icon='cog' text={intl.formatMessage(messages.preferences)} href='/settings/preferences' /> <ColumnLink icon='cogs' text={intl.formatMessage(messages.settings)} onClick={this.openSettings} /> <ColumnLink icon='sign-out' text={intl.formatMessage(messages.sign_out)} href='/auth/sign_out' method='delete' /> diff --git a/app/javascript/flavours/glitch/features/getting_started_misc/index.js b/app/javascript/flavours/glitch/features/getting_started_misc/index.js new file mode 100644 index 000000000..9cf7ddff9 --- /dev/null +++ b/app/javascript/flavours/glitch/features/getting_started_misc/index.js @@ -0,0 +1,60 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Column from 'flavours/glitch/features/ui/components/column'; +import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; +import { defineMessages, injectIntl } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import ColumnLink from 'flavours/glitch/features/ui/components/column_link'; +import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading'; +import { openModal } from 'flavours/glitch/actions/modal'; +import { connect } from 'react-redux'; + +const messages = defineMessages({ + heading: { id: 'column.heading', defaultMessage: 'Misc' }, + subheading: { id: 'column.subheading', defaultMessage: 'Miscellaneous options' }, + favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, + blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, + mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, + info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' }, + show_me_around: { id: 'getting_started.onboarding', defaultMessage: 'Show me around' }, + pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, + info: { id: 'navigation_bar.info', defaultMessage: 'Extended information' }, + keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' }, +}); + +@connect() +@injectIntl +export default class gettingStartedMisc extends ImmutablePureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + }; + + openOnboardingModal = (e) => { + e.preventDefault(); + this.props.dispatch(openModal('ONBOARDING')); + } + + render () { + const { intl } = this.props; + + return ( + <Column icon='ellipsis-h' heading={intl.formatMessage(messages.heading)}> + <ColumnBackButtonSlim /> + + <div className='scrollable'> + <ColumnSubheading text={intl.formatMessage(messages.subheading)} /> + <ColumnLink key='19' icon='star' text={intl.formatMessage(messages.favourites)} to='/favourites' /> + <ColumnLink key='20' icon='thumb-tack' text={intl.formatMessage(messages.pins)} to='/pinned' /> + <ColumnLink key='21' icon='volume-off' text={intl.formatMessage(messages.mutes)} to='/mutes' /> + <ColumnLink key='22' icon='ban' text={intl.formatMessage(messages.blocks)} to='/blocks' /> + <ColumnLink key='23' icon='question' text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' /> + <ColumnLink icon='book' text={intl.formatMessage(messages.info)} href='/about/more' /> + <ColumnLink icon='hand-o-right' text={intl.formatMessage(messages.show_me_around)} onClick={this.openOnboardingModal} /> + </div> + </Column> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js new file mode 100644 index 000000000..8aed471f2 --- /dev/null +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.js @@ -0,0 +1,102 @@ +import React from 'react'; +import Column from 'flavours/glitch/features/ui/components/column'; +import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import PropTypes from 'prop-types'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +const messages = defineMessages({ + heading: { id: 'keyboard_shortcuts.heading', defaultMessage: 'Keyboard Shortcuts' }, +}); + +@injectIntl +export default class KeyboardShortcuts extends ImmutablePureComponent { + + static propTypes = { + intl: PropTypes.object.isRequired, + multiColumn: PropTypes.bool, + }; + + render () { + const { intl } = this.props; + + return ( + <Column icon='question' heading={intl.formatMessage(messages.heading)}> + <ColumnBackButtonSlim /> + <div className='keyboard-shortcuts scrollable optionally-scrollable'> + <table> + <thead> + <tr> + <th><FormattedMessage id='keyboard_shortcuts.hotkey' defaultMessage='Hotkey' /></th> + <th><FormattedMessage id='keyboard_shortcuts.description' defaultMessage='Description' /></th> + </tr> + </thead> + <tbody> + <tr> + <td><kbd>r</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.reply' defaultMessage='to reply' /></td> + </tr> + <tr> + <td><kbd>m</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.mention' defaultMessage='to mention author' /></td> + </tr> + <tr> + <td><kbd>f</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.favourite' defaultMessage='to favourite' /></td> + </tr> + <tr> + <td><kbd>b</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.boost' defaultMessage='to boost' /></td> + </tr> + <tr> + <td><kbd>enter</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.enter' defaultMessage='to open status' /></td> + </tr> + <tr> + <td><kbd>up</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.up' defaultMessage='to move up in the list' /></td> + </tr> + <tr> + <td><kbd>down</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.down' defaultMessage='to move down in the list' /></td> + </tr> + <tr> + <td><kbd>1</kbd>-<kbd>9</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.column' defaultMessage='to focus a status in one of the columns' /></td> + </tr> + <tr> + <td><kbd>n</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.compose' defaultMessage='to focus the compose textarea' /></td> + </tr> + <tr> + <td><kbd>alt</kbd>+<kbd>n</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.toot' defaultMessage='to start a brand new toot' /></td> + </tr> + <tr> + <td><kbd>backspace</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.back' defaultMessage='to navigate back' /></td> + </tr> + <tr> + <td><kbd>s</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.search' defaultMessage='to focus search' /></td> + </tr> + <tr> + <td><kbd>esc</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.unfocus' defaultMessage='to un-focus compose textarea/search' /></td> + </tr> + <tr> + <td><kbd>x</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.expand' defaultMessage='to expand a status with a content warning' /></td> + </tr> + <tr> + <td><kbd>?</kbd></td> + <td><FormattedMessage id='keyboard_shortcuts.legend' defaultMessage='to display this legend' /></td> + </tr> + </tbody> + </table> + </div> + </Column> + ); + } + +} diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.js b/app/javascript/flavours/glitch/features/list_timeline/index.js index bcc752d34..c6a89a920 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.js +++ b/app/javascript/flavours/glitch/features/list_timeline/index.js @@ -134,7 +134,7 @@ export default class ListTimeline extends React.PureComponent { return ( <Column ref={this.setRef}> <ColumnHeader - icon='bars' + icon='list-ul' active={hasUnread} title={title} onPin={this.handlePin} diff --git a/app/javascript/flavours/glitch/features/lists/index.js b/app/javascript/flavours/glitch/features/lists/index.js index c82b370bc..8b0470c92 100644 --- a/app/javascript/flavours/glitch/features/lists/index.js +++ b/app/javascript/flavours/glitch/features/lists/index.js @@ -66,7 +66,7 @@ export default class Lists extends ImmutablePureComponent { <ColumnSubheading text={intl.formatMessage(messages.subheading)} /> {lists.map(list => - <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='bars' text={list.get('title')} /> + <ColumnLink key={list.get('id')} to={`/timelines/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} /> )} </div> </Column> diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js index 698ae996c..5c80ea07b 100644 --- a/app/javascript/flavours/glitch/features/ui/index.js +++ b/app/javascript/flavours/glitch/features/ui/index.js @@ -20,6 +20,7 @@ import { Compose, Status, GettingStarted, + KeyboardShortcuts, PublicTimeline, CommunityTimeline, AccountTimeline, @@ -40,6 +41,7 @@ import { Mutes, PinnedStatuses, Lists, + GettingStartedMisc, } from 'flavours/glitch/util/async-components'; import { HotKeys } from 'react-hotkeys'; import { me } from 'flavours/glitch/util/initial_state'; @@ -62,6 +64,7 @@ const mapStateToProps = state => ({ }); const keyMap = { + help: '?', new: 'n', search: 's', forceNew: 'option+n', @@ -311,6 +314,14 @@ export default class UI extends React.Component { this.hotkeys = c; } + handleHotkeyToggleHelp = () => { + if (this.props.location.pathname === '/keyboard-shortcuts') { + this.context.router.history.goBack(); + } else { + this.context.router.history.push('/keyboard-shortcuts'); + } + } + handleHotkeyGoToHome = () => { this.context.router.history.push('/timelines/home'); } @@ -377,6 +388,7 @@ export default class UI extends React.Component { }); const handlers = { + help: this.handleHotkeyToggleHelp, new: this.handleHotkeyNew, search: this.handleHotkeySearch, forceNew: this.handleHotkeyForceNew, @@ -404,6 +416,7 @@ export default class UI extends React.Component { <WrappedSwitch> <Redirect from='/' to='/getting-started' exact /> <WrappedRoute path='/getting-started' component={GettingStarted} content={children} /> + <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} /> <WrappedRoute path='/timelines/home' component={HomeTimeline} content={children} /> <WrappedRoute path='/timelines/public' exact component={PublicTimeline} content={children} /> <WrappedRoute path='/timelines/public/local' component={CommunityTimeline} content={children} /> @@ -428,6 +441,7 @@ export default class UI extends React.Component { <WrappedRoute path='/blocks' component={Blocks} content={children} /> <WrappedRoute path='/mutes' component={Mutes} content={children} /> <WrappedRoute path='/lists' component={Lists} content={children} /> + <WrappedRoute path='/getting-started-misc' component={GettingStartedMisc} content={children} /> <WrappedRoute component={GenericNotFound} content={children} /> </WrappedSwitch> diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index bef282560..7dc95b474 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -2306,6 +2306,27 @@ } } +.keyboard-shortcuts { + padding: 8px 0 0; + overflow: hidden; + + thead { + position: absolute; + left: -9999px; + } + + td { + padding: 0 10px 8px; + } + + kbd { + display: inline-block; + padding: 3px 5px; + background-color: lighten($ui-base-color, 8%); + border: 1px solid darken($ui-base-color, 4%); + } +} + .setting-text { color: $ui-primary-color; background: transparent; diff --git a/app/javascript/flavours/glitch/util/async-components.js b/app/javascript/flavours/glitch/util/async-components.js index e4c991f01..5d21ccca2 100644 --- a/app/javascript/flavours/glitch/util/async-components.js +++ b/app/javascript/flavours/glitch/util/async-components.js @@ -50,6 +50,10 @@ export function GettingStarted () { return import(/* webpackChunkName: "flavours/glitch/async/getting_started" */'flavours/glitch/features/getting_started'); } +export function KeyboardShortcuts () { + return import(/* webpackChunkName: "features/keyboard_shortcuts" */'flavours/glitch/features/keyboard_shortcuts'); +} + export function PinnedStatuses () { return import(/* webpackChunkName: "flavours/glitch/async/pinned_statuses" */'flavours/glitch/features/pinned_statuses'); } @@ -125,3 +129,7 @@ export function Video () { export function EmbedModal () { return import(/* webpackChunkName: "flavours/glitch/async/embed_modal" */'flavours/glitch/features/ui/components/embed_modal'); } + +export function GettingStartedMisc () { + return import(/* webpackChunkName: "flavours/glitch/async/getting_started_misc" */'flavours/glitch/features/getting_started_misc'); +} |