From 7e3c10dec676b0a560493071c5950c7e5df759b2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 13 Nov 2023 15:39:45 +0100 Subject: [PATCH] Add icons for private and disabled boost in web UI (#27817) Co-authored-by: Claire --- .../mastodon/components/status_action_bar.jsx | 12 ++++++++++-- .../features/status/components/action_bar.jsx | 12 ++++++++++-- app/javascript/svg-icons/repeat_disabled.svg | 5 +++++ app/javascript/svg-icons/repeat_private.svg | 5 +++++ config/webpack/rules/material_icons.js | 2 +- 5 files changed, 31 insertions(+), 5 deletions(-) create mode 100755 app/javascript/svg-icons/repeat_disabled.svg create mode 100755 app/javascript/svg-icons/repeat_private.svg diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx index 240174739..25eab91fe 100644 --- a/app/javascript/mastodon/components/status_action_bar.jsx +++ b/app/javascript/mastodon/components/status_action_bar.jsx @@ -19,6 +19,8 @@ import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/s import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg'; import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg'; +import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg'; +import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg'; import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; @@ -348,6 +350,7 @@ class StatusActionBar extends ImmutablePureComponent { let replyIcon; let replyIconComponent; let replyTitle; + if (status.get('in_reply_to_id', null) === null) { replyIcon = 'reply'; replyIconComponent = ReplyIcon; @@ -360,15 +363,20 @@ class StatusActionBar extends ImmutablePureComponent { 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 && ( @@ -380,7 +388,7 @@ class StatusActionBar extends ImmutablePureComponent { return (
- + diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx index eac0bab7e..663bce743 100644 --- a/app/javascript/mastodon/features/status/components/action_bar.jsx +++ b/app/javascript/mastodon/features/status/components/action_bar.jsx @@ -18,6 +18,8 @@ import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlin import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg'; import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg'; +import { ReactComponent as RepeatDisabledIcon } from 'mastodon/../svg-icons/repeat_disabled.svg'; +import { ReactComponent as RepeatPrivateIcon } from 'mastodon/../svg-icons/repeat_private.svg'; import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'mastodon/permissions'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; @@ -280,6 +282,7 @@ class ActionBar extends PureComponent { let replyIcon; let replyIconComponent; + if (status.get('in_reply_to_id', null) === null) { replyIcon = 'reply'; replyIconComponent = ReplyIcon; @@ -290,21 +293,26 @@ class ActionBar extends PureComponent { 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; } return (
-
+
diff --git a/app/javascript/svg-icons/repeat_disabled.svg b/app/javascript/svg-icons/repeat_disabled.svg new file mode 100755 index 000000000..3157f660e --- /dev/null +++ b/app/javascript/svg-icons/repeat_disabled.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/app/javascript/svg-icons/repeat_private.svg b/app/javascript/svg-icons/repeat_private.svg new file mode 100755 index 000000000..a65be532a --- /dev/null +++ b/app/javascript/svg-icons/repeat_private.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/config/webpack/rules/material_icons.js b/config/webpack/rules/material_icons.js index 7ac1072b0..048e198ef 100644 --- a/config/webpack/rules/material_icons.js +++ b/config/webpack/rules/material_icons.js @@ -1,6 +1,6 @@ module.exports = { test: /\.svg$/, - include: /node_modules\/@material-symbols/, + include: [/node_modules\/@material-symbols/, /svg-icons/], issuer: /\.[jt]sx?$/, use: [ {