diff options
Diffstat (limited to 'app/javascript')
7 files changed, 26 insertions, 12 deletions
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js index 6ae4bc08d..5bc5d8406 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.js +++ b/app/javascript/flavours/glitch/components/status_action_bar.js @@ -188,7 +188,7 @@ export default class StatusActionBar extends ImmutablePureComponent { <IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} pressed={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(reblogMessage)} icon={reblogIcon} onClick={this.handleReblogClick} /> <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> {shareButton} - <IconButton className='status__action-bar-button' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /> + <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} pressed={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /> <div className='status__action-bar-dropdown'> <DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel={intl.formatMessage(messages.more)} /> diff --git a/app/javascript/flavours/glitch/components/status_icons.js b/app/javascript/flavours/glitch/components/status_icons.js index e354c45e4..c9747650f 100644 --- a/app/javascript/flavours/glitch/components/status_icons.js +++ b/app/javascript/flavours/glitch/components/status_icons.js @@ -47,9 +47,15 @@ export default class StatusIcons extends React.PureComponent { return ( <div className='status__info__icons'> + {status.get('in_reply_to_id', null) !== null ? ( + <i + className={`fa fa-fw fa-comment status__reply-icon`} + aria-hidden='true' + /> + ) : null} {mediaIcon ? ( <i - className={`fa fa-fw fa-${mediaIcon}`} + className={`fa fa-fw fa-${mediaIcon} status__media-icon`} aria-hidden='true' /> ) : null} diff --git a/app/javascript/flavours/glitch/features/direct_timeline/index.js b/app/javascript/flavours/glitch/features/direct_timeline/index.js index 81096c0ec..418db7c79 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/index.js +++ b/app/javascript/flavours/glitch/features/direct_timeline/index.js @@ -4,10 +4,7 @@ import PropTypes from 'prop-types'; import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container'; import Column from 'flavours/glitch/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; -import { - refreshDirectTimeline, - expandDirectTimeline, -} from 'flavours/glitch/actions/timelines'; +import { expandDirectTimeline } from 'flavours/glitch/actions/timelines'; import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ColumnSettingsContainer from './containers/column_settings_container'; @@ -55,7 +52,7 @@ export default class DirectTimeline extends React.PureComponent { componentDidMount () { const { dispatch } = this.props; - dispatch(refreshDirectTimeline()); + dispatch(expandDirectTimeline()); this.disconnect = dispatch(connectDirectStream()); } @@ -70,8 +67,8 @@ export default class DirectTimeline extends React.PureComponent { this.column = c; } - handleLoadMore = () => { - this.props.dispatch(expandDirectTimeline()); + handleLoadMore = maxId => { + this.props.dispatch(expandDirectTimeline({ maxId })); } render () { @@ -97,7 +94,7 @@ export default class DirectTimeline extends React.PureComponent { trackScroll={!pinned} scrollKey={`direct_timeline-${columnId}`} timelineId='direct' - loadMore={this.handleLoadMore} + onLoadMore={this.handleLoadMore} emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />} /> </Column> diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js index ef8805377..976d7ba76 100644 --- a/app/javascript/flavours/glitch/features/status/components/action_bar.js +++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js @@ -159,7 +159,7 @@ export default class ActionBar extends React.PureComponent { <div className='detailed-status__button'><IconButton disabled={reblog_disabled} active={status.get('reblogged')} title={reblog_disabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(reblog_message)} icon={reblogIcon} onClick={this.handleReblogClick} /></div> <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div> {shareButton} - <div className='detailed-status__button'><IconButton active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div> + <div className='detailed-status__button'><IconButton className='bookmark-icon' active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div> <div className='detailed-status__action-bar-dropdown'> <DropdownMenuContainer size={18} icon='ellipsis-h' items={menu} direction='left' ariaLabel='More' /> diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 0fa940766..487bb7ffb 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -248,6 +248,10 @@ color: $gold-star; } +.bookmark-icon.active { + color: $red-bookmark; +} + .notification__display-name { color: inherit; font-weight: 500; diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 733845c5f..2b31e2dcb 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -331,8 +331,13 @@ height: 1em; color: $action-button-color; - .status__visibility-icon { + .status__media-icon { padding-left: 6px; + padding-right: 1px; + } + + .status__visibility-icon { + padding-left: 4px; } } diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss index cc08fd06f..bde808fe2 100644 --- a/app/javascript/flavours/glitch/styles/variables.scss +++ b/app/javascript/flavours/glitch/styles/variables.scss @@ -6,6 +6,8 @@ $error-red: #df405a; // Cerise $warning-red: #ff5050; // Sunset Orange $gold-star: #ca8f04; // Dark Goldenrod +$red-bookmark: $warning-red; + // Values from the classic Mastodon UI $classic-base-color: #282c37; // Midnight Express $classic-primary-color: #9baec8; // Echo Blue |