diff --git a/app/javascript/flavours/glitch/components/status_action_bar.jsx b/app/javascript/flavours/glitch/components/status_action_bar.jsx index df1f893b808225..a686bc250318a7 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.jsx +++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx @@ -8,6 +8,17 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import BookmarkIcon from '@/material-icons/400-24px/bookmark-fill.svg?react'; +import BookmarkBorderIcon from '@/material-icons/400-24px/bookmark.svg?react'; +import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; +import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react'; +import ReplyIcon from '@/material-icons/400-24px/reply.svg?react'; +import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react'; +import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; +import StarBorderIcon from '@/material-icons/400-24px/star.svg?react'; +import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react'; +import RepeatDisabledIcon from '@/svg-icons/repeat_disabled.svg'; +import RepeatPrivateIcon from '@/svg-icons/repeat_private.svg'; import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions'; import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -217,6 +228,7 @@ class StatusActionBar extends ImmutablePureComponent { let menu = []; let reblogIcon = 'retweet'; let replyIcon; + let replyIconComponent; let replyTitle; menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); @@ -286,27 +298,34 @@ class StatusActionBar extends ImmutablePureComponent { if (status.get('in_reply_to_id', null) === null) { replyIcon = 'reply'; + replyIconComponent = ReplyIcon; replyTitle = intl.formatMessage(messages.reply); } else { replyIcon = 'reply-all'; + replyIconComponent = ReplyAllIcon; replyTitle = intl.formatMessage(messages.replyAll); } const reblogPrivate = status.getIn(['account', 'id']) === me && status.get('visibility') === 'private'; - let reblogTitle = ''; + let reblogTitle, reblogIconComponent; + if (status.get('reblogged')) { reblogTitle = intl.formatMessage(messages.cancel_reblog_private); + reblogIconComponent = publicStatus ? RepeatIcon : RepeatPrivateIcon; } else if (publicStatus) { reblogTitle = intl.formatMessage(messages.reblog); + reblogIconComponent = RepeatIcon; } else if (reblogPrivate) { reblogTitle = intl.formatMessage(messages.reblog_private); + reblogIconComponent = RepeatPrivateIcon; } else { reblogTitle = intl.formatMessage(messages.cannot_reblog); + reblogIconComponent = RepeatDisabledIcon; } const filterButton = this.props.onFilter && ( - + ); const canReact = permissions && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions; @@ -326,32 +345,27 @@ class StatusActionBar extends ImmutablePureComponent { className='status__action-bar-button' title={replyTitle} icon={replyIcon} + iconComponent={replyIconComponent} onClick={this.handleReplyClick} counter={showReplyCount ? status.get('replies_count') : undefined} obfuscateCount /> - { - permissions - ? - : reactButton - } {filterButton} -
- -
+